[style](trx-frontend): add golden rain theme
Co-authored-by: OpenAI Codex <codex@openai.com> Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
@@ -508,6 +508,24 @@ const CANVAS_PALETTE = {
|
|||||||
waterfallHue: [300, 120], waterfallSat: 90, waterfallLight: [90, 45], waterfallAlpha: [0.35, 0.80],
|
waterfallHue: [300, 120], waterfallSat: 90, waterfallLight: [90, 45], waterfallAlpha: [0.35, 0.80],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
"golden-rain": {
|
||||||
|
dark: {
|
||||||
|
bg: "#120d07",
|
||||||
|
spectrumLine: "#e4b24d", spectrumFill: "rgba(228,178,77,0.11)",
|
||||||
|
spectrumGrid: "rgba(255,229,172,0.07)", spectrumLabel: "rgba(230,205,152,0.54)",
|
||||||
|
waveformLine: "rgba(236,199,108,0.92)", waveformPeak: "rgba(214,134,44,0.90)",
|
||||||
|
waveformGrid: "rgba(255,210,120,0.09)", waveformLabel: "rgba(232,214,174,0.66)",
|
||||||
|
waterfallHue: [40, 18], waterfallSat: 88, waterfallLight: [8, 58], waterfallAlpha: [0.26, 0.84],
|
||||||
|
},
|
||||||
|
light: {
|
||||||
|
bg: "#f5ecd9",
|
||||||
|
spectrumLine: "#9e6700", spectrumFill: "rgba(158,103,0,0.12)",
|
||||||
|
spectrumGrid: "rgba(82,55,14,0.09)", spectrumLabel: "rgba(82,55,14,0.55)",
|
||||||
|
waveformLine: "rgba(140,92,0,0.94)", waveformPeak: "rgba(191,86,0,0.90)",
|
||||||
|
waveformGrid: "rgba(82,55,14,0.11)", waveformLabel: "rgba(82,55,14,0.66)",
|
||||||
|
waterfallHue: [45, 18], waterfallSat: 86, waterfallLight: [92, 42], waterfallAlpha: [0.34, 0.82],
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function currentStyle() {
|
function currentStyle() {
|
||||||
@@ -522,7 +540,7 @@ function canvasPalette() {
|
|||||||
|
|
||||||
function setStyle(style) {
|
function setStyle(style) {
|
||||||
const remapped = style === "nord" ? "arctic" : style === "monokai" ? "lime" : style;
|
const remapped = style === "nord" ? "arctic" : style === "monokai" ? "lime" : style;
|
||||||
const valid = ["original", "arctic", "lime", "contrast", "neon-disco"];
|
const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain"];
|
||||||
const next = valid.includes(remapped) ? remapped : "original";
|
const next = valid.includes(remapped) ? remapped : "original";
|
||||||
if (next === "original") {
|
if (next === "original") {
|
||||||
document.documentElement.removeAttribute("data-style");
|
document.documentElement.removeAttribute("data-style");
|
||||||
|
|||||||
@@ -45,6 +45,7 @@
|
|||||||
<option value="lime">Lime</option>
|
<option value="lime">Lime</option>
|
||||||
<option value="contrast">Contrast</option>
|
<option value="contrast">Contrast</option>
|
||||||
<option value="neon-disco">Neon Disco</option>
|
<option value="neon-disco">Neon Disco</option>
|
||||||
|
<option value="golden-rain">Golden Rain</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
|
<button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
|
||||||
|
|||||||
@@ -2101,3 +2101,61 @@ button:focus-visible, input:focus-visible, select:focus-visible {
|
|||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Golden Rain 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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user