WhatTheFantasy
/
WF-Website
14
1
Fork 0
Code Issues 19 Pull Requests Packages Projects 1 Releases Wiki Activity

Changement scroll bar selon theme, ajout du hover sur les icons du menu et fix largeur de la citation du jour

Browse Source
pull/23/head
Maxime ROCHER 4 months ago
parent 86a1bc71f6
commit 765bb7e548
5 changed files with 56 additions and 59 deletions
Show Stats Download Patch File Download Diff File

2
index.php
Unescape View File

@ -24,7 +24,7 @@ $twig = new \Twig\Environment($loader, [
]);
global $racine;
$twig->addGlobal('racine',$racine); // /~kekentin/WF/WF-Website
$twig->addGlobal('racine',$racine);

2
public/script/theme-toggle.js
Unescape View File

@ -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.");
}

107
public/styles/style.css
Unescape View File

@ -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,<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;
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 */

2
public/styles/styleAccueil.css
Unescape View File

@ -5,7 +5,7 @@
/* Citation du jour */
.citation-du-jour {
width: 97.5vw;
width: 96.5vw;
padding: 0;
margin-left: 1.25vw;
overflow: hidden;

2
vue/templates/bandeau.html.twig
Unescape View File

@ -1,7 +1,7 @@
<div class="header">
<div class="nav">
<a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" onmousedown="return false"></a>
<img id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" onmousedown="return false" onclick="toggleTheme()">
<img class='theme-icon' id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" onmousedown="return false" onclick="toggleTheme()">
<a href="{{ racine }}/quiz/1"><img src="{{ racine }}/images/quizz.svg" alt="quizz" onmousedown="return false"></a>
</div>

Write Preview
Loading…
Cancel
Save