ぼかし効果の切り替え機能

This commit is contained in:
syuilo
2021-08-11 22:34:45 +09:00
parent aeb24b96eb
commit 0f55e65701
21 changed files with 56 additions and 40 deletions

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -33,6 +33,7 @@
<template #label>{{ $ts.appearance }}</template>
<FormSwitch v-model:value="disableAnimatedMfm">{{ $ts.disableAnimatedMfm }}</FormSwitch>
<FormSwitch v-model:value="reduceAnimation">{{ $ts.reduceUiAnimation }}</FormSwitch>
<FormSwitch v-model:value="useBlurEffect">{{ $ts.useBlurEffect }}</FormSwitch>
<FormSwitch v-model:value="useBlurEffectForModal">{{ $ts.useBlurEffectForModal }}</FormSwitch>
<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
<FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
@@ -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'),

View File

@@ -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;