Refactor player device structure and styles for HDMI connection representation
This commit is contained in:
Matt Batchelder
@@ -4729,58 +4729,74 @@ p:last-child { margin-bottom: 0; }
|
||||
animation: ngd-ticker 2s linear infinite;
|
||||
}
|
||||
|
||||
/* ── HDMI bridge ────────────────────────────────────────────── */
|
||||
.ngd-hdmi {
|
||||
position: absolute;
|
||||
left: 168px;
|
||||
top: 112px;
|
||||
width: 14px;
|
||||
height: 3px;
|
||||
background: #252525;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* ── Player device ──────────────────────────────────────────── */
|
||||
/* ── Player device (stick plugged into TV right-side HDMI port) ── */
|
||||
.ngd-player {
|
||||
position: absolute;
|
||||
left: 182px;
|
||||
top: 102px;
|
||||
}
|
||||
.ngd-player__body {
|
||||
/* TV body: left(8) + border(4) + width(160) + border(4) = 176px
|
||||
TV port protrudes 5px right → connector starts at 181px */
|
||||
left: 181px;
|
||||
/* TV body top(18) + border(4) + port.top(50) + port half-h(7) = 79px
|
||||
stick h=26px → top = 79 − 13 = 66px */
|
||||
top: 66px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
width: 96px;
|
||||
height: 28px;
|
||||
background: #1a1a1a;
|
||||
border: 1.5px solid #2d2d2d;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
|
||||
position: relative;
|
||||
}
|
||||
.ngd-player__led {
|
||||
/* HDMI connector plug — left side, inserts into TV port */
|
||||
.ngd-player__connector {
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
background: linear-gradient(180deg, #888, #666);
|
||||
border-radius: 2px 0 0 2px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.3);
|
||||
flex-shrink: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.ngd-player__connector::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #555;
|
||||
border-radius: 1px;
|
||||
}
|
||||
/* Main stick body — white gradient capsule */
|
||||
.ngd-player__body {
|
||||
width: 68px;
|
||||
height: 26px;
|
||||
background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0 5px 5px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
|
||||
}
|
||||
/* Brand logo area subtle inset */
|
||||
.ngd-player__body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 8px;
|
||||
width: 28px;
|
||||
height: 12px;
|
||||
background: rgba(0,0,0,.04);
|
||||
border-radius: 2px;
|
||||
}
|
||||
/* LED indicator — right side of body */
|
||||
.ngd-player__led {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: #4CAF50;
|
||||
box-shadow: 0 0 6px rgba(76,175,80,.8);
|
||||
animation: ngd-led 5s ease-in-out infinite;
|
||||
}
|
||||
.ngd-player__brand {
|
||||
flex: 1;
|
||||
height: 5px;
|
||||
background: rgba(255,255,255,.07);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ngd-player__port {
|
||||
width: 8px; height: 11px;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid #222;
|
||||
border-radius: 1px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* Checkmark badge — visible only during offline phase */
|
||||
.ngd-player__check {
|
||||
position: absolute;
|
||||
@@ -4797,9 +4813,10 @@ p:last-child { margin-bottom: 0; }
|
||||
/* ── Signal wrap (cloud + vertical line to player) ─────────── */
|
||||
.ngd-signal-wrap {
|
||||
position: absolute;
|
||||
/* horizontally centred on player: player left=182px, width=96px → centre=230px */
|
||||
left: 193px; /* 230 – cloud_half(37px) = 193 */
|
||||
top: 8px;
|
||||
/* centred on stick body: player left(181) + connector(14) + body_centre(34) = 229px
|
||||
cloud width 74px → half = 37px → left = 229 − 37 = 192px */
|
||||
left: 192px;
|
||||
top: 0;
|
||||
width: 74px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -4822,7 +4839,7 @@ p:last-child { margin-bottom: 0; }
|
||||
/* Vertical signal line */
|
||||
.ngd-signal-line {
|
||||
width: 3px;
|
||||
height: 44px; /* gap from cloud bottom to player top */
|
||||
height: 18px; /* gap from cloud bottom (~48px) to stick top (~66px) */
|
||||
background: rgba(76,175,80,.35);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
@@ -4932,15 +4949,18 @@ p:last-child { margin-bottom: 0; }
|
||||
/* ── Responsive ─────────────────────────────────────────────── */
|
||||
@media (max-width: 640px) {
|
||||
.ngd-stage { max-width: 320px; }
|
||||
/* Scale the fixed-px elements down proportionally */
|
||||
.ngd-tv__body { width: 128px; height: 96px; }
|
||||
.ngd-tv__port { top: 40px; }
|
||||
.ngd-tv__foot { width: 18px; }
|
||||
.ngd-hdmi { left: 134px; top: 90px; }
|
||||
.ngd-player { left: 146px; top: 82px; }
|
||||
.ngd-player__body { width: 76px; height: 24px; }
|
||||
.ngd-signal-wrap { left: 154px; width: 60px; }
|
||||
.ngd-signal-line { height: 36px; }
|
||||
/* Scale fixed-px elements 80% (320/400) */
|
||||
.ngd-tv__body { width: 128px; height: 96px; }
|
||||
.ngd-tv__port { top: 40px; }
|
||||
.ngd-tv__foot { width: 18px; }
|
||||
/* player: left(145) + connector(11) + body_centre(27) = 183px; cloud half(30) → wrap left 153 */
|
||||
.ngd-player { left: 145px; top: 53px; }
|
||||
.ngd-player__connector { width: 11px; height: 8px; }
|
||||
.ngd-player__body { width: 54px; height: 21px; }
|
||||
.ngd-player__body::before { top: 5px; left: 6px; width: 22px; height: 9px; }
|
||||
.ngd-player__led { width: 3px; height: 3px; right: 6px; }
|
||||
.ngd-signal-wrap { left: 153px; width: 60px; }
|
||||
.ngd-signal-line { height: 14px; }
|
||||
}
|
||||
|
||||
/* ── Reduced-motion overrides ───────────────────────────────── */
|
||||
|
||||
@@ -1606,15 +1606,11 @@ function oribi_render_platform_row( $a ) {
|
||||
$ngd .= '<div class="ngd-tv__feet"><div class="ngd-tv__foot"></div><div class="ngd-tv__foot"></div></div>';
|
||||
$ngd .= '</div>'; /* ngd-tv */
|
||||
|
||||
/* HDMI bridge from TV port to player */
|
||||
$ngd .= '<div class="ngd-hdmi"></div>';
|
||||
|
||||
/* Player device */
|
||||
/* Player device (stick style, plugged into TV right-side HDMI port) */
|
||||
$ngd .= '<div class="ngd-player">';
|
||||
$ngd .= '<div class="ngd-player__connector"></div>';
|
||||
$ngd .= '<div class="ngd-player__body">';
|
||||
$ngd .= '<div class="ngd-player__led"></div>';
|
||||
$ngd .= '<div class="ngd-player__brand"></div>';
|
||||
$ngd .= '<div class="ngd-player__port"></div>';
|
||||
$ngd .= '</div>';
|
||||
$ngd .= '<div class="ngd-player__check">';
|
||||
$ngd .= '<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">';
|
||||
|
||||
Reference in New Issue
Block a user