mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-17 02:49:01 +01:00
ec1c392f1e
* fix(frontend): 子メニューの最大長調整が行われていない問題を修正 * Update Changelog * fix * changelog * Revert "fix" This reverts commit 39fb326d49eedf484342c78a61c0dba8e223e596. * Revert "fix(frontend): 子メニューの最大長調整が行われていない問題を修正" This reverts commit ea58bf7a53fc8a254b7fbdf222a676e23527358c. * use css * maxHeightをchildから定義するように * use css min
647 lines
17 KiB
Vue
647 lines
17 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<div role="menu" @focusin.passive.stop="() => {}">
|
|
<div
|
|
ref="itemsEl"
|
|
v-hotkey="keymap"
|
|
tabindex="0"
|
|
class="_popup _shadow"
|
|
:class="{
|
|
[$style.root]: true,
|
|
[$style.center]: align === 'center',
|
|
[$style.asDrawer]: asDrawer,
|
|
}"
|
|
:style="{
|
|
width: (width && !asDrawer) ? `${width}px` : '',
|
|
maxHeight: maxHeight ? `min(${maxHeight}px, calc(100dvh - 32px))` : 'calc(100dvh - 32px)',
|
|
}"
|
|
@keydown.stop="() => {}"
|
|
@contextmenu.self.prevent="() => {}"
|
|
>
|
|
<template v-for="item in (items2 ?? [])">
|
|
<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
|
|
<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
|
|
<span style="opacity: 0.7;">{{ item.text }}</span>
|
|
</span>
|
|
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
|
|
<span><MkEllipsis/></span>
|
|
</span>
|
|
<MkA
|
|
v-else-if="item.type === 'link'"
|
|
role="menuitem"
|
|
tabindex="0"
|
|
:class="['_button', $style.item]"
|
|
:to="item.to"
|
|
@click.passive="close(true)"
|
|
@mouseenter.passive="onItemMouseEnter"
|
|
@mouseleave.passive="onItemMouseLeave"
|
|
>
|
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
|
|
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
|
|
<div :class="$style.item_content">
|
|
<span :class="$style.item_content_text">{{ item.text }}</span>
|
|
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
|
|
</div>
|
|
</MkA>
|
|
<a
|
|
v-else-if="item.type === 'a'"
|
|
role="menuitem"
|
|
tabindex="0"
|
|
:class="['_button', $style.item]"
|
|
:href="item.href"
|
|
:target="item.target"
|
|
:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
|
|
:download="item.download"
|
|
@click.passive="close(true)"
|
|
@mouseenter.passive="onItemMouseEnter"
|
|
@mouseleave.passive="onItemMouseLeave"
|
|
>
|
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
|
|
<div :class="$style.item_content">
|
|
<span :class="$style.item_content_text">{{ item.text }}</span>
|
|
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
|
|
</div>
|
|
</a>
|
|
<button
|
|
v-else-if="item.type === 'user'"
|
|
role="menuitem"
|
|
tabindex="0"
|
|
:class="['_button', $style.item, { [$style.active]: item.active }]"
|
|
@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
|
|
@mouseenter.passive="onItemMouseEnter"
|
|
@mouseleave.passive="onItemMouseLeave"
|
|
>
|
|
<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
|
|
<div v-if="item.indicate" :class="$style.item_content">
|
|
<span :class="$style.indicator"><i class="_indicatorCircle"></i></span>
|
|
</div>
|
|
</button>
|
|
<button
|
|
v-else-if="item.type === 'switch'"
|
|
role="menuitemcheckbox"
|
|
tabindex="0"
|
|
:class="['_button', $style.item]"
|
|
:disabled="unref(item.disabled)"
|
|
@click.prevent="switchItem(item)"
|
|
@mouseenter.passive="onItemMouseEnter"
|
|
@mouseleave.passive="onItemMouseLeave"
|
|
>
|
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
|
|
<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
|
|
<div :class="$style.item_content">
|
|
<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
|
|
<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
|
|
</div>
|
|
</button>
|
|
<button
|
|
v-else-if="item.type === 'radio'"
|
|
role="menuitem"
|
|
tabindex="0"
|
|
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
|
|
:disabled="unref(item.disabled)"
|
|
@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
|
|
@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
|
|
@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
|
|
>
|
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
|
|
<div :class="$style.item_content">
|
|
<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
|
|
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
|
|
</div>
|
|
</button>
|
|
<button
|
|
v-else-if="item.type === 'radioOption'"
|
|
role="menuitemradio"
|
|
tabindex="0"
|
|
:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
|
|
@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
|
|
@mouseenter.passive="onItemMouseEnter"
|
|
@mouseleave.passive="onItemMouseLeave"
|
|
>
|
|
<div :class="$style.icon">
|
|
<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
|
|
</div>
|
|
<div :class="$style.item_content">
|
|
<span :class="$style.item_content_text">{{ item.text }}</span>
|
|
</div>
|
|
</button>
|
|
<button
|
|
v-else-if="item.type === 'parent'"
|
|
role="menuitem"
|
|
tabindex="0"
|
|
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
|
|
@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
|
|
@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
|
|
@click.prevent="!preferClick ? null : showChildren(item, $event)"
|
|
>
|
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
|
|
<div :class="$style.item_content">
|
|
<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
|
|
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
|
|
</div>
|
|
</button>
|
|
<button
|
|
v-else role="menuitem"
|
|
tabindex="0"
|
|
:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
|
|
@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
|
|
@mouseenter.passive="onItemMouseEnter"
|
|
@mouseleave.passive="onItemMouseLeave"
|
|
>
|
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
|
|
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
|
|
<div :class="$style.item_content">
|
|
<span :class="$style.item_content_text">{{ item.text }}</span>
|
|
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
|
|
<span>{{ i18n.ts.none }}</span>
|
|
</span>
|
|
</div>
|
|
<div v-if="childMenu">
|
|
<XChild ref="child" :items="childMenu" :targetElement="childTarget!" :rootElement="itemsEl!" @actioned="childActioned" @closed="closeChild"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue';
|
|
import MkSwitchButton from '@/components/MkSwitch.button.vue';
|
|
import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
|
|
import * as os from '@/os.js';
|
|
import { i18n } from '@/i18n.js';
|
|
import { isTouchUsing } from '@/scripts/touch.js';
|
|
import { type Keymap } from '@/scripts/hotkey.js';
|
|
import { isFocusable } from '@/scripts/focus.js';
|
|
import { getNodeOrNull } from '@/scripts/get-dom-node-or-null.js';
|
|
|
|
const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
|
|
</script>
|
|
|
|
<script lang="ts" setup>
|
|
const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
|
|
|
|
const props = defineProps<{
|
|
items: MenuItem[];
|
|
asDrawer?: boolean;
|
|
align?: 'center' | string;
|
|
width?: number;
|
|
maxHeight?: number;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(ev: 'close', actioned?: boolean): void;
|
|
(ev: 'hide'): void;
|
|
}>();
|
|
|
|
const isNestingMenu = inject<boolean>('isNestingMenu', false);
|
|
|
|
const itemsEl = shallowRef<HTMLElement>();
|
|
|
|
const items2 = ref<InnerMenuItem[]>();
|
|
|
|
const child = shallowRef<InstanceType<typeof XChild>>();
|
|
|
|
const keymap = {
|
|
'up|k|shift+tab': {
|
|
allowRepeat: true,
|
|
callback: () => focusUp(),
|
|
},
|
|
'down|j|tab': {
|
|
allowRepeat: true,
|
|
callback: () => focusDown(),
|
|
},
|
|
'esc': {
|
|
allowRepeat: true,
|
|
callback: () => close(false),
|
|
},
|
|
} as const satisfies Keymap;
|
|
|
|
const childShowingItem = ref<MenuItem | null>();
|
|
|
|
let preferClick = isTouchUsing || props.asDrawer;
|
|
|
|
watch(() => props.items, () => {
|
|
const items = [...props.items].filter(item => item !== undefined) as (NonNullable<MenuItem> | MenuPending)[];
|
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
const item = items[i];
|
|
|
|
if ('then' in item) { // if item is Promise
|
|
items[i] = { type: 'pending' };
|
|
item.then(actualItem => {
|
|
if (items2.value?.[i]) items2.value[i] = actualItem;
|
|
});
|
|
}
|
|
}
|
|
|
|
items2.value = items as InnerMenuItem[];
|
|
}, {
|
|
immediate: true,
|
|
});
|
|
|
|
const childMenu = ref<MenuItem[] | null>();
|
|
const childTarget = shallowRef<HTMLElement | null>();
|
|
|
|
function closeChild() {
|
|
childMenu.value = null;
|
|
childShowingItem.value = null;
|
|
}
|
|
|
|
function childActioned() {
|
|
closeChild();
|
|
close(true);
|
|
}
|
|
|
|
let childCloseTimer: null | number = null;
|
|
|
|
function onItemMouseEnter() {
|
|
childCloseTimer = window.setTimeout(() => {
|
|
closeChild();
|
|
}, 300);
|
|
}
|
|
|
|
function onItemMouseLeave() {
|
|
if (childCloseTimer) window.clearTimeout(childCloseTimer);
|
|
}
|
|
|
|
async function showRadioOptions(item: MenuRadio, ev: Event) {
|
|
const children: MenuItem[] = Object.keys(item.options).map<MenuRadioOption>(key => {
|
|
const value = item.options[key];
|
|
return {
|
|
type: 'radioOption',
|
|
text: key,
|
|
action: () => {
|
|
item.ref = value;
|
|
},
|
|
active: computed(() => item.ref === value),
|
|
};
|
|
});
|
|
|
|
if (props.asDrawer) {
|
|
os.popupMenu(children, ev.currentTarget ?? ev.target).finally(() => {
|
|
close(false);
|
|
});
|
|
emit('hide');
|
|
} else {
|
|
childTarget.value = (ev.currentTarget ?? ev.target) as HTMLElement;
|
|
childMenu.value = children;
|
|
childShowingItem.value = item;
|
|
}
|
|
}
|
|
|
|
async function showChildren(item: MenuParent, ev: Event) {
|
|
const children: MenuItem[] = await (async () => {
|
|
if (childrenCache.has(item)) {
|
|
return childrenCache.get(item)!;
|
|
} else {
|
|
if (typeof item.children === 'function') {
|
|
return Promise.resolve(item.children());
|
|
} else {
|
|
return item.children;
|
|
}
|
|
}
|
|
})();
|
|
|
|
childrenCache.set(item, children);
|
|
|
|
if (props.asDrawer) {
|
|
os.popupMenu(children, ev.currentTarget ?? ev.target).finally(() => {
|
|
close(false);
|
|
});
|
|
emit('hide');
|
|
} else {
|
|
childTarget.value = (ev.currentTarget ?? ev.target) as HTMLElement;
|
|
// これでもリアクティビティは保たれる
|
|
childMenu.value = children;
|
|
childShowingItem.value = item;
|
|
}
|
|
}
|
|
|
|
function clicked(fn: MenuAction, ev: MouseEvent, doClose = true) {
|
|
fn(ev);
|
|
|
|
if (!doClose) return;
|
|
close(true);
|
|
}
|
|
|
|
function close(actioned = false) {
|
|
disposeHandlers();
|
|
nextTick(() => {
|
|
closeChild();
|
|
emit('close', actioned);
|
|
});
|
|
}
|
|
|
|
function switchItem(item: MenuSwitch & { ref: any }) {
|
|
if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return;
|
|
item.ref = !item.ref;
|
|
}
|
|
|
|
function focusUp() {
|
|
if (disposed) return;
|
|
if (!itemsEl.value?.contains(document.activeElement)) return;
|
|
|
|
const focusableElements = Array.from(itemsEl.value.children).filter(isFocusable);
|
|
const activeIndex = focusableElements.findIndex(el => el === document.activeElement);
|
|
const targetIndex = (activeIndex !== -1 && activeIndex !== 0) ? (activeIndex - 1) : (focusableElements.length - 1);
|
|
const targetElement = focusableElements.at(targetIndex) ?? itemsEl.value;
|
|
|
|
targetElement.focus();
|
|
}
|
|
|
|
function focusDown() {
|
|
if (disposed) return;
|
|
if (!itemsEl.value?.contains(document.activeElement)) return;
|
|
|
|
const focusableElements = Array.from(itemsEl.value.children).filter(isFocusable);
|
|
const activeIndex = focusableElements.findIndex(el => el === document.activeElement);
|
|
const targetIndex = (activeIndex !== -1 && activeIndex !== (focusableElements.length - 1)) ? (activeIndex + 1) : 0;
|
|
const targetElement = focusableElements.at(targetIndex) ?? itemsEl.value;
|
|
|
|
targetElement.focus();
|
|
}
|
|
|
|
const onGlobalFocusin = (ev: FocusEvent) => {
|
|
if (disposed) return;
|
|
if (itemsEl.value?.parentElement?.contains(getNodeOrNull(ev.target))) return;
|
|
nextTick(() => {
|
|
if (itemsEl.value != null && isFocusable(itemsEl.value)) {
|
|
itemsEl.value.focus({ preventScroll: true });
|
|
nextTick(() => focusDown());
|
|
}
|
|
});
|
|
};
|
|
|
|
const onGlobalMousedown = (ev: MouseEvent) => {
|
|
if (disposed) return;
|
|
if (childTarget.value?.contains(getNodeOrNull(ev.target))) return;
|
|
if (child.value?.checkHit(ev)) return;
|
|
closeChild();
|
|
};
|
|
|
|
const setupHandlers = () => {
|
|
if (!isNestingMenu) {
|
|
document.addEventListener('focusin', onGlobalFocusin, { passive: true });
|
|
}
|
|
document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
|
|
};
|
|
|
|
let disposed = false;
|
|
|
|
const disposeHandlers = () => {
|
|
disposed = true;
|
|
if (!isNestingMenu) {
|
|
document.removeEventListener('focusin', onGlobalFocusin);
|
|
}
|
|
document.removeEventListener('mousedown', onGlobalMousedown);
|
|
};
|
|
|
|
onMounted(() => {
|
|
setupHandlers();
|
|
|
|
if (!isNestingMenu) {
|
|
nextTick(() => itemsEl.value?.focus({ preventScroll: true }));
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
disposeHandlers();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.root {
|
|
padding: 8px 0;
|
|
box-sizing: border-box;
|
|
max-width: 100vw;
|
|
min-width: 200px;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
&.center {
|
|
> .item {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&.asDrawer {
|
|
padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
|
|
width: 100%;
|
|
border-radius: 24px;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
|
|
> .item {
|
|
font-size: 1em;
|
|
padding: 12px 24px;
|
|
|
|
&::before {
|
|
width: calc(100% - 24px);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
> .icon {
|
|
margin-right: 14px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
|
|
> .divider {
|
|
margin: 12px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: 5px 16px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
font-size: 0.9em;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-decoration: none !important;
|
|
color: var(--menuFg, var(--fg));
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
width: calc(100% - 16px);
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: none;
|
|
|
|
&:not(:hover):not(:active)::before {
|
|
outline: var(--focus) solid 2px;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
&:not(:disabled) {
|
|
&:hover,
|
|
&:focus-visible:active,
|
|
&:focus-visible.active {
|
|
color: var(--menuHoverFg, var(--accent));
|
|
|
|
&::before {
|
|
background-color: var(--menuHoverBg, var(--accentedBg));
|
|
}
|
|
}
|
|
|
|
&:not(:focus-visible):active,
|
|
&:not(:focus-visible).active {
|
|
color: var(--menuActiveFg, var(--fgOnAccent));
|
|
|
|
&::before {
|
|
background-color: var(--menuActiveBg, var(--accent));
|
|
}
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&.danger {
|
|
--menuFg: #ff2a2a;
|
|
--menuHoverFg: #fff;
|
|
--menuHoverBg: #ff4242;
|
|
--menuActiveFg: #fff;
|
|
--menuActiveBg: #d42e2e;
|
|
}
|
|
|
|
&.radio {
|
|
--menuActiveFg: var(--accent);
|
|
--menuActiveBg: var(--accentedBg);
|
|
}
|
|
|
|
&.parent {
|
|
--menuActiveFg: var(--accent);
|
|
--menuActiveBg: var(--accentedBg);
|
|
}
|
|
|
|
&.label {
|
|
pointer-events: none;
|
|
font-size: 0.7em;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
&.pending {
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&.none {
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.item_content {
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item_content_text {
|
|
max-width: calc(100vw - 4rem);
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.switchButton {
|
|
margin-left: -2px;
|
|
--height: 1.35em;
|
|
}
|
|
|
|
.switchText {
|
|
margin-left: 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.icon {
|
|
margin-right: 8px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.caret {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.avatar {
|
|
margin-right: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--indicator);
|
|
font-size: 12px;
|
|
animation: global-blink 1s infinite;
|
|
}
|
|
|
|
.divider {
|
|
margin: 8px 0;
|
|
border-top: solid 0.5px var(--divider);
|
|
}
|
|
|
|
.radioIcon {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -0.125em;
|
|
border-radius: 50%;
|
|
border: solid 2px var(--divider);
|
|
background-color: var(--panel);
|
|
|
|
&.radioChecked {
|
|
border-color: var(--accent);
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 50%;
|
|
height: 50%;
|
|
border-radius: 50%;
|
|
background-color: var(--accent);
|
|
}
|
|
}
|
|
}
|
|
</style>
|