From d599c1e7409ac78167c43ba36c017af21e6a8f63 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 12 Apr 2021 13:06:00 +0900
Subject: Tweak UI

---
 src/client/components/form/form.scss | 26 ++++++++--------
 src/client/pages/settings/theme.vue  | 60 ++++++++++++++++++++++++------------
 src/client/scripts/theme.ts          |  4 +--
 src/client/style.scss                |  4 +--
 4 files changed, 59 insertions(+), 35 deletions(-)

(limited to 'src/client')

diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss
index d9486430be..b8d1429c9d 100644
--- a/src/client/components/form/form.scss
+++ b/src/client/components/form/form.scss
@@ -9,32 +9,34 @@
 	}
 }
 
+._formLabel,
+._formCaption {
+	font-size: 80%;
+	color: var(--fgTransparentWeak);
+
+	&:empty {
+		display: none;
+	}
+}
+
 ._formLabel {
 	position: sticky;
 	top: var(--stickyTop, 0px);
-	background: var(--bg);
 	z-index: 2;
-	font-size: 80%;
 	margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
 	padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
-	color: var(--fgTransparentWeak);
 	background: var(--X17);
 	-webkit-backdrop-filter: blur(10px);
 	backdrop-filter: blur(10px);
+}
 
-	&:empty {
-		display: none;
-	}
+._themeChanging_ ._formLabel {
+	transition: none !important;
+	background: transparent;
 }
 
 ._formCaption {
-	font-size: 80%;
 	padding: 8px 16px 0 16px;
-	opacity: 0.8;
-
-	&:empty {
-		display: none;
-	}
 }
 
 ._formItem {
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index 4aba6ea4de..75f27d12e7 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -1,24 +1,5 @@
 <template>
 <FormBase>
-	<FormSelect v-model:value="lightTheme" v-if="!darkMode">
-		<template #label>{{ $ts.themeForLightMode }}</template>
-		<optgroup :label="$ts.lightThemes">
-			<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-		<optgroup :label="$ts.darkThemes">
-			<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-	</FormSelect>
-	<FormSelect v-model:value="darkTheme" v-else>
-		<template #label>{{ $ts.themeForDarkMode }}</template>
-		<optgroup :label="$ts.darkThemes">
-			<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-		<optgroup :label="$ts.lightThemes">
-			<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-	</FormSelect>
-
 	<FormGroup>
 		<div class="rfqxtzch _formItem _formPanel">
 			<div class="darkMode">
@@ -45,6 +26,47 @@
 		<FormSwitch v-model:value="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch>
 	</FormGroup>
 
+	<template v-if="darkMode">
+		<FormSelect v-model:value="darkTheme">
+			<template #label>{{ $ts.themeForDarkMode }}</template>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+		<FormSelect v-model:value="lightTheme">
+			<template #label>{{ $ts.themeForLightMode }}</template>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+	</template>
+	<template v-else>
+		<FormSelect v-model:value="lightTheme">
+			<template #label>{{ $ts.themeForLightMode }}</template>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+		<FormSelect v-model:value="darkTheme">
+			<template #label>{{ $ts.themeForDarkMode }}</template>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+	</template>
+
 	<FormButton primary v-if="wallpaper == null" @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton>
 	<FormButton primary v-else @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton>
 
diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts
index 804d808683..f3719a23d8 100644
--- a/src/client/scripts/theme.ts
+++ b/src/client/scripts/theme.ts
@@ -29,10 +29,10 @@ let timeout = null;
 export function applyTheme(theme: Theme, persist = true) {
 	if (timeout) clearTimeout(timeout);
 
-	document.documentElement.classList.add('changing-theme');
+	document.documentElement.classList.add('_themeChanging_');
 
 	timeout = setTimeout(() => {
-		document.documentElement.classList.remove('changing-theme');
+		document.documentElement.classList.remove('_themeChanging_');
 	}, 1000);
 
 	// Deep copy
diff --git a/src/client/style.scss b/src/client/style.scss
index 4b91437a78..a86a2cbffe 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -82,9 +82,9 @@ html {
 	}
 }
 
-html.changing-theme {
+html._themeChanging_ {
 	&, * {
-		transition: background 1s ease !important;
+		transition: background 1s ease, border 1s ease !important;
 	}
 }
 
-- 
cgit v1.2.3-freya