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