wip

5 files changed, 92 insertions, 69 deletions

diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index 34e9705dd4..57bdf7417b 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="root">
+<div class="xqnhankfuuilcwvhgsopeqncafzsquya">
 	<header><b>{{ blackUser | userName }}</b>(%i18n:common.reversi.black%) vs <b>{{ whiteUser | userName }}</b>(%i18n:common.reversi.white%)</header>
 
 	<div style="overflow: hidden">
@@ -258,12 +258,12 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.root
+root(isDark)
 	text-align center
 
 	> header
 		padding 8px
-		border-bottom dashed 1px #c4cdd4
+		border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
 
 	> .board
 		width calc(100% - 16px)
@@ -327,16 +327,16 @@ export default Vue.extend({
 						user-select none
 
 					&.empty
-						border solid 2px #eee
+						border solid 2px isDark ? #51595f : #eee
 
 					&.empty.can
-						background #eee
+						background isDark ? #51595f : #eee
 
 					&.empty.myTurn
-						border-color #ddd
+						border-color isDark ? #6a767f : #ddd
 
 						&.can
-							background #eee
+							background isDark ? #51595f : #eee
 							cursor pointer
 
 							&:hover
@@ -350,7 +350,7 @@ export default Vue.extend({
 						box-shadow 0 0 0 4px rgba($theme-color, 0.7)
 
 					&.isEnded
-						border-color #ddd
+						border-color isDark ? #6a767f : #ddd
 
 					&.none
 						border-color transparent !important
@@ -388,4 +388,11 @@ export default Vue.extend({
 			display inline-block
 			margin 0 8px
 			min-width 70px
+
+.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
+	root(true)
+
+.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index cd1b12ab2a..de5040f630 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -17,12 +17,13 @@
 			</header>
 
 			<div>
-				<div :class="$style.board" v-if="game.settings.map != null" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
+				<div class="random" v-if="game.settings.map == null">%fa:dice%</div>
+				<div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
 					<div v-for="(x, i) in game.settings.map.join('')"
 							:data-none="x == ' '"
 							@click="onPixelClick(i, x)">
-						<template v-if="x == 'b'">%fa:circle%</template>
-						<template v-if="x == 'w'">%fa:circle R%</template>
+						<template v-if="x == 'b'"><template v-if="$store.state.device.darkmode">%fa:circle R%</template><template v-else>%fa:circle%</template></template>
+						<template v-if="x == 'w'"><template v-if="$store.state.device.darkmode">%fa:circle%</template><template v-else>%fa:circle R%</template></template>
 					</div>
 				</div>
 			</div>
@@ -35,8 +36,8 @@
 
 			<div>
 				<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">%i18n:@random%</form-radio>
-				<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user1 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
-				<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user2 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
+				<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user1 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
+				<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user2 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
 			</div>
 		</div>
 
@@ -250,7 +251,7 @@ export default Vue.extend({
 
 root(isDark)
 	text-align center
-	background #f9f9f9
+	background isDark ? #191b22 : #f9f9f9
 
 	> header
 		padding 8px
@@ -266,40 +267,72 @@ root(isDark)
 				> header
 					> select
 						width 100%
-						padding 12px 16px
-						border 1px solid #dcdfe6
+						padding 12px 14px
+						background isDark ? #282C37 : #fff
+						border 1px solid isDark ? #6a707d : #dcdfe6
 						border-radius 4px
-						color #606266
+						color isDark ? #fff : #606266
+						cursor pointer
 						transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
 
 						&:hover
-							border-color #c0c4cc
+							border-color isDark ? #a7aebd : #c0c4cc
 
 						&:focus
 						&:active
 							border-color $theme-color
 
+				> div
+					> .random
+						padding 32px 0
+						font-size 64px
+						color isDark ? #4e5961 : #d8d8d8
+
+					> .board
+						display grid
+						grid-gap 4px
+						width 300px
+						height 300px
+						margin 0 auto
+						color isDark ? #fff : #444
+
+						> div
+							background transparent
+							border solid 2px isDark ? #6a767f : #ddd
+							border-radius 6px
+							overflow hidden
+							cursor pointer
+
+							*
+								pointer-events none
+								user-select none
+								width 100%
+								height 100%
+
+							&[data-none]
+								border-color transparent
+
 		.card
 			max-width 400px
 			border-radius 4px
-			border 1px solid #ebeef5
 			background isDark ? #282C37 : #fff
-			color #303133
+			color isDark ? #fff : #303133
 			box-shadow 0 2px 12px 0 rgba(#000, 0.1)
 
 			> header
 				padding 18px 20px
-				border-bottom 1px solid #ebeef5
+				border-bottom 1px solid isDark ? #1c2023 : #ebeef5
 
 			> div
 				padding 20px
+				color isDark ? #fff : #606266
 
 	> footer
 		position sticky
 		bottom 0
 		padding 16px
-		background rgba(255, 255, 255, 0.9)
-		border-top solid 1px #c4cdd4
+		background rgba(isDark ? #191b22 : #fff, 0.9)
+		border-top solid 1px isDark ? #606266 : #c4cdd4
 
 		> .status
 			margin 0 0 16px 0
@@ -311,29 +344,3 @@ root(isDark)
 	root(false)
 
 </style>
-
-<style lang="stylus" module>
-.board
-	display grid
-	grid-gap 4px
-	width 300px
-	height 300px
-	margin 0 auto
-
-	> div
-		background transparent
-		border solid 2px #ddd
-		border-radius 6px
-		overflow hidden
-		cursor pointer
-
-		*
-			pointer-events none
-			user-select none
-			width 100%
-			height 100%
-
-		&[data-none]
-			border-color transparent
-
-</style>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index dd3423a938..b6b13bdd97 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-reversi">
+<div class="vchtoekanapleubgzioubdtmlkribzfd">
 	<div v-if="game">
 		<x-gameroom :game="game"/>
 	</div>
@@ -200,9 +200,9 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-reversi
-	color #677f84
-	background #fff
+root(isDark)
+	color isDark ? #fff : #677f84
+	background isDark ? #191b22 : #fff
 
 	> .matching
 		> h1
@@ -227,7 +227,7 @@ export default Vue.extend({
 			text-align center
 			font-weight normal
 			color #fff
-			background linear-gradient(to bottom, #8bca3e, #d6cf31)
+			background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
 
 			& + p
 				margin 0
@@ -235,7 +235,7 @@ export default Vue.extend({
 				margin-bottom 12px
 				text-align center
 				font-size 14px
-				border-bottom solid 1px #d3d9dc
+				border-bottom solid 1px isDark ? #535f65 : #d3d9dc
 
 		> .play
 			margin 0 auto
@@ -250,14 +250,14 @@ export default Vue.extend({
 					padding 16px
 					font-size 14px
 					text-align left
-					background #f5f5f5
+					background isDark ? #282c37 : #f5f5f5
 					border-radius 8px
 
 		> section
 			margin 0 auto
 			padding 0 16px 16px 16px
 			max-width 500px
-			border-top solid 1px #d3d9dc
+			border-top solid 1px isDark ? #535f65 : #d3d9dc
 
 			> h2
 				margin 0
@@ -298,8 +298,9 @@ export default Vue.extend({
 		display block
 		margin 8px 0
 		padding 8px
-		color #677f84
-		border solid 1px #e1e5e8
+		color isDark ? #fff : #677f84
+		background isDark ? #282c37 : #fff
+		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
 		border-radius 6px
 		cursor pointer
 
@@ -307,14 +308,11 @@ export default Vue.extend({
 			pointer-events none
 			user-select none
 
-		&:focus
-			border-color $theme-color
-
 		&:hover
-			background #f5f5f5
+			background isDark ? #313543 : #f5f5f5
 
 		&:active
-			background #eee
+			background isDark ? #1e222b : #eee
 
 		> .avatar
 			width 32px
@@ -324,4 +322,11 @@ export default Vue.extend({
 		> span
 			margin 0 8px
 			line-height 32px
+
+.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
+	root(true)
+
+.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue
index 3d81a83496..6e1475bc38 100644
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -38,18 +38,18 @@ root(isDark)
 		margin 0
 		padding 12px 20px
 		font-size 14px
-		border 1px solid #dcdfe6
+		border 1px solid isDark ? #6d727d : #dcdfe6
 		border-radius 4px
 		outline none
 		box-shadow none
-		color #606266
+		color isDark ? #fff : #606266
 		transition 0.1s
 
 		&:hover
 		&:focus
 			color $theme-color
-			background rgba($theme-color, 0.12)
-			border-color rgba($theme-color, 0.3)
+			background rgba($theme-color, isDark ? 0.2 : 0.12)
+			border-color rgba($theme-color, isDark ? 0.5 : 0.3)
 
 		&:active
 			color darken($theme-color, 20%)
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
index 1b337c3bea..831981bb3e 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -60,6 +60,10 @@ root(isDark)
 	> *
 		user-select none
 
+	&:hover
+		> .button
+			border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+
 	&.disabled
 		opacity 0.6
 		cursor not-allowed
@@ -89,7 +93,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4)
 		border-radius 100%
 		transition inherit