josedario87
d2162507e5
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 56s
- Track transparente con glassmorphism - Thumb con gradiente de color del cielo - Día: Celeste (#87CEEB) con brillo - Noche: Azul oscuro con tinte morado - Bordes y sombras para efecto de profundidad - Hover con mayor intensidad de color - Soporte completo para WebKit y Firefox
86 lines
2.0 KiB
CSS
86 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
|
|
/* Custom Scrollbar - Color del cielo según el tema */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
/* Fondo transparente con glassmorphism */
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 5px;
|
|
margin: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
/* Color del cielo diurno - celeste */
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(135, 206, 235, 0.8) 0%,
|
|
rgba(100, 180, 220, 0.9) 100%
|
|
);
|
|
border-radius: 5px;
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
transition: all 0.3s ease;
|
|
box-shadow:
|
|
0 2px 8px 0 rgba(135, 206, 235, 0.3),
|
|
inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(135, 206, 235, 1) 0%,
|
|
rgba(100, 180, 220, 1) 100%
|
|
);
|
|
box-shadow:
|
|
0 4px 12px 0 rgba(135, 206, 235, 0.5),
|
|
inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
/* Scrollbar para modo oscuro - cielo nocturno */
|
|
.dark ::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
/* Color del cielo nocturno - azul oscuro con tinte morado */
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(30, 40, 80, 0.9) 0%,
|
|
rgba(20, 30, 60, 1) 100%
|
|
);
|
|
border: 2px solid rgba(100, 120, 200, 0.3);
|
|
box-shadow:
|
|
0 2px 8px 0 rgba(30, 40, 80, 0.5),
|
|
inset 0 1px 1px 0 rgba(100, 120, 200, 0.2);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(40, 50, 100, 1) 0%,
|
|
rgba(30, 40, 80, 1) 100%
|
|
);
|
|
border-color: rgba(100, 120, 200, 0.5);
|
|
box-shadow:
|
|
0 4px 12px 0 rgba(30, 40, 80, 0.7),
|
|
inset 0 1px 1px 0 rgba(100, 120, 200, 0.3);
|
|
}
|
|
|
|
/* Firefox scrollbar */
|
|
* {
|
|
scrollbar-width: thin;
|
|
/* Color del cielo diurno */
|
|
scrollbar-color: rgba(135, 206, 235, 0.8) rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.dark * {
|
|
/* Color del cielo nocturno */
|
|
scrollbar-color: rgba(30, 40, 80, 0.9) rgba(0, 0, 0, 0.05);
|
|
}
|