audio/tcdweb
2
0
Fork 0
mirror of https://codeberg.org/armin/tcdweb.git synced 2026-09-01 05:30:45 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add color legend to live spectrum section

Browse source 
Add a 4-item legend below the realtime FFT chart explaining the line
colors: FFT Spectrum (cyan), Peak Hold (white), Max Peaks (orange),
Cutoff (red). Also add corresponding CSS classes for the legend
layout and swatches, including a dashed variant for the
spectrum-section legend.
This commit is contained in:
Armin 2026-07-06 18:10:26 +02:00
commit 2d91d847d4
2 changed files with 33 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
style.css
View file

@ -190,6 +190,33 @@ section h2 {
}
#spectrumChart { height: 360px; }
.legend {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--fg2);
font-family: var(--font);
}
.legend-swatch {
display: inline-block;
width: 12px;
height: 3px;
border-radius: 1px;
}
.legend-swatch-dashed {
width: 12px;
height: 0;
border-top: 2px dashed;
}
.player-controls {
display: flex;
align-items: center;