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

Sync: update ngd-signal-wrap styles and SVG structure for improved visual representation

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 17:28:35 -05:00
parent 8c3c7a1d8a
commit c50087d669
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4899,20 +4899,20 @@ p:last-child { margin-bottom: 0; }
filter: drop-shadow(0 0 4px rgba(76,175,80,.6));
}
/* ── Signal wrap (cloud + vertical line to player) ─────────── */
/* ── Signal wrap (globe + vertical line to player) ─────────── */
.ngd-signal-wrap {
position: absolute;
/* body centre X: player left(428) + connector(18) + body half(42) = 488
cloud width 74px → half = 37 → left = 488 − 37 = 451px */
left: 451px;
globe width 88px → half = 44 → left = 488 − 44 = 444px */
left: 444px;
top: 22px;
width: 74px;
width: 88px;
display: flex;
flex-direction: column;
align-items: center;
}
.ngd-cloud {
width: 74px;
width: 88px;
flex-shrink: 0;
}
.ngd-cloud__svg {
@@ -4928,7 +4928,7 @@ p:last-child { margin-bottom: 0; }
/* Vertical signal line */
.ngd-signal-line {
width: 3px;
height: 109px;
height: 92px;
background: rgba(76,175,80,.35);
border-radius: 2px;
position: relative;
@@ -5052,10 +5052,10 @@ p:last-child { margin-bottom: 0; }
.ngd-player__body { width: 68px; height: 24px; }
.ngd-player__body::before { top: 5px; left: 6px; width: 24px; height: 10px; }
.ngd-player__led { width: 3px; height: 3px; right: 6px; }
/* body centre-x: 210+12+34=256; cloud 62px → half=31 → wrap left=225 */
.ngd-signal-wrap { left: 225px; top: 18px; width: 62px; }
/* line: wrap.top(18)+cloud_h(~38)=56 to player.top(135) → 79px */
.ngd-signal-line { height: 79px; }
/* body centre-x: 210+12+34=256; globe 72px → half=36 → wrap left=220 */
.ngd-signal-wrap { left: 220px; top: 18px; width: 72px; }
/* line: wrap.top(18)+globe_h(~52)=70 to player.top(135) → 65px */
.ngd-signal-line { height: 65px; }
}
/* ── Reduced-motion overrides ───────────────────────────────── */

6
theme/blocks/index.php
View File

@@ -1626,7 +1626,11 @@ function oribi_render_platform_row( $a ) {
$ngd .= '<div class="ngd-signal-wrap">';
$ngd .= '<div class="ngd-cloud">';
$ngd .= '<svg class="ngd-cloud__svg" viewBox="0 0 64 46" fill="none" xmlns="http://www.w3.org/2000/svg">';
$ngd .= '<path class="ngd-cloud__path" d="M50 38H12C6.5 38 2 33.5 2 28s4.5-10 10-10c.35 0 .68.02 1 .05C15.3 12.4 20.8 8 27.5 8 35.2 8 41.5 14.3 41.5 22c0 .73-.06 1.45-.16 2.15C45.2 24.95 48 28.1 48 32v6z" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>';
$ngd .= '<circle class="ngd-cloud__path" cx="32" cy="23" r="14" stroke-width="2.2" fill="none"/>';
$ngd .= '<path class="ngd-cloud__path" d="M18 23H46" stroke-width="2" stroke-linecap="round" fill="none"/>';
$ngd .= '<path class="ngd-cloud__path" d="M32 9V37" stroke-width="2" stroke-linecap="round" fill="none"/>';
$ngd .= '<path class="ngd-cloud__path" d="M22.5 14.5C27 18.5 27 27.5 22.5 31.5" stroke-width="2" stroke-linecap="round" fill="none"/>';
$ngd .= '<path class="ngd-cloud__path" d="M41.5 14.5C37 18.5 37 27.5 41.5 31.5" stroke-width="2" stroke-linecap="round" fill="none"/>';
$ngd .= '</svg>';
$ngd .= '</div>';
$ngd .= '<div class="ngd-signal-line">';