Skip to content
This repository was archived by the owner on Feb 5, 2024. It is now read-only.

Commit 0f55e65

Browse files
syuilosyuilo
committed
ぼかし効果の切り替え機能
1 parent aeb24b9 commit 0f55e65

21 files changed

+56
-40
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
### Improvements
44
- ドキュメントの更新
55
- ドキュメントにchangelogを追加
6+
- ぼかし効果のオプションを追加
67
- Vueを3.2.1に更新
78
- UIの調整
89

‎locales/ja-JP.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -771,6 +771,7 @@ received: "受信"
771771
searchResult: "検索結果"
772772
hashtags: "ハッシュタグ"
773773
troubleshooting: "トラブルシューティング"
774+
useBlurEffect: "UIにぼかし効果を使用"
774775

775776
_docs:
776777
continueReading: "続きを読む"

‎src/client/components/form/form.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
3333
padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding));
3434
background: var(--X17);
35-
-webkit-backdrop-filter: blur(10px);
36-
backdrop-filter: blur(10px);
35+
-webkit-backdrop-filter: var(--blur, blur(10px));
36+
backdrop-filter: var(--blur, blur(10px));
3737
}
3838

3939
._themeChanging_ ._formLabel {

‎src/client/components/ui/folder.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ export default defineComponent({
102102
background: var(--panel);
103103
/* TODO panelの半透明バージョンをプログラマティックに作りたい
104104
background: var(--X17);
105-
-webkit-backdrop-filter: blur(8px);
106-
backdrop-filter: blur(20px);
105+
-webkit-backdrop-filter: var(--blur, blur(8px));
106+
backdrop-filter: var(--blur, blur(20px));
107107
*/
108108
109109
> .title {

‎src/client/init.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,14 @@ watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
243243
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
244244
}, { immediate: true });
245245

246+
watch(defaultStore.reactiveState.useBlurEffect, v => {
247+
if (v) {
248+
document.documentElement.style.removeProperty('--blur');
249+
} else {
250+
document.documentElement.style.setProperty('--blur', 'none');
251+
}
252+
}, { immediate: true });
253+
246254
let reloadDialogShowing = false;
247255
stream.on('_disconnected_', async () => {
248256
if (defaultStore.state.serverDisconnectedBehavior === 'reload') {

‎src/client/pages/channel.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,8 @@ export default defineComponent({
152152
left: 0;
153153
width: 100%;
154154
height: 100%;
155-
-webkit-backdrop-filter: blur(16px);
156-
backdrop-filter: blur(16px);
155+
-webkit-backdrop-filter: var(--blur, blur(16px));
156+
backdrop-filter: var(--blur, blur(16px));
157157
background: rgba(0, 0, 0, 0.3);
158158
}
159159

‎src/client/pages/mfm-cheat-sheet.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -333,8 +333,8 @@ export default defineComponent({
333333
top: var(--stickyTop, 0px);
334334
padding: 16px;
335335
font-weight: bold;
336-
-webkit-backdrop-filter: blur(10px);
337-
backdrop-filter: blur(10px);
336+
-webkit-backdrop-filter: var(--blur, blur(10px));
337+
backdrop-filter: var(--blur, blur(10px));
338338
background-color: var(--X16);
339339
}
340340

‎src/client/pages/settings/general.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<template #label>{{ $ts.appearance }}</template>
3434
<FormSwitch v-model:value="disableAnimatedMfm">{{ $ts.disableAnimatedMfm }}</FormSwitch>
3535
<FormSwitch v-model:value="reduceAnimation">{{ $ts.reduceUiAnimation }}</FormSwitch>
36+
<FormSwitch v-model:value="useBlurEffect">{{ $ts.useBlurEffect }}</FormSwitch>
3637
<FormSwitch v-model:value="useBlurEffectForModal">{{ $ts.useBlurEffectForModal }}</FormSwitch>
3738
<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
3839
<FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
@@ -132,6 +133,7 @@ export default defineComponent({
132133
serverDisconnectedBehavior: defaultStore.makeGetterSetter('serverDisconnectedBehavior'),
133134
reduceAnimation: defaultStore.makeGetterSetter('animation', v => !v, v => !v),
134135
useBlurEffectForModal: defaultStore.makeGetterSetter('useBlurEffectForModal'),
136+
useBlurEffect: defaultStore.makeGetterSetter('useBlurEffect'),
135137
showGapBetweenNotesInTimeline: defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'),
136138
disableAnimatedMfm: defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v),
137139
useOsNativeEmojis: defaultStore.makeGetterSetter('useOsNativeEmojis'),

‎src/client/pages/user/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -613,8 +613,8 @@ export default defineComponent({
613613
position: absolute;
614614
top: 12px;
615615
right: 12px;
616-
-webkit-backdrop-filter: blur(8px);
617-
backdrop-filter: blur(8px);
616+
-webkit-backdrop-filter: var(--blur, blur(8px));
617+
backdrop-filter: var(--blur, blur(8px));
618618
background: rgba(0, 0, 0, 0.2);
619619
padding: 8px;
620620
border-radius: 24px;

‎src/client/store.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,10 @@ export const defaultStore = markRaw(new Storage('base', {
142142
where: 'device',
143143
default: true
144144
},
145+
useBlurEffect: {
146+
where: 'device',
147+
default: false
148+
},
145149
showFixedPostForm: {
146150
where: 'device',
147151
default: false

‎src/client/style.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -404,8 +404,8 @@ hr {
404404

405405
._acrylic {
406406
background: var(--acrylicPanel);
407-
-webkit-backdrop-filter: blur(15px);
408-
backdrop-filter: blur(15px);
407+
-webkit-backdrop-filter: var(--blur, blur(15px));
408+
backdrop-filter: var(--blur, blur(15px));
409409
}
410410

411411
._inputSplit {

‎src/client/ui/_common_/sidebar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -374,8 +374,8 @@ export default defineComponent({
374374
padding-top: 8px;
375375
padding-bottom: 8px;
376376
background: var(--X14);
377-
-webkit-backdrop-filter: blur(8px);
378-
backdrop-filter: blur(8px);
377+
-webkit-backdrop-filter: var(--blur, blur(8px));
378+
backdrop-filter: var(--blur, blur(8px));
379379
}
380380
381381
&:first-child {

‎src/client/ui/chat/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -373,8 +373,8 @@ export default defineComponent({
373373
position: sticky;
374374
top: 0;
375375
background: var(--X17);
376-
-webkit-backdrop-filter: blur(8px);
377-
backdrop-filter: blur(8px);
376+
-webkit-backdrop-filter: var(--blur, blur(8px));
377+
backdrop-filter: var(--blur, blur(8px));
378378
z-index: 1;
379379
color: var(--fgTransparentWeak);
380380

‎src/client/ui/chat/side.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@ export default defineComponent({
130130
width: 100%;
131131
font-weight: bold;
132132
//background-color: var(--panel);
133-
-webkit-backdrop-filter: blur(32px);
134-
backdrop-filter: blur(32px);
133+
-webkit-backdrop-filter: var(--blur, blur(32px));
134+
backdrop-filter: var(--blur, blur(32px));
135135
background-color: var(--header);
136136
border-bottom: solid 0.5px var(--divider);
137137
box-sizing: border-box;

‎src/client/ui/deck/column.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -305,8 +305,8 @@ export default defineComponent({
305305
306306
&.naked {
307307
background: var(--acrylicBg) !important;
308-
-webkit-backdrop-filter: blur(10px);
309-
backdrop-filter: blur(10px);
308+
-webkit-backdrop-filter: var(--blur, blur(10px));
309+
backdrop-filter: var(--blur, blur(10px));
310310
311311
> header {
312312
background: transparent;

‎src/client/ui/default.side.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ export default defineComponent({
138138
text-align: center;
139139
font-weight: bold;
140140
//background-color: var(--panel);
141-
-webkit-backdrop-filter: blur(32px);
142-
backdrop-filter: blur(32px);
141+
-webkit-backdrop-filter: var(--blur, blur(32px));
142+
backdrop-filter: var(--blur, blur(32px));
143143
background-color: var(--header);
144144
145145
> ._button {

‎src/client/ui/default.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ export default defineComponent({
240240
241241
&.wallpaper {
242242
background: var(--wallpaperOverlay);
243-
//backdrop-filter: blur(4px);
243+
//backdrop-filter: var(--blur, blur(4px));
244244
}
245245
246246
&.isMobile {
@@ -303,8 +303,8 @@ export default defineComponent({
303303
z-index: 1000;
304304
top: var(--globalHeaderHeight, 0px);
305305
height: $header-height;
306-
-webkit-backdrop-filter: blur(32px);
307-
backdrop-filter: blur(32px);
306+
-webkit-backdrop-filter: var(--blur, blur(32px));
307+
backdrop-filter: var(--blur, blur(32px));
308308
background-color: var(--header);
309309
border-bottom: solid 0.5px var(--divider);
310310
}
@@ -380,8 +380,8 @@ export default defineComponent({
380380
display: flex;
381381
width: 100%;
382382
box-sizing: border-box;
383-
-webkit-backdrop-filter: blur(32px);
384-
backdrop-filter: blur(32px);
383+
-webkit-backdrop-filter: var(--blur, blur(32px));
384+
backdrop-filter: var(--blur, blur(32px));
385385
background-color: var(--header);
386386
border-top: solid 0.5px var(--divider);
387387

‎src/client/ui/universal.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ export default defineComponent({
250250
251251
&.wallpaper {
252252
background: var(--wallpaperOverlay);
253-
//backdrop-filter: blur(4px);
253+
//backdrop-filter: var(--blur, blur(4px));
254254
}
255255
256256
> .contents {
@@ -269,8 +269,8 @@ export default defineComponent({
269269
text-align: center;
270270
font-weight: bold;
271271
//background-color: var(--panel);
272-
-webkit-backdrop-filter: blur(32px);
273-
backdrop-filter: blur(32px);
272+
-webkit-backdrop-filter: var(--blur, blur(32px));
273+
backdrop-filter: var(--blur, blur(32px));
274274
background-color: var(--header);
275275
//border-bottom: solid 0.5px var(--divider);
276276
user-select: none;
@@ -341,8 +341,8 @@ export default defineComponent({
341341
display: flex;
342342
width: 100%;
343343
box-sizing: border-box;
344-
-webkit-backdrop-filter: blur(32px);
345-
backdrop-filter: blur(32px);
344+
-webkit-backdrop-filter: var(--blur, blur(32px));
345+
backdrop-filter: var(--blur, blur(32px));
346346
background-color: var(--header);
347347
348348
&:not(.navHidden) {

‎src/client/ui/visitor/header.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ export default defineComponent({
9090
left: 0;
9191
z-index: 1000;
9292
line-height: $height;
93-
-webkit-backdrop-filter: blur(32px);
94-
backdrop-filter: blur(32px);
93+
-webkit-backdrop-filter: var(--blur, blur(32px));
94+
backdrop-filter: var(--blur, blur(32px));
9595
background-color: var(--X16);
9696
9797
> .wide {

‎src/client/ui/visitor/kanban.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,8 @@ export default defineComponent({
122122
background: rgba(0, 0, 0, 0.3);
123123
124124
&.transparent {
125-
-webkit-backdrop-filter: blur(12px);
126-
backdrop-filter: blur(12px);
125+
-webkit-backdrop-filter: var(--blur, blur(12px));
126+
backdrop-filter: var(--blur, blur(12px));
127127
}
128128
}
129129
@@ -140,8 +140,8 @@ export default defineComponent({
140140
margin: 0 auto;
141141
142142
> .panel {
143-
-webkit-backdrop-filter: blur(8px);
144-
backdrop-filter: blur(8px);
143+
-webkit-backdrop-filter: var(--blur, blur(8px));
144+
backdrop-filter: var(--blur, blur(8px));
145145
background: rgba(0, 0, 0, 0.5);
146146
border-radius: var(--radius);
147147

‎src/client/ui/zen.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@ export default defineComponent({
8989
line-height: $header-height;
9090
text-align: center;
9191
//background-color: var(--panel);
92-
-webkit-backdrop-filter: blur(32px);
93-
backdrop-filter: blur(32px);
92+
-webkit-backdrop-filter: var(--blur, blur(32px));
93+
backdrop-filter: var(--blur, blur(32px));
9494
background-color: var(--header);
9595
border-bottom: solid 0.5px var(--divider);
9696
}

0 commit comments

Comments
 (0)