OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Sync: update ngd-tv component styles for improved layout and dimensions

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 17:26:19 -05:00
parent 4e4549e865
commit 8c3c7a1d8a
1 changed files with 51 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
theme/assets/css/main.css
View File

@@ -4633,7 +4633,7 @@ p:last-child { margin-bottom: 0; }
.ngd-stage { .ngd-stage {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 380px; max-width: 560px;
aspect-ratio: 1/1; aspect-ratio: 1/1;
margin: 0 auto; margin: 0 auto;
} }
@@ -4642,14 +4642,14 @@ p:last-child { margin-bottom: 0; }
.ngd-tv { .ngd-tv {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 90px; top: 72px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.ngd-tv__body { .ngd-tv__body {
width: 220px; width: 400px;
height: 162px; height: 235px;
background: #111; background: #111;
border: 4px solid #111; border: 4px solid #111;
border-radius: 6px 6px 4px 4px; border-radius: 6px 6px 4px 4px;
@@ -4658,20 +4658,33 @@ p:last-child { margin-bottom: 0; }
display: flex; display: flex;
align-items: stretch; align-items: stretch;
position: relative; position: relative;
box-shadow: 0 10px 36px rgba(0,0,0,.55); box-shadow: 0 14px 48px rgba(0,0,0,.55);
} }
/* HDMI port stub on right side */ /* HDMI port stub on right side */
.ngd-tv__port { .ngd-tv__port {
position: absolute; position: absolute;
right: -5px; right: -6px;
top: 74px; top: 110px;
width: 8px; width: 6px;
height: 14px; height: 14px;
background: #1a1a1a; background: #1a1a1a;
border: 1px solid #000; border: 1px solid #000;
border-radius: 2px; border-left: none;
border-radius: 0 2px 2px 0;
}
.ngd-tv__port::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 3px;
height: 8px;
background: #333;
border-radius: 0 1px 1px 0;
} }
.ngd-tv__screen { .ngd-tv__screen {
--ngd-menu-scale-x: 1.8182;
--ngd-menu-scale-y: 1.4506;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 2px; border-radius: 2px;
@@ -4697,20 +4710,26 @@ p:last-child { margin-bottom: 0; }
/* TV feet */ /* TV feet */
.ngd-tv__feet { .ngd-tv__feet {
display: flex; display: flex;
gap: 72px; justify-content: space-between;
margin-top: 3px; width: 224px;
} }
.ngd-tv__foot { .ngd-tv__foot {
width: 28px; width: 12px;
height: 6px; height: 8px;
background: #181818; background: #111;
border-radius: 0 0 3px 3px; border: 1px solid #000;
border-radius: 0 0 4px 4px;
} }
/* ── Menu board content (always playing) ───────────────────── */ /* ── Menu board content (always playing) ───────────────────── */
.ngd-menu { .ngd-menu {
position: absolute; position: absolute;
inset: 0; left: 0;
top: 0;
width: 220px;
height: 162px;
transform: scale(var(--ngd-menu-scale-x), var(--ngd-menu-scale-y));
transform-origin: top left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 7px 6px 4px; padding: 7px 6px 4px;
@@ -4803,20 +4822,19 @@ p:last-child { margin-bottom: 0; }
/* ── Player device (stick plugged into TV right-side HDMI port) ── */ /* ── Player device (stick plugged into TV right-side HDMI port) ── */
.ngd-player { .ngd-player {
position: absolute; position: absolute;
/* TV: left(20) + border(4) + width(220) + border(4) = 248px /* TV: left(20) + border(4) + width(400) + border(4) = 428px */
port right:-5 → connector aligns to TV right edge at 248px */ left: 428px;
left: 248px; /* TV top(72) + border(4) + port.top(110) + port half-h(7) = 193px
/* TV top(90) + border(4) + port.top(74) + port half-h(7) = 175px stick h=32px → top = 193 − 16 = 177px */
stick h=26px → top = 175 − 13 = 162px */ top: 177px;
top: 162px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
/* HDMI connector plug — left side, inserts into TV port */ /* HDMI connector plug — left side, inserts into TV port */
.ngd-player__connector { .ngd-player__connector {
width: 14px; width: 18px;
height: 10px; height: 14px;
background: linear-gradient(180deg, #888, #666); background: linear-gradient(180deg, #888, #666);
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
position: relative; position: relative;
@@ -4829,15 +4847,15 @@ p:last-child { margin-bottom: 0; }
position: absolute; position: absolute;
right: 2px; right: 2px;
top: 2px; top: 2px;
width: 6px; width: 8px;
height: 6px; height: 8px;
background: #555; background: #555;
border-radius: 1px; border-radius: 1px;
} }
/* Main stick body — white gradient capsule */ /* Main stick body — white gradient capsule */
.ngd-player__body { .ngd-player__body {
width: 68px; width: 84px;
height: 26px; height: 32px;
background: linear-gradient(180deg, #f5f5f5, #e0e0e0); background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
@@ -4884,9 +4902,9 @@ p:last-child { margin-bottom: 0; }
/* ── Signal wrap (cloud + vertical line to player) ─────────── */ /* ── Signal wrap (cloud + vertical line to player) ─────────── */
.ngd-signal-wrap { .ngd-signal-wrap {
position: absolute; position: absolute;
/* body centre X: player left(248) + connector(14) + body half(34) = 296 /* body centre X: player left(428) + connector(18) + body half(42) = 488
cloud width 74px → half = 37 → left = 296 − 37 = 259px */ cloud width 74px → half = 37 → left = 488 − 37 = 451px */
left: 259px; left: 451px;
top: 22px; top: 22px;
width: 74px; width: 74px;
display: flex; display: flex;
@@ -4910,7 +4928,7 @@ p:last-child { margin-bottom: 0; }
/* Vertical signal line */ /* Vertical signal line */
.ngd-signal-line { .ngd-signal-line {
width: 3px; width: 3px;
height: 92px; /* wrap top(22) + cloud h(46) + line(92) = 160 ≈ player top(162) */ height: 109px;
background: rgba(76,175,80,.35); background: rgba(76,175,80,.35);
border-radius: 2px; border-radius: 2px;
position: relative; position: relative;
@@ -5023,6 +5041,7 @@ p:last-child { margin-bottom: 0; }
/* Scale at 84% (320/380) */ /* Scale at 84% (320/380) */
.ngd-tv { left: 17px; top: 76px; } .ngd-tv { left: 17px; top: 76px; }
.ngd-tv__body { width: 185px; height: 136px; } .ngd-tv__body { width: 185px; height: 136px; }
.ngd-tv__screen { --ngd-menu-scale-x: 0.8409; --ngd-menu-scale-y: 0.8395; }
/* port at body midpoint: 136/2 − 7 = 61 */ /* port at body midpoint: 136/2 − 7 = 61 */
.ngd-tv__port { top: 61px; } .ngd-tv__port { top: 61px; }
.ngd-tv__feet { gap: 60px; } .ngd-tv__feet { gap: 60px; }