wip

src/client/app/common/views/components/messaging.vue

@@ -204,12 +204,10 @@ root(isDark)
 		left 0
 		z-index 1
 		width 100%
-		background #fff
 		box-shadow 0 0px 2px rgba(#000, 0.2)
 
 		> .form
-			padding 8px
-			background isDark ? #282c37 : #f7f7f7
+			background rgba(0, 0, 0, 0.02)
 
 			> label
 				display block
@@ -229,32 +227,22 @@ root(isDark)
 					bottom 0
 					left 0
 					width 1em
-					line-height 56px
+					line-height 48px
 					margin auto
 					color #555
 
 			> input
 				margin 0
-				padding 0 0 0 32px
+				padding 0 0 0 42px
 				width 100%
 				font-size 1em
-				line-height 38px
-				color #000
+				line-height 48px
+				color var(--faceText)
 				outline none
-				background isDark ? #191b22 : #fff
-				border solid 1px isDark ? #495156 : #eee
+				background transparent
+				border none
 				border-radius 5px
 				box-shadow none
-				transition color 0.5s ease, border 0.5s ease
-
-				&:hover
-					border solid 1px isDark ? #b0b0b0 : #ddd
-					transition border 0.2s ease
-
-				&:focus
-					color var(--primaryDarken20)
-					border solid 1px var(--primary)
-					transition color 0, border 0
 
 		> .result
 			display block

src/client/app/common/views/components/ui/card.vue

@@ -20,11 +20,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ui-card
 	margin 16px
-	color isDark ? #fff : #000
+	color var(--faceText)
 	background var(--face)
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
@@ -32,14 +30,14 @@ root(isDark)
 		padding 16px
 		font-weight bold
 		font-size 20px
-		color isDark ? #fff : #444
+		color var(--faceText)
 
 		@media (min-width 500px)
 			padding 24px 32px
 
 	> section
 		padding 20px 16px
-		border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+		border-top solid 1px var(--faceDivider)
 
 		@media (min-width 500px)
 			padding 32px
@@ -50,12 +48,5 @@ root(isDark)
 		> header
 			margin-bottom 16px
 			font-weight bold
-			color isDark ? #fff : #444
-
-.ui-card[data-darkmode]
-	root(true)
-
-.ui-card:not([data-darkmode])
-	root(false)
-
+			color var(--faceText)
 </style>

src/client/theme/dark.json

@@ -11,6 +11,7 @@
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
+	"faceText": "#fff",
 	"faceHeader": "#313543",
 	"faceHeaderText": "#e3e5e8",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",

src/client/theme/light.json

@@ -11,6 +11,7 @@
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
+	"faceText": "#444",
 	"faceHeader": "#fff",
 	"faceHeaderText": "#888",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",