From 920b868f7aa6403301b8d552b4d4a30991935a65 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Thu, 30 Oct 2025 11:21:19 -0600 Subject: [PATCH] Fix: hacer visible el indicador animado de tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- nuxt4-app/app/pages/metabase-debug.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue index b98c4ac..eff7646 100644 --- a/nuxt4-app/app/pages/metabase-debug.vue +++ b/nuxt4-app/app/pages/metabase-debug.vue @@ -76,9 +76,9 @@ :ui="{ root: 'space-y-4', list: 'border-b border-[var(--brand-border)] bg-[#1c140c]', - indicator: 'bg-[#c08040]', - 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]', - label: 'font-medium text-sm', + indicator: 'bg-[#c08040] z-10', + 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 relative z-20', content: 'py-4' }" >