diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 11dd76d0e6..6ae38d45fd 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 0280f07a61..e71983f821 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 670be422fe..80faae0d42 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 312a7ed56e..cf10ea0f56 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -60,6 +60,8 @@
+
+
@@ -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 75324c6b1d..c008c175de 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 c8b9bdb2a2..bec0ee37ad 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 @@
-