From 765bb7e548c1f58c254a43eab51fe529fd57702e Mon Sep 17 00:00:00 2001 From: "maxime.rocher" Date: Sun, 15 Dec 2024 14:39:04 +0100 Subject: [PATCH] Changement scroll bar selon theme, ajout du hover sur les icons du menu et fix largeur de la citation du jour --- index.php | 2 +- public/script/theme-toggle.js | 2 + public/styles/style.css | 107 +++++++++++++++----------------- public/styles/styleAccueil.css | 2 +- vue/templates/bandeau.html.twig | 2 +- 5 files changed, 56 insertions(+), 59 deletions(-) diff --git a/index.php b/index.php index b701244..7eae2ac 100644 --- a/index.php +++ b/index.php @@ -24,7 +24,7 @@ $twig = new \Twig\Environment($loader, [ ]); global $racine; -$twig->addGlobal('racine',$racine); // /~kekentin/WF/WF-Website +$twig->addGlobal('racine',$racine); diff --git a/public/script/theme-toggle.js b/public/script/theme-toggle.js index e10cd94..2b335e5 100644 --- a/public/script/theme-toggle.js +++ b/public/script/theme-toggle.js @@ -45,6 +45,8 @@ function toggleTheme() { favicon.href = 'images/iconeSombre.ico'; // Favicon pour le mode sombre localStorage.setItem('theme', 'dark'); // Enregistre le thème sombre dans localStorage } + // Attribue la même classe que juste avant à l'icône de thème sombre + themeIcon.className = themeIcon.className; } else { console.error("Impossible de trouver l'icône ou le favicon."); } diff --git a/public/styles/style.css b/public/styles/style.css index 7672126..5d68522 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -8,69 +8,16 @@ --main-light-background-color: #ffffff; --main-light-text-color : #000000; - --main-light-gradient : linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); + --main-light-gradient : linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #fad0c4, #fad0c4, #fad0c4, #fad0c4, #fad0c4); --main-light-other-color : #d2d2d8; } /* Général */ - -/* 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; + width: 14px; + height: 14px; } -/* 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 */ -} - - - body{ font-family: "Lemon", serif; margin : 0%; @@ -87,6 +34,30 @@ body.dark-mode .header{ background-color: var(--main-dark-other-color); } +.dark-mode::-webkit-scrollbar-track { + background: var(--main-dark-background-color); + border-radius: 8px; + box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7); + position: relative; +} + +.dark-mode::-webkit-scrollbar-thumb { + background: var(--main-dark-gradient); + border-radius: 10px; + border: 2px solid var(--main-dark-other-color); + box-shadow: 0 0 10px rgba(106, 0, 255, 0.4); + position: relative; +} + +.dark-mode::-webkit-scrollbar-thumb:hover { + background: linear-gradient(45deg, #7d00ff, #4b00aa); + box-shadow: 0 0 15px rgba(125, 0, 255, 0.7), 0 0 30px rgba(125, 0, 255, 0.5); + transform: scale(1.1); +} + +.dark-mode .theme-icon:hover, .dark-mode .nav a:hover { + filter: brightness(0) saturate(100%) invert(16%) sepia(27%) saturate(7439%) hue-rotate(259deg) brightness(83%) contrast(110%); +} /* Light mode */ @@ -103,6 +74,30 @@ body.light-mode .header img{ filter: invert(100%); } +.light-mode::-webkit-scrollbar-track { + background: var(--main-light-background-color); + border-radius: 8px; + box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); + position: relative; +} + +.light-mode::-webkit-scrollbar-thumb { + background: var(--main-light-gradient); + border-radius: 10px; + border: 2px solid var(--main-light-other-color); + box-shadow: 0 0 10px rgba(255, 182, 193, 0.4); + position: relative; +} + +.light-mode::-webkit-scrollbar-thumb:hover { + background: linear-gradient(45deg, #ff9a9e, #fad0c4); + box-shadow: 0 0 15px rgba(255, 182, 193, 0.7), 0 0 30px rgba(255, 182, 193, 0.5); + transform: scale(1.1); +} + +.light-mode .theme-icon:hover, .light-mode .nav a:hover { + filter: brightness(0) saturate(100%) invert(85%) sepia(5%) saturate(5638%) hue-rotate(302deg) brightness(96%) contrast(107%); +} /* écran par défaut */ diff --git a/public/styles/styleAccueil.css b/public/styles/styleAccueil.css index 2208f14..393b767 100644 --- a/public/styles/styleAccueil.css +++ b/public/styles/styleAccueil.css @@ -5,7 +5,7 @@ /* Citation du jour */ .citation-du-jour { - width: 97.5vw; + width: 96.5vw; padding: 0; margin-left: 1.25vw; overflow: hidden; diff --git a/vue/templates/bandeau.html.twig b/vue/templates/bandeau.html.twig index d4958aa..25268b8 100644 --- a/vue/templates/bandeau.html.twig +++ b/vue/templates/bandeau.html.twig @@ -1,7 +1,7 @@
coeur - toggle theme + toggle theme quizz