You've already forked AstralRinth
forked from didirus/AstralRinth
2aabcf36ee
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const emit = defineEmits<{
|
|
(e: 'click'): void
|
|
}>()
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
tooltip?: string
|
|
highlighted?: boolean
|
|
}>(),
|
|
{
|
|
tooltip: undefined,
|
|
highlighted: false,
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
v-tooltip="tooltip"
|
|
class="block border-0 m-0 p-0 bg-transparent group cursor-pointer"
|
|
:aria-label="tooltip"
|
|
@click="emit('click')"
|
|
>
|
|
<span
|
|
:class="[
|
|
'block rounded-lg group-active:scale-95 transition-all border-2 relative',
|
|
highlighted
|
|
? 'border-brand highlighted-glow'
|
|
: 'border-transparent brightness-95 group-hover:brightness-100',
|
|
]"
|
|
>
|
|
<span class="block p-[3px] rounded-lg bg-button-bg">
|
|
<span
|
|
class="flex flex-col p-4 items-center justify-center aspect-[10/16] w-[60px] min-h-[96px] rounded-[5px] bg-black/10 relative overflow-hidden text-primary z-10"
|
|
>
|
|
<div class="mb-1">
|
|
<slot name="icon"></slot>
|
|
</div>
|
|
<span class="text-xs">
|
|
<slot></slot>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.highlighted-glow::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@supports (background-color: color-mix(in srgb, transparent, transparent)) {
|
|
.highlighted-glow::before {
|
|
box-shadow: inset 0 0 2px 2px color-mix(in srgb, var(--color-brand), transparent 10%);
|
|
}
|
|
}
|
|
</style>
|