natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak UI

This commit is contained in:
syuilo 2021-04-12 13:06:00 +09:00
parent 0cc4519fc0
commit d599c1e740
4 changed files with 64 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/client/components/form/form.scss
View File

@ -9,32 +9,34 @@
}
}
._formLabel {
position: sticky;
top: var(--stickyTop, 0px);
background: var(--bg);
z-index: 2;
._formLabel,
._formCaption {
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;
}
}
._formCaption {
font-size: 80%;
padding: 8px 16px 0 16px;
opacity: 0.8;
._formLabel {
position: sticky;
top: var(--stickyTop, 0px);
z-index: 2;
margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
background: var(--X17);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
&:empty {
display: none;
}
._themeChanging_ ._formLabel {
transition: none !important;
background: transparent;
}
._formCaption {
padding: 8px 16px 0 16px;
}
._formItem {

60
src/client/pages/settings/theme.vue
View File

@ -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>

4
src/client/scripts/theme.ts
View File

@ -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

4
src/client/style.scss
View File

@ -82,9 +82,9 @@ html {
}
}
html.changing-theme {
html._themeChanging_ {
&, * {
transition: background 1s ease !important;
transition: background 1s ease, border 1s ease !important;
}
}