wip

8 files changed, 36 insertions, 71 deletions

diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue
index 8108892597..de46297fcb 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -134,10 +134,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.pyvicwrksnfyhpfgkjwqknuururpaztw
 	> .preview
 		padding 8px
-		background isDark ? #191b22 : #f0f0f0
+		background var(--bg)
 
 		> img
 			display block
@@ -148,9 +148,10 @@ root(isDark)
 
 		> footer
 			padding 8px 8px 0 8px
-			font-size 0.8em
-			color isDark ? #606984 : #888
 			text-align center
+			font-size 0.8em
+			color var(--text)
+			opacity 0.7
 
 			> .separator
 				display inline
@@ -178,12 +179,12 @@ root(isDark)
 	> .info
 		padding 14px
 		font-size 0.8em
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
 			margin 0 auto
-			color isDark ? #9397a2 : #9d9d9d
+			color var(--text)
 
 			> .separator
 				padding 0 4px
@@ -198,7 +199,7 @@ root(isDark)
 
 	> .menu
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -209,31 +210,26 @@ root(isDark)
 				width 100%
 				padding 10px 16px
 				margin 0 0 12px 0
-				color isDark ? #dfe3e8 : #333
+				color var(--primaryForeground)
 				font-size 0.9em
 				text-align center
 				text-decoration none
-				text-shadow 0 1px 0 isDark ? rgba(0, 0, 0, 0.9) : rgba(255, 255, 255, 0.9)
-				background-image isDark ? linear-gradient(#292f3c, #1b2025) : linear-gradient(#fafafa, #eaeaea)
-				border 1px solid isDark ? #121417 : #ddd
-				border-bottom-color isDark ? #060606 : #cecece
+				background var(--primary)
+				border none
 				border-radius 3px
 
 				&:last-child
 					margin-bottom 0
 
 				&:active
-					background-color #767676
-					background-image none
-					border-color #444
-					box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
+					background var(--primaryDarken10)
 
 				> [data-fa]
 					margin-right 4px
 
 	> .hash
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -243,7 +239,7 @@ root(isDark)
 				display block
 				margin 0
 				padding 0
-				color isDark ? #a8b7d0 : #555
+				color var(--text)
 				font-size 0.9em
 
 				> [data-fa]
@@ -264,7 +260,7 @@ root(isDark)
 
 	> .exif
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -274,7 +270,7 @@ root(isDark)
 				display block
 				margin 0
 				padding 0
-				color isDark ? #a8b7d0 : #555
+				color var(--text)
 				font-size 0.9em
 
 				> [data-fa]
@@ -292,10 +288,4 @@ root(isDark)
 				border-radius 2px
 				background #f5f5f5
 
-.pyvicwrksnfyhpfgkjwqknuururpaztw[data-darkmode]
-	root(true)
-
-.pyvicwrksnfyhpfgkjwqknuururpaztw:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index ba58cf59a0..68978bb944 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -63,9 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.vupkuhvjnjyqaqhsiogfbywvjxynrgsm
 	display block
 	text-decoration none !important
 
@@ -103,7 +101,7 @@ root(isDark)
 				padding 0
 				font-size 0.9em
 				font-weight bold
-				color isDark ? #fff : #555
+				color var(--text)
 				text-overflow ellipsis
 				overflow-wrap break-word
 
@@ -127,21 +125,22 @@ root(isDark)
 				display block
 				margin 4px 0 0 0
 				font-size 0.7em
+				color var(--text)
 
 				> .separator
 					padding 0 4px
 
 				> .type
-					color #9D9D9D
+					opacity 0.7
 
 					> .mk-file-type-icon
 						margin-right 4px
 
 				> .data-size
-					color #9D9D9D
+					opacity 0.7
 
 				> .created-at
-					color #BDBDBD
+					opacity 0.7
 
 					> [data-fa]
 						margin-right 2px
@@ -155,10 +154,4 @@ root(isDark)
 		&, *
 			color #fff !important
 
-.vupkuhvjnjyqaqhsiogfbywvjxynrgsm[data-darkmode]
-	root(true)
-
-.vupkuhvjnjyqaqhsiogfbywvjxynrgsm:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.folder.vue b/src/client/app/mobile/views/components/drive.folder.vue
index f76ecba6ad..05dcbd083e 100644
--- a/src/client/app/mobile/views/components/drive.folder.vue
+++ b/src/client/app/mobile/views/components/drive.folder.vue
@@ -24,9 +24,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.jvwxssxsytqlqvrpiymarjlzlsxskqsr
 	display block
-	color isDark ? #fff : #777
+	color var(--text)
 	text-decoration none !important
 
 	*
@@ -55,10 +55,4 @@ root(isDark)
 			> *
 				height 100%
 
-.jvwxssxsytqlqvrpiymarjlzlsxskqsr[data-darkmode]
-	root(true)
-
-.jvwxssxsytqlqvrpiymarjlzlsxskqsr:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 76d6c2737d..8919462511 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -473,7 +473,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.kmmwchoexgckptowjmjgfsygeltxfeqs
 	background var(--face)
 
 	> nav
@@ -487,10 +487,10 @@ root(isDark)
 		overflow auto
 		white-space nowrap
 		font-size 0.9em
-		color rgba(isDark ? #fff : #000, 0.67)
+		color var(--text)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
-		//background-color rgba(var(--faceHeader), 0.75)
+		background-color var(--mobileDriveNavBg)
 		border-bottom solid 1px rgba(#000, 0.13)
 
 		> p
@@ -516,7 +516,7 @@ root(isDark)
 			opacity 0.5
 
 		> .info
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 
 			&:empty
 				display none
@@ -527,15 +527,15 @@ root(isDark)
 				margin 0 auto
 				padding 4px 16px
 				font-size 10px
-				color isDark ? #606984 : #777
+				color var(--text)
 
 		> .folders
 			> .folder
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 		> .files
 			> .file
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 			> .more
 				display block
@@ -591,10 +591,4 @@ root(isDark)
 	> .file
 		display none
 
-.kmmwchoexgckptowjmjgfsygeltxfeqs[data-darkmode]
-	root(true)
-
-.kmmwchoexgckptowjmjgfsygeltxfeqs:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 7b73012e06..4a09104341 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -105,7 +105,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notification
 	> .notification
 		padding 16px
 		font-size 12px
@@ -154,7 +154,7 @@ root(isDark)
 
 				> .mk-time
 					margin-left auto
-					color isDark ? #606984 : #c0c0c0
+					color var(--noteHeaderInfo)
 					font-size 0.9em
 
 			> .note-preview
@@ -182,10 +182,4 @@ root(isDark)
 			> div > header i
 				color #888
 
-.mk-notification[data-darkmode]
-	root(true)
-
-.mk-notification:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
index c2b2606fd8..beaf6bba57 100644
--- a/src/client/app/mobile/views/pages/received-follow-requests.vue
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -52,8 +52,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 main
 	width 100%
 	max-width 680px
@@ -69,7 +67,7 @@ main
 	> div
 		display flex
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
 		> span
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index b4c9fd5606..f8b3420e7c 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -136,6 +136,7 @@
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
 	"mobilePostFormDivider": "rgba(0, 0, 0, 0.2)",
 	"mobilePostFormTextareaBg": "rgba(0, 0, 0, 0.3)",
+	"mobileDriveNavBg": ":alpha<0.75<$secondary",
 	"mobileHomeTlItemHover": "rgba(255, 255, 255, 0.1)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 6aec07e74d..7652c6027d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -136,6 +136,7 @@
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
 	"mobilePostFormDivider": "rgba(0, 0, 0, 0.1)",
 	"mobilePostFormTextareaBg": "#fff",
+	"mobileDriveNavBg": ":alpha<0.75<$secondary",
 	"mobileHomeTlItemHover": "rgba(0, 0, 0, 0.05)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",