wip

locales/ja-JP.yml

@@ -784,7 +784,6 @@ desktop/views/components/settings.vue:
   rounded-corners: "UIの角を丸める"
   circle-icons: "円形のアイコンを使用"
   contrasted-acct: "ユーザー名にコントラストを付ける"
-  gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
   post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
   suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
   show-clock-on-header: "右上に時計を表示する"

src/client/app/desktop/views/components/settings.vue

@@ -66,7 +66,6 @@
 				<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
 				<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 				<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
-				<ui-switch v-model="gradientWindowHeader">%i18n:@gradient-window-header%</ui-switch>
 				<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 			</div>
 			<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
@@ -421,12 +420,7 @@ export default Vue.extend({
 		disableViaMobile: {
 			get() { return this.$store.state.settings.disableViaMobile; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
-		},
+		}
-
-		gradientWindowHeader: {
-			get() { return this.$store.state.settings.gradientWindowHeader; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'gradientWindowHeader', value }); }
-		},
 	},
 	created() {
 		(this as any).os.getMeta().then(meta => {

src/client/app/desktop/views/components/widget-container.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-widget-container" :class="{ naked }">
-	<header :class="{ withGradient }" v-if="showHeader">
+	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
 	</header>
@@ -20,15 +20,6 @@ export default Vue.extend({
 			type: Boolean,
 			default: false
 		}
-	},
-	computed: {
-		withGradient(): boolean {
-			return this.$store.getters.isSignedIn
-				? this.$store.state.settings.gradientWindowHeader != null
-					? this.$store.state.settings.gradientWindowHeader
-					: false
-				: false;
-		}
 	}
 });
 </script>
@@ -54,7 +45,7 @@ root(isDark)
 			line-height 42px
 			font-size 0.9em
 			font-weight bold
-			color isDark ? #e3e5e8 : #888
+			color var(--faceHeaderText)
 			box-shadow 0 1px rgba(#000, 0.07)
 
 			> [data-fa]
@@ -78,12 +69,7 @@ root(isDark)
 				color var(--faceTextButtonHover)
 
 			&:active
-				color isDark ? #b2c1d5 : #999
+				color var(--faceTextButtonActive)
-
-		&.withGradient
-			> .title
-				background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
-				box-shadow 0 1px rgba(#000, 0.11)
 
 .mk-widget-container[data-darkmode]
 	root(true)

src/client/app/desktop/views/components/window.vue

@@ -4,7 +4,6 @@
 	<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
 		<div class="body">
 			<header ref="header"
-				:class="{ withGradient: $store.state.settings.gradientWindowHeader }"
 				@contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown"
 			>
 				<h1><slot name="header"></slot></h1>
@@ -463,8 +462,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	display block
 
@@ -582,10 +579,6 @@ root(isDark)
 				border-radius 6px 6px 0 0
 				box-shadow 0 1px 0 rgba(#000, 0.1)
 
-				&.withGradient
-					background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
-					box-shadow 0 1px 0 rgba(#000, 0.15)
-
 				&, *
 					user-select none
 
@@ -600,7 +593,7 @@ root(isDark)
 					font-size 1em
 					line-height $header-height
 					font-weight normal
-					color isDark ? #e3e5e8 : #666
+					color var(--desktopWindowTitle)
 
 				> div:last-child
 					position absolute
@@ -615,16 +608,16 @@ root(isDark)
 						padding 0
 						cursor pointer
 						font-size 1em
-						color isDark ? #9baec8 : rgba(#000, 0.4)
+						color var(--faceTextButton)
 						border none
 						outline none
 						background transparent
 
 						&:hover
-							color isDark ? #b2c1d5 : rgba(#000, 0.6)
+							color var(--faceTextButtonHover)
 
 						&:active
-							color isDark ? #b2c1d5 : darken(#000, 30%)
+							color var(--faceTextButtonActive)
 
 						> [data-fa]
 							padding 0

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -317,7 +317,7 @@ root(isDark)
 		line-height $header-height
 		padding 0 16px
 		font-size 14px
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.15)
 		cursor pointer

src/client/app/desktop/views/pages/user/user.followers-you-know.vue

@@ -48,7 +48,7 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i

src/client/app/desktop/views/pages/user/user.friends.vue

@@ -54,7 +54,7 @@ root(isDark)
 		font-size 0.9em
 		font-weight bold
 		background isDark ? #313543 : inherit
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i

src/client/app/desktop/views/pages/user/user.photos.vue

@@ -53,7 +53,7 @@ root(isDark)
 		font-size 0.9em
 		font-weight bold
 		background: isDark ? #313543 : inherit
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i

src/client/app/store.ts

@@ -21,7 +21,6 @@ const defaultSettings = {
 	circleIcons: true,
 	contrastedAcct: true,
 	showFullAcct: false,
-	gradientWindowHeader: false,
 	showReplyTarget: true,
 	showMyRenotes: true,
 	showRenotedMyNotes: true,

src/client/theme/dark.json

@@ -12,9 +12,11 @@
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
 	"faceHeader": "#313543",
+	"faceHeaderText": "#e3e5e8",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"faceTextButton": "#9baec8",
 	"faceTextButtonHover": "#b2c1d5",
+	"faceTextButtonActive": "#b2c1d5",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
@@ -53,6 +55,7 @@
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
+	"desktopWindowTitle": "@faceHeaderText",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",

src/client/theme/light.json

@@ -12,9 +12,11 @@
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
 	"faceHeader": "#fff",
+	"faceHeaderText": "#888",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"faceTextButton": "#ccc",
 	"faceTextButtonHover": "#aaa",
+	"faceTextButtonActive": "#999",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
@@ -53,6 +55,7 @@
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
+	"desktopWindowTitle": "#666",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",