style(stage-ui): improved callout
This commit is contained in:
@@ -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 || [])]">
|
||||
|
||||
Reference in New Issue
Block a user