tfenasse/bidouille
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

couleurs sombre NoK et hidden mal mis

Browse Source
This commit is contained in:
Thierry Fenasse 2024-04-02 17:37:09 +02:00
parent bc0e9ad644
commit aaf65e6a3c
Signed by: tfenasse
GPG Key ID: 56BF2A3A07DDEB1F
2 changed files with 33 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/css/bidouille.css
View File

@ -13,15 +13,19 @@
* *
* Les couleurs sont définies en tant que variables sous la forme * Les couleurs sont définies en tant que variables sous la forme
--nom: contenu; --nom: contenu;
* Elles sont appelables dans les régles css sous la forme * Elles sont appelables dans les règles css sous la forme
var(--nom) var(--nom)
* *
* Cela facilite le changement de couleur pour « tout le site » en quelques corrections. * Cela facilite le changement de couleur pour « tout le site » en quelques corrections.
* Merci de préférer travailler avec des couleurs sous forme de variable telles que les 4 ci-dessous. * Merci de préférer travailler avec des couleurs sous forme de variable telles que les 4 ci-dessous.
* *
* Quelques Jeux de couleurs sont proposer pour … jouer avec :). * Quelques Jeux de couleurs sont proposer pour … jouer avec :).
* Si tous les Jeux de coudeurs mis en commentaire, le site sera en noir&blanc. * Si tous les Jeux de couleurs sont mis en commentaire, le site sera en noir&blanc.
* Mais le menu sera moche en * Mais le menu sera moche lorsqu'on fait défiler le contenu parce qu'il n'aura pas de couleur de fond.
*
* La fonction color-mix, qui est utilisée dans ce CSS est récente (2023).
* Elle pourrait ne pas fonctionner sur des anciens navigateurs web.
*
*/ */
/* Jeu de couleur de base /* Jeu de couleur de base
@ -34,21 +38,11 @@
--deco: #96D321; --deco: #96D321;
} }
/* Jeu de couleur de base mais inversé
* Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
:root {
--fond: #222;
--primaire: #EEE;
--liens: #96D321;
--deco: #fe1976;
}
*/
/* Jeu de couleurs « Belgique » /* Jeu de couleurs « Belgique »
* Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser. * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
:root { :root {
--fond: black; --fond: white;
--primaire: white; --primaire: black;
--liens: gold; --liens: gold;
--deco: red; --deco: red;
} }
@ -395,7 +389,6 @@ th {
tr:nth-child(even) { tr:nth-child(even) {
/* Pour colorer différemment une ligne sur deux (even) /* Pour colorer différemment une ligne sur deux (even)
* La fonction color-mix est récente (2023) en CSS et pourrait ne pas fonctionner sur des anciens navigateurs web.
*/ */
background-color: color-mix(in srgb, var(--primaire) 20%, var(--fond)); background-color: color-mix(in srgb, var(--primaire) 20%, var(--fond));
} }
@ -403,14 +396,17 @@ tr:nth-child(even) {
/* Coloration du code (highlight) /* Coloration du code (highlight)
* voir aussi le fichier highlight.css * voir aussi le fichier highlight.css
*/ */
article p code { code:not(div.highlight code) {
/* Pour que, dans le texte, le code soit de couleur et de fond différent. /* Pour que, dans le texte, le code soit de couleur et de fond différent.
* Mais PAS pour la class .highlight qui contiendra du code sur plusieurs lignes, * Mais PAS pour la class .highlight qui contiendra du code sur plusieurs lignes,
* et qui utilise la coloration syntaxique définie dans le fichier highlight.css. * et qui utilise la coloration syntaxique définie dans le fichier highlight.css.
*/ */
background-color: var(--primaire); background-color: color-mix(in srgb, var(--primaire) 10%, var(--fond));
color: var(--fond); border: solid var(--deco);
padding: .3em; border-width: .1em;
border-radius: .3em;
padding: .2em .4em;
font-weight: bold;
} }