diff --git a/README.md b/README.md index fc49dd2..379026d 100644 --- a/README.md +++ b/README.md @@ -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 : diff --git a/scss/moineau.scss b/scss/moineau.scss index 1c12fa4..f28b594 100644 --- a/scss/moineau.scss +++ b/scss/moineau.scss @@ -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); } }