Styling fixes and Olden Era mmodule

2026-05-21 15:00:12 +02:00
parent 4ceff4015a
commit dd3493921b
136 changed files with 1028 additions and 111 deletions
--- a/webapp/public/css/hud.css
+++ b/webapp/public/css/hud.css
@@ -574,3 +574,116 @@ body.camera-hud-body {
 }
 .np-block .title { color: var(--ink); }
 .np-block .time  { color: var(--ink-dim); }
+
+/* Olden Era matchup — right-aligned on the status-bar's LIVE/game-name line. */
+.matchup {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  font-size: 16px;
+  letter-spacing: 0.16em;
+}
+.matchup .m-side {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+.matchup .m-faction {
+  width: 34px;
+  height: 34px;
+  object-fit: contain;
+  filter: drop-shadow(0 0 6px rgba(7, 8, 13, 0.9));
+}
+.matchup .m-hero {
+  width: 38px;
+  height: 38px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 1px solid rgba(232, 232, 224, 0.35);
+  background: rgba(0, 0, 0, 0.4);
+}
+.matchup .m-name {
+  color: var(--ink);
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.matchup .m-vs {
+  color: var(--hud-dim);
+  font-weight: 700;
+  letter-spacing: 0.32em;
+  font-size: 14px;
+}
+.matchup .m-on {
+  color: var(--hud-dim);
+  font-size: 13px;
+  letter-spacing: 0.32em;
+  margin-left: 6px;
+}
+.matchup .m-map {
+  color: var(--hud);
+  font-size: 15px;
+  letter-spacing: 0.18em;
+}
+.matchup-red  .m-my .m-name {
+  color: #ff6a5e;
+  text-shadow: 0 0 6px rgba(230, 58, 46, 0.55);
+}
+.matchup-blue .m-my .m-name {
+  color: #6ec5ff;
+  text-shadow: 0 0 6px rgba(58, 166, 255, 0.55);
+}
+.matchup-red  .m-my .m-hero { border-color: rgba(230, 58, 46, 0.7); }
+.matchup-blue .m-my .m-hero { border-color: rgba(58, 166, 255, 0.7); }
+
+/* ────────────────────────────────────────────────────────────────
+ * Webapp navigation breadcrumb (used by /, /scenes, /onboard).
+ * Distinct from the in-scene .hud strip so overlays stay untouched.
+ * ──────────────────────────────────────────────────────────────── */
+.crumb-bar {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--hud);
+  letter-spacing: 0.10em;
+  padding-bottom: 14px;
+  margin-bottom: 28px;
+  border-bottom: 1px solid rgba(79, 210, 255, 0.25);
+}
+.crumb-bar > :nth-child(2) { justify-self: center; }
+.crumb-bar > :nth-child(3) { justify-self: end; }
+
+.crumbs { display: flex; align-items: center; gap: 12px; }
+.crumbs .led {
+  display: inline-block;
+  width: 9px; height: 9px;
+  border-radius: 50%;
+  background: var(--onair);
+  box-shadow: 0 0 8px var(--onair);
+  animation: rec-blink 1.6s ease-in-out infinite;
+}
+.crumb           { color: var(--hud); text-decoration: none; transition: color 120ms ease, text-shadow 120ms ease; }
+.crumb-root      { color: var(--hud-dim); }
+.crumb-root:hover{ color: var(--hud); text-shadow: 0 0 8px var(--hud-glow); }
+.crumb-here      { color: var(--hud); text-shadow: 0 0 8px var(--hud-glow); cursor: default; }
+.crumbs .sep     { color: var(--hud-dim); opacity: 0.6; }
+
+.crumb-ctx, .crumb-clock { color: var(--hud); }
+.crumb-ctx .dim, .crumb-clock .dim { color: var(--hud-dim); margin-right: 8px; }
+
+/* ────────────────────────────────────────────────────────────────
+ * Webapp page shell — used by every non-overlay browser page
+ * (/, /scenes, /onboard) so the crumb-bar and content sit at the
+ * same viewport anchor on every page.
+ * Overlays keep .overlay-body / .camera-hud-body for OBS sizing.
+ * ──────────────────────────────────────────────────────────────── */
+body.page-shell {
+  background: var(--bg);
+  position: relative;
+  padding: 32px 56px;
+  min-height: 100vh;
+  overflow: auto;
+}