diff --git a/CHANGELOG.md b/CHANGELOG.md index b891d336a..7d49d9605 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ### Improvements - ドキュメントの更新 - ドキュメントにchangelogを追加 +- ぼかし効果のオプションを追加 - Vueを3.2.1に更新 - UIの調整 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index a1d0c14ea..9b03c20cd 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -771,6 +771,7 @@ received: "受信" searchResult: "検索結果" hashtags: "ハッシュタグ" troubleshooting: "トラブルシューティング" +useBlurEffect: "UIにぼかし効果を使用" _docs: continueReading: "続きを読む" diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss index 05994ae65..00f40df9b 100644 --- a/src/client/components/form/form.scss +++ b/src/client/components/form/form.scss @@ -32,8 +32,8 @@ margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1); padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding)); background: var(--X17); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); + -webkit-backdrop-filter: var(--blur, blur(10px)); + backdrop-filter: var(--blur, blur(10px)); } ._themeChanging_ ._formLabel { diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue index e6af40e36..1f3593a74 100644 --- a/src/client/components/ui/folder.vue +++ b/src/client/components/ui/folder.vue @@ -102,8 +102,8 @@ export default defineComponent({ background: var(--panel); /* TODO panelの半透明バージョンをプログラマティックに作りたい background: var(--X17); - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(20px); + -webkit-backdrop-filter: var(--blur, blur(8px)); + backdrop-filter: var(--blur, blur(20px)); */ > .title { diff --git a/src/client/init.ts b/src/client/init.ts index e6b308c5f..a4a228da2 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -243,6 +243,14 @@ watch(defaultStore.reactiveState.useBlurEffectForModal, v => { document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none'); }, { immediate: true }); +watch(defaultStore.reactiveState.useBlurEffect, v => { + if (v) { + document.documentElement.style.removeProperty('--blur'); + } else { + document.documentElement.style.setProperty('--blur', 'none'); + } +}, { immediate: true }); + let reloadDialogShowing = false; stream.on('_disconnected_', async () => { if (defaultStore.state.serverDisconnectedBehavior === 'reload') { diff --git a/src/client/pages/channel.vue b/src/client/pages/channel.vue index 1504264af..d725db9e4 100644 --- a/src/client/pages/channel.vue +++ b/src/client/pages/channel.vue @@ -152,8 +152,8 @@ export default defineComponent({ left: 0; width: 100%; height: 100%; - -webkit-backdrop-filter: blur(16px); - backdrop-filter: blur(16px); + -webkit-backdrop-filter: var(--blur, blur(16px)); + backdrop-filter: var(--blur, blur(16px)); background: rgba(0, 0, 0, 0.3); } diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue index 751dccd7a..95ddc1cbd 100644 --- a/src/client/pages/mfm-cheat-sheet.vue +++ b/src/client/pages/mfm-cheat-sheet.vue @@ -333,8 +333,8 @@ export default defineComponent({ top: var(--stickyTop, 0px); padding: 16px; font-weight: bold; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); + -webkit-backdrop-filter: var(--blur, blur(10px)); + backdrop-filter: var(--blur, blur(10px)); background-color: var(--X16); } diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue index cc40d2be9..cfa8107d2 100644 --- a/src/client/pages/settings/general.vue +++ b/src/client/pages/settings/general.vue @@ -33,6 +33,7 @@ {{ $ts.disableAnimatedMfm }} {{ $ts.reduceUiAnimation }} + {{ $ts.useBlurEffect }} {{ $ts.useBlurEffectForModal }} {{ $ts.showGapBetweenNotesInTimeline }} {{ $ts.loadRawImages }} @@ -132,6 +133,7 @@ export default defineComponent({ serverDisconnectedBehavior: defaultStore.makeGetterSetter('serverDisconnectedBehavior'), reduceAnimation: defaultStore.makeGetterSetter('animation', v => !v, v => !v), useBlurEffectForModal: defaultStore.makeGetterSetter('useBlurEffectForModal'), + useBlurEffect: defaultStore.makeGetterSetter('useBlurEffect'), showGapBetweenNotesInTimeline: defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'), disableAnimatedMfm: defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v), useOsNativeEmojis: defaultStore.makeGetterSetter('useOsNativeEmojis'), diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue index 9cf424b12..4145c86d5 100644 --- a/src/client/pages/user/index.vue +++ b/src/client/pages/user/index.vue @@ -613,8 +613,8 @@ export default defineComponent({ position: absolute; top: 12px; right: 12px; - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); + -webkit-backdrop-filter: var(--blur, blur(8px)); + backdrop-filter: var(--blur, blur(8px)); background: rgba(0, 0, 0, 0.2); padding: 8px; border-radius: 24px; diff --git a/src/client/store.ts b/src/client/store.ts index 364d8afd9..4c4a7d93e 100644 --- a/src/client/store.ts +++ b/src/client/store.ts @@ -142,6 +142,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: true }, + useBlurEffect: { + where: 'device', + default: false + }, showFixedPostForm: { where: 'device', default: false diff --git a/src/client/style.scss b/src/client/style.scss index 1253141d3..a3e3b6a6a 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -404,8 +404,8 @@ hr { ._acrylic { background: var(--acrylicPanel); - -webkit-backdrop-filter: blur(15px); - backdrop-filter: blur(15px); + -webkit-backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--blur, blur(15px)); } ._inputSplit { diff --git a/src/client/ui/_common_/sidebar.vue b/src/client/ui/_common_/sidebar.vue index ffa3a67b1..b7b88faea 100644 --- a/src/client/ui/_common_/sidebar.vue +++ b/src/client/ui/_common_/sidebar.vue @@ -374,8 +374,8 @@ export default defineComponent({ padding-top: 8px; padding-bottom: 8px; background: var(--X14); - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); + -webkit-backdrop-filter: var(--blur, blur(8px)); + backdrop-filter: var(--blur, blur(8px)); } &:first-child { diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue index 6d6e302e3..e8275def8 100644 --- a/src/client/ui/chat/index.vue +++ b/src/client/ui/chat/index.vue @@ -373,8 +373,8 @@ export default defineComponent({ position: sticky; top: 0; background: var(--X17); - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); + -webkit-backdrop-filter: var(--blur, blur(8px)); + backdrop-filter: var(--blur, blur(8px)); z-index: 1; color: var(--fgTransparentWeak); diff --git a/src/client/ui/chat/side.vue b/src/client/ui/chat/side.vue index 5ccfad1b7..ebf1cf997 100644 --- a/src/client/ui/chat/side.vue +++ b/src/client/ui/chat/side.vue @@ -130,8 +130,8 @@ export default defineComponent({ width: 100%; font-weight: bold; //background-color: var(--panel); - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); + -webkit-backdrop-filter: var(--blur, blur(32px)); + backdrop-filter: var(--blur, blur(32px)); background-color: var(--header); border-bottom: solid 0.5px var(--divider); box-sizing: border-box; diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue index eaf928069..842a6ff59 100644 --- a/src/client/ui/deck/column.vue +++ b/src/client/ui/deck/column.vue @@ -305,8 +305,8 @@ export default defineComponent({ &.naked { background: var(--acrylicBg) !important; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); + -webkit-backdrop-filter: var(--blur, blur(10px)); + backdrop-filter: var(--blur, blur(10px)); > header { background: transparent; diff --git a/src/client/ui/default.side.vue b/src/client/ui/default.side.vue index dca16cdb3..4d6577961 100644 --- a/src/client/ui/default.side.vue +++ b/src/client/ui/default.side.vue @@ -138,8 +138,8 @@ export default defineComponent({ text-align: center; font-weight: bold; //background-color: var(--panel); - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); + -webkit-backdrop-filter: var(--blur, blur(32px)); + backdrop-filter: var(--blur, blur(32px)); background-color: var(--header); > ._button { diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue index 3fc666c83..23b63114c 100644 --- a/src/client/ui/default.vue +++ b/src/client/ui/default.vue @@ -240,7 +240,7 @@ export default defineComponent({ &.wallpaper { background: var(--wallpaperOverlay); - //backdrop-filter: blur(4px); + //backdrop-filter: var(--blur, blur(4px)); } &.isMobile { @@ -303,8 +303,8 @@ export default defineComponent({ z-index: 1000; top: var(--globalHeaderHeight, 0px); height: $header-height; - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); + -webkit-backdrop-filter: var(--blur, blur(32px)); + backdrop-filter: var(--blur, blur(32px)); background-color: var(--header); border-bottom: solid 0.5px var(--divider); } @@ -380,8 +380,8 @@ export default defineComponent({ display: flex; width: 100%; box-sizing: border-box; - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); + -webkit-backdrop-filter: var(--blur, blur(32px)); + backdrop-filter: var(--blur, blur(32px)); background-color: var(--header); border-top: solid 0.5px var(--divider); diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue index 1e8c4b36d..c49ad730f 100644 --- a/src/client/ui/universal.vue +++ b/src/client/ui/universal.vue @@ -250,7 +250,7 @@ export default defineComponent({ &.wallpaper { background: var(--wallpaperOverlay); - //backdrop-filter: blur(4px); + //backdrop-filter: var(--blur, blur(4px)); } > .contents { @@ -269,8 +269,8 @@ export default defineComponent({ text-align: center; font-weight: bold; //background-color: var(--panel); - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); + -webkit-backdrop-filter: var(--blur, blur(32px)); + backdrop-filter: var(--blur, blur(32px)); background-color: var(--header); //border-bottom: solid 0.5px var(--divider); user-select: none; @@ -341,8 +341,8 @@ export default defineComponent({ display: flex; width: 100%; box-sizing: border-box; - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); + -webkit-backdrop-filter: var(--blur, blur(32px)); + backdrop-filter: var(--blur, blur(32px)); background-color: var(--header); &:not(.navHidden) { diff --git a/src/client/ui/visitor/header.vue b/src/client/ui/visitor/header.vue index 1effadf4f..6d2ebc880 100644 --- a/src/client/ui/visitor/header.vue +++ b/src/client/ui/visitor/header.vue @@ -90,8 +90,8 @@ export default defineComponent({ left: 0; z-index: 1000; line-height: $height; - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); + -webkit-backdrop-filter: var(--blur, blur(32px)); + backdrop-filter: var(--blur, blur(32px)); background-color: var(--X16); > .wide { diff --git a/src/client/ui/visitor/kanban.vue b/src/client/ui/visitor/kanban.vue index ffa7a3d1f..5fbbff3d3 100644 --- a/src/client/ui/visitor/kanban.vue +++ b/src/client/ui/visitor/kanban.vue @@ -122,8 +122,8 @@ export default defineComponent({ background: rgba(0, 0, 0, 0.3); &.transparent { - -webkit-backdrop-filter: blur(12px); - backdrop-filter: blur(12px); + -webkit-backdrop-filter: var(--blur, blur(12px)); + backdrop-filter: var(--blur, blur(12px)); } } @@ -140,8 +140,8 @@ export default defineComponent({ margin: 0 auto; > .panel { - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); + -webkit-backdrop-filter: var(--blur, blur(8px)); + backdrop-filter: var(--blur, blur(8px)); background: rgba(0, 0, 0, 0.5); border-radius: var(--radius); diff --git a/src/client/ui/zen.vue b/src/client/ui/zen.vue index 6e7382b0d..3756ddb5c 100644 --- a/src/client/ui/zen.vue +++ b/src/client/ui/zen.vue @@ -89,8 +89,8 @@ export default defineComponent({ line-height: $header-height; text-align: center; //background-color: var(--panel); - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); + -webkit-backdrop-filter: var(--blur, blur(32px)); + backdrop-filter: var(--blur, blur(32px)); background-color: var(--header); border-bottom: solid 0.5px var(--divider); }