diff options
| -rw-r--r-- | src/client/app/common/views/components/settings/settings.vue | 6 | ||||
| -rw-r--r-- | src/client/app/common/views/components/settings/theme.vue | 236 |
2 files changed, 235 insertions, 7 deletions
diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue index 87b93574a5..efd7801620 100644 --- a/src/client/app/common/views/components/settings/settings.vue +++ b/src/client/app/common/views/components/settings/settings.vue @@ -29,7 +29,6 @@ <ui-radio v-model="navbar" value="right">{{ $t('@._settings.navbar-position-right') }}</ui-radio> </section> <section> - <ui-switch v-model="darkmode">{{ $t('@.dark-mode') }}</ui-switch> <ui-switch v-model="useShadow">{{ $t('@._settings.use-shadow') }}</ui-switch> <ui-switch v-model="roundedCorners">{{ $t('@._settings.rounded-corners') }}</ui-switch> <ui-switch v-model="circleIcons">{{ $t('@._settings.circle-icons') }}</ui-switch> @@ -314,11 +313,6 @@ export default Vue.extend({ set(value) { this.$store.commit('settings/set', { key: 'keepCw', value }); } }, - darkmode: { - get() { return this.$store.state.device.darkmode; }, - set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); } - }, - navbar: { get() { return this.$store.state.device.navbar; }, set(value) { this.$store.commit('device/set', { key: 'navbar', value }); } diff --git a/src/client/app/common/views/components/settings/theme.vue b/src/client/app/common/views/components/settings/theme.vue index 7d419e3bdd..7e3ee4a8e4 100644 --- a/src/client/app/common/views/components/settings/theme.vue +++ b/src/client/app/common/views/components/settings/theme.vue @@ -2,6 +2,25 @@ <ui-card> <template #title><fa icon="palette"/> {{ $t('theme') }}</template> <section class="nicnklzforebnpfgasiypmpdaaglujqm fit-top"> + <div class="dark"> + <div class="toggleWrapper"> + <input type="checkbox" class="dn" id="dn" v-model="darkmode"/> + <label for="dn" class="toggle"> + <span class="toggle__handler"> + <span class="crater crater--1"></span> + <span class="crater crater--2"></span> + <span class="crater crater--3"></span> + </span> + <span class="star star--1"></span> + <span class="star star--2"></span> + <span class="star star--3"></span> + <span class="star star--4"></span> + <span class="star star--5"></span> + <span class="star star--6"></span> + </label> + </div> + </div> + <label> <ui-select v-model="light" :placeholder="$t('light-theme')"> <template #label><fa :icon="faSun"/> {{ $t('light-theme') }}</template> @@ -195,7 +214,12 @@ export default Vue.extend({ text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString() } }; - } + }, + + darkmode: { + get() { return this.$store.state.device.darkmode; }, + set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); } + }, }, watch: { @@ -336,6 +360,216 @@ export default Vue.extend({ <style lang="stylus" scoped> .nicnklzforebnpfgasiypmpdaaglujqm + > .dark + margin-top 48px + margin-bottom 110px + + .toggleWrapper { + position: absolute; + top: 50%; + left: 50%; + overflow: hidden; + padding: 0 200px; + transform: translate3d(-50%, -50%, 0); + + input { + position: absolute; + left: -99em; + } + } + + .toggle { + cursor: pointer; + display: inline-block; + position: relative; + width: 90px; + height: 50px; + background-color: #83D8FF; + border-radius: 90px - 6; + transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + + &:before { + content: 'Light'; + position: absolute; + left: -60px; + top: 15px; + font-size: 18px; + color: var(--primary); + } + + &:after { + content: 'Dark'; + position: absolute; + right: -58px; + top: 15px; + font-size: 18px; + color: var(--text); + } + } + + .toggle__handler { + display: inline-block; + position: relative; + z-index: 1; + top: 3px; + left: 3px; + width: 50px - 6; + height: 50px - 6; + background-color: #FFCF96; + border-radius: 50px; + box-shadow: 0 2px 6px rgba(0,0,0,.3); + transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); + transform: rotate(-45deg); + + .crater { + position: absolute; + background-color: #E8CDA5; + opacity: 0; + transition: opacity 200ms ease-in-out; + border-radius: 100%; + } + + .crater--1 { + top: 18px; + left: 10px; + width: 4px; + height: 4px; + } + + .crater--2 { + top: 28px; + left: 22px; + width: 6px; + height: 6px; + } + + .crater--3 { + top: 10px; + left: 25px; + width: 8px; + height: 8px; + } + } + + .star { + position: absolute; + background-color: #ffffff; + transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + border-radius: 50%; + } + + .star--1 { + top: 10px; + left: 35px; + z-index: 0; + width: 30px; + height: 3px; + } + + .star--2 { + top: 18px; + left: 28px; + z-index: 1; + width: 30px; + height: 3px; + } + + .star--3 { + top: 27px; + left: 40px; + z-index: 0; + width: 30px; + height: 3px; + } + + .star--4, + .star--5, + .star--6 { + opacity: 0; + transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95); + } + + .star--4 { + top: 16px; + left: 11px; + z-index: 0; + width: 2px; + height: 2px; + transform: translate3d(3px,0,0); + } + + .star--5 { + top: 32px; + left: 17px; + z-index: 0; + width: 3px; + height: 3px; + transform: translate3d(3px,0,0); + } + + .star--6 { + top: 36px; + left: 28px; + z-index: 0; + width: 2px; + height: 2px; + transform: translate3d(3px,0,0); + } + + input:checked { + + .toggle { + background-color: #749DD6; + + &:before { + color: var(--text); + } + + &:after { + color: var(--primary); + } + + .toggle__handler { + background-color: #FFE5B5; + transform: translate3d(40px, 0, 0) rotate(0); + + .crater { opacity: 1; } + } + + .star--1 { + width: 2px; + height: 2px; + } + + .star--2 { + width: 4px; + height: 4px; + transform: translate3d(-5px, 0, 0); + } + + .star--3 { + width: 2px; + height: 2px; + transform: translate3d(-7px, 0, 0); + } + + .star--4, + .star--5, + .star--6 { + opacity: 1; + transform: translate3d(0,0,0); + } + .star--4 { + transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + } + .star--5 { + transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + } + .star--6 { + transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + } + } + } + > a display block margin-top -16px |