From 7cc893d48fdad9095e7e00ef412304cc0a2d034c Mon Sep 17 00:00:00 2001 From: Falkan Date: Tue, 17 Mar 2026 11:33:29 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20Dan=20Mode=20v2=20=E2=80=94=20no=20grey?= =?UTF-8?q?=20anywhere,=20maximum=20neon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Override --pico-box-shadow (had grey rgba values) with pure magenta/yellow glow - Article/card: white bg, magenta border, yellow+magenta box-shadow - Inputs/selects: yellow bg, magenta border, blue text (!important to beat Pico specificity) - Dropdown: yellow bg, magenta border - Footer: yellow bg, magenta border, red text - Sharp corners (--pico-border-radius: 0) for brutalist aesthetic - Hotkey hint: magenta - Nav hover: red - Header: yellow + red drop-shadow --- src/app.css | 110 +++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 87 insertions(+), 23 deletions(-) diff --git a/src/app.css b/src/app.css index ba5e79b..1099039 100644 --- a/src/app.css +++ b/src/app.css @@ -61,56 +61,98 @@ /* Base */ --pico-background-color: #ffffff; - --pico-color: #0000ff; /* pure electric blue body text */ - --pico-muted-color: #ff6600; /* screaming orange for muted text */ + --pico-color: #0000ff; + --pico-muted-color: #ff6600; --pico-muted-border-color: #ff00ff; + --pico-border-radius: 0; /* sharp corners — brutalist */ - /* Cards */ + /* Pico's default box-shadow has grey in it — nuke it */ + --pico-box-shadow: 0 0 0 2px #ff00ff, 0 0 12px 2px #ffff00; + + /* Cards / article */ --pico-card-background-color: #ffffff; - --pico-card-border-color: #ff00ff; /* magenta borders */ - --pico-card-box-shadow: 0 0 12px 2px #ffff00, 0 0 4px 1px #ff00ff; + --pico-card-border-color: #ff00ff; + --pico-card-box-shadow: 0 0 0 2px #ff00ff, 0 0 12px 4px #ffff00; + --pico-card-sectioning-background-color: #ffff00; /* Primary — nuclear yellow */ --pico-primary: #cccc00; --pico-primary-background: #ffff00; - --pico-primary-border: #cccc00; - --pico-primary-hover: #aaaa00; - --pico-primary-hover-background: #eeee00; - --pico-primary-hover-border: #aaaa00; - --pico-primary-focus: rgba(255, 255, 0, 0.6); - --pico-primary-inverse: #000000; /* black text on yellow buttons */ + --pico-primary-border: #ff0000; + --pico-primary-hover: #ff0000; + --pico-primary-hover-background: #ff0000; + --pico-primary-hover-border: #ff0000; + --pico-primary-focus: rgba(255, 0, 0, 0.6); + --pico-primary-inverse: #000000; /* Secondary — hot magenta */ --pico-secondary: #ff00ff; - --pico-secondary-background: #dd00dd; + --pico-secondary-background: #ff00ff; --pico-secondary-border: #ff00ff; --pico-secondary-hover: #ff44ff; - --pico-secondary-hover-background: #ff00ff; - --pico-secondary-inverse: #ffffff; + --pico-secondary-hover-background: #cc00cc; + --pico-secondary-hover-border: #cc00cc; + --pico-secondary-inverse: #ffff00; + --pico-secondary-focus: rgba(255, 0, 255, 0.5); /* Contrast */ --pico-contrast: #000000; --pico-contrast-background: #000000; --pico-contrast-inverse: #ffff00; - /* Form elements */ - --pico-form-element-background-color: #ffffcc; + /* Form elements — bright yellow bg, magenta borders, blue text */ + --pico-form-element-background-color: #ffff00; + --pico-form-element-selected-background-color: #ffcc00; --pico-form-element-border-color: #ff00ff; --pico-form-element-color: #0000ff; + --pico-form-element-placeholder-color: #0000cc; + --pico-form-element-active-background-color: #ffff00; --pico-form-element-active-border-color: #ff0000; - --pico-form-element-focus-color: rgba(255, 0, 255, 0.5); + --pico-form-element-focus-color: rgba(255, 0, 0, 0.7); + + /* Dropdown */ + --pico-dropdown-background-color: #ffff00; + --pico-dropdown-border-color: #ff00ff; + --pico-dropdown-color: #0000ff; + --pico-dropdown-hover-background-color: #ff00ff; /* App-specific */ - --color-label: #ff0000; /* red labels */ + --color-label: #ff0000; } -/* Dan Mode: result tile text — override the [role=button] white-text reset */ +/* Body background */ +[data-theme=dan] body { + background-color: #ffffff; +} + +/* Article (ConverterCard wrapper) — override Pico's grey box-shadow */ +[data-theme=dan] article { + background: #ffffff; + border: 2px solid #ff00ff; + box-shadow: 0 0 0 2px #ffff00, 0 0 20px 4px #ff00ff; +} + +/* Input + select — yellow bg, magenta border, blue text */ +[data-theme=dan] input, +[data-theme=dan] select { + background-color: #ffff00 !important; + border-color: #ff00ff !important; + color: #0000ff !important; +} + +[data-theme=dan] input:focus, +[data-theme=dan] select:focus { + border-color: #ff0000 !important; + box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.5) !important; +} + +/* Dan Mode: result tile */ [data-theme=dan] .result-tile { --pico-color: initial; color: #0000ff; background-color: #ffffff; - border-color: #ff00ff; - box-shadow: 0 0 8px 1px #ffff00; + border: 2px solid #ff00ff; + box-shadow: 0 0 6px 1px #ffff00; } [data-theme=dan] .result-tile:hover, @@ -118,7 +160,7 @@ background-color: #ffff00; border-color: #ff0000; color: #000000; - box-shadow: 0 0 16px 4px #ff00ff; + box-shadow: 0 0 16px 4px #ff00ff, 0 0 4px 1px #ff0000; } [data-theme=dan] .result-label { @@ -129,7 +171,11 @@ [data-theme=dan] .highlighted-result { background-color: #ffff00; border-color: #ff0000 !important; - box-shadow: 0 0 20px 4px #ff00ff; + box-shadow: 0 0 0 2px #ff00ff, 0 0 20px 6px #ff0000; +} + +[data-theme=dan] .highlighted-placeholder { + color: #ff0000; } [data-theme=dan] .highlighted-eq-from, @@ -145,6 +191,7 @@ [data-theme=dan] header { background-color: #ffff00; border-bottom: 3px solid #ff00ff; + box-shadow: 0 4px 0 #ff0000; } [data-theme=dan] header strong { @@ -153,6 +200,23 @@ [data-theme=dan] header nav a { color: #0000ff !important; + font-weight: 700; +} + +[data-theme=dan] header nav a:hover { + color: #ff0000 !important; +} + +/* Hotkey hint */ +[data-theme=dan] .hotkey-hint { + color: #ff00ff; +} + +/* Footer */ +[data-theme=dan] footer { + background-color: #ffff00; + border-top: 3px solid #ff00ff; + color: #ff0000; } /* ── Results grid ──────────────────────────────────────────────────────────── */