From 45f9087f03fde7e7d762e25a9f2966d1e6e907f3 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Tue, 25 Jul 2023 22:27:59 -0700 Subject: [PATCH] fix checkbox/tasklist styling --- content/features/upcoming features.md | 1 - quartz/styles/base.scss | 39 ++++++++++++++++++++++++--- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/content/features/upcoming features.md b/content/features/upcoming features.md index dab75c6ad..6d36de85a 100644 --- a/content/features/upcoming features.md +++ b/content/features/upcoming features.md @@ -6,7 +6,6 @@ draft: true - images in same folder are broken on shortest path mode - 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 - 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 diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index fd94a1a1e..ebdc2faf7 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -92,11 +92,17 @@ a { & li:has(> input[type="checkbox"]) { list-style-type: none; 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 > * { - margin: 0; + margin-top: 0; + margin-bottom: 0; } } @@ -175,8 +181,35 @@ a { input[type="checkbox"] { transform: translateY(2px); color: var(--secondary); - border-color: var(--lightgray); + border: 1px solid var(--lightgray); + border-radius: 3px; 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 {