🎨
This commit is contained in:
syuilo
parent
93e5e4afc0
commit
3e5330a92b
17 changed files with 72 additions and 18 deletions
|
|
@ -779,6 +779,8 @@ desktop/views/components/settings.vue:
|
|||
choose-wallpaper: "壁紙を選択"
|
||||
delete-wallpaper: "壁紙を削除"
|
||||
dark-mode: "ダークモード"
|
||||
use-shadow: "UIに影を使用"
|
||||
rounded-corners: "UIの角を丸める"
|
||||
circle-icons: "円形のアイコンを使用"
|
||||
contrasted-acct: "ユーザー名にコントラストを付ける"
|
||||
gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
|
||||
|
|
|
|||
|
|
@ -133,7 +133,8 @@ export default Vue.extend({
|
|||
root(isDark)
|
||||
color isDark ? #c5ced6 : #777
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
&[data-melt]
|
||||
|
|
|
|||
|
|
@ -231,7 +231,8 @@ root(isDark)
|
|||
overflow hidden
|
||||
text-align left
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
> .read-more
|
||||
display block
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@
|
|||
<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
|
||||
<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
|
||||
<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
|
||||
<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
|
||||
<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
|
||||
<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
|
||||
<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
|
||||
<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
|
||||
|
|
@ -316,6 +318,16 @@ export default Vue.extend({
|
|||
set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
|
||||
},
|
||||
|
||||
useShadow: {
|
||||
get() { return this.$store.state.settings.useShadow; },
|
||||
set(value) { this.$store.dispatch('settings/set', { key: 'useShadow', value }); }
|
||||
},
|
||||
|
||||
roundedCorners: {
|
||||
get() { return this.$store.state.settings.roundedCorners; },
|
||||
set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); }
|
||||
},
|
||||
|
||||
fetchOnScroll: {
|
||||
get() { return this.$store.state.settings.fetchOnScroll; },
|
||||
set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
|
||||
|
|
|
|||
|
|
@ -179,7 +179,9 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
> header
|
||||
padding 0 8px
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="header">
|
||||
<div class="header" :style="style">
|
||||
<p class="warn" v-if="env != 'production'">%i18n:common.do-not-use-in-production%</p>
|
||||
<mk-special-message/>
|
||||
<div class="main" ref="main">
|
||||
|
|
@ -54,6 +54,14 @@ export default Vue.extend({
|
|||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
style(): any {
|
||||
return {
|
||||
'box-shadow': this.$store.state.settings.useShadow ? '0 0px 8px rgba(0, 0, 0, 0.2)' : 'none'
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
|
||||
|
||||
|
|
@ -124,7 +132,6 @@ root(isDark)
|
|||
top 0
|
||||
z-index 1000
|
||||
width 100%
|
||||
box-shadow 0 0px 8px rgba(#000, 0.2)
|
||||
|
||||
> .warn
|
||||
display block
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
&.naked
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
> .title
|
||||
z-index 1
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
> .title
|
||||
|
|
|
|||
|
|
@ -104,7 +104,8 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
&[data-is-dark-background]
|
||||
|
|
|
|||
|
|
@ -41,7 +41,8 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
> .title
|
||||
|
|
|
|||
|
|
@ -87,7 +87,8 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
> *:first-child
|
||||
border-top none !important
|
||||
|
|
|
|||
|
|
@ -116,12 +116,13 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
> header
|
||||
padding 0 8px
|
||||
z-index 10
|
||||
background isDark ? #313543 : #fff
|
||||
border-radius 6px 6px 0 0
|
||||
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
|
||||
|
||||
> span
|
||||
|
|
|
|||
|
|
@ -88,17 +88,16 @@ root(isDark)
|
|||
margin-bottom 16px
|
||||
padding 14px 16px
|
||||
font-size 14px
|
||||
border-radius 6px
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
&.is-suspended
|
||||
color isDark ? #ffb4b4 : #570808
|
||||
background isDark ? #611d1d : #ffdbdb
|
||||
border solid 1px isDark ? #d64a4a : #e09696
|
||||
|
||||
&.is-remote
|
||||
color isDark ? #ffbd3e : #573c08
|
||||
background isDark ? #42321c : #fff0db
|
||||
border solid 1px isDark ? #90733c : #dcbb7b
|
||||
|
||||
> a
|
||||
font-weight bold
|
||||
|
|
@ -118,7 +117,7 @@ root(isDark)
|
|||
margin-right 16px
|
||||
|
||||
> .timeline
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
|
||||
> .side
|
||||
width 275px
|
||||
|
|
@ -137,7 +136,8 @@ root(isDark)
|
|||
font-size 12px
|
||||
color #aaa
|
||||
background isDark ? #21242f : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
a
|
||||
color #999
|
||||
|
|
|
|||
|
|
@ -355,7 +355,7 @@ root(isDark)
|
|||
.block
|
||||
color isDark ? #fff : #444
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
box-shadow var(--shadow)
|
||||
//border-radius 8px
|
||||
overflow auto
|
||||
|
||||
|
|
|
|||
|
|
@ -125,6 +125,26 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
|
|||
});
|
||||
//#endregion
|
||||
|
||||
//#region shadow
|
||||
const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
|
||||
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
|
||||
os.store.watch(s => {
|
||||
return s.settings.useShadow;
|
||||
}, v => {
|
||||
document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
|
||||
});
|
||||
//#endregion
|
||||
|
||||
//#region rounded corners
|
||||
const round = '6px';
|
||||
if (os.store.state.settings.roundedCorners) document.documentElement.style.setProperty('--round', round);
|
||||
os.store.watch(s => {
|
||||
return s.settings.roundedCorners;
|
||||
}, v => {
|
||||
document.documentElement.style.setProperty('--round', v ? round : '0');
|
||||
});
|
||||
//#endregion
|
||||
|
||||
Vue.mixin({
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ const defaultSettings = {
|
|||
showPostFormOnTopOfTl: false,
|
||||
suggestRecentHashtags: true,
|
||||
showClockOnHeader: true,
|
||||
useShadow: true,
|
||||
roundedCorners: false,
|
||||
circleIcons: true,
|
||||
contrastedAcct: true,
|
||||
showFullAcct: false,
|
||||
|
|
|
|||
Loading…
Reference in a new issue