feat: 모달 디자인을 변경할 수 있음
This commit is contained in:
parent
725997932c
commit
94d8c20882
|
@ -48,6 +48,9 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
|
||||||
- 알림 채널을 선택할 수 있음
|
- 알림 채널을 선택할 수 있음
|
||||||
- 다음 릴리즈 출시까지 알리지 않도록 설정할 수 있음
|
- 다음 릴리즈 출시까지 알리지 않도록 설정할 수 있음
|
||||||
- Feat: 활동에서 팔로잉, 팔로워 차트를 볼 수 있음
|
- Feat: 활동에서 팔로잉, 팔로워 차트를 볼 수 있음
|
||||||
|
- Feat: 모달 디자인을 변경할 수 있음
|
||||||
|
- 흐림 효과를 활성화하면 디자인이 변경됨
|
||||||
|
- 흐림 효과가 활성화 된 상태에서 '모달 배경색 제거' 옵션을 활성화하면 일부 모달의 디자인이 변경됨
|
||||||
- Enhance: 그룹 대화에서 읽음 표시를 개선
|
- Enhance: 그룹 대화에서 읽음 표시를 개선
|
||||||
- Enhance: cli, bios 페이지 개선
|
- Enhance: cli, bios 페이지 개선
|
||||||
- Enhance: 서버와 연결이 끊겼을 때 stream indicator가 즉시 표시되지 않도록 (MisskeyIO/misskey#172)
|
- Enhance: 서버와 연결이 끊겼을 때 stream indicator가 즉시 표시되지 않도록 (MisskeyIO/misskey#172)
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
---
|
---
|
||||||
_lang_: "English"
|
_lang_: "English"
|
||||||
|
removeModalBgColorForBlur: "Remove modal background color"
|
||||||
skipThisVersion: "Skip this release"
|
skipThisVersion: "Skip this release"
|
||||||
enableReceivePrerelease: "Get notified of pre-release versions"
|
enableReceivePrerelease: "Get notified of pre-release versions"
|
||||||
youAreRunningBetaClient: "Unreleased version of CherryPick in use!"
|
youAreRunningBetaClient: "Unreleased version of CherryPick in use!"
|
||||||
|
|
1
locales/index.d.ts
vendored
1
locales/index.d.ts
vendored
|
@ -3,6 +3,7 @@
|
||||||
// Do not edit this file directly.
|
// Do not edit this file directly.
|
||||||
export interface Locale {
|
export interface Locale {
|
||||||
"_lang_": string;
|
"_lang_": string;
|
||||||
|
"removeModalBgColorForBlur": string;
|
||||||
"skipThisVersion": string;
|
"skipThisVersion": string;
|
||||||
"enableReceivePrerelease": string;
|
"enableReceivePrerelease": string;
|
||||||
"youAreRunningBetaClient": string;
|
"youAreRunningBetaClient": string;
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
_lang_: "日本語"
|
_lang_: "日本語"
|
||||||
|
|
||||||
|
removeModalBgColorForBlur: "モーダル背景色を削除"
|
||||||
skipThisVersion: "このリリースをスキップする"
|
skipThisVersion: "このリリースをスキップする"
|
||||||
enableReceivePrerelease: "プレリリース版の通知を受け取る"
|
enableReceivePrerelease: "プレリリース版の通知を受け取る"
|
||||||
youAreRunningBetaClient: "未発売バージョンのCherryPickを利用しています!"
|
youAreRunningBetaClient: "未発売バージョンのCherryPickを利用しています!"
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
---
|
---
|
||||||
_lang_: "한국어"
|
_lang_: "한국어"
|
||||||
|
removeModalBgColorForBlur: "모달 배경색 제거"
|
||||||
skipThisVersion: "이 릴리즈 건너뛰기"
|
skipThisVersion: "이 릴리즈 건너뛰기"
|
||||||
enableReceivePrerelease: "출시 전 버전 알림 받기"
|
enableReceivePrerelease: "출시 전 버전 알림 받기"
|
||||||
youAreRunningBetaClient: "아직 출시되지 않은 버전의 CherryPick를 이용하고 있어요!"
|
youAreRunningBetaClient: "아직 출시되지 않은 버전의 CherryPick를 이용하고 있어요!"
|
||||||
|
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div ref="rootEl" :class="$style.root" class="_popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
|
<div ref="rootEl" :class="[$style.root, { _popupAcrylic: defaultStore.state.useBlurEffect, _popup: !defaultStore.state.useBlurEffect }]" class="_shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
|
||||||
<ol v-if="type === 'user'" ref="suggests" :class="$style.list">
|
<ol v-if="type === 'user'" ref="suggests" :class="$style.list">
|
||||||
<li v-for="user in users" tabindex="-1" :class="$style.item" @click="complete(type, user)" @keydown="onKeydown">
|
<li v-for="user in users" tabindex="-1" :class="$style.item" @click="complete(type, user)" @keydown="onKeydown">
|
||||||
<img :class="$style.avatar" :src="user.avatarUrl"/>
|
<img :class="$style.avatar" :src="user.avatarUrl"/>
|
||||||
|
|
|
@ -19,8 +19,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
>
|
>
|
||||||
<MkEmojiPicker
|
<MkEmojiPicker
|
||||||
ref="picker"
|
ref="picker"
|
||||||
class="_popup _shadow"
|
class="_shadow"
|
||||||
:class="{ [$style.drawer]: type === 'drawer' }"
|
:class="{ [$style.drawer]: type === 'drawer', _popupAcrylic: defaultStore.state.useBlurEffect, _popup: !defaultStore.state.useBlurEffect }"
|
||||||
:showPinned="showPinned"
|
:showPinned="showPinned"
|
||||||
:asReactionPicker="asReactionPicker"
|
:asReactionPicker="asReactionPicker"
|
||||||
:asDrawer="type === 'drawer'"
|
:asDrawer="type === 'drawer'"
|
||||||
|
|
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
|
<MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
|
||||||
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
|
<div class="szkkfdyq _shadow" :class="{ asDrawer: type === 'drawer', _popupAcrylic: defaultStore.state.useBlurEffect, _popup: !defaultStore.state.useBlurEffect }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<template v-for="item in items">
|
<template v-for="item in items">
|
||||||
<button v-if="item.action" :key="item.text" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
|
<button v-if="item.action" :key="item.text" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
|
||||||
|
|
|
@ -7,8 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div role="menu">
|
<div role="menu">
|
||||||
<div
|
<div
|
||||||
ref="itemsEl" v-hotkey="keymap" v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''"
|
ref="itemsEl" v-hotkey="keymap" v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''"
|
||||||
class="_popup _shadow"
|
class="_shadow"
|
||||||
:class="[$style.root, { [$style.center]: align === 'center', [$style.asDrawer]: asDrawer }]"
|
:class="[$style.root, { [$style.center]: align === 'center', [$style.asDrawer]: asDrawer, _popupAcrylic: defaultStore.state.useBlurEffect, _popup: !defaultStore.state.useBlurEffect }]"
|
||||||
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
|
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
|
||||||
@contextmenu.self="e => e.preventDefault()"
|
@contextmenu.self="e => e.preventDefault()"
|
||||||
>
|
>
|
||||||
|
@ -74,7 +74,7 @@ const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ColdDeviceStorage } from '@/store.js';
|
import { ColdDeviceStorage, defaultStore } from '@/store.js';
|
||||||
const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
|
const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
|
|
|
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
:duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
|
:duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
|
||||||
>
|
>
|
||||||
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
|
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
|
||||||
<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
|
<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, [$style.removeModalBgColorForBlur]: defaultStore.state.useBlurEffectForModal && defaultStore.state.removeModalBgColorForBlur }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
|
||||||
<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
|
<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
|
||||||
<slot :max-height="maxHeight" :type="type"></slot>
|
<slot :max-height="maxHeight" :type="type"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
@ -479,4 +479,8 @@ defineExpose({
|
||||||
backdrop-filter: none;
|
backdrop-filter: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.removeModalBgColorForBlur {
|
||||||
|
background: initial !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
|
:class="[$style.root, { [$style.modal]: modal, _popup: modal && (!defaultStore.state.useBlurEffect || !defaultStore.state.useBlurEffectForModal || !defaultStore.state.removeModalBgColorForBlur), _popupAcrylic: modal && defaultStore.state.useBlurEffect && defaultStore.state.useBlurEffectForModal && defaultStore.state.removeModalBgColorForBlur }]"
|
||||||
@dragover.stop="onDragover"
|
@dragover.stop="onDragover"
|
||||||
@dragenter="onDragenter"
|
@dragenter="onDragenter"
|
||||||
@dragleave="onDragleave"
|
@dragleave="onDragleave"
|
||||||
|
|
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
|
:class="[$style.root, { [$style.modal]: modal, _popup: modal && (!defaultStore.state.useBlurEffect || !defaultStore.state.useBlurEffectForModal || !defaultStore.state.removeModalBgColorForBlur), _popupAcrylic: modal && defaultStore.state.useBlurEffect && defaultStore.state.useBlurEffectForModal && defaultStore.state.removeModalBgColorForBlur }]"
|
||||||
@dragover.stop="onDragover"
|
@dragover.stop="onDragover"
|
||||||
@dragenter="onDragenter"
|
@dragenter="onDragenter"
|
||||||
@dragleave="onDragleave"
|
@dragleave="onDragleave"
|
||||||
|
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<template>
|
<template>
|
||||||
<div :class="$style.root" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
|
<div :class="$style.root" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
|
||||||
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" @afterLeave="emit('closed')">
|
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" @afterLeave="emit('closed')">
|
||||||
<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" :showActions="false"/>
|
<MkUrlPreview v-if="showing" class="_shadow" :class="{ _popupAcrylic: defaultStore.state.useBlurEffect, _popup: !defaultStore.state.useBlurEffect }" :url="url" :showActions="false"/>
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
:leaveToClass="defaultStore.state.animation ? $style.transition_popup_leaveTo : ''"
|
:leaveToClass="defaultStore.state.animation ? $style.transition_popup_leaveTo : ''"
|
||||||
appear @afterLeave="emit('closed')"
|
appear @afterLeave="emit('closed')"
|
||||||
>
|
>
|
||||||
<div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
|
<div v-if="showing" :class="[$style.root, { _popupAcrylic: defaultStore.state.useBlurEffect, _popup: !defaultStore.state.useBlurEffect }]" class="_shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
|
||||||
<div v-if="user != null">
|
<div v-if="user != null">
|
||||||
<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
|
<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
|
||||||
<span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
|
<span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
|
||||||
|
|
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MkModal ref="modal" v-slot="{ type }" :zPriority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
|
<MkModal ref="modal" v-slot="{ type }" :zPriority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
|
||||||
<div class="_popup" :class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }">
|
<div :class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer', _popupAcrylic: defaultStore.state.useBlurEffect, _popup: !defaultStore.state.useBlurEffect }">
|
||||||
<div :class="[$style.label, $style.item]">
|
<div :class="[$style.label, $style.item]">
|
||||||
{{ i18n.ts.visibility }}
|
{{ i18n.ts.visibility }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -46,6 +46,7 @@ import { nextTick } from 'vue';
|
||||||
import * as Misskey from 'cherrypick-js';
|
import * as Misskey from 'cherrypick-js';
|
||||||
import MkModal from '@/components/MkModal.vue';
|
import MkModal from '@/components/MkModal.vue';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
|
import { defaultStore } from '@/store.js';
|
||||||
|
|
||||||
const modal = $shallowRef<InstanceType<typeof MkModal>>();
|
const modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||||
|
|
||||||
|
|
|
@ -130,7 +130,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div class="_gaps_m">
|
<div class="_gaps_m">
|
||||||
<div class="_gaps_s">
|
<div class="_gaps_s">
|
||||||
<MkSwitch v-model="reduceAnimation">{{ i18n.ts.reduceUiAnimation }}</MkSwitch>
|
<MkSwitch v-model="reduceAnimation">{{ i18n.ts.reduceUiAnimation }}</MkSwitch>
|
||||||
<MkSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}</MkSwitch>
|
<MkSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}<template #caption>{{ i18n.ts.useBlurEffectDescription }}</template></MkSwitch>
|
||||||
|
<MkSwitch v-if="useBlurEffect" v-model="removeModalBgColorForBlur">{{ i18n.ts.removeModalBgColorForBlur }}</MkSwitch>
|
||||||
<MkSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</MkSwitch>
|
<MkSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</MkSwitch>
|
||||||
<MkSwitch v-model="disableShowingAnimatedImages">{{ i18n.ts.disableShowingAnimatedImages }}<template #caption><i class="ti ti-alert-triangle" style="color: var(--warn);"></i> {{ i18n.ts.disableShowingAnimatedImagesDescription }}</template></MkSwitch>
|
<MkSwitch v-model="disableShowingAnimatedImages">{{ i18n.ts.disableShowingAnimatedImages }}<template #caption><i class="ti ti-alert-triangle" style="color: var(--warn);"></i> {{ i18n.ts.disableShowingAnimatedImagesDescription }}</template></MkSwitch>
|
||||||
<MkSelect v-if="!disableShowingAnimatedImages" v-model="showingAnimatedImages" style="margin-left: 44px;">
|
<MkSelect v-if="!disableShowingAnimatedImages" v-model="showingAnimatedImages" style="margin-left: 44px;">
|
||||||
|
@ -331,6 +332,7 @@ const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'
|
||||||
const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
|
const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
|
||||||
const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
|
const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
|
||||||
const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
|
const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
|
||||||
|
const removeModalBgColorForBlur = computed(defaultStore.makeGetterSetter('removeModalBgColorForBlur'));
|
||||||
const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
|
const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
|
||||||
const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm'));
|
const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm'));
|
||||||
const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm'));
|
const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm'));
|
||||||
|
@ -404,6 +406,7 @@ watch([
|
||||||
lang,
|
lang,
|
||||||
useBlurEffect,
|
useBlurEffect,
|
||||||
useBlurEffectForModal,
|
useBlurEffectForModal,
|
||||||
|
removeModalBgColorForBlur,
|
||||||
// fontSize,
|
// fontSize,
|
||||||
useBoldFont,
|
useBoldFont,
|
||||||
useSystemFont,
|
useSystemFont,
|
||||||
|
|
|
@ -250,6 +250,10 @@ export const defaultStore = markRaw(new Storage('base', {
|
||||||
where: 'device',
|
where: 'device',
|
||||||
default: !/mobile|iphone|android/.test(navigator.userAgent.toLowerCase()), // 循環参照するのでdevice-kind.tsは参照できない
|
default: !/mobile|iphone|android/.test(navigator.userAgent.toLowerCase()), // 循環参照するのでdevice-kind.tsは参照できない
|
||||||
},
|
},
|
||||||
|
removeModalBgColorForBlur: {
|
||||||
|
where: 'device',
|
||||||
|
default: !/mobile|iphone|android/.test(navigator.userAgent.toLowerCase()), // 循環参照するのでdevice-kind.tsは参照できない
|
||||||
|
},
|
||||||
showFixedPostForm: {
|
showFixedPostForm: {
|
||||||
where: 'device',
|
where: 'device',
|
||||||
default: false,
|
default: false,
|
||||||
|
|
|
@ -421,6 +421,14 @@ hr {
|
||||||
contain: content;
|
contain: content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
._popupAcrylic {
|
||||||
|
background: var(--acrylicPanel);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
contain: content;
|
||||||
|
-webkit-backdrop-filter: var(--blur, blur(5px));
|
||||||
|
backdrop-filter: var(--blur, blur(5px));
|
||||||
|
}
|
||||||
|
|
||||||
._acrylic {
|
._acrylic {
|
||||||
background: var(--acrylicPanel);
|
background: var(--acrylicPanel);
|
||||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
|
|
Loading…
Reference in a new issue