diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 11dd76d0e6456452c2f1b0c876b8e8a6ec2eb6c6..6ae38d45fd1797de2c3af791df2e5fea7eb9e698 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -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: "ウィンドウã®ã‚¿ã‚¤ãƒˆãƒ«ãƒãƒ¼ã«ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’使用"
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 0280f07a61c9dd59977061a769cd70555faecba3..e71983f821588bda8547abbc38e0a4b47736e6f8 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -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]
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 670be422fec47b978e2619d787d8b0832c908496..80faae0d4264a94490d5a863263a6b0cfb63c298 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -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
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 312a7ed56e8302769695748febe57dc098d249e9..cf10ea0f56cd6d23066e62eb34e7fb00c1cbd4a1 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -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 }); }
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 75324c6b1d379cea07efa0f5ac9c103f36aa62db..c008c175def7fcde159ebb66093bf67e369f2ab1 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -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
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index c8b9bdb2a27c68e3e620881a3d47fd80ff0ef6c6..bec0ee37ad13d5dc1c7074334b5dbec3c45891ff 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -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
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index f9f07a919c1b68f95209096b3a4b9b04d5435bf8..fbf7691cd30e7cf692d2575e5dbfa51706396fc8 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -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
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index 1c848000b2c122f7b2bec72050d709eedb652d18..0965d801c991626f2f3b13326f026e5629984215 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -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
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 499a276bfedd0d2bae5f67a5babd743627a0f3f2..de37dc95c96ce903c8efc70c90105763fdafbc6e 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -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
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index ac7057d3b4a97314196d106cc6c838debc1816d8..f727910e777cd0ea841dc8fc09a6a0e24c5f8631 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -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]
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index fd4e5813b2fd1abfc11580ab4a0e83d319e2fd28..591edfd8291802e7d07ca08f4ab98654a0822711 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -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
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index 7674df3884982a988d64efd5c047e11d22f4e497..1ea242270a25352b7ea2e1db07f3237316014ce1 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -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
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index 54221380a710f897394a6cb214559b47453d468a..be6adaac93aa80f1f9691b95f689afb08e7d548b 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -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
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 89e7dbd47bea075d08ca90f5775c3ce4f5dacd69..b1ebe2392e9565f62732e2046b501aaf634ea822 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -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
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 913fa6b21b631144288108ac77d8916e215b245c..baa27dd8df6e56e4d85a760057155b721c8bcca0 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -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
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 3a03f8492e7247d2b3a3b25ff0cea1eccb886e5f..4e1d1b70c7b2d9e4169fc45ac66cd364af521d39 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -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 {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 171620ae30614f08485aa3f213ae7352c9e6a7a1..00c08409a68e4a1a4c6e0f4274cefe50a22a9d14 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -16,6 +16,8 @@ const defaultSettings = {
showPostFormOnTopOfTl: false,
suggestRecentHashtags: true,
showClockOnHeader: true,
+ useShadow: true,
+ roundedCorners: false,
circleIcons: true,
contrastedAcct: true,
showFullAcct: false,