style(stage-ui): improved callout

This commit is contained in:
Neko Ayaka
2025-08-11 02:57:42 +08:00
parent 33938578f5
commit c3b804a23d
@@ -15,8 +15,8 @@ const themeClasses: Record<ThemeVariant, {
primary: {
container: [
'text-neutral-700/80 dark:text-neutral-300/80',
'bg-primary-50/60 dark:bg-primary-50/10 backdrop-blur-md',
`before:bg-primary-200 dark:bg-primary-900/10 before:content-[''] before:dark:bg-primary-900`,
'bg-primary-50/60 dark:bg-primary-900/25 backdrop-blur-md',
`before:bg-primary-200 before:content-[''] before:dark:bg-primary-900`,
],
label: [
'text-primary-500 dark:text-primary-400 font-semibold',
@@ -25,8 +25,8 @@ const themeClasses: Record<ThemeVariant, {
lime: {
container: [
'text-neutral-700/80 dark:text-neutral-300/80',
'bg-lime-50/60 dark:bg-lime-50/10 backdrop-blur-md',
`before:bg-lime-200 dark:bg-lime-900/10 before:content-[''] before:dark:bg-lime-900`,
'bg-lime-50/60 dark:bg-lime-900/25 backdrop-blur-md',
`before:bg-lime-200 before:content-[''] before:dark:bg-lime-900`,
],
label: [
'text-lime-500 dark:text-lime-400 font-semibold',
@@ -35,8 +35,8 @@ const themeClasses: Record<ThemeVariant, {
violet: {
container: [
'text-neutral-700/80 dark:text-neutral-300/80',
'bg-violet-50/60 dark:bg-violet-50/10 backdrop-blur-md',
`before:bg-violet-200 dark:bg-violet-900/10 before:content-[''] before:dark:bg-violet-900`,
'bg-violet-50/60 dark:bg-violet-900/25 backdrop-blur-md',
`before:bg-violet-200 before:content-[''] before:dark:bg-violet-900`,
],
label: [
'text-violet-500 dark:text-violet-400 font-semibold',
@@ -45,8 +45,8 @@ const themeClasses: Record<ThemeVariant, {
orange: {
container: [
'text-neutral-700/80 dark:text-neutral-300/80',
'bg-orange-50/70 dark:bg-orange-50/10 backdrop-blur-md',
`before:bg-orange-200 dark:bg-orange-900/10 before:content-[''] before:dark:bg-orange-900`,
'bg-orange-50/70 dark:bg-orange-900/25 backdrop-blur-md',
`before:bg-orange-200 before:content-[''] before:dark:bg-orange-900`,
],
label: [
'text-orange-500 dark:text-orange-400 font-semibold',
@@ -57,14 +57,14 @@ const themeClasses: Record<ThemeVariant, {
<template>
<div
relative mb-4
relative
flex flex-col gap-1
overflow-hidden rounded-lg
py="2.5" pl="6.5" pr-3
py="2.5" pl="5" pr-3
:class="[
...themeClasses[props.theme || 'violet'].container,
// eslint-disable-next-line vue/prefer-separate-static-class
'before-position-absolute before:left-3 before:right-0 before:h-[calc(100%-2rem)] before:top-50% before:translate-y--50% before:w-1 before:rounded-full',
'before-position-absolute before:left-2 before:right-0 before:h-[calc(100%-1rem)] before:top-50% before:translate-y--50% before:w-1 before:rounded-full',
]"
>
<div text="font-semibold" :class="[...(themeClasses[props.theme || 'violet'].label || [])]">