nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

theme: add styles for Markdown task lists #411

Browse source
This commit is contained in:
Sören Weber 2022-12-02 15:51:36 +01:00
parent d4de97ffb3
commit 2dfe52e3bb
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 58 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
static/css/ie.css
View file

@ -65,6 +65,10 @@
border-bottom-left-radius: 0;
}
article ul li:has(input[type="checkbox"]) {
margin-left: -1rem;
}
/* set default colors as in variant.css for IE11 */
body {
background-color: #ffffff; /* var(--MAIN-BG-color) */
@ -570,6 +574,15 @@
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 */
/* turn off animiation in IE because this causes the menu

45
static/css/theme.css
View file

@ -1645,3 +1645,48 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
border-start-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);
}