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) {
ctx.save();
ctx.strokeStyle = "rgba(246,173,85,0.65)";
ctx.strokeStyle = pal.waveformPeak.replace(/[\d.]+\)$/, "0.65)");
ctx.lineWidth = 1 * dpr;
ctx.setLineDash([4 * dpr, 3 * dpr]);
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 {
position: absolute;
transform: translateX(-50%);
transform: translate(-50%, -50%);
top: 50%;
white-space: nowrap;
top: 3px;
cursor: pointer;
font-weight: 600;
font-size: 0.66rem;
background: rgba(246,173,85,0.18);
color: #b05e10;
border: 1px solid rgba(246,173,85,0.60);
background: color-mix(in srgb, var(--accent-yellow) 14%, transparent);
color: var(--accent-yellow);
border: 1px solid color-mix(in srgb, var(--accent-yellow) 55%, transparent);
border-radius: 3px;
padding: 2px 8px 2px 6px;
padding: 2px 8px;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
@@ -1557,11 +1557,10 @@ button:focus-visible, input:focus-visible, select:focus-visible {
gap: 4px;
}
#spectrum-bookmark-axis span:hover {
background: rgba(246,173,85,0.35);
color: #7a4000;
background: color-mix(in srgb, var(--accent-yellow) 28%, transparent);
}
.bm-icon-svg path {
fill: rgba(246,173,85,0.92);
fill: var(--accent-yellow);
}
#spectrum-tooltip {
display: none;