sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[style](trx-frontend-http): make bookmark markers follow theme accent colour

Browse Source 
Replace hardcoded amber values with var(--accent-yellow) throughout the
bookmark axis labels, so they automatically adapt to all UI themes.
Centre spans vertically with top:50%/translate(-50%,-50%) for equal
padding above and below. Canvas dashed line uses pal.waveformPeak
(already theme-aware) at 0.65 opacity.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-01 19:53:10 +01:00
parent 5e3f8791b5
commit 5dac587233
2 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+1 -1
View File
@@ -4274,7 +4274,7 @@ function drawSpectrum(data) {
: []; : [];
if (visBookmarks.length > 0) { if (visBookmarks.length > 0) {
ctx.save(); ctx.save();
ctx.strokeStyle = "rgba(246,173,85,0.65)"; ctx.strokeStyle = pal.waveformPeak.replace(/[\d.]+\)$/, "0.65)");
ctx.lineWidth = 1 * dpr; ctx.lineWidth = 1 * dpr;
ctx.setLineDash([4 * dpr, 3 * dpr]); ctx.setLineDash([4 * dpr, 3 * dpr]);
for (const bm of visBookmarks) { for (const bm of visBookmarks) {
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+8 -9
View File
@@ -1537,17 +1537,17 @@ button:focus-visible, input:focus-visible, select:focus-visible {
} }
#spectrum-bookmark-axis span { #spectrum-bookmark-axis span {
position: absolute; position: absolute;
transform: translateX(-50%); transform: translate(-50%, -50%);
top: 50%;
white-space: nowrap; white-space: nowrap;
top: 3px;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
font-size: 0.66rem; font-size: 0.66rem;
background: rgba(246,173,85,0.18); background: color-mix(in srgb, var(--accent-yellow) 14%, transparent);
color: #b05e10; color: var(--accent-yellow);
border: 1px solid rgba(246,173,85,0.60); border: 1px solid color-mix(in srgb, var(--accent-yellow) 55%, transparent);
border-radius: 3px; border-radius: 3px;
padding: 2px 8px 2px 6px; padding: 2px 8px;
max-width: 130px; max-width: 130px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -1557,11 +1557,10 @@ button:focus-visible, input:focus-visible, select:focus-visible {
gap: 4px; gap: 4px;
} }
#spectrum-bookmark-axis span:hover { #spectrum-bookmark-axis span:hover {
background: rgba(246,173,85,0.35); background: color-mix(in srgb, var(--accent-yellow) 28%, transparent);
color: #7a4000;
} }
.bm-icon-svg path { .bm-icon-svg path {
fill: rgba(246,173,85,0.92); fill: var(--accent-yellow);
} }
#spectrum-tooltip { #spectrum-tooltip {
display: none; display: none;