Files
2022-10-10 16:33:21 +02:00

45 lines
1.4 KiB
CSS

/*
* lightmode.css
*
* Feuille de style qui est utilisé pour le module
* de l'affichage sombre / clair
* Utilisé avec lightmode.js
*
* @author Vabre Lucas
*/
/* ### Mode Clair ### */
.light-theme { /* Variables utilisés pour le mode Jour */
--background-color:#ecf0f1; /* Couleur de fond général */
--overlay-color:#bdc3c7; /* Deuxieme couleur de fond */
--text-color:#2c3e50; /* Couleur du texte */
transition-duration: 0.5s; /* Transition de 0.5 secondes */
}
/* ### Mode sombre ### */
.dark-theme { /* Variables utilisés pour le mode Nuit */
--background-color:#2c3e50; /* Couleur de fond général */
--overlay-color:#34495e; /* Deuxieme couleur de fond */
--text-color:#ecf0f1; /* Couleur du texte */
transition-duration: 0.5s; /* Transition de 0.5 secondes */
}
/* */
#light-mode { /* Boutton jour-nuit */
cursor: pointer; /* Au survol déchange le curseur pour montrer que c'est un boutton clicable */
}
.li-night-mode {/* Element contenant le boutton jour/nuit */
padding: 0; /* Enlève les marges internes */
margin: 0; /* Enlève les marges */
}
.li-night-mode img { /* Iconne de la lune / soleil */
width: 40px; /* Défini la taille de l'iconne */
height: 40px; /* Defini la hauteur de l'iconne */
}
.li-maincolor img { /* Element li qui contient l'Iconne de l'engrenage */
width: 30px; /* Défini la taille de l'iconne */
height: 30px; /* Defini la hauteur de l'iconne */
}