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

remove empty-state, set min-height on canvas-area to prevent UI jump, fix pause/stop after clear

Browse source
This commit is contained in:
Armin 2026-07-08 19:46:39 +02:00
commit 7f68be1243
1 changed files with 1 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -33,7 +33,7 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
.player .track-info .artist-name { font-size: 12px; color: #6b7089; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player .track-info .artist-name { font-size: 12px; color: #6b7089; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big-time { font-size: 28px; font-weight: 200; color: #d2d4de; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } .big-time { font-size: 28px; font-weight: 200; color: #d2d4de; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.big-time .sep { color: #6b7089; margin: 0 4px; } .big-time .sep { color: #6b7089; margin: 0 4px; }
.canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; margin-right: 16px; } .canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; min-height: 174px; gap: 6px; margin-right: 16px; }
.progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } .progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.waveform-wrap { flex: 1; min-width: 0; cursor: pointer; position: relative; height: 42px; } .waveform-wrap { flex: 1; min-width: 0; cursor: pointer; position: relative; height: 42px; }
.waveform-wrap canvas { display: block; width: 100%; height: 42px; } .waveform-wrap canvas { display: block; width: 100%; height: 42px; }
@ -62,10 +62,6 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
.volume-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #84a0c6; cursor: pointer; } .volume-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #84a0c6; cursor: pointer; }
.volume-row .vol-icon { font-size: 14px; color: #6b7089; } .volume-row .vol-icon { font-size: 14px; color: #6b7089; }
.add-bar { display: flex; gap: 8px; padding: 10px 24px; background: linear-gradient(to bottom, #1e2132, #161821); border-top: 1px solid #272c42; flex-shrink: 0; } .add-bar { display: flex; gap: 8px; padding: 10px 24px; background: linear-gradient(to bottom, #1e2132, #161821); border-top: 1px solid #272c42; flex-shrink: 0; }
.empty-state { display: none; text-align: center; width: 100%; height: 100px; border-radius: 6px; background: #1e2132; justify-content: center; align-items: center; flex-direction: column; gap: 4px; flex-shrink: 0; }
.empty-state .icon { font-size: 20px; opacity: .2; }
.empty-state h2 { font-size: 14px; font-weight: 600; color: #6b7089; }
.empty-state p { color: #6b7089; font-size: 11px; }
.playlist { display: flex; flex-direction: column; flex: 1; min-height: 0; } .playlist { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.playlist-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 24px; border-bottom: 1px solid #272c42; flex-shrink: 0; flex-wrap: wrap; } .playlist-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 24px; border-bottom: 1px solid #272c42; flex-shrink: 0; flex-wrap: wrap; }
.playlist-toolbar .spacer { flex: 1; } .playlist-toolbar .spacer { flex: 1; }
@ -117,7 +113,6 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
.player { flex-direction: column; align-items: stretch; } .player { flex-direction: column; align-items: stretch; }
canvas { width: 100%; height: 80px; } canvas { width: 100%; height: 80px; }
.player-right { width: 100%; } .player-right { width: 100%; }
.empty-state { width: 100%; height: 80px; }
#vuMeter { width: 100%; height: 20px; } #vuMeter { width: 100%; height: 20px; }
.pinned { padding: 12px; } .pinned { padding: 12px; }
.playlist-toolbar { padding: 6px 12px; } .playlist-toolbar { padding: 6px 12px; }