watchparty/client/src/styles/base.css

/* Colors pulled live from this Emby server's own active theme (dark), via
   its CSS custom properties (--theme-primary-color-*, --background-*, etc.)
   - see docs/architecture.md for how these were read directly off the
   running server rather than guessed. Loaded once, globally, by app.ts -
   every other component/*.css only ever reads these variables, never
   redefines them. */
:root {
  color-scheme: dark;
  --bg: #151216;              /* hsl(285, 10%, 7.84%) - Emby's dark theme background */
  --bg-header: #221d24;       /* same hue, +5% lightness - Emby's header/footer background */
  --panel: #262626;           /* Emby's card/button/input background (achromatic, ~15-17% lightness) */
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .6);
  --accent: #52b54b;          /* Emby's theme-primary-color (hsl(116, 41.7%, 50.2%)) */
  --accent-bright: #6ccf65;   /* Emby's --theme-accent-text-color-darkbg */
  --danger: #ff6b6b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#app { min-height: 100%; }

/* Login is a small centered form - everything else lives inside the app
   shell (sidebar + .mainContent) - see shell/Shell.css. */
.wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 12px; }

.panel {
  background: var(--bg-header);
  border-radius: 12px;
  padding: 20px;
}

.hint { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.error { color: var(--danger); font-size: 13px; min-height: 18px; }

/* Plain CSS ring, not an image/icon-font asset - `display: inline-block`
   + `vertical-align` so it drops into an existing text node (a .hint's
   "Chargement...", Player.css's own .loadingNotice) without needing to
   restructure the element into a flex row - see loading.ts's LOADING_HINT
   for the one shared constant most call sites use instead of hand-typing
   this markup. `prefers-reduced-motion` gets a static ring instead of an
   endless spin, same reasoning as this app avoiding motion elsewhere. */
.spinner {
  display: inline-block;
  vertical-align: -3px;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #3a3a3a;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}

input:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

button:hover { background: var(--accent-bright); }
button[disabled] { opacity: .5; cursor: default; }

/* Class-only (not tag-qualified) so an <a class="linklike"> - e.g. the
   "Voir sur Emby" link on the series/album detail pages - gets the same
   treatment as the <button> ones without needing its own duplicate rule;
   there's no global `a` reset in this file, so an unclassed anchor would
   otherwise fall back to the browser's default blue/underline against
   this dark theme. */
.linklike {
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  text-decoration: underline;
  padding: 4px 0;
}

.linklike:hover { background: none; color: var(--accent-bright); }

.code { color: var(--accent-bright); letter-spacing: .1em; }

/* Generic "title + optional action on the right" header, reused by
   home/library/artist/the music player - see each view's own .ts. */
.pageHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

/* !important is deliberate, not cargo-culted: .hide is a generic toggle
   applied from .ts (classList.add/remove/toggle('hide')) onto elements
   whose OWN component CSS often also sets `display` for its visible state
   (e.g. .settingsPanel { display: flex; ... } in Player.css). Without
   !important, both rules are single-class selectors - equal specificity -
   so the cascade falls back to source order, and whichever one esbuild
   happens to bundle later wins; that's how #settingsPanel ended up
   permanently visible regardless of the 'hide' class (its own display:flex
   loaded after base.css's .hide in the bundled app.css). !important makes
   .hide win unconditionally, independent of bundling order, for this
   element and any future one with the same pattern. */
.hide { display: none !important; }