todo fixes

public/css/style.css

@@ -560,46 +560,34 @@ body.detail-image-fs-open { overflow: hidden; }
 .prose.tree .bullet-list li::marker { color: var(--t-accent); font-size: inherit; }
 .prose blockquote { border-left: 3px solid var(--t-accent); padding-left: 1em; margin: 0.8em 0; color: var(--t-muted); }
 .prose hr { border: none; border-top: 1px solid var(--t-border); margin: 1.2em 0; }
-/* Todo checkboxes */
-.prose input[type="checkbox"] {
-    appearance: none;
-    width: 30px;
-    height: 30px;
-    border: 1px solid var(--t-dim);
-    border-radius: 4px;
-    background: var(--t-bg);
-    cursor: pointer;
-    vertical-align: middle;
-    margin-right: 8px;
-    position: relative;
-    box-sizing: border-box;
+/* Todo component */
+.todo-item {
+    list-style: none !important;
+    margin: 0 !important;
+    margin-left: -1.5em !important;
+    display: flex !important;
+    gap: 10px;
+    padding: 4px 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--t-border) 40%, transparent);
 }
-.prose input[type="checkbox"]:checked {
-    background: var(--t-accent);
-    border-color: var(--t-accent);
+.todo-item:last-child { border-bottom: none; }
+.todo-item.todo-done .todo-text { color: var(--t-dim); text-decoration: line-through; }
+.todo-text { flex: 1; min-width: 0; line-height: 20px; }
+.todo-cb {
+    width: 20px; height: 20px; min-width: 20px;
+    border: 2px solid var(--t-border); border-radius: 3px;
+    background: transparent; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    padding: 0; font-size: 0;
+    transition: border-color 0.12s, background 0.12s;
 }
-.prose input[type="checkbox"]::after {
-    content: '';
-    position: absolute;
-    left: 9px;
-    top: 4px;
-    width: 8px;
-    height: 14px;
-    border: solid transparent;
-    border-width: 0 3px 3px 0;
-    transform: rotate(45deg);
-    opacity: 0;
-    transition: opacity 0.12s ease, border-color 0.12s ease;
-}
-.prose input[type="checkbox"]:checked::after {
-    border-color: var(--t-bg);
-    opacity: 1;
-}
-.prose input[type="checkbox"]:not(:checked):hover::after {
-    border-color: var(--t-accent);
-    opacity: 0.75;
-}
-.prose li:has(input[type="checkbox"]) { list-style: none; margin-left: -1.5em; }
+.todo-cb:hover { border-color: var(--t-accent); }
+.todo-cb.checked { background: var(--t-accent); border-color: var(--t-accent); }
+.todo-cb i { font-size: 14px; transition: opacity 0.12s; }
+.todo-cb:not(.checked) i { opacity: 0; color: var(--t-accent); }
+.todo-cb:not(.checked):hover i { opacity: 0.5; }
+.todo-cb.checked i { opacity: 1; color: var(--t-bg); }
+.prose input[type="checkbox"] { display: none; }
 
 .prose audio {
     width: 100%;