Files
perfil/nuxt4/app/assets/css/main.css
josedario87 75069a7633
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 56s
Feature: Scrollbar personalizada, arreglos SVG y mejoras de transparencia
- Agregar scrollbar personalizada compacta (8px) adaptable al tema
- Estilo de scrollbar verde (#00DC82) con opacidad diferente para día/noche
- Soporte para WebKit (Chrome/Safari) y Firefox
- Arreglar SVG de colinas para usar 100% del ancho horizontal (preserveAspectRatio=none)
- Revertir modal a estructura funcional (v-model:open, title prop, #content slot)
- Igualar transparencia en modo oscuro usando rgba(0,0,0,0.3-0.4) en lugar de rgba(15,15,25)
- Aplicar tintado negro puro para reducir brillo en modo oscuro manteniendo misma transparencia
2025-10-16 22:02:45 -06:00

47 lines
894 B
CSS

@import "tailwindcss";
@import "@nuxt/ui";
/* Custom Scrollbar - Adaptable al tema */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 220, 130, 0.5);
border-radius: 4px;
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 220, 130, 0.7);
}
/* Scrollbar para modo oscuro */
.dark ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.dark ::-webkit-scrollbar-thumb {
background: rgba(0, 220, 130, 0.6);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 220, 130, 0.8);
}
/* Firefox scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 220, 130, 0.5) rgba(255, 255, 255, 0.1);
}
.dark * {
scrollbar-color: rgba(0, 220, 130, 0.6) rgba(0, 0, 0, 0.3);
}