feat: Dan Mode v2 — no grey anywhere, maximum neon
- 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
This commit is contained in:
Falkan
110
src/app.css
110
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 ──────────────────────────────────────────────────────────── */
|
||||
|
||||
Reference in New Issue
Block a user