PERSONALISER BARRE DEFILEMENT
_/* 1. Dimensions générales de la scrollbar */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
/* 2. Sfondo della barra (Track) - Un marron foncé "terre de sienne" très doux */
::-webkit-scrollbar-track {
background: #1c1410;
border-radius: 10px;
}
/* 3. Curseur (Thumb) avec Effet Glow Automnal */
::-webkit-scrollbar-thumb {
/* Dégradé de l'orange cuivré au rouge ambré */
background: linear-gradient(180deg, #e67e22, #d35400, #c0392b);
border-radius: 10px;
border: 2px solid #1c1410; /* Espace pour faire ressortir la lueur */
}
/* Effet Glow au survol - Devient un jaune feuille d'automne lumineux */
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #f39c12, #e67e22);
box-shadow: 0 0 12px #f39c12; /* Lueur chaleureuse */
}
/* 4. Boutons de défilement (Flèche Unique) couleur Ambre */
/* Flèche Haut */
::-webkit-scrollbar-button:single-button:decrement {
background-image: url("data:image/svg+xml;utf8,");
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
/* Flèche Bas */
::-webkit-scrollbar-button:single-button:increment {
background-image: url("data:image/svg+xml;utf8,");
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
/* État hover des flèches (Glow automnal au survol) */
::-webkit-scrollbar-button:single-button:hover {
background-color: rgba(230, 126, 34, 0.15); /* Léger fond orange transparent */
}
________________________________________________________________________________________________________________________________________________________________
/* Scrollbar Glow Oro – Freccia Singola */
::-webkit-scrollbar{
width:14px;
}
::-webkit-scrollbar-track{
background:#23b6e7;
}
/* THUMB CON FRECCIA SVG */
::-webkit-scrollbar-thumb{
background:#010b5b;
border:2px solid #241aad;
border-radius:6px;
background-image:url('https://i.imgur.com/8K3ZQ0P.gif'); background-size:cover;
background-image:url("data:image/svg+xml,%0A%20%20%20%20%20%20%20%20%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'80'%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctext%20x%3D'50%25'%20y%3D'35%25'%20dominant-baseline%3D'middle'%20text-anchor%3D'middle'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D'%23241aad'%20font-size%3D'26'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D'text-shadow%3A0%200%206px%20%23241aad%2C%200%200%2012px%20rgba(243%2C189%2C78%2C0.7)%3B'%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E2%86%91%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ftext%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctext%20x%3D'50%25'%20y%3D'70%25'%20dominant-baseline%3D'middle'%20text-anchor%3D'middle'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D'%23241aad'%20font-size%3D'26'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D'text-shadow%3A0%200%206px%20%23241aad%2C%200%200%2012px%20rgba(243%2C189%2C78%2C0.7)%3B'%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E2%86%93%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ftext%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20");
background-repeat:no-repeat;
background-position:center;
background-size:70%;
}
::-webkit-scrollbar-thumb:hover{
filter:brightness(1.3);
}
/* Firefox */
*{
scrollbar-width:thin;
scrollbar-color:#010b5b #23b6e7;
}
-----------------------------------__________________________________________________________________________________________________________________________________________________________________
/* 1. Dimensioni generali della scrollbar */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
/* 2. Sfondo della barra (Track) */
::-webkit-scrollbar-track {
background: #1a1a1a; /* Sfondo scuro per far risaltare l'oro */
border-radius: 10px;
}
/* 3. Maniglia trascinabile (Thumb) con Effetto Glow Oro */
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ffd700, #b8860b); /* Sfumatura oro */
border-radius: 10px;
border: 2px solid #1a1a1a; /* Crea spazio per l'effetto visivo */
/* Nota: Il vero glow (box-shadow) sui webkit-thumb ha un supporto limitato,
quindi usiamo colori molto accesi e sfumature per simulare la lucentezza */
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #fff099, #d4af37); /* Oro più luminoso al passaggio del mouse */
box-shadow: 0 0 10px #ffd700; /* Simula il bagliore sui browser supportati */
}
/* 4. Pulsanti di scorrimento (Frecce Singole) */
/* Freccia Su */
::-webkit-scrollbar-button:single-button:decrement {
background-image: url("data:image/svg+xml;utf8,");
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
/* Freccia Giù */
::-webkit-scrollbar-button:single-button:increment {
background-image: url("data:image/svg+xml;utf8,");
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
/* Stato hover delle frecce (Glow sulle frecce) */
::-webkit-scrollbar-button:single-button:hover {
background-color: rgba(255, 215, 0, 0.15); /* Leggero sfondo oro trasparente */
}