From 9e15126374e5233f7382626646856848edcb5300 Mon Sep 17 00:00:00 2001 From: James Brechtel Date: Tue, 19 May 2026 10:07:04 -0400 Subject: [PATCH] Custom checkbox with dark checkmark MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace native checkbox with appearance:none custom styling - Unchecked: transparent bg, terracotta border - Checked: terracotta background, dark checkmark (✓) in #3D2C1E - Same styling for both ingredient rows and method steps --- cooklang-examples/OlivierSalad.cook | 4 ++++ src/Roux/Html.hs | 8 ++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/cooklang-examples/OlivierSalad.cook b/cooklang-examples/OlivierSalad.cook index e7a8f57..8e62af7 100644 --- a/cooklang-examples/OlivierSalad.cook +++ b/cooklang-examples/OlivierSalad.cook @@ -1,3 +1,7 @@ +--- +title: Olivier Salad +--- + -- TODO add source Zero step is cook @corn beef{1%kg}. Put into a large pan and simmer for ~{2%hours}. diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs index 3fff0e0..e798030 100644 --- a/src/Roux/Html.hs +++ b/src/Roux/Html.hs @@ -119,13 +119,17 @@ 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); border-color: rgba(184,92,56,0.4); background: transparent; }" + , ".roux-ingredient-row input { margin-top: 5px; appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid rgba(184,92,56,0.5); border-radius: 3px; background: transparent; cursor: pointer; flex-shrink: 0; position: relative; }" + , ".roux-ingredient-row input:checked { background: var(--roux-accent); border-color: var(--roux-accent); }" + , ".roux-ingredient-row input:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 12px; font-weight: 700; color: #3D2C1E; line-height: 1; }" , ".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; 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 input { margin-top: 6px; appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid rgba(184,92,56,0.5); border-radius: 3px; background: transparent; cursor: pointer; flex-shrink: 0; position: relative; }" + , ".roux-step input:checked { background: var(--roux-accent); border-color: var(--roux-accent); }" + , ".roux-step input:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 12px; font-weight: 700; color: #3D2C1E; line-height: 1; }" , ".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:has(input:checked) { opacity: 0.45; }"