kazhnuz/moineau
1
0
Fork 0
Code Issues 3 Pull requests Releases 2 Wiki Activity

fix(button): ajout de couleurs de hover

Browse source
This commit is contained in:
Kazhnuz 2024-10-05 18:14:52 +02:00
parent d11d41f082
commit 8a343855f1
2 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -29,16 +29,18 @@ L'idée est de pouvoir générer simplement un blog ou un site simple pour les g
## Customiser
La couleur d'accents se customise en modifiant deux variables :
La couleur d'accents se customise en modifiant quatre variables :
```css
:root {
--accent-color-dark: #1971c2;
--accent-color-light: #d0ebff;
--accent-color-dark-hover: #1864ab;
--accent-color-light-hover: #e7f5ff;
}
```
La première détermine la couleur d'accent sombre (donc écrite sur fond clair, et en fond sur fond sombre), et la seconde celle d'accent clair (du coup l'inverse de la sombre : écrite sur fond sombre, et en fond sur fond clair).
La première détermine la couleur d'accent sombre (donc écrite sur fond clair, et en fond sur fond sombre), et la seconde celle d'accent clair (du coup l'inverse de la sombre : écrite sur fond sombre, et en fond sur fond clair). Les deux suivantes sont les mêmes, mais avec cette fois en variante pour le survol de la souris.
Toute la palette peut également être customisé avec les variables css, de la manière suivante :

14
scss/moineau.scss
View file

@ -3,7 +3,9 @@
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
--accent-color-dark: #1971c2;
--accent-color-dark-hover: #1864ab;
--accent-color-light: #d0ebff;
--accent-color-light-hover: #e7f5ff;
--text-color: #212529;
--border-color: rgba(0,0,0,0.15);
@ -14,6 +16,7 @@
--accent-color: var(--accent-color-dark);
--accent-color-back: var(--accent-color-light);
--accent-color-hover: var(--accent-color-dark-hover);
--border-radius: 6px;
}
@ -25,6 +28,7 @@
--well-color: #343a40;
--accent-color: var(--accent-color-light);
--accent-color-back: var(--accent-color-dark);
--accent-color-hover: var(--accent-color-light-hover);
--border-color: rgba(255,255,255,0.2);
--hover-color: rgba(255,255,255,0.1);
@ -282,10 +286,11 @@ input[type=checkbox], input[type=radio] {
&:checked {
background-color: var(--accent-color);
box-shadow:inset 0px 0px 0px 3px var(--background-color);
}
&:hover {
filter:brightness(.9);
&:hover {
background-color: var(--accent-color-hover);
box-shadow:inset 0px 0px 0px 3px color-mix(in srgb, var(--background-color) 90%, currentColor);
}
}
}
@ -304,8 +309,7 @@ button, .button, input[type=submit], input[type=reset], input[type=button] {
display: inline-block;
&:hover {
background-color: var(--accent-color);
outline-style: solid;
background-color: var(--accent-color-hover);
}
}