settings

public/css/style.css

@@ -82,6 +82,16 @@ body::after {
 .upcoming-dismiss { background: none; border: none; color: var(--t-dim); cursor: pointer; padding: 2px; transition: color 0.12s; }
 .upcoming-dismiss:hover { color: var(--t-danger); }
 
+/* Toggle switch */
+.toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 0; }
+.toggle-row:hover .toggle-label { color: var(--t-bright); }
+.toggle-label { flex: 1; font-size: 12px; color: var(--t-muted); user-select: none; transition: color 0.1s; }
+.toggle-switch { position: relative; width: 32px; height: 18px; border-radius: 9px; background: var(--t-border); flex-shrink: 0; transition: background 0.2s; }
+.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--t-bg); transition: left 0.2s; }
+.toggle-switch.on { background: var(--t-accent); }
+.toggle-switch.on::after { left: 16px; }
+#settings-panel-behavior select { width: 120px; }
+
 /* Settings */
 .settings-tab { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 11px; color: var(--t-muted); cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: color 0.1s, background 0.1s; border-left: 2px solid transparent; }
 .settings-tab:hover { color: var(--t-bright); background: var(--t-raised); }
@@ -99,7 +109,7 @@ body::after {
 
 /* Cards */
 .card-bar { image-rendering: pixelated; height: 3px; }
-.board-card { min-height: 180px; }
+.board-card { min-height: var(--card-min-h, 180px); }
 .card-layer { position: relative; z-index: 1; }
 .card-has-cover {
     background-size: cover;