diff options
Diffstat (limited to 'frontend/src/lib/pills/Pill.svelte')
| -rw-r--r-- | frontend/src/lib/pills/Pill.svelte | 29 |
1 files changed, 27 insertions, 2 deletions
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte index 494cbe4..98d9b5a 100644 --- a/frontend/src/lib/pills/Pill.svelte +++ b/frontend/src/lib/pills/Pill.svelte @@ -3,12 +3,13 @@ name: string; tooltip?: string | null; style: string; + highlight?: boolean; } - let { name, tooltip, style }: Props = $props(); + let { name, tooltip, style, highlight = false }: Props = $props(); </script> -<div class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}> +<div class:highlight class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}> {#if style === 'female'} <span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span> {:else if style === 'male'} @@ -36,23 +37,47 @@ @apply border-zinc-700 bg-zinc-700/20 text-zinc-300; } + div.highlight { + @apply transition-colors hover:border-zinc-600 hover:bg-zinc-500/20 hover:text-zinc-200; + } + .female { @apply border-pink-800 bg-pink-800/20 text-pink-200; } + .female.highlight { + @apply hover:border-pink-700 hover:bg-pink-600/20 hover:text-pink-100; + } + .male { @apply border-blue-800 bg-blue-800/20 text-blue-200; } + .male.highlight { + @apply hover:border-blue-700 hover:bg-blue-600/20 hover:text-blue-100; + } + .trans { @apply border-violet-800 bg-violet-800/20 text-violet-200; } + .trans.highlight { + @apply hover:border-violet-600 hover:bg-violet-600/20 hover:text-violet-100; + } + .mixed { @apply border-amber-800 bg-amber-800/20 text-amber-200; } + .mixed.highlight { + @apply hover:border-amber-700 hover:bg-amber-600/20 hover:text-amber-100; + } + .location { @apply border-sky-800 bg-sky-800/20 text-sky-200; } + + .location.highlight { + @apply hover:border-sky-700 hover:bg-sky-600/20 hover:text-sky-100; + } </style> |