wip

2018-09-27 22:50:34 +09:00 · 2018-09-27 22:50:34 +09:00 · 1e9eeeb980
commit 1e9eeeb980
parent 0c7111b438
11 changed files with 47 additions and 40 deletions
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@ -209,7 +209,7 @@ root(isDark)
 		padding 8px
 		resize none
 		font-size 1em
-		color isDark ? #fff : #000
+		color var(--inputText)
 		outline none
 		border none
 		border-top solid 1px isDark ? #4b5056 : #eee
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@ -103,7 +103,7 @@ root(isDark)
 				padding 6px 8px
 				width 300px
 				font-size 14px
-				color isDark ? #fff : #000
+				color var(--inputText)
 				background isDark ? #191b22 : #fff
 				border solid 1px var(--primaryAlpha01)
 				border-radius 4px
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@ -62,7 +62,7 @@ root(isDark)

 	&:hover
 		> .button
-			border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			border solid 2px var(--inputLabel)

 	&.disabled
 		opacity 0.6
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@ -167,7 +167,7 @@ root(isDark, fill)
 		width 24px
 		text-align center
 		line-height 32px
-		color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		color var(--inputLabel)

 		&:not(:empty) + .input
 			margin-left 28px
@ -183,7 +183,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				background var(--inputBorder)

 			&:after
 				content ''
@ -242,7 +242,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@ -257,7 +257,7 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			line-height 32px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
@ -280,7 +280,7 @@ root(isDark, fill)
 			top 0
 			font-size 16px
 			line-height fill ? 44px : 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none

 			&:empty
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@ -87,7 +87,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		border solid 2px var(--inputLabel)
 		border-radius 100%
 		transition inherit

--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@ -103,7 +103,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				background var(--inputBorder)

 			&:after
 				content ''
@ -143,7 +143,7 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			height 32px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
--- a/src/client/app/common/views/components/ui/textarea.vue
+++ b/src/client/app/common/views/components/ui/textarea.vue
@ -63,9 +63,7 @@ export default Vue.extend({
 </script>

 <style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
 	margin 42px 0 32px 0

 	> .input
@ -84,7 +82,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				background none
-				border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				border solid 1px var(--inputBorder)
 				border-radius 3px
 				pointer-events none

@ -112,7 +110,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@ -126,7 +124,7 @@ root(isDark, fill)
 			font inherit
 			font-weight fill ? bold : normal
 			font-size 16px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
@ -159,16 +157,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)

-.ui-textarea[data-darkmode]
-	&.fill
-		root(true, true)
-	&:not(.fill)
-		root(true, false)
+.ui-textarea.fill
+	root(true)

-.ui-textarea:not([data-darkmode])
-	&.fill
-		root(false, true)
-	&:not(.fill)
-		root(false, false)
+.ui-textarea:not(.fill)
+	root(false)

 </style>
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@ -200,17 +200,17 @@ export default Vue.extend({
 		top 0
 		width 100%

-root(isDark)
+.mk-url-preview
 	> a
 		display block
 		font-size 14px
-		border solid 1px isDark ? #191b1f : #eee
+		border solid 1px var(--urlPreviewBorder)
 		border-radius 4px
 		overflow hidden

 		&:hover
 			text-decoration none
-			border-color isDark ? #4f5561 : #ddd
+			border-color var(--urlPreviewBorderHover)

 			> article > header > h1
 				text-decoration underline
@ -235,11 +235,11 @@ root(isDark)
 				> h1
 					margin 0
 					font-size 1em
-					color isDark ? #d6dae0 : #555
+					color var(--urlPreviewTitle)

 			> p
 				margin 0
-				color isDark ? #a4aab3 : #777
+				color var(--urlPreviewText)
 				font-size 0.8em

 			> footer
@ -256,7 +256,7 @@ root(isDark)
 				> p
 					display inline-block
 					margin 0
-					color isDark ? #b0b4bf : #666
+					color var(--urlPreviewInfo)
 					font-size 0.8em
 					line-height 16px
 					vertical-align top
@ -322,10 +322,4 @@ root(isDark)
 						width 12px
 						height 12px

-.mk-url-preview[data-darkmode]
-	root(true)
-
-.mk-url-preview:not([data-darkmode])
-	root(false)
-
 </style>
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@ -6,9 +6,10 @@
 		"vars": {
 			"primary": "#fb4e4e",
 			"secondary": "#282C37",
-			"text": "#d0e0ea"
+			"text": "#d6dae0"
 		}
 	},
+
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
@ -54,6 +55,9 @@
 	"dateDividerFg": "#666b79",

 	"switchTrack": "rgba(255, 255, 255, 0.15)",
+	"inputBorder": "rgba(255, 255, 255, 0.7)",
+	"inputLabel": "rgba(255, 255, 255, 0.7)",
+	"inputText": "#fff",

 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
@ -65,6 +69,12 @@

 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",

+	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
+	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
+	"urlPreviewTitle": "$text",
+	"urlPreviewText": ":alpha<0.7<$text",
+	"urlPreviewInfo": ":alpha<0.8<$text",
+
 	"calendarWeek": "#43d5dc",
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@ -11,6 +11,7 @@
 			"text": "#b1bee3"
 		}
 	},
+
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
 	"desktopHeaderBg": "#36314e"
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@ -9,6 +9,7 @@
 			"text": "#666"
 		}
 	},
+
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
@ -54,6 +55,9 @@
 	"dateDividerFg": "#aaa",

 	"switchTrack": "rgba(0, 0, 0, 0.25)",
+	"inputBorder": "rgba(0, 0, 0, 0.42)",
+	"inputLabel": "rgba(0, 0, 0, 0.54)",
+	"inputText": "#000",

 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
@ -65,6 +69,12 @@

 	"reactionPickerButtonHoverBg": "#eee",

+	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
+	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
+	"urlPreviewTitle": "$text",
+	"urlPreviewText": ":alpha<0.7<$text",
+	"urlPreviewInfo": ":alpha<0.8<$text",
+
 	"calendarWeek": "#19a2a9",
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",