wip

2018-09-26 20:28:13 +09:00 · 2018-09-26 20:28:13 +09:00 · f5f2215b47
parent 904114740b
commit f5f2215b47
44 changed files with 58 additions and 54 deletions
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@ -267,7 +267,7 @@ root(isDark)
 	max-width 100%
 	margin-top calc(1em + 8px)
 	overflow hidden
-	background isDark ? #313543 : #fff
+	background var(--faceHeader)
 	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
 	transition top 0.1s ease, left 0.1s ease
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@ -190,7 +190,7 @@ root(isDark)
 		margin 8px 0
 		padding 8px
 		color isDark ? #fff : #677f84
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
 		border-radius 6px
 		cursor pointer
@ -222,7 +222,7 @@ root(isDark)
 		margin 8px 0
 		padding 8px
 		color isDark ? #fff : #677f84
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
 		border-radius 6px
 		cursor pointer
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@ -273,7 +273,7 @@ root(isDark)
 					> select
 						width 100%
 						padding 12px 14px
-						background isDark ? #282C37 : #fff
+						background var(--face)
 						border 1px solid isDark ? #6a707d : #dcdfe6
 						border-radius 4px
 						color isDark ? #fff : #606266
@ -331,7 +331,7 @@ root(isDark)
 		.card
 			max-width 400px
 			border-radius 4px
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			color isDark ? #fff : #303133
 			box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)

--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@ -369,7 +369,7 @@ root(isDark)
 		max-width 600px
 		margin 0 auto
 		padding 0
-		background rgba(isDark ? #282c37 : #fff, 0.95)
+		//background rgba(var(--face), 0.95)
 		background-clip content-box

 		> .new-message
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@ -329,7 +329,7 @@ root(isDark)
 		> a
 			display block
 			text-decoration none
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-bottom solid 1px isDark ? #1c2023 : #eee

 			*
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@ -25,7 +25,7 @@ export default Vue.extend({
 root(isDark)
 	margin 16px
 	color isDark ? #fff : #000
-	background isDark ? #282C37 : #fff
+	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)

 	> header
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@ -91,7 +91,7 @@ export default Vue.extend({
 	transform translateY(-30px)

 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)

 	> div
 		> *
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@ -116,7 +116,7 @@ root(isDark)
 	text-align center
 	color isDark ? #9baec8 : #868c8c

-	$bg = isDark ? #282C37 : #fff
+	$bg = var(--face)

 	@media (max-width 400px)
 		padding 16px
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@ -31,7 +31,7 @@ export default define({

 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border solid 1px isDark ? #c3831c : #ead8bb
 	border-radius 6px

--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@ -70,7 +70,7 @@ root(isDark)
 			min-width 100%
 			padding 16px
 			color isDark ? #fff : #222
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border none
 			border-bottom solid 1px isDark ? #1c2023 : #eee
 			border-radius 0
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/src/client/app/common/views/widgets/nav.vue
@ -21,7 +21,7 @@ root(isDark)
 		padding 16px
 		font-size 12px
 		color isDark ? #9aa4b3 : #aaa
-		background isDark ? #282c37 : #fff
+		background var(--face)

 		a
 			color isDark ? #9aa4b3 : #999
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@ -132,7 +132,7 @@ export default Vue.extend({

 root(isDark)
 	color isDark ? #c5ced6 : #777
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@ -82,7 +82,7 @@ root(isDark)
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border-radius 0 4px 4px 4px
 	box-shadow 2px 2px 8px rgba(#000, 0.2)
 	opacity 0
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@ -596,7 +596,7 @@ root(isDark)
 		overflow auto
 		font-size 0.9em
 		color isDark ? #d2d9dc : #555
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 1px 0 rgba(#000, 0.05)

 		&, *
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@ -230,7 +230,7 @@ export default Vue.extend({
 root(isDark)
 	overflow hidden
 	text-align left
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)

--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@ -322,7 +322,7 @@ export default Vue.extend({
 root(isDark)
 	margin 0
 	padding 0
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-bottom solid 1px isDark ? #1c2023 : #eaeaea

 	&[data-round]
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@ -260,7 +260,7 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-top solid 1px isDark ? #1c2023 : #eaeaea
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@ -178,7 +178,7 @@ export default Vue.extend({


 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
@ -186,7 +186,7 @@ root(isDark)
 	> header
 		padding 0 8px
 		z-index 10
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)

 		> .buttons
--- a/src/client/app/desktop/views/components/ui-notification.vue
+++ b/src/client/app/desktop/views/components/ui-notification.vue
@ -47,7 +47,7 @@ root(isDark)
 	padding 128px 0 0 0
 	width 500px
 	color rgba(isDark ? #fff : #000, 0.6)
-	background rgba(isDark ? #282C37 : #fff, 0.9)
+	//background rgba(var(--face), 0.9)
 	border-radius 0 0 8px 8px
 	box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
 	transform translateY(-64px)
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@ -177,7 +177,7 @@ root(isDark)
 			transition filter 100ms ease

 	> .menu
-		$bgcolor = isDark ? #282c37 : #fff
+		$bgcolor = var(--face)
 		display block
 		position absolute
 		top 56px
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@ -96,7 +96,7 @@ root(isDark)
 			color var(--primary)

 	> .pop
-		$bgcolor = isDark ? #282c37 : #fff
+		$bgcolor = var(--face)
 		display block
 		position absolute
 		top 56px
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@ -90,7 +90,7 @@ root(isDark)
 	z-index 2048
 	margin-top -8px
 	width 250px
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	background-clip content-box
 	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
@ -111,7 +111,7 @@ root(isDark)
 		z-index 2
 		width 58px
 		height 58px
-		border solid 3px isDark ? #282c37 : #fff
+		border solid 3px var(--face)
 		border-radius 8px

 	> .title
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@ -35,7 +35,7 @@ export default Vue.extend({

 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
@ -45,7 +45,7 @@ root(isDark)
 		box-shadow none !important

 	> header
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)

 		> .title
 			z-index 1
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@ -562,7 +562,7 @@ root(isDark)
 		> .body
 			height 100%
 			overflow hidden
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-radius 6px

 			if isDark
@ -578,7 +578,7 @@ root(isDark)
 				overflow hidden
 				white-space nowrap
 				cursor move
-				background isDark ? #313543 : #fff
+				background var(--faceHeader)
 				border-radius 6px 6px 0 0
 				box-shadow 0 1px 0 rgba(#000, 0.1)

--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@ -277,7 +277,7 @@ root(isDark)
 	width 330px
 	min-width 330px
 	height 100%
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 6px
 	//box-shadow 0 2px 16px rgba(#000, 0.1)
 	overflow hidden
@ -318,7 +318,7 @@ root(isDark)
 		padding 0 16px
 		font-size 14px
 		color isDark ? #e3e5e8 : #888
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.15)
 		cursor pointer

--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@ -232,7 +232,7 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-top solid 1px isDark ? #1c2023 : #eaeaea
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@ -37,7 +37,7 @@ export default Vue.extend({

 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)

--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@ -41,7 +41,7 @@ export default Vue.extend({

 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@ -103,7 +103,7 @@ export default Vue.extend({


 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@ -40,7 +40,7 @@ export default Vue.extend({

 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@ -86,7 +86,7 @@ export default Vue.extend({

 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)

--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@ -115,14 +115,14 @@ export default Vue.extend({


 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius var(--round)
 	overflow hidden

 	> header
 		padding 0 8px
 		z-index 10
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)

 		> span
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@ -355,7 +355,7 @@ root(isDark)

 		.block
 			color isDark ? #fff : #444
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			box-shadow var(--shadow)
 			//border-radius 8px
 			overflow auto
@ -364,7 +364,7 @@ root(isDark)
 				z-index 1
 				padding 0 16px
 				line-height 48px
-				background isDark ? #313543 : #fff
+				background var(--faceHeader)

 				if !isDark
 					box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@ -100,7 +100,7 @@ root(isDark)
 		left 16px
 		width 58px
 		height 58px
-		border solid 3px isDark ? #282c37 : #fff
+		border solid 3px var(--face)
 		border-radius 8px
 		cursor pointer

--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@ -59,7 +59,7 @@ root(isDark)
 	> .body
 		width 100%
 		height 100%
-		background isDark ? #282c37 : #fff
+		background var(--face)

 		> header
 			border-bottom solid 1px isDark ? #1b1f29 : #eee
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@ -474,7 +474,7 @@ export default Vue.extend({

 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282c37 : #fff
+	background var(--face)

 	> nav
 		display block
@ -490,7 +490,7 @@ root(isDark)
 		color rgba(isDark ? #fff : #000, 0.67)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
-		background-color rgba(isDark ? #313543 : #fff, 0.75)
+		//background-color rgba(var(--faceHeader), 0.75)
 		border-bottom solid 1px rgba(#000, 0.13)

 		> p
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@ -32,7 +32,7 @@ root(isDark)
 	width 150px
 	//height 120px
 	font-size 12px
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border-radius 4px

 	> a
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@ -229,7 +229,7 @@ root(isDark)
 	overflow hidden
 	width 100%
 	text-align left
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)

--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@ -221,7 +221,7 @@ export default Vue.extend({

 root(isDark)
 	overflow hidden
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)

--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@ -342,7 +342,7 @@ root(isDark)
 		margin 32px auto

 	> .form
-		background isDark ? #282C37 : #fff
+		background var(--face)
 		border-radius 8px
 		box-shadow 0 0 2px rgba(#000, 0.1)

--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/src/client/app/mobile/views/components/widget-container.vue
@ -45,7 +45,7 @@ root(isDark)
 			font-size 15px
 			font-weight normal
 			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-radius 8px 8px 0 0

 			> [data-fa]
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@ -81,7 +81,7 @@ root(isDark)
 			font-size 15px
 			font-weight normal
 			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-radius 8px 8px 0 0

 			@media (min-width 500px)
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@ -7,5 +7,7 @@
 	"bg": "#191B22",
 	"scrollbarTrack": "#282C37",
 	"scrollbarHandle": "#454954",
-	"scrollbarHandleHover": "#535660"
+	"scrollbarHandleHover": "#535660",
+	"face": "#282c37",
+	"faceHeader": "#313543"
 }
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@ -7,5 +7,7 @@
 	"bg": "#f7f7f7",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
-	"scrollbarHandleHover": "#00000066"
+	"scrollbarHandleHover": "#00000066",
+	"face": "#fff",
+	"faceHeader": "#fff"
 }