nucleo000/cataRio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Agregar animación de hover sutil a tabs
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
Details

Browse Source 
- 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
This commit is contained in:
josedario87
2025-10-18 02:25:25 -06:00
parent c87aa68d7d
commit f5c81cbe2f
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
nuxt4/app/assets/css/main.css
View File

@@ -129,10 +129,19 @@
.cata-tab { .cata-tab {
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
padding: 0.5rem 1rem; 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); 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 { .cata-tab-active {
border-bottom: 2px solid var(--cata-primary); border-bottom: 2px solid var(--cata-primary);
border-color: var(--cata-primary); border-color: var(--cata-primary);