AHSS - Theme + CSS Customization Guide

This guide lists the CSS fields that are safe to update in the current index.html, plus a “future-proof” set of CSS variables you can add so stream skins are easy to maintain.

Quick warning (in plain English)

You can absolutely reskin this app, but avoid editing inline styles inside the JavaScript templates unless you enjoy “why is nothing centered anymore” at 1:00am. The goal is: override CSS + variables, not rewrite the HTML strings.

1) The easiest customization: the built-in theme vars

The app already uses two CSS variables for team colors:

--teamA --teamB

:root{ --teamA:#d32f2f; --teamB:#1976d2; }

These are used by buttons and score text via getTeamColor(). They are also saved to localStorage through the settings panel.

2) “Safe knobs” you can edit today (current CSS selectors)

These selectors exist in the current index and are safe to customize:

Global

html, body

canvas

html, body {
  background-color: #121212;
  color: #f0f0f0;
  padding: 30px;
}

Change background, default text color, and overall padding.

Main scoreboard container

#fullscoreboard

#fullscoreboard.locked-top

#fullscoreboard{
  border:2px solid #888;
  border-radius:10px;
  padding:20px;
  margin-top:100px;
  background-color:#000;
}

This is the “big” scoreboard block in match mode.

Primary score row

.scoreboard

#scoreBoard

.scoreboard{
  background:#000;
  border:2px solid #444;
  border-radius:8px;
}

This controls the large score display area.

Timer block

#timer

#timer.running

.pulse

#timer{
  font-size:3em;
  border:2px solid #444;
  border-radius:8px;
}

Change timer sizing and the pulse effect.

Buttons

.score-btn

.large-tap

.disabled-btn

.score-btn{
  width:160px; height:50px;
  border-radius:6px;
}

Best place to make stream-friendly large buttons.

Settings UI

#gearButton

#settingsPanel

#settingsHeader

.set-row

.switch

#settingsPanel{
  width:340px;
  max-height:90vh;
  overflow-y:auto;
}

You can safely reskin the panel without touching app logic.

3) Streaming scoreboards (these are the big ones)

There are two streaming views: Skinny and Mini. These classes are the safest targets:

Skinny streaming scoreboard

#skinnyScoreboard

#skinnyScoreboard.locked

#skinnyScoreboard.mirrored

.skinny-player

.skinny-player .score-value

#compactSummary

#skinnyScoreboard{
  height:180px;
  border:2px solid #555;
  border-radius:8px;
  background:#000;
}

This view is used for wide stream overlays.

Mini square scoreboard

#miniScoreboard

#miniScoreboard.mirrored

#miniContent

.mini-top

.mini-left

.mini-right

.mini-center

.mini-timer

.mini-status

.mini-pips

#miniCompactSummary

#miniScoreboard{
  width:320px; height:320px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}

This view is used for “camera-in-corner” layouts.

Note about “overhauling the look”

Right now, the streaming HTML includes a bunch of inline styles inside updateSkinnyScoreboard() and updateMiniScoreboard(). You can still reskin it, but you’ll get the best results by adding CSS classes and moving styles out of those template strings over time. Future-you will thank you. Present-you might still be mad. 😄

4) Recommended “future-proof” CSS variables (add these later)

If you want stream skins to be easy and stable across updates, add these variables to :root, then update existing selectors to use them. That way a custom theme only edits variables.

:root{
  /* existing */
  --teamA:#d32f2f;
  --teamB:#1976d2;

  /* new theme system (suggested) */
  --ahss-bg:#121212;
  --ahss-panel:#000;
  --ahss-text:#f0f0f0;
  --ahss-muted:#cccccc;
  --ahss-border:#444;

  /* streaming */
  --ahss-stream-bg:#000;
  --ahss-stream-border:#555;
  --ahss-stream-radius:12px;
  --ahss-stream-shadow:0 8px 24px rgba(0,0,0,.5);

  /* typography */
  --ahss-font-ui: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ahss-font-score: "Arial Black", Arial, sans-serif;

  /* sizing */
  --ahss-timer-size:3em;
  --ahss-skinny-height:180px;
  --ahss-mini-size:320px;

  /* winner highlight */
  --ahss-winner-bg:#ff0;
  --ahss-winner-text:#000;
  --ahss-winner-glow:0 0 12px 4px #ff0;
}

Once these are in place, docs can say: “Want a new look? Override variables only.”

5) Suggested “Theme Override” pattern (no code edits, just CSS)

Option A - add a new stylesheet file like theme.css and load it after the main styles:

<link rel="stylesheet" href="theme.css">

Example theme.css override:

:root{
  --teamA:#ff3b30;
  --teamB:#34c759;

  --ahss-bg:#0a0a0a;
  --ahss-panel:#050505;
  --ahss-border:#2b2b2b;
  --ahss-timer-size:3.4em;
  --ahss-skinny-height:150px;
}

This is the cleanest way to let stream teams reskin without risking logic changes.

6) Logo / branding notes

The app supports custom logos via the settings panel (stored in localStorage). For streaming overlays, transparent PNG works best.

localStorage key: ahss_custom_logo_data

default: logo.png

7) “If you want it REALLY different” - recommended next refactor

If Peter (or anyone) wants full broadcast skins, the next step is simple: move inline styles inside streaming templates into named CSS classes, like:

/* add classes */
.skinny-wrap{}
.skinny-center{}
.skinny-timer{}
.skinny-status{}

/* then in JS templates, remove style="" and use class names */

That turns “2 hours of poking” into “10 minutes of CSS”. Which is the dream.

Maintainers: if you add or rename any selectors above, update this page so custom themes don’t break. If you don’t, future Pete will leave present Pete on read. 😄