wip

src/client/app/desktop/views/pages/welcome.vue

@@ -134,12 +134,12 @@
 		</article>
 	</modal>
 
-	<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
+	<modal name="signup" class="modal" width="450px" height="auto" scrollable>
 		<header class="formHeader">%i18n:@signup%</header>
 		<mk-signup class="form"/>
 	</modal>
 
-	<modal name="signin" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
+	<modal name="signin" class="modal" width="450px" height="auto" scrollable>
 		<header class="formHeader">%i18n:@signin%</header>
 		<mk-signin class="form"/>
 	</modal>
@@ -226,23 +226,7 @@ export default Vue.extend({
 .v--modal-overlay
 	background rgba(0, 0, 0, 0.6)
 
-.modal-light
+.modal
-	.v--modal-box
-		color #777
-
-		.formHeader
-			border-bottom solid 1px #eee
-
-.modal-dark
-	.v--modal-box
-		background #313543
-		color #fff
-
-		.formHeader
-			border-bottom solid 1px rgba(#000, 0.2)
-
-.modal-light
-.modal-dark
 	.form
 		padding 24px 48px 48px 48px
 
@@ -252,6 +236,13 @@ export default Vue.extend({
 		margin 0 48px
 		font-size 1.5em
 
+	.v--modal-box
+		background var(--face)
+		color var(--text)
+
+		.formHeader
+			border-bottom solid 1px rgba(#000, 0.2)
+
 .v--modal-overlay.about
 	.v--modal-box.v--modal
 		margin 32px 0
@@ -303,15 +294,9 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-
+.mk-welcome
-
-root(isDark)
 	display flex
 	min-height 100vh
-	//background-color #00070F
-	//background-image url('/assets/bg.jpg')
-	//background-position center
-	//background-size cover
 
 	> .banner
 		position absolute
@@ -331,7 +316,7 @@ root(isDark)
 			left 0
 			width 100%
 			height 100px
-			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+			background linear-gradient(transparent, var(--bg))
 
 	> .forkit
 		position absolute
@@ -345,7 +330,7 @@ root(isDark)
 		left 16px
 		padding 16px
 		font-size 18px
-		color isDark ? #fff : #444
+		color var(--text)
 
 	> main
 		margin 0 auto
@@ -354,7 +339,7 @@ root(isDark)
 		max-width 1200px
 
 		.block
-			color isDark ? #fff : #444
+			color var(--text)
 			background var(--face)
 			box-shadow var(--shadow)
 			//border-radius 8px
@@ -365,9 +350,7 @@ root(isDark)
 				padding 0 16px
 				line-height 48px
 				background var(--faceHeader)
-
+				box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
-				if !isDark
-					box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
 
 				& + div
 					max-height calc(100% - 48px)
@@ -406,7 +389,7 @@ root(isDark)
 						> .stats
 							margin-left 16px
 							padding-left 16px
-							border-left solid 1px isDark ? #fff : #444
+							border-left solid 1px var(--faceDivider)
 
 							> *
 								margin-right 16px
@@ -449,7 +432,7 @@ root(isDark)
 					> div
 						padding 0 0 16px 0
 						margin 0 0 16px 0
-						border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+						border-bottom 1px solid var(--faceDivider)
 
 						> h1
 							margin 0
@@ -518,10 +501,4 @@ root(isDark)
 								display block
 								margin 0
 
-.mk-welcome[data-darkmode]
-	root(true)
-
-.mk-welcome:not([data-darkmode])
-	root(false)
-
 </style>