wip

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>