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

style: center player-right content, remove right-aligned overrides

Browse source
This commit is contained in:
Armin 2026-07-08 17:09:24 +02:00
commit a970277869
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -23,8 +23,8 @@ footer .brand { margin-left: auto; }
.pinned { flex-shrink: 0; background: linear-gradient(to bottom, #1e2132, #161821); padding: 16px 24px; display: flex; flex-direction: row; gap: 20px; align-items: center; }
.player { display: flex; flex-direction: row; width: 100%; align-items: center; gap: 24px; }
canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
.player-right { display: flex; flex-direction: column; width: 320px; flex-shrink: 0; }
.audio-info { font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; align-self: flex-end; min-height: 1.4em; }
.player-right { display: flex; flex-direction: column; width: 320px; flex-shrink: 0; align-items: center; }
.audio-info { font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.player .track-info { margin-bottom: 4px; }
.player .track-info .title { font-size: 16px; font-weight: 600; color: #c6c8d1; 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; }
@ -47,14 +47,14 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
.tag-editor-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
#timeRemaining { color: #6b7089; }
#vuMeter { width: 100%; height: 20px; border-radius: 2px; display: block; }
.controls { display: flex; align-items: center; gap: 16px; align-self: flex-end; }
.controls { display: flex; align-items: center; gap: 16px; }
.controls button { background: linear-gradient(to bottom, #272c42, #1e2132); border: none; color: #c6c8d1; cursor: pointer; padding: 6px; font-size: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #161821, 0 3px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); }
.controls button:hover { color: #d2d4de; background: linear-gradient(to bottom, #2e3348, #272c42); }
.controls button:active { background: linear-gradient(to bottom, #1e2132, #272c42); box-shadow: 0 1px 0 #161821, 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); transform: translateY(1px); }
.controls .play-btn { width: 44px; height: 44px; background: linear-gradient(to bottom, #91acd1, #84a0c6); color: #161821; font-size: 16px; border: 1px solid #84a0c6; box-shadow: 0 3px 0 #6b88b0, 0 4px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); }
.controls .play-btn:hover { background: linear-gradient(to bottom, #a0b8db, #91acd1); }
.controls .play-btn:active { background: linear-gradient(to bottom, #84a0c6, #91acd1); box-shadow: 0 1px 0 #6b88b0, 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); transform: translateY(2px); }
.volume-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; width: 100%; max-width: 200px; align-self: flex-end; }
.volume-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; width: 100%; max-width: 200px; }
.volume-row input[type="range"] { flex: 1; height: 3px; -webkit-appearance: none; appearance: none; background: #272c42; border-radius: 2px; outline: none; }
.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; }