96 lines
4.8 KiB
CSS
96 lines
4.8 KiB
CSS
/* Code-Kumpel Pixel-Themes – body[data-theme="…"] Overrides */
|
||
:root, body[data-theme="default"]{
|
||
--px-ink:#0b0e1c; --px-bg:#0f1222; --px-panel:#171b33; --px-panel2:#232849;
|
||
--px-border:#2a3260; --px-border2:#3a4480; --px-input:#333a6b;
|
||
--px-blue:#3d5afe; --px-green:#5ee6a8; --px-gold:#ffd166; --px-text:#e6e8f5;
|
||
--px-muted:#9aa3d6; --px-hint:#8a92c4; --px-accent:#8ef0c4; --px-danger:#c62848;
|
||
--px-aura:var(--px-green); --px-star:#ffd166;
|
||
}
|
||
body[data-theme="gameboy"]{
|
||
--px-ink:#0f380f; --px-bg:#0f380f; --px-panel:#1c4a1c; --px-panel2:#0f380f;
|
||
--px-border:#8bac0f; --px-border2:#9bbc0f; --px-input:#306230;
|
||
--px-blue:#8bac0f; --px-green:#9bbc0f; --px-gold:#9bbc0f; --px-text:#9bbc0f;
|
||
--px-muted:#9bbc0f; --px-hint:#8bac0f; --px-accent:#9bbc0f; --px-danger:#0f380f;
|
||
--px-aura:#9bbc0f; --px-star:#9bbc0f;
|
||
}
|
||
body[data-theme="nes"]{
|
||
--px-ink:#000000; --px-bg:#1a1a2e; --px-panel:#16213e; --px-panel2:#0f3460;
|
||
--px-border:#e94560; --px-border2:#f5a623; --px-input:#0f3460;
|
||
--px-blue:#2088ff; --px-green:#00d26a; --px-gold:#f5a623; --px-text:#f5f5f5;
|
||
--px-muted:#a0aec0; --px-hint:#7f8c9b; --px-accent:#00d26a; --px-danger:#e94560;
|
||
--px-aura:#2088ff; --px-star:#f5a623;
|
||
}
|
||
body[data-theme="crt"]{
|
||
--px-ink:#001100; --px-bg:#000800; --px-panel:#001a00; --px-panel2:#002200;
|
||
--px-border:#00aa00; --px-border2:#33ff33; --px-input:#003300;
|
||
--px-blue:#00cc00; --px-green:#33ff33; --px-gold:#66ff66; --px-text:#33ff33;
|
||
--px-muted:#22aa22; --px-hint:#1a881a; --px-accent:#66ff66; --px-danger:#ff3333;
|
||
--px-aura:#33ff33; --px-star:#66ff66;
|
||
}
|
||
body[data-theme="synthwave"]{
|
||
--px-ink:#1a0033; --px-bg:#120024; --px-panel:#1f0a3c; --px-panel2:#2d1054;
|
||
--px-border:#ff2bd6; --px-border2:#00f0ff; --px-input:#3a1570;
|
||
--px-blue:#00f0ff; --px-green:#39ff14; --px-gold:#ffd166; --px-text:#f8e1ff;
|
||
--px-muted:#c9a0ff; --px-hint:#9b7ec8; --px-accent:#ff2bd6; --px-danger:#ff2b6d;
|
||
--px-aura:#ff2bd6; --px-star:#00f0ff;
|
||
}
|
||
|
||
/* Apply vars to chrome */
|
||
body{background:var(--px-bg);color:var(--px-text)}
|
||
header{background:var(--px-panel)}
|
||
h1{color:var(--px-accent)}
|
||
h3,#stagename{color:var(--px-muted)}
|
||
#mood{color:var(--px-muted)}
|
||
section{background:var(--px-panel)}
|
||
#bubble,.mem,.prop,.skill{background:var(--px-panel2)}
|
||
.bar{background:var(--px-panel2)}
|
||
input,textarea,select{background:var(--px-bg);color:var(--px-text);border-color:var(--px-input)}
|
||
button,.filebtn{background:var(--px-blue)}
|
||
nav button{background:var(--px-panel2)}
|
||
nav button.active{background:var(--px-blue)}
|
||
.danger{background:var(--px-danger)}
|
||
.ghost{background:var(--px-panel2)}
|
||
.hint,.meta{color:var(--px-hint)}
|
||
.confirm{color:var(--px-accent)}
|
||
.tag{background:var(--px-panel)}
|
||
#xpbar{background:repeating-linear-gradient(90deg,var(--px-green) 0 6px,color-mix(in srgb,var(--px-green) 70%,#000) 6px 8px)}
|
||
section,.mem,.prop,#bubble,.skill{box-shadow:0 0 0 3px var(--px-ink),0 0 0 6px var(--px-border),6px 6px 0 6px var(--px-ink)}
|
||
#bubble{box-shadow:0 0 0 3px var(--px-ink),0 0 0 5px var(--px-border2)}
|
||
.bar{box-shadow:0 0 0 3px var(--px-ink),0 0 0 5px var(--px-border2)}
|
||
button,.filebtn{box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.25),0 0 0 3px var(--px-ink)}
|
||
input:focus,textarea:focus,select:focus{border-color:var(--px-green)}
|
||
|
||
/* CRT scanlines overlay */
|
||
body[data-theme="crt"]::after{
|
||
content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
|
||
background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);
|
||
mix-blend-mode:multiply;
|
||
}
|
||
body[data-theme="gameboy"] h1,body[data-theme="crt"] h1{text-shadow:3px 3px 0 var(--px-ink)}
|
||
|
||
/* Light pixel theme (#65) */
|
||
body[data-theme="light"]{
|
||
--px-ink:#1a1a2e; --px-bg:#e8ecf8; --px-panel:#ffffff; --px-panel2:#f0f3ff;
|
||
--px-border:#3d5afe; --px-border2:#6fa8ff; --px-input:#c5cae9;
|
||
--px-blue:#3d5afe; --px-green:#00a86b; --px-gold:#c9a227; --px-text:#1a1a2e;
|
||
--px-muted:#4f5bb0; --px-hint:#5c6bc0; --px-accent:#00897b; --px-danger:#c62848;
|
||
--px-aura:#00a86b; --px-star:#c9a227;
|
||
}
|
||
body[data-theme="light"]{
|
||
background:var(--px-bg) repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.03) 3px 4px);
|
||
}
|
||
|
||
body[data-theme="sunset"]{
|
||
--px-ink:#2a0a00; --px-bg:#1a0a14; --px-panel:#2a1020; --px-panel2:#3d1830;
|
||
--px-border:#ff6b35; --px-border2:#ff9f1c; --px-input:#4a2040;
|
||
--px-blue:#ff6b35; --px-green:#ff9f1c; --px-gold:#ffd166; --px-text:#ffe8d6;
|
||
--px-muted:#d4a5a5; --px-hint:#b08080; --px-accent:#ff6bcb; --px-danger:#c62848;
|
||
--px-aura:#ff6b35; --px-star:#ffd166;
|
||
}
|
||
body[data-theme="ice"]{
|
||
--px-ink:#0a1a2a; --px-bg:#0a1628; --px-panel:#102038; --px-panel2:#183050;
|
||
--px-border:#7ec8e3; --px-border2:#a8e6ff; --px-input:#1a4060;
|
||
--px-blue:#4fc3f7; --px-green:#80deea; --px-gold:#e0f7fa; --px-text:#e3f2fd;
|
||
--px-muted:#90caf9; --px-hint:#64b5f6; --px-accent:#81d4fa; --px-danger:#ef5350;
|
||
--px-aura:#4fc3f7; --px-star:#e0f7fa;
|
||
}
|