Fix: hacer visible el indicador animado de tabs
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s

Cambios realizados:
- Tabs inactivos ahora tienen fondo transparente en lugar de #1c140c
- Indicador tiene z-10 para estar por encima del fondo
- Labels tienen z-20 para estar por encima del indicador
- Hover de tabs inactivos usa bg semi-transparente (#2a1f14/50)
- Agregada transición suave de colores (transition-colors duration-200)

Esto soluciona el problema donde el badge color cobre se ocultaba
durante la animación de deslizamiento entre tabs.
This commit is contained in:
2025-10-30 11:21:19 -06:00
parent a10d39a179
commit 920b868f7a

View File

@@ -76,9 +76,9 @@
:ui="{ :ui="{
root: 'space-y-4', root: 'space-y-4',
list: 'border-b border-[var(--brand-border)] bg-[#1c140c]', list: 'border-b border-[var(--brand-border)] bg-[#1c140c]',
indicator: 'bg-[#c08040]', indicator: 'bg-[#c08040] z-10',
trigger: 'data-[state=active]:text-[#1b1209] data-[state=active]:hover:text-black data-[state=inactive]:text-[var(--brand-text-muted)] data-[state=inactive]:bg-[#1c140c] data-[state=inactive]:hover:text-[var(--brand-text)] data-[state=inactive]:hover:bg-[#2a1f14] focus-visible:ring-2 focus-visible:ring-[#c08040]', trigger: 'relative data-[state=active]:text-[#1b1209] data-[state=active]:hover:text-black data-[state=inactive]:text-[var(--brand-text-muted)] data-[state=inactive]:bg-transparent data-[state=inactive]:hover:text-[var(--brand-text)] data-[state=inactive]:hover:bg-[#2a1f14]/50 focus-visible:ring-2 focus-visible:ring-[#c08040] transition-colors duration-200',
label: 'font-medium text-sm', label: 'font-medium text-sm relative z-20',
content: 'py-4' content: 'py-4'
}" }"
> >