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

Gray checkbox styling and checked-state dimming

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