wip

src/client/app/desktop/views/components/ui.header.account.vue

@@ -134,7 +134,7 @@ root(isDark)
 		display block
 		margin 0
 		padding 0
-		color #9eaba8
+		color var(--desktopHeaderFg)
 		border none
 		background transparent
 		cursor pointer
@@ -144,14 +144,11 @@ root(isDark)
 
 		&:hover
 		&[data-active='true']
-			color isDark ? #fff : darken(#9eaba8, 20%)
+			color var(--desktopHeaderHoverFg)
 
 			> .avatar
 				filter saturate(150%)
 
-		&:active
-			color isDark ? #fff : darken(#9eaba8, 30%)
-
 		> .username
 			display block
 			float left

src/client/app/desktop/views/components/ui.header.nav.vue

@@ -95,9 +95,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.nav
-
-root(isDark)
 	display inline-block
 	margin 0
 	padding 0
@@ -129,7 +127,7 @@ root(isDark)
 				padding 0 24px
 				font-size 13px
 				font-variant small-caps
-				color isDark ? #b8c5ca : #9eaba8
+				color var(--desktopHeaderFg)
 				text-decoration none
 				transition none
 				cursor pointer
@@ -138,7 +136,7 @@ root(isDark)
 					pointer-events none
 
 				&:hover
-					color isDark ? #fff : darken(#9eaba8, 20%)
+					color var(--desktopHeaderHoverFg)
 					text-decoration none
 
 				> [data-fa]:first-child
@@ -162,10 +160,4 @@ root(isDark)
 				@media (max-width 700px)
 					padding 0 12px
 
-.nav[data-darkmode]
-	root(true)
-
-.nav:not([data-darkmode])
-	root(false)
-
 </style>

src/client/app/desktop/views/components/ui.header.notifications.vue

@@ -61,16 +61,13 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.notifications
-
-root(isDark)
-
 	> button
 		display block
 		margin 0
 		padding 0
 		width 32px
-		color #9eaba8
+		color var(--desktopHeaderFg)
 		border none
 		background transparent
 		cursor pointer
@@ -80,10 +77,7 @@ root(isDark)
 
 		&:hover
 		&[data-active='true']
-			color isDark ? #fff : darken(#9eaba8, 20%)
+			color var(--desktopHeaderHoverFg)
-
-		&:active
-			color isDark ? #fff : darken(#9eaba8, 30%)
 
 		> [data-fa].bell
 			font-size 1.2em
@@ -135,10 +129,4 @@ root(isDark)
 			font-size 1rem
 			overflow auto
 
-.notifications[data-darkmode]
-	root(true)
-
-.notifications:not([data-darkmode])
-	root(false)
-
 </style>

src/client/app/desktop/views/components/ui.header.search.vue

@@ -28,8 +28,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.search
-root(isDark)
 	> [data-fa]
 		display block
 		position absolute
@@ -38,7 +37,7 @@ root(isDark)
 		width 48px
 		text-align center
 		line-height 48px
-		color #9eaba8
+		color var(--desktopHeaderFg)
 		pointer-events none
 
 		> *
@@ -52,26 +51,20 @@ root(isDark)
 		width 14em
 		height 32px
 		font-size 1em
-		background rgba(#000, 0.05)
+		background var(--desktopHeaderSearchBg)
 		outline none
-		//border solid 1px #ddd
 		border none
 		border-radius 16px
 		transition color 0.5s ease, border 0.5s ease
-		color isDark ? #fff : #000
+		color var(--desktopHeaderSearchFg)
 
 		&::placeholder
-			color #9eaba8
+			color var(--desktopHeaderFg)
 
 		&:hover
-			background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
+			background var(--desktopHeaderSearchHoverBg)
 
 		&:focus
 			box-shadow 0 0 0 2px var(--primaryAlpha05) !important
 
-.search[data-darkmode]
-	root(true)
-
-.search:not([data-darkmode])
-	root(false)
 </style>

src/client/app/desktop/views/components/ui.header.vue

@@ -5,7 +5,6 @@
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
 		<div class="main">
-			<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
 			<div class="container" ref="mainContainer">
 				<div class="left">
 					<x-nav/>
@@ -64,55 +63,6 @@ export default Vue.extend({
 
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
-
-		if (this.$store.getters.isSignedIn) {
-			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
-			const isHisasiburi = ago >= 3600;
-			this.$store.state.i.lastUsedAt = new Date();
-
-			if (isHisasiburi) {
-				(this.$refs.welcomeback as any).style.display = 'block';
-				(this.$refs.main as any).style.overflow = 'hidden';
-
-				anime({
-					targets: this.$refs.welcomeback,
-					top: '0',
-					opacity: 1,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				anime({
-					targets: this.$refs.mainContainer,
-					opacity: 0,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				setTimeout(() => {
-					anime({
-						targets: this.$refs.welcomeback,
-						top: '-48px',
-						opacity: 0,
-						duration: 500,
-						complete: () => {
-							(this.$refs.welcomeback as any).style.display = 'none';
-							(this.$refs.main as any).style.overflow = 'initial';
-						},
-						easing: 'easeInQuad'
-					});
-
-					anime({
-						targets: this.$refs.mainContainer,
-						opacity: 1,
-						duration: 500,
-						easing: 'easeInQuad'
-					});
-				}, 2500);
-			}
-		}
 	},
 
 	methods: {
@@ -161,17 +111,6 @@ root(isDark)
 			font-size 0.9rem
 			user-select none
 
-			> p
-				display none
-				position absolute
-				top 48px
-				width 100%
-				line-height 48px
-				margin 0
-				text-align center
-				color isDark ? #fff : #888
-				opacity 0
-
 			> .container
 				display flex
 				width 100%
@@ -190,7 +129,7 @@ root(isDark)
 						display block
 						width 48px
 						height 48px
-						background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
+						background-image var(--desktopHeaderIcon)
 						background-size 24px
 						background-position center
 						background-repeat no-repeat

src/client/theme/dark.json

@@ -49,6 +49,12 @@
 	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
+	"desktopHeaderFg": "#b8c5ca",
+	"desktopHeaderHoverFg": "#fff",
+	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
+	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
+	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
+	"desktopHeaderSearchFg": "#fff",
 	"desktopPostFormBg": "@face",
 	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
 	"desktopPostFormTextareaFg": "#fff",

src/client/theme/light.json

@@ -49,6 +49,12 @@
 	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
+	"desktopHeaderFg": "#9eaba8",
+	"desktopHeaderHoverFg": "#7b8c88",
+	"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
+	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
+	"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
+	"desktopHeaderSearchFg": "#000",
 	"desktopPostFormBg": "#fff6f6",
 	"desktopPostFormTextareaBg": "#fff",
 	"desktopPostFormTextareaFg": "#333",