mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
theme: add styles for Markdown task lists #411
This commit is contained in:
parent
d4de97ffb3
commit
2dfe52e3bb
2 changed files with 58 additions and 0 deletions
|
@ -65,6 +65,10 @@
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
article ul li:has(input[type="checkbox"]) {
|
||||||
|
margin-left: -1rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* set default colors as in variant.css for IE11 */
|
/* set default colors as in variant.css for IE11 */
|
||||||
body {
|
body {
|
||||||
background-color: #ffffff; /* var(--MAIN-BG-color) */
|
background-color: #ffffff; /* var(--MAIN-BG-color) */
|
||||||
|
@ -570,6 +574,15 @@
|
||||||
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
|
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
article ul li input[type="checkbox"] {
|
||||||
|
background-color: #ffffff; /* var(--INTERNAL-MAIN-BG-color); */
|
||||||
|
color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul li input[type="checkbox"]::before {
|
||||||
|
box-shadow: inset 1em 1em #7dc903; /* var(--INTERNAL-PRIMARY-color) */
|
||||||
|
}
|
||||||
|
|
||||||
/* set further styles to fix broken stuff in IE11 */
|
/* set further styles to fix broken stuff in IE11 */
|
||||||
|
|
||||||
/* turn off animiation in IE because this causes the menu
|
/* turn off animiation in IE because this causes the menu
|
||||||
|
|
|
@ -1645,3 +1645,48 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||||||
border-start-start-radius: 0;
|
border-start-start-radius: 0;
|
||||||
border-end-start-radius: 0;
|
border-end-start-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* task list and its checkboxes */
|
||||||
|
article ul li:has(input[type="checkbox"]) {
|
||||||
|
list-style: none;
|
||||||
|
margin-inline-start: -1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul li:has(input[type="checkbox"])::before {
|
||||||
|
content: "\200B"; /* accessibilty for Safari https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* https://moderncss.dev/pure-css-custom-checkbox-style/ */
|
||||||
|
article ul li input[type="checkbox"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
/* For iOS < 15 */
|
||||||
|
background-color: var(--INTERNAL-MAIN-BG-color); /* box background */
|
||||||
|
border: 0.15em solid currentColor;
|
||||||
|
border-radius: 0.15em;
|
||||||
|
color: var(--INTERNAL-MAIN-TEXT-color);
|
||||||
|
display: inline-grid;
|
||||||
|
font: inherit;
|
||||||
|
height: 1.15em;
|
||||||
|
margin: 0;
|
||||||
|
place-content: center;
|
||||||
|
transform: translateY(-0.075em);
|
||||||
|
width: 1.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul li input[type="checkbox"]::before {
|
||||||
|
box-shadow: inset 1em 1em var(--INTERNAL-PRIMARY-color);
|
||||||
|
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||||||
|
content: "";
|
||||||
|
height: 0.65em;
|
||||||
|
transform: scale(0);
|
||||||
|
transform-origin: bottom left;
|
||||||
|
transition: 120ms transform ease-in-out;
|
||||||
|
width: 0.65em;
|
||||||
|
/* Windows High Contrast Mode fallback must be last */
|
||||||
|
background-color: CanvasText;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul li input[type="checkbox"]:checked::before {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue