diff --git a/app/static/script.js b/app/static/script.js index 2ce4b0c..099ccb5 100644 --- a/app/static/script.js +++ b/app/static/script.js @@ -69,12 +69,12 @@ function renderLiveGame(game) {
${periodLabel} ${time} + ${ppBadge(game)}
${dot} ${teamRow(game, 'Away', 'live')} ${teamRow(game, 'Home', 'live')} - ${ppIndicator(game)} ${hype} `; } @@ -134,7 +134,7 @@ function teamRow(game, side, state) { `; } -function ppIndicator(game) { +function ppBadge(game) { const awayPP = game['Away Power Play']; const homePP = game['Home Power Play']; const pp = awayPP || homePP; @@ -145,12 +145,7 @@ function ppIndicator(game) { const seconds = timeToSeconds(timeStr); const attrs = `data-seconds="${seconds}" data-received-at="${Date.now()}" data-pp-clock`; - return ` -
- PP - ${team} - ${timeStr} -
`; + return `PP ${team} ${timeStr}`; } // ── Gauge ──────────────────────────────────────────── diff --git a/app/static/styles.css b/app/static/styles.css index 3e77277..8d100a4 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -212,44 +212,12 @@ main { white-space: nowrap; } -/* ── Power Play Indicator ───────────────────────── */ +/* ── Power Play Badge (inline in card header) ─── */ -.pp-indicator { - display: flex; - align-items: center; - gap: 0.4rem; - margin-top: 0.5rem; - padding: 0.35rem 0.5rem; - background: rgba(239, 68, 68, 0.1); - border: 1px solid rgba(239, 68, 68, 0.3); - border-radius: 6px; -} - -.pp-label { - font-size: 0.6rem; - font-weight: 700; - letter-spacing: 0.08em; +.badge-pp { + background: rgba(239, 68, 68, 0.15); color: var(--red); - text-transform: uppercase; - flex-shrink: 0; -} - -.pp-team { - font-size: 0.72rem; - font-weight: 600; - color: var(--text); - flex: 1; - min-width: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.pp-clock { - font-size: 0.72rem; - font-weight: 700; - color: var(--red); - flex-shrink: 0; + border: 1px solid rgba(239, 68, 68, 0.35); font-variant-numeric: tabular-nums; }