fix checkbox/tasklist styling

This commit is contained in:
Jacky Zhao 2023-07-25 22:27:59 -07:00
parent 1c1a569023
commit 45f9087f03
2 changed files with 36 additions and 4 deletions

View File

@ -6,7 +6,6 @@ draft: true
- images in same folder are broken on shortest path mode - images in same folder are broken on shortest path mode
- watch mode for config/source code - watch mode for config/source code
- https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Task+lists task list styling
- publish metadata https://help.obsidian.md/Editing+and+formatting/Metadata#Metadata+for+Obsidian+Publish - publish metadata https://help.obsidian.md/Editing+and+formatting/Metadata#Metadata+for+Obsidian+Publish
- metadata aliases: https://help.obsidian.md/Editing+and+formatting/Metadata#Predefined+metadata - metadata aliases: https://help.obsidian.md/Editing+and+formatting/Metadata#Predefined+metadata
- block links: https://help.obsidian.md/Linking+notes+and+files/Internal+links#Link+to+a+block+in+a+note - block links: https://help.obsidian.md/Linking+notes+and+files/Internal+links#Link+to+a+block+in+a+note

View File

@ -92,11 +92,17 @@ a {
& li:has(> input[type="checkbox"]) { & li:has(> input[type="checkbox"]) {
list-style-type: none; list-style-type: none;
padding-left: 0; padding-left: 0;
margin-left: -1.4rem; }
& li:has(> input[type="checkbox"]:checked) {
text-decoration: line-through;
text-decoration-color: var(--gray);
color: var(--gray);
} }
& li > * { & li > * {
margin: 0; margin-top: 0;
margin-bottom: 0;
} }
} }
@ -175,8 +181,35 @@ a {
input[type="checkbox"] { input[type="checkbox"] {
transform: translateY(2px); transform: translateY(2px);
color: var(--secondary); color: var(--secondary);
border-color: var(--lightgray); border: 1px solid var(--lightgray);
border-radius: 3px;
background-color: var(--light); background-color: var(--light);
position: relative;
margin-inline-end: 0.2rem;
margin-inline-start: -1.4rem;
appearance: none;
width: 16px;
height: 16px;
&:checked {
border-color: var(--secondary);
background-color: var(--secondary);
&::after {
content: "";
top: -1px;
left: -1px;
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
display: block;
border: solid 1px var(--light);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
} }
blockquote { blockquote {