wip

src/client/app/common/views/components/google.vue

@@ -26,7 +26,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-google
 	display flex
 	margin 8px 0
 
@@ -37,31 +37,25 @@ root(isDark)
 		height 40px
 		font-family sans-serif
 		font-size 16px
-		color isDark ? #dee4e8 : #55595c
-		background isDark ? #191b22 : #fff
-		border solid 1px isDark ? #495156 : #dadada
+		color var(--googleSearchFg)
+		background var(--googleSearchBg)
+		border solid 1px var(--googleSearchBorder)
 		border-radius 4px 0 0 4px
 
 		&:hover
-			border-color isDark ? #777c86 : #b0b0b0
+			border-color var(--googleSearchHoverBorder)
 
 	> button
 		flex-shrink 0
 		padding 0 16px
-		border solid 1px isDark ? #495156 : #dadada
+		border solid 1px var(--googleSearchBorder)
 		border-left none
 		border-radius 0 4px 4px 0
 
 		&:hover
-			background-color isDark ? #2e3440 : #eee
+			background-color var(--googleSearchHoverButton)
 
 		&:active
 			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 
-.mk-google[data-darkmode]
-	root(true)
-
-.mk-google:not([data-darkmode])
-	root(false)
-
 </style>

src/client/theme/dark.json

@@ -38,29 +38,45 @@
 	"noteHeaderAdminBg": "#5d282e",
 	"noteHeaderAcct": "#606984",
 	"noteHeaderInfo": "#606984",
+
 	"noteActions": "#606984",
 	"noteActionsHover": "#a1a8bf",
 	"noteActionsReplyHover": "#0af",
 	"noteActionsRenoteHover": "#8d0",
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#707b97",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
+
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
+
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
+
 	"cwButtonBg": "#687390",
 	"cwButtonFg": "#393f4f",
 	"cwButtonHoverBg": "#707b97",
+
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
+
 	"calendarWeek": "#43d5dc",
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
+
 	"announcementsBg": "#253a50",
 	"announcementsTitle": "#539eff",
 	"announcementsText": "#fff",
+
+	"googleSearchBg": "rgba(0, 0, 0, 0.2)",
+	"googleSearchFg": "#dee4e8",
+	"googleSearchBorder": "rgba(255, 255, 255, 0.2)",
+	"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
+	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
+
 	"desktopHeaderBg": "#313543",
 	"desktopHeaderFg": "#b8c5ca",
 	"desktopHeaderHoverFg": "#fff",

src/client/theme/light.json

@@ -38,29 +38,45 @@
 	"noteHeaderAdminBg": "#5d282e",
 	"noteHeaderAcct": "#ccc",
 	"noteHeaderInfo": "#c0c0c0",
+
 	"noteActions": "#ddd",
 	"noteActionsHover": "#444",
 	"noteActionsReplyHover": "#0af",
 	"noteActionsRenoteHover": "#8d0",
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#888",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
+
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
+
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
+
 	"cwButtonBg": "#b1b9c1",
 	"cwButtonFg": "#fff",
 	"cwButtonHoverBg": "#bbc4ce",
+
 	"reactionPickerButtonHoverBg": "#eee",
+
 	"calendarWeek": "#19a2a9",
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
+
 	"announcementsBg": "#f3f9ff",
 	"announcementsTitle": "#4078c0",
 	"announcementsText": "#57616f",
+
+	"googleSearchBg": "#fff",
+	"googleSearchFg": "#55595c",
+	"googleSearchBorder": "rgba(0, 0, 0, 0.2)",
+	"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
+	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
+
 	"desktopHeaderBg": "#f7f7f7",
 	"desktopHeaderFg": "#9eaba8",
 	"desktopHeaderHoverFg": "#7b8c88",