diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/components/form/form.scss | 26 | ||||
| -rw-r--r-- | src/client/pages/settings/theme.vue | 60 | ||||
| -rw-r--r-- | src/client/scripts/theme.ts | 4 | ||||
| -rw-r--r-- | src/client/style.scss | 4 |
4 files changed, 59 insertions, 35 deletions
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; } } |