wip

src/client/app/desktop/views/pages/deck/deck.note.vue

@@ -343,7 +343,7 @@ root(isDark)
 
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--noteText)
 
 						> .rp
 							margin-left 4px

src/client/app/mobile/views/components/note-card.vue

@@ -27,17 +27,18 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-card
 	display inline-block
 	width 150px
 	//height 120px
 	font-size 12px
 	background var(--face)
 	border-radius 4px
+	box-shadow 0 2px 8px rgba(0, 0, 0, 0.2)
 
 	> a
 		display block
-		color isDark ? #fff : #2c3940
+		color var(--noteText)
 
 		&:hover
 			text-decoration none
@@ -75,17 +76,11 @@ root(isDark)
 				left 0
 				width 100%
 				height 20px
-				background isDark ? linear-gradient(to bottom, rgba(#282c37, 0) 0%, #282c37 100%) : linear-gradient(to bottom, rgba(#fff, 0) 0%, #fff 100%)
+				background linear-gradient(to bottom, transparent 0%, var(--face) 100%)
 
 		> .mk-time
 			display inline-block
 			padding 8px
 			color #aaa
 
-.mk-note-card[data-darkmode]
-	root(true)
-
-.mk-note-card:not([data-darkmode])
-	root(false)
-
 </style>

src/client/app/mobile/views/components/note.vue

@@ -228,9 +228,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.note
 	font-size 12px
 	border-bottom solid 1px var(--faceDivider)
 
@@ -383,7 +381,7 @@ root(isDark)
 
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--noteText)
 
 						> .rp
 							margin-left 4px
@@ -449,7 +447,7 @@ root(isDark)
 						margin-right 28px
 
 					&:hover
-						color isDark ? #9198af : #666
+						color var(--noteActionsHover)
 
 					> .count
 						display inline
@@ -459,12 +457,6 @@ root(isDark)
 					&.reacted
 						color var(--primary)
 
-.note[data-darkmode]
-	root(true)
-
-.note:not([data-darkmode])
-	root(false)
-
 </style>
 
 <style lang="stylus" module>