alexei.dolgolyov/media-player-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 20 Wiki Activity

ui(player): square vinyl stage, brighter tonearm, tilted sleeve

Browse Source 
- Restore 1:1 aspect-ratio on .vinyl-stage; the previous 1:0.85
  override created an inconsistent crop on resize. Replace the
  tonearm sibling's aspect-ratio with explicit height:36% so its
  vertical span tracks the stage instead of its own width.
- Brighten the tonearm SVG: lighter pivot/arm gradient stops,
  thicker stroke widths, stronger cartridge highlight.
- Add a subtle -2deg tilt to the sleeve so it reads as physically
  resting on the disc rather than rectilinearly composed.
This commit is contained in:
Admin
2026-05-01 19:40:04 +03:00
parent 261a14c575
commit d27484a46d
2 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
media_server/static/css/styles.css
+16 -9
View File
@@ -4416,15 +4416,9 @@ header .brand-sub {
}
/* ─── Vinyl stage ──────────────────────────────────────────── */
/* Aspect-ratio is intentionally wider than tall: the sleeve+disc
composition only fills the top ~82% of a square; a strict 1:1 stage
left an ~18% empty band below the disc and forced the grid row
taller than the masthead column, painting a large dead gap at the
bottom of the page. 1:0.85 trims that band while keeping the disc
(bottom anchor at top:19.4% + 63% = 82.4% of height) safely inside. */
.album-art-container.vinyl-stage {
position: relative;
aspect-ratio: 1 / 0.85;
aspect-ratio: 1;
width: 100%;
max-width: none;
padding: 0;
@@ -4561,7 +4555,7 @@ header .brand-sub {
top: 26%;
right: -6%;
width: 36%;
aspect-ratio: 1;
height: 36%;
pointer-events: none;
transform-origin: 88% 12%;
transform: rotate(-22deg);
@@ -4667,6 +4661,12 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
-2px 8px 24px rgba(0, 0, 0, 0.5),
-4px 18px 44px rgba(0, 0, 0, 0.35);
overflow: hidden;
/* Subtle counterclockwise tilt — sleeve rests on the disc as if
casually placed, breaking up the otherwise rigid rectilinear
grid. The shadow above carries the same diagonal so the lean
reads as physical rather than transformed. */
transform: rotate(-2deg);
transform-origin: 50% 60%;
}
:root[data-theme="light"] .vinyl-stage .sleeve {
background: transparent;
@@ -7950,10 +7950,16 @@ select option {
display: inline-flex;
align-items: center;
gap: 10px;
/* Allow text to wrap so we don't ellipsis-truncate the model name */
min-width: 0;
}
/* Truncate the monitor name itself, not its sibling badge — putting
overflow:hidden on the parent flex container clipped the favourite
star whenever the model name was long enough to ellipsis. */
.display-container .display-monitor-name-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.display-container .display-monitor-details {
font-family: var(--mono);
@@ -7973,6 +7979,7 @@ select option {
margin: 0;
line-height: 0;
vertical-align: middle;
flex-shrink: 0;
filter: drop-shadow(0 0 4px var(--copper-glow));
}
.display-container .display-primary-badge svg {
media_server/static/index.html
+11 -11
View File
@@ -206,19 +206,19 @@
<svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
<defs>
<linearGradient id="armGrad" x1="0" x2="1">
<stop offset="0" stop-color="#3a3528"/>
<stop offset="0.5" stop-color="#9C937F"/>
<stop offset="1" stop-color="#5C5447"/>
<stop offset="0" stop-color="#6d5f44"/>
<stop offset="0.5" stop-color="#d8c39a"/>
<stop offset="1" stop-color="#8a7a5a"/>
</linearGradient>
</defs>
<circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
<circle cx="176" cy="24" r="6" fill="#3A3528"/>
<circle cx="176" cy="24" r="2" fill="#E08038"/>
<line x1="176" y1="24" x2="64" y2="136" stroke="url(#armGrad)" stroke-width="3.5" stroke-linecap="round"/>
<rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
<rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
<circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
<circle cx="62" cy="138" r="6" fill="none" stroke="#E08038" stroke-width="0.5" opacity="0.4"/>
<circle cx="176" cy="24" r="14" fill="#2a241c" stroke="#9C835A" stroke-width="1.5"/>
<circle cx="176" cy="24" r="6" fill="#5C5447"/>
<circle cx="176" cy="24" r="2.5" fill="#E08038"/>
<line x1="176" y1="24" x2="64" y2="136" stroke="url(#armGrad)" stroke-width="5" stroke-linecap="round"/>
<rect x="180" y="14" width="14" height="20" fill="#3A3528" stroke="#9C835A" stroke-width="1"/>
<rect x="56" y="128" width="22" height="18" rx="2" fill="#3A3528" stroke="#9C835A" stroke-width="1" transform="rotate(-45 67 137)"/>
<circle cx="62" cy="138" r="3.5" fill="#E08038" opacity="0.95"/>
<circle cx="62" cy="138" r="7" fill="none" stroke="#E08038" stroke-width="0.8" opacity="0.5"/>
</svg>
<canvas id="spectrogram-canvas" class="spectrogram-canvas" width="300" height="64"></canvas>
</div>