jbrechtel/roux
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Custom checkbox with dark checkmark

Browse Source 
- 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
This commit is contained in:
James Brechtel
2026-05-19 10:07:04 -04:00
parent 4f02599e63
commit 9e15126374
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cooklang-examples/OlivierSalad.cook
+4
View File
@@ -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}.
src/Roux/Html.hs
+6 -2
View File
@@ -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; }"