sjg
ba48de2d30
Sync docs to Wiki / wiki (push) Has been cancelled
Signed-off-by: Stan Grams <sjg@haxx.space>
479 lines
13 KiB
CSS
479 lines
13 KiB
CSS
/*
|
|
SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
|
|
|
SPDX-License-Identifier: GPL-2.0-or-later
|
|
*/
|
|
|
|
/* ── Arctic style ─────────────────────────────────────────────────────── */
|
|
[data-style="arctic"] {
|
|
--bg: #242933;
|
|
--card-bg: #2e3440;
|
|
--input-bg: #242933;
|
|
--border: #3b4252;
|
|
--border-light: #4c566a;
|
|
--text: #d8dee9;
|
|
--text-muted: #8a9ab0;
|
|
--text-heading: #eceff4;
|
|
--btn-bg: #3b4252;
|
|
--btn-border: #5e6f88;
|
|
--accent-green: #88c0d0;
|
|
--accent-yellow: #ebcb8b;
|
|
--accent-red: #bf616a;
|
|
--jog-hi: #434c5e;
|
|
--jog-lo: #3b4252;
|
|
--jog-shadow: rgba(0,0,0,0.40);
|
|
--jog-inset: rgba(255,255,255,0.06);
|
|
--audio-level-bg: #2e3440;
|
|
--audio-level-border: #4c566a;
|
|
--audio-level-fill-start: #88c0d0;
|
|
--audio-level-fill-end: #ebcb8b;
|
|
--filter-bg: #3b4252;
|
|
--filter-fg: #d8dee9;
|
|
--filter-border: #5e6f88;
|
|
--wavelength-fg: #7a8ea8;
|
|
--spectrum-bg: #1e2530;
|
|
}
|
|
[data-style="arctic"][data-theme="light"] {
|
|
--bg: #e5e9f0;
|
|
--card-bg: #eceff4;
|
|
--input-bg: #d8dee9;
|
|
--border: #c5ccd8;
|
|
--border-light: #a8b2c0;
|
|
--text: #2e3440;
|
|
--text-muted: #4c566a;
|
|
--text-heading: #2e3440;
|
|
--btn-bg: #d8dee9;
|
|
--btn-border: #8fa3b8;
|
|
--accent-green: #5e81ac;
|
|
--accent-yellow: #c07a22;
|
|
--accent-red: #bf616a;
|
|
--jog-hi: #d8dee9;
|
|
--jog-lo: #c2cbd8;
|
|
--jog-shadow: rgba(46,52,64,0.18);
|
|
--jog-inset: rgba(255,255,255,0.70);
|
|
--audio-level-bg: #d0d6e0;
|
|
--audio-level-border: #a8b2c0;
|
|
--audio-level-fill-start: #5e81ac;
|
|
--audio-level-fill-end: #c07a22;
|
|
--filter-bg: #d8dee9;
|
|
--filter-fg: #2e3440;
|
|
--filter-border: #8fa3b8;
|
|
--wavelength-fg: #5a6a80;
|
|
--spectrum-bg: #dde1e9;
|
|
}
|
|
|
|
/* ── Lime style ───────────────────────────────────────────────────────── */
|
|
[data-style="lime"] {
|
|
--bg: #1c1c17;
|
|
--card-bg: #272822;
|
|
--input-bg: #1c1c17;
|
|
--border: #3e3d32;
|
|
--border-light: #5c5c45;
|
|
--text: #f8f8f2;
|
|
--text-muted: #908980;
|
|
--text-heading: #f8f8f2;
|
|
--btn-bg: #3e3d32;
|
|
--btn-border: #75715e;
|
|
--accent-green: #a6e22e;
|
|
--accent-yellow: #e6db74;
|
|
--accent-red: #f92672;
|
|
--jog-hi: #49483e;
|
|
--jog-lo: #3e3d32;
|
|
--jog-shadow: rgba(0,0,0,0.45);
|
|
--jog-inset: rgba(255,255,255,0.05);
|
|
--audio-level-bg: #272822;
|
|
--audio-level-border: #5c5c45;
|
|
--audio-level-fill-start: #a6e22e;
|
|
--audio-level-fill-end: #e6db74;
|
|
--filter-bg: #3e3d32;
|
|
--filter-fg: #f8f8f2;
|
|
--filter-border: #75715e;
|
|
--wavelength-fg: #9c8f78;
|
|
--spectrum-bg: #181815;
|
|
}
|
|
[data-style="lime"][data-theme="light"] {
|
|
--bg: #f5f0e4;
|
|
--card-bg: #fdf9f2;
|
|
--input-bg: #ede8d8;
|
|
--border: #d8d0bb;
|
|
--border-light: #c0b89e;
|
|
--text: #272822;
|
|
--text-muted: #6e6a56;
|
|
--text-heading: #272822;
|
|
--btn-bg: #ede8d8;
|
|
--btn-border: #b0a888;
|
|
--accent-green: #5f8700;
|
|
--accent-yellow: #9a7200;
|
|
--accent-red: #c60052;
|
|
--jog-hi: #ede8d8;
|
|
--jog-lo: #ddd8c8;
|
|
--jog-shadow: rgba(39,40,34,0.18);
|
|
--jog-inset: rgba(255,255,255,0.75);
|
|
--audio-level-bg: #ede8d8;
|
|
--audio-level-border: #c0b89e;
|
|
--audio-level-fill-start: #5f8700;
|
|
--audio-level-fill-end: #9a7200;
|
|
--filter-bg: #ede8d8;
|
|
--filter-fg: #272822;
|
|
--filter-border: #b0a888;
|
|
--wavelength-fg: #7a7260;
|
|
--spectrum-bg: #ede8d8;
|
|
}
|
|
|
|
/* ── Contrast style ───────────────────────────────────────────────────── */
|
|
[data-style="contrast"] {
|
|
--bg: #000000;
|
|
--card-bg: #0a0a0a;
|
|
--input-bg: #111111;
|
|
--border: #333333;
|
|
--border-light: #555555;
|
|
--text: #ffffff;
|
|
--text-muted: #bbbbbb;
|
|
--text-heading: #ffffff;
|
|
--btn-bg: #1a1a1a;
|
|
--btn-border: #666666;
|
|
--accent-green: #00ff88;
|
|
--accent-yellow: #ffcc00;
|
|
--accent-red: #ff3344;
|
|
--jog-hi: #2a2a2a;
|
|
--jog-lo: #1a1a1a;
|
|
--jog-shadow: rgba(0,0,0,0.60);
|
|
--jog-inset: rgba(255,255,255,0.08);
|
|
--audio-level-bg: #111111;
|
|
--audio-level-border: #555555;
|
|
--audio-level-fill-start: #00ff88;
|
|
--audio-level-fill-end: #ffcc00;
|
|
--filter-bg: #1a1a1a;
|
|
--filter-fg: #ffffff;
|
|
--filter-border: #666666;
|
|
--wavelength-fg: #aaaaaa;
|
|
--spectrum-bg: #000000;
|
|
}
|
|
[data-style="contrast"][data-theme="light"] {
|
|
--bg: #ffffff;
|
|
--card-bg: #f4f4f4;
|
|
--input-bg: #e8e8e8;
|
|
--border: #cccccc;
|
|
--border-light: #999999;
|
|
--text: #000000;
|
|
--text-muted: #333333;
|
|
--text-heading: #000000;
|
|
--btn-bg: #e0e0e0;
|
|
--btn-border: #777777;
|
|
--accent-green: #005cc5;
|
|
--accent-yellow: #cc5500;
|
|
--accent-red: #cc0000;
|
|
--jog-hi: #e0e0e0;
|
|
--jog-lo: #cccccc;
|
|
--jog-shadow: rgba(0,0,0,0.25);
|
|
--jog-inset: rgba(255,255,255,0.80);
|
|
--audio-level-bg: #e8e8e8;
|
|
--audio-level-border: #999999;
|
|
--audio-level-fill-start: #005cc5;
|
|
--audio-level-fill-end: #cc5500;
|
|
--filter-bg: #e8e8e8;
|
|
--filter-fg: #000000;
|
|
--filter-border: #999999;
|
|
--wavelength-fg: #444444;
|
|
--spectrum-bg: #f4f4f4;
|
|
}
|
|
|
|
/* ── Neon Disco style ─────────────────────────────────────────────────── */
|
|
[data-style="neon-disco"] {
|
|
--bg: #0d0015;
|
|
--card-bg: #180026;
|
|
--input-bg: #100018;
|
|
--border: #3d0060;
|
|
--border-light: #7700bb;
|
|
--text: #f5e0ff;
|
|
--text-muted: #b070d8;
|
|
--text-heading: #fce8ff;
|
|
--btn-bg: #2a0042;
|
|
--btn-border: #9900dd;
|
|
--accent-green: #ff10e0;
|
|
--accent-yellow: #39ff14;
|
|
--accent-red: #ff1460;
|
|
--jog-hi: #360058;
|
|
--jog-lo: #280042;
|
|
--jog-shadow: rgba(0,0,0,0.65);
|
|
--jog-inset: rgba(255,16,224,0.08);
|
|
--audio-level-bg: #180026;
|
|
--audio-level-border: #7700bb;
|
|
--audio-level-fill-start: #ff10e0;
|
|
--audio-level-fill-end: #39ff14;
|
|
--filter-bg: #2a0042;
|
|
--filter-fg: #f5e0ff;
|
|
--filter-border: #9900dd;
|
|
--wavelength-fg: #9055b8;
|
|
--spectrum-bg: #090010;
|
|
}
|
|
[data-style="neon-disco"][data-theme="light"] {
|
|
--bg: #faeeff;
|
|
--card-bg: #fff4ff;
|
|
--input-bg: #f2e0ff;
|
|
--border: #dda8f5;
|
|
--border-light: #cc80e8;
|
|
--text: #1a0030;
|
|
--text-muted: #7a30a0;
|
|
--text-heading: #1a0030;
|
|
--btn-bg: #f0d8ff;
|
|
--btn-border: #bb80dd;
|
|
--accent-green: #cc00a8;
|
|
--accent-yellow: #1f8800;
|
|
--accent-red: #cc0044;
|
|
--jog-hi: #f0d8ff;
|
|
--jog-lo: #e2c8f5;
|
|
--jog-shadow: rgba(60,0,100,0.18);
|
|
--jog-inset: rgba(255,255,255,0.72);
|
|
--audio-level-bg: #f0d8ff;
|
|
--audio-level-border: #cc80e8;
|
|
--audio-level-fill-start: #cc00a8;
|
|
--audio-level-fill-end: #1f8800;
|
|
--filter-bg: #f0d8ff;
|
|
--filter-fg: #1a0030;
|
|
--filter-border: #bb80dd;
|
|
--wavelength-fg: #7030a0;
|
|
--spectrum-bg: #f0d8ff;
|
|
}
|
|
/* ── Donald style ─────────────────────────────────────────────────────── */
|
|
[data-style="golden-rain"] {
|
|
--bg: #100c06;
|
|
--card-bg: #1a1209;
|
|
--input-bg: #140f08;
|
|
--border: #3f2d18;
|
|
--border-light: #6d4e23;
|
|
--text: #f3e4bf;
|
|
--text-muted: #aa9062;
|
|
--text-heading: #fff0ca;
|
|
--btn-bg: #2a1c0d;
|
|
--btn-border: #7c5928;
|
|
--accent-green: #dfac48;
|
|
--accent-yellow: #f4cd74;
|
|
--accent-red: #cf7d32;
|
|
--jog-hi: #392610;
|
|
--jog-lo: #24170b;
|
|
--jog-shadow: rgba(0,0,0,0.64);
|
|
--jog-inset: rgba(255,219,138,0.06);
|
|
--audio-level-bg: #1c130a;
|
|
--audio-level-border: #6d4e23;
|
|
--audio-level-fill-start: #dfac48;
|
|
--audio-level-fill-end: #f4cd74;
|
|
--filter-bg: #2b1d0f;
|
|
--filter-fg: #f3e4bf;
|
|
--filter-border: #7c5928;
|
|
--wavelength-fg: #ab8b52;
|
|
--spectrum-bg: #120d07;
|
|
}
|
|
[data-style="golden-rain"][data-theme="light"] {
|
|
--bg: #f7efdd;
|
|
--card-bg: #fff9ec;
|
|
--input-bg: #f0e3c6;
|
|
--border: #d4bc8a;
|
|
--border-light: #b99243;
|
|
--text: #3f2c10;
|
|
--text-muted: #7f6640;
|
|
--text-heading: #3a2609;
|
|
--btn-bg: #f0e3c6;
|
|
--btn-border: #b99243;
|
|
--accent-green: #a96d00;
|
|
--accent-yellow: #c88a16;
|
|
--accent-red: #b65316;
|
|
--jog-hi: #f2e5c8;
|
|
--jog-lo: #e3d1a8;
|
|
--jog-shadow: rgba(82,55,14,0.16);
|
|
--jog-inset: rgba(255,255,255,0.76);
|
|
--audio-level-bg: #f0e3c6;
|
|
--audio-level-border: #c5a15d;
|
|
--audio-level-fill-start: #a96d00;
|
|
--audio-level-fill-end: #d4a13a;
|
|
--filter-bg: #f0e3c6;
|
|
--filter-fg: #3f2c10;
|
|
--filter-border: #b99243;
|
|
--wavelength-fg: #87663a;
|
|
--spectrum-bg: #f5ecd9;
|
|
}
|
|
|
|
/* ── Amber style ──────────────────────────────────────────────────────── */
|
|
[data-style="amber"] {
|
|
--bg: #120706;
|
|
--card-bg: #1b0c0a;
|
|
--input-bg: #180907;
|
|
--border: #4c1a12;
|
|
--border-light: #7a2e1a;
|
|
--text: #ffe7d2;
|
|
--text-muted: #c78361;
|
|
--text-heading: #fff3e7;
|
|
--btn-bg: #2c110d;
|
|
--btn-border: #8f3a20;
|
|
--accent-green: #ff6f1f;
|
|
--accent-yellow: #ffb347;
|
|
--accent-red: #ff4a24;
|
|
--jog-hi: #381510;
|
|
--jog-lo: #24100c;
|
|
--jog-shadow: rgba(0,0,0,0.62);
|
|
--jog-inset: rgba(255,164,76,0.07);
|
|
--audio-level-bg: #1f0d0a;
|
|
--audio-level-border: #7a2e1a;
|
|
--audio-level-fill-start: #ff4a24;
|
|
--audio-level-fill-end: #ffb347;
|
|
--filter-bg: #2b120d;
|
|
--filter-fg: #ffe7d2;
|
|
--filter-border: #8f3a20;
|
|
--wavelength-fg: #d38d6a;
|
|
--spectrum-bg: #140907;
|
|
}
|
|
[data-style="amber"][data-theme="light"] {
|
|
--bg: #fff3ea;
|
|
--card-bg: #fff7f0;
|
|
--input-bg: #ffe9da;
|
|
--border: #efc7b1;
|
|
--border-light: #d9a487;
|
|
--text: #42180d;
|
|
--text-muted: #8a4b31;
|
|
--text-heading: #2f120a;
|
|
--btn-bg: #ffe2cf;
|
|
--btn-border: #cc8563;
|
|
--accent-green: #d24c12;
|
|
--accent-yellow: #d88400;
|
|
--accent-red: #c53114;
|
|
--jog-hi: #ffe2cf;
|
|
--jog-lo: #ffd5bc;
|
|
--jog-shadow: rgba(108,44,15,0.18);
|
|
--jog-inset: rgba(255,255,255,0.72);
|
|
--audio-level-bg: #ffe7d7;
|
|
--audio-level-border: #d9a487;
|
|
--audio-level-fill-start: #c53114;
|
|
--audio-level-fill-end: #d88400;
|
|
--filter-bg: #ffe2cf;
|
|
--filter-fg: #42180d;
|
|
--filter-border: #cc8563;
|
|
--wavelength-fg: #9a5a3a;
|
|
--spectrum-bg: #fff0e4;
|
|
}
|
|
|
|
/* ── Fire style ───────────────────────────────────────────────────────── */
|
|
[data-style="fire"] {
|
|
--bg: #140406;
|
|
--card-bg: #1d0708;
|
|
--input-bg: #1a0607;
|
|
--border: #551015;
|
|
--border-light: #8f1f26;
|
|
--text: #ffe6df;
|
|
--text-muted: #cf8d82;
|
|
--text-heading: #fff4ef;
|
|
--btn-bg: #2d0c0d;
|
|
--btn-border: #9d262b;
|
|
--accent-green: #d13a32;
|
|
--accent-yellow: #ff6a3d;
|
|
--accent-red: #c10f1f;
|
|
--jog-hi: #390f11;
|
|
--jog-lo: #25090b;
|
|
--jog-shadow: rgba(0,0,0,0.64);
|
|
--jog-inset: rgba(255,120,100,0.06);
|
|
--audio-level-bg: #22090b;
|
|
--audio-level-border: #8f1f26;
|
|
--audio-level-fill-start: #c10f1f;
|
|
--audio-level-fill-end: #ff6a3d;
|
|
--filter-bg: #2d0c0d;
|
|
--filter-fg: #ffe6df;
|
|
--filter-border: #9d262b;
|
|
--wavelength-fg: #d78d78;
|
|
--spectrum-bg: #150508;
|
|
}
|
|
[data-style="fire"][data-theme="light"] {
|
|
--bg: #fdf0ea;
|
|
--card-bg: #fff6f1;
|
|
--input-bg: #ffe5db;
|
|
--border: #e9b8aa;
|
|
--border-light: #d27c66;
|
|
--text: #4a110d;
|
|
--text-muted: #8a493f;
|
|
--text-heading: #340b08;
|
|
--btn-bg: #ffd9cc;
|
|
--btn-border: #c85b47;
|
|
--accent-green: #ba2d24;
|
|
--accent-yellow: #d95518;
|
|
--accent-red: #a80f1c;
|
|
--jog-hi: #ffd9cc;
|
|
--jog-lo: #ffcab9;
|
|
--jog-shadow: rgba(110,35,20,0.18);
|
|
--jog-inset: rgba(255,255,255,0.74);
|
|
--audio-level-bg: #ffe2d7;
|
|
--audio-level-border: #d27c66;
|
|
--audio-level-fill-start: #a80f1c;
|
|
--audio-level-fill-end: #d95518;
|
|
--filter-bg: #ffd9cc;
|
|
--filter-fg: #4a110d;
|
|
--filter-border: #c85b47;
|
|
--wavelength-fg: #9d5547;
|
|
--spectrum-bg: #ffede5;
|
|
}
|
|
|
|
/* ── Phosphor style ───────────────────────────────────────────────────── */
|
|
/* Classic green-phosphor CRT terminal aesthetic */
|
|
[data-style="phosphor"] {
|
|
--bg: #030a03;
|
|
--card-bg: #060e06;
|
|
--input-bg: #030a03;
|
|
--border: #0f2e0f;
|
|
--border-light: #1a4a1a;
|
|
--text: #a8e6a8;
|
|
--text-muted: #5a9a5a;
|
|
--text-heading: #c8f0c8;
|
|
--btn-bg: #0a1e0a;
|
|
--btn-border: #1e4a1e;
|
|
--accent-green: #39ff14;
|
|
--accent-yellow: #b8f060;
|
|
--accent-red: #ff4444;
|
|
--jog-hi: #0e2a0e;
|
|
--jog-lo: #081808;
|
|
--jog-shadow: rgba(0,0,0,0.65);
|
|
--jog-inset: rgba(57,255,20,0.07);
|
|
--audio-level-bg: #060e06;
|
|
--audio-level-border: #1a4a1a;
|
|
--audio-level-fill-start: #39ff14;
|
|
--audio-level-fill-end: #b8f060;
|
|
--filter-bg: #0a1e0a;
|
|
--filter-fg: #a8e6a8;
|
|
--filter-border: #1e4a1e;
|
|
--wavelength-fg: #4a8a4a;
|
|
--spectrum-bg: #010501;
|
|
}
|
|
[data-style="phosphor"] #freq {
|
|
color: #39ff14;
|
|
text-shadow: 0 0 8px rgba(57,255,20,0.55), 0 0 20px rgba(57,255,20,0.2);
|
|
}
|
|
[data-style="phosphor"] .signal-bar-fill,
|
|
[data-style="phosphor"] .meter-fill {
|
|
background: linear-gradient(90deg, #39ff14, #b8f060);
|
|
box-shadow: 0 0 6px rgba(57,255,20,0.45);
|
|
}
|
|
[data-style="phosphor"][data-theme="light"] {
|
|
--bg: #e8f5e8;
|
|
--card-bg: #f0faf0;
|
|
--input-bg: #dff0df;
|
|
--border: #b0d8b0;
|
|
--border-light: #80c080;
|
|
--text: #0a2a0a;
|
|
--text-muted: #2a6a2a;
|
|
--text-heading: #062006;
|
|
--btn-bg: #d0ebd0;
|
|
--btn-border: #4a8a4a;
|
|
--accent-green: #1a7a1a;
|
|
--accent-yellow: #4a8a00;
|
|
--accent-red: #cc2222;
|
|
--jog-hi: #d0ebd0;
|
|
--jog-lo: #bcdabc;
|
|
--jog-shadow: rgba(10,42,10,0.15);
|
|
--jog-inset: rgba(255,255,255,0.72);
|
|
--audio-level-bg: #d8edd8;
|
|
--audio-level-border: #80c080;
|
|
--audio-level-fill-start: #1a7a1a;
|
|
--audio-level-fill-end: #4a8a00;
|
|
--filter-bg: #d0ebd0;
|
|
--filter-fg: #0a2a0a;
|
|
--filter-border: #4a8a4a;
|
|
--wavelength-fg: #3a7a3a;
|
|
--spectrum-bg: #e0f0e0;
|
|
}
|