From 45f9087f03fde7e7d762e25a9f2966d1e6e907f3 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 26 Jul 2023 05:27:59 +0000
Subject: [PATCH] fix checkbox/tasklist styling
---
quartz/styles/base.scss | 39 ++++++++++++++++++++++++++++++++++++---
1 files changed, 36 insertions(+), 3 deletions(-)
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index fd94a1a..ebdc2fa 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -92,11 +92,17 @@
& 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 @@
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 {
--
Gitblit v1.10.0