From 86a1bc71f66168e662779c4f0b07e6de5384b75b Mon Sep 17 00:00:00 2001 From: "maxime.rocher" Date: Wed, 11 Dec 2024 12:27:40 +0100 Subject: [PATCH] scrollbar fix --- public/styles/style.css | 66 ++++++++++++++++++++++++--------- public/styles/styleScroll.css | 54 +++++++++++++++++++++++++++ vue/templates/bandeau.html.twig | 2 +- 3 files changed, 103 insertions(+), 19 deletions(-) create mode 100644 public/styles/styleScroll.css diff --git a/public/styles/style.css b/public/styles/style.css index 4f82053..7672126 100644 --- a/public/styles/style.css +++ b/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,✦'); + 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; diff --git a/public/styles/styleScroll.css b/public/styles/styleScroll.css new file mode 100644 index 0000000..8bf985a --- /dev/null +++ b/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,✦'); + 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 */ +} \ No newline at end of file diff --git a/vue/templates/bandeau.html.twig b/vue/templates/bandeau.html.twig index b4997d5..d4958aa 100644 --- a/vue/templates/bandeau.html.twig +++ b/vue/templates/bandeau.html.twig @@ -11,6 +11,6 @@
search - user + user
\ No newline at end of file