From 4f02599e63c7e31883da5c3dc539480727ca44ff Mon Sep 17 00:00:00 2001 From: James Brechtel Date: Tue, 19 May 2026 10:03:58 -0400 Subject: [PATCH] Gray checkbox styling and checked-state dimming MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Checkbox: accent-color terracotta, border rgba(184,92,56,0.4), transparent background (not dark/black) - Checked ingredient rows: :has(input:checked) → opacity 0.45 - Checked steps: :has(input:checked) → opacity 0.45 - Removed unused .step.done classes --- src/Roux/Html.hs | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs index 9345403..3fff0e0 100644 --- a/src/Roux/Html.hs +++ b/src/Roux/Html.hs @@ -119,16 +119,16 @@ page title content = , ".roux-subsection { font-size: 0.65rem; color: var(--roux-accent); margin: 0 0 6px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; opacity: 0.75; }" , "" , ".roux-ingredient-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }" - , ".roux-ingredient-row input { margin-top: 5px; accent-color: var(--roux-accent); }" - , ".roux-ingredient-row .name { font-size: 0.9rem; line-height: 1.5; color: var(--roux-text); }" + , ".roux-ingredient-row input { margin-top: 5px; accent-color: var(--roux-accent); border-color: rgba(184,92,56,0.4); background: transparent; }" + , ".roux-ingredient-row .name { font-size: 0.9rem; line-height: 1.5; color: var(--roux-text); transition: opacity 0.15s; }" , ".roux-ingredient-row .qty { font-size: 0.8rem; color: var(--roux-accent); margin-right: 4px; }" + , ".roux-ingredient-row:has(input:checked) { opacity: 0.45; }" , "" - , ".roux-step { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }" - , ".roux-step input { margin-top: 6px; accent-color: var(--roux-accent); }" + , ".roux-step { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; transition: opacity 0.15s; }" + , ".roux-step input { margin-top: 6px; accent-color: var(--roux-accent); border-color: rgba(184,92,56,0.4); background: transparent; }" , ".roux-step .step-label { font-size: 0.75rem; color: var(--roux-accent); font-weight: 500; margin: 0 0 2px; }" , ".roux-step .step-text { font-size: 0.9rem; line-height: 1.65; margin: 0; color: var(--roux-text); }" - , ".roux-step.done { opacity: 0.5; }" - , ".roux-step.done .step-text { text-decoration: line-through; text-decoration-color: var(--roux-accent); }" + , ".roux-step:has(input:checked) { opacity: 0.45; }" , "" , ".roux-note { display: flex; gap: 12px; padding: 8px 0; }" , ".roux-note .ornament { font-size: 1.4rem; color: var(--roux-accent); line-height: 1; margin-top: -1px; }"