scrollbar fix

public/styles/style.css

@@ -1,4 +1,5 @@
 /* @import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap'); */
+@import url(./styleScroll.css);
 :root {
     --main-dark-background-color: #120B1D;
     --main-dark-text-color : #ffffff;
@@ -15,35 +16,60 @@
 
 /* Scrollbar globale */
 ::-webkit-scrollbar {
-    width: 12px; /* Largeur de la barre verticale */
-    height: 12px; /* Hauteur de la barre horizontale */
+    width: 14px; /* Largeur de la barre verticale */
+    height: 14px; /* Hauteur de la barre horizontale */
 }
 
 /* Track (fond de la scrollbar) */
 ::-webkit-scrollbar-track {
-    background: #2c2f33; /* Couleur sombre pour un effet mystique */
-    border-radius: 10px; /* Coins arrondis */
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* Ombre interne pour un effet sculpté */
+    background: linear-gradient(180deg, #2a2b4d, #1e1e3f); /* Fond violet sombre */
+    border-radius: 8px; /* Coins arrondis */
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7); /* Ombre interne pour profondeur */
+    position: relative;
 }
 
-/* Thumb (curseur) */
-::-webkit-scrollbar-thumb {
-    background: linear-gradient(45deg, #6a0088, #3f0281); /* Dégradé doré et brun */
-    border-radius: 10px; /* Coins arrondis */
-    border: 2px solid #2c2f33; /* Bord sombre pour contraste */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Effet d'élévation */
+/* Ajouter un motif discret sur le track */
+::-webkit-scrollbar-track:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><text x="0" y="10" fill="%23ffffff33" font-size="12" font-family="serif">✦</text></svg>');
+    background-repeat: repeat;
+    opacity: 0.3; /* Motif semi-transparent */
 }
 
-/* Thumb hover (effet au survol) */
+/* Thumb (curseur) */
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, #6a00ff, #3b0088); /* Dégradé violet-bleu */
+    border-radius: 10px; /* Coins arrondis pour élégance */
+    border: 2px solid #1e1e3f; /* Bord sombre pour contraste */
+    box-shadow: 0 0 10px rgba(106, 0, 255, 0.4); /* Lumière douce */
+    position: relative;
+}
+
+/* Ajouter un motif mystique sur le thumb */
+::-webkit-scrollbar-thumb:before {
+    content: '❂'; /* Symbole mystique */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.5); /* Couleur subtile */
+    font-family: 'Fantasy', sans-serif; /* Style runique */
+}
+
+/* Effet lumineux au survol */
 ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(45deg, #9800a3, #220353); /* Inversion des couleurs du dégradé */
-    box-shadow: 0 0 10px rgba(55, 1, 62, 0.8); /* Lumière dorée */
+    background: linear-gradient(45deg, #7d00ff, #4b00aa); /* Dégradé plus lumineux */
+    box-shadow: 0 0 15px rgba(125, 0, 255, 0.7), 0 0 30px rgba(125, 0, 255, 0.5); /* Lumière amplifiée */
+    transform: scale(1.1); /* Légère croissance au survol */
 }
 
-/* Scrollbar horizontale */
-::-webkit-scrollbar-corner {
-    background: #2c2f33; /* Coin entre les scrollbars */
-}
+
 
 body{
     font-family: "Lemon", serif;
@@ -122,6 +148,10 @@ body{
     height : 10vh;
 }
 
+.iconUser{
+    margin-right: 5px;
+}
+
 .user {
     display: flex;
     flex-direction: row;

public/styles/styleScroll.css

@@ -0,0 +1,54 @@
+/* Scrollbar globale */
+::-webkit-scrollbar {
+    width: 14px; /* Largeur de la barre verticale */
+    height: 14px; /* Hauteur de la barre horizontale */
+}
+
+/* Track (fond de la scrollbar) */
+::-webkit-scrollbar-track {
+    background: linear-gradient(180deg, #2a2b4d, #1e1e3f); /* Fond violet sombre */
+    border-radius: 8px; /* Coins arrondis */
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7); /* Ombre interne pour profondeur */
+    position: relative;
+}
+
+/* Ajouter un motif discret sur le track */
+::-webkit-scrollbar-track:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><text x="0" y="10" fill="%23ffffff33" font-size="12" font-family="serif">✦</text></svg>');
+    background-repeat: repeat;
+    opacity: 0.3; /* Motif semi-transparent */
+}
+
+/* Thumb (curseur) */
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, #6a00ff, #3b0088); /* Dégradé violet-bleu */
+    border-radius: 10px; /* Coins arrondis pour élégance */
+    border: 2px solid #1e1e3f; /* Bord sombre pour contraste */
+    box-shadow: 0 0 10px rgba(106, 0, 255, 0.4); /* Lumière douce */
+    position: relative;
+}
+
+/* Ajouter un motif mystique sur le thumb */
+::-webkit-scrollbar-thumb:before {
+    content: '❂'; /* Symbole mystique */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.5); /* Couleur subtile */
+    font-family: 'Fantasy', sans-serif; /* Style runique */
+}
+
+/* Effet lumineux au survol */
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, #7d00ff, #4b00aa); /* Dégradé plus lumineux */
+    box-shadow: 0 0 15px rgba(125, 0, 255, 0.7), 0 0 30px rgba(125, 0, 255, 0.5); /* Lumière amplifiée */
+    transform: scale(1.1); /* Légère croissance au survol */
+}

vue/templates/bandeau.html.twig

@@ -11,6 +11,6 @@
 
     <div class="user">
         <a href="{{ racine }}/search"><img src="{{ racine }}/images/loupe.svg" alt="search"  onmousedown="return false"></a>
-        <a href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user"  onmousedown="return false"></a>
+        <a class="iconUser" href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user"  onmousedown="return false"></a>
     </div>
 </div>