You've already forked AstralRinth
forked from didirus/AstralRinth
a8630e93bc
* Redesign report form and prevent duplicate reports * Fix lint * Add malware evidence notice to report form * Fix lint
50 lines
1.0 KiB
Vue
50 lines
1.0 KiB
Vue
<template>
|
|
<div :style="colorClasses" class="radial-header relative pb-1" v-bind="$attrs">
|
|
<slot />
|
|
</div>
|
|
<div class="radial-header-divider" />
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
defineOptions({
|
|
inheritAttrs: false,
|
|
})
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'gray'
|
|
}>(),
|
|
{
|
|
color: 'brand',
|
|
},
|
|
)
|
|
|
|
const colorClasses = computed(
|
|
() =>
|
|
`--_radial-bg: var(--color-${props.color}-highlight);--_radial-border: var(--color-${props.color});`,
|
|
)
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.radial-header {
|
|
background-image: radial-gradient(50% 100% at 50% 100%, var(--_radial-bg) 10%, #ffffff00 100%);
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
#ffffff00 0%,
|
|
var(--_radial-border) 50%,
|
|
#ffffff00 100%
|
|
);
|
|
width: 100%;
|
|
height: 1px;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
</style>
|