RCA-2026-03-24-001: Fix Applied

Resolution

Immediate Actions

  1. Read screenshots - Analyzed side-by-side comparison

  2. Identified specific CSS properties - border, background-color, pointer-events

  3. Fixed double border - Removed border from inner pre

  4. Changed badge colors - rgba(0,0,0,0.6) → #0077b6

  5. Added theme switcher - localStorage-persisted theme toggle

  6. Fixed Tridactyl - Added pointer-events: auto and z-index: 10

CSS Fixes Applied

Round 1 Fixes

/* BEFORE: Double border */
.doc .listingblock .content { border: 1px solid #0077b6; }
.doc .listingblock pre { border: 1px solid #0077b6; } /* DUPLICATE */

/* AFTER: Single border */
.doc .listingblock .content { border: 1px solid #0077b6; }
.doc .listingblock .content pre { border: none !important; }

Round 2 Fixes

/* BEFORE: Cyan badge (wrong), invisible button */
.doc .source-toolbox .source-lang { background: #0077b6; }
.doc .source-toolbox .copy-button { background: #0077b6; } /* Not applying */

/* AFTER: Dark grey badge, cyan filled button with !important */
.doc .source-toolbox .source-lang {
  background: #333 !important;
  color: #cdd6f4 !important;
}
.doc .source-toolbox .copy-button {
  background: #0077b6 !important;
  padding: 0.35rem !important;
}

Verification

# Generate test HTML
adoc /tmp/test-copy.adoc

# Visual verification in browser
firefox /tmp/test-copy.html

# Compare with production
firefox https://docs.domusdigitalis.dev/captures/codex/bash/xargs.html

Deferred Items

Item Description Priority

Copy toast styling

Toast feedback differs from Domus (different position, no speech bubble arrow)

P3

Toast background color

Currently cyan; Domus uses var(--doc-font-color) (dark grey)

P3

CLI Mastery: CSS Debugging Patterns

# Extract hex colors from CSS file
grep -oE '#[0-9A-Fa-f]{6}' site.css | sort -u

# Find all border properties
grep -E 'border.*:' site.css | head -20

# Extract specific class styling
awk '/\.source-toolbox/,/\}/' site.css

# Compare two CSS files for differences
diff <(grep -oE '#[0-9A-Fa-f]{6}' old.css | sort -u) \
     <(grep -oE '#[0-9A-Fa-f]{6}' new.css | sort -u)