From f5c81cbe2fb882ac5ec6294ab8591fdc9c148cc1 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Sat, 18 Oct 2025 02:25:25 -0600 Subject: [PATCH] =?UTF-8?q?Feat:=20Agregar=20animaci=C3=B3n=20de=20hover?= =?UTF-8?q?=20sutil=20a=20tabs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Aumentar opacidad del texto de 60% a 80% en hover - Mostrar borde inferior sutil (30% opacity) en hover - Agregar text-shadow suave en modo oscuro - Solo afecta tabs inactivas (no las activas) - Transiciones específicas: color, border-color, text-shadow - CERO cambios de tamaño o desplazamiento, solo colores --- nuxt4/app/assets/css/main.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/nuxt4/app/assets/css/main.css b/nuxt4/app/assets/css/main.css index 6ea0751..56f3e38 100644 --- a/nuxt4/app/assets/css/main.css +++ b/nuxt4/app/assets/css/main.css @@ -129,10 +129,19 @@ .cata-tab { border-bottom: 2px solid transparent; padding: 0.5rem 1rem; - transition: all 200ms; + transition: color 200ms, border-color 200ms, text-shadow 200ms; color: color-mix(in srgb, var(--cata-fg) 60%, transparent); } +.cata-tab:hover:not(.cata-tab-active) { + color: color-mix(in srgb, var(--cata-fg) 80%, transparent); + border-bottom-color: color-mix(in srgb, var(--cata-primary) 30%, transparent); +} + +.dark .cata-tab:hover:not(.cata-tab-active) { + text-shadow: 0 0 2px currentColor; +} + .cata-tab-active { border-bottom: 2px solid var(--cata-primary); border-color: var(--cata-primary);