@four-leaf-studios/rl-overlay 1.0.4 → 1.1.0

package/src/css/Neo_Glass.css

@@ -0,0 +1,674 @@
+/* ===============================
+   NeoGlass Neon Overlay (full)
+   — scoreboard cleaned up
+   — target boost kept from your original
+   — same HTML/classes; just drop in
+   =============================== */
+
+/* Font — Rajdhani */
+@font-face {
+  font-family: "Rajdhani";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/rajdhani/v22/LDI2apCSOBg7S-QT7pasE8nG.woff2)
+    format("woff2");
+  unicode-range: U+0100-02FF, U+1E00-1EFF, U+2000-206F, U+20A0-20AB, U+20AD-20CF,
+    U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "Rajdhani";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/rajdhani/v22/LDI2apCSOBg7S-QT7pYsEw.woff2)
+    format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2010-205E, U+20AC, U+2122;
+}
+
+/* ---------- Global / Vars ---------- */
+.overlay {
+  --fallback-darker-mutual: #0b0f14;
+  --glass-bg: rgba(12, 16, 22, 0.55);
+  --glass-bg-strong: rgba(12, 16, 22, 0.75);
+  --glass-border: rgba(255, 255, 255, 0.18);
+  --shadow-1: 0 6px 20px rgba(0, 0, 0, 0.35);
+  --shadow-2: 0 2px 10px rgba(0, 0, 0, 0.35);
+
+  --neon-left: var(--team-left-secondary);
+  --neon-right: var(--team-right-secondary);
+}
+
+/* animations */
+@keyframes slideInUp {
+  from {
+    transform: translateY(-12px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ===================================
+   SCOREBOARD (tidy split + aligned timer)
+   =================================== */
+
+.scoreboard_box {
+  position: relative;
+  z-index: 20; /* under the timer */
+  width: 900px;
+  height: 88px;
+  margin: 0.75rem auto 0;
+  border-radius: 18px;
+  display: flex; /* true left/right halves */
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+  background: linear-gradient(
+    90deg,
+    color-mix(in oklab, var(--team-left-primary) 85%, #0b0f14 15%) 0%,
+    color-mix(
+        in oklab,
+        var(--team-left-primary) 60%,
+        var(--team-right-primary) 40%
+      )
+      50%,
+    color-mix(in oklab, var(--team-right-primary) 85%, #0b0f14 15%) 100%
+  );
+}
+
+/* subtle center divider so scores read cleanly */
+.scoreboard_box::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  transform: translateX(-50%);
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    rgba(255, 255, 255, 0.25),
+    transparent
+  );
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+/* timer: centered, floating above bar with tight glow */
+.time_box {
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 8px;
+  width: 260px;
+  height: 66px;
+  border-radius: 999px;
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  border: 1px solid var(--glass-border);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: #fff;
+  text-align: center;
+  font-family: Rajdhani, system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 40px;
+  letter-spacing: 1px;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06) inset,
+    0 0 10px var(--neon-left), 0 0 10px var(--neon-right);
+  animation: slideInUp 420ms ease-out;
+}
+
+.main_bar {
+  height: 88px;
+}
+.top_bar {
+  display: none;
+}
+.bottom_bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+/* halves */
+.scoreboard_team_box {
+  width: 50%;
+  height: 100%;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.07),
+    rgba(255, 255, 255, 0.02)
+  );
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  --horizontal-padding: 3.8rem;
+}
+.left_scoreboard_team_box {
+  justify-content: flex-start;
+  padding-left: var(--horizontal-padding);
+  box-shadow: inset 0 0 0 2px
+    color-mix(in oklab, var(--team-left-primary) 60%, #fff 8%);
+}
+.right_scoreboard_team_box {
+  justify-content: flex-end;
+  padding-right: var(--horizontal-padding);
+  box-shadow: inset 0 0 0 2px
+    color-mix(in oklab, var(--team-right-primary) 60%, #fff 8%);
+}
+
+/* team name tags */
+.name_box {
+  position: absolute;
+  bottom: -30px;
+  z-index: 5;
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-family: Rajdhani;
+  font-weight: 800;
+  font-size: 19px;
+  letter-spacing: 0.5px;
+  background: var(--glass-bg-strong);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  max-width: 92%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  animation: slideInUp 420ms ease-out;
+}
+.left_name_box {
+  left: 10px;
+  color: var(--team-left-secondary);
+  text-align: left;
+}
+.right_name_box {
+  right: 10px;
+  color: var(--team-right-secondary);
+  text-align: right;
+}
+
+/* logos & scores */
+.logo_box {
+  height: 68%;
+  aspect-ratio: 1/1;
+  object-fit: contain;
+  padding: 0.5rem;
+  margin: 0 0.25rem;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.16);
+}
+.score_box {
+  height: 68%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-family: Rajdhani;
+  font-weight: 800;
+  font-size: 54px;
+  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+  letter-spacing: 0.5px;
+}
+.left_score_box {
+  color: #fff;
+  order: 1;
+  padding-right: 14%;
+}
+.right_score_box {
+  color: #fff;
+  order: 0;
+  padding-left: 14%;
+}
+
+/* series pips */
+.series_box {
+  position: absolute;
+  top: -80px;
+  width: 44px;
+  height: 66px;
+  border-radius: 12px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  box-shadow: var(--shadow-2);
+}
+.left_series_box {
+  left: 0.5rem;
+}
+.right_series_box {
+  right: 0.5rem;
+}
+
+.series_score_box {
+  width: 68%;
+  max-height: 9px;
+  flex: 1;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.18);
+}
+.series_score_box_point {
+  border-radius: 999px;
+  height: 100%;
+}
+.left_series_score_box_point {
+  background: var(--team-left-secondary);
+  box-shadow: 0 0 12px var(--team-left-secondary);
+}
+.right_series_score_box_point {
+  background: var(--team-right-secondary);
+  box-shadow: 0 0 12px var(--team-right-secondary);
+}
+.series_score_box_empty {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.game_box {
+  display: none;
+}
+
+/* ===============================
+   REPLAY
+   =============================== */
+.replay_box {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 500;
+  top: 92px;
+  width: 460px;
+  height: 88px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #1b1f2a 0%, #10141b 100%);
+  border: 1px solid var(--glass-border);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.03) inset, var(--shadow-1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+.replay_text {
+  color: #ff5757;
+  font-family: Rajdhani;
+  font-weight: 800;
+  font-size: 42px;
+  letter-spacing: 2px;
+}
+
+/* ===============================
+   TEAMS / PLAYER LIST
+   =============================== */
+.team_box {
+  position: absolute;
+  top: 60px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: fit-content;
+}
+.left_team_box {
+  left: 10px;
+  align-items: flex-start;
+}
+.right_team_box {
+  right: 10px;
+  align-items: flex-end;
+}
+
+.player_box {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  gap: 0.5rem;
+  min-width: 340px;
+  padding: 0.35rem 0.85rem;
+  border-radius: 12px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  box-shadow: var(--shadow-2);
+}
+.player_name {
+  font-family: Rajdhani;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 300px;
+  color: #e9eef7;
+}
+.left_player_name {
+  grid-column: 1;
+  grid-row: 1;
+  text-align: left;
+}
+.right_player_name {
+  grid-column: 2;
+  text-align: right;
+}
+
+.player_boost {
+  font-family: Rajdhani;
+  font-size: 20px;
+  font-weight: 700;
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.left_player_boost {
+  grid-column: 2;
+  text-align: right;
+  color: var(--team-left-secondary);
+}
+.right_player_boost {
+  grid-column: 1;
+  text-align: left;
+  color: var(--team-right-secondary);
+}
+
+.boost_meter {
+  margin: 0.2rem 0 0;
+  width: 100%;
+  height: 7px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  grid-column: -1/1;
+  overflow: hidden;
+}
+.left_boost_meter_bar {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--team-left-primary),
+    var(--team-left-secondary)
+  );
+}
+.right_boost_meter_bar {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--team-right-primary),
+    var(--team-right-secondary)
+  );
+}
+
+/* ===============================
+   STAT BOX
+   =============================== */
+.stat_box {
+  position: absolute;
+  bottom: 0;
+  width: 700px;
+  height: 60px;
+  margin-left: 52px;
+  margin-bottom: 34px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: flex-start;
+  padding: 0.45rem;
+  border-radius: 14px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  box-shadow: var(--shadow-1);
+}
+.left_stat_box {
+  box-shadow: 0 0 0 2px
+      color-mix(in oklab, var(--team-left-primary) 45%, #fff 6%) inset,
+    var(--shadow-1);
+  color: var(--team-left-secondary);
+}
+.right_stat_box {
+  box-shadow: 0 0 0 2px
+      color-mix(in oklab, var(--team-right-primary) 45%, #fff 6%) inset,
+    var(--shadow-1);
+  color: var(--team-right-secondary);
+}
+
+.stat_box_player {
+  width: 42%;
+  font-family: Rajdhani;
+  font-size: 22px;
+  font-weight: 800;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #eef3fb;
+}
+
+.stat_box_statistics {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 370px;
+  height: 80px;
+  margin-bottom: 7px;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 8px;
+}
+.stat_box_statistic {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: Rajdhani;
+  font-size: 20px;
+  font-weight: 800;
+  color: #fff;
+}
+.stat_box_statistic_name {
+  order: 0;
+  opacity: 0.75;
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.3px;
+}
+.stat_box_statistic_value {
+  font-size: 22px;
+}
+
+.stat_box_statistic_player_id,
+.stat_box_statistic_player_team,
+.stat_box_statistic_player_location,
+.stat_box_statistic_player_touches {
+  display: none;
+}
+
+.stat_box_player_boost {
+  width: 100%;
+}
+.stat_box_player_boost .boost_meter {
+  display: block;
+  height: 9px;
+  width: 42%;
+  background: rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.stat_box_player_boost .left_boost_meter_bar {
+  background: var(--team-left-secondary);
+}
+.stat_box_player_boost .right_boost_meter_bar {
+  background: var(--team-right-secondary);
+}
+.stat_box_player_boost .boost_meter,
+.stat_box_player_boost .boost_meter_bar {
+  margin: unset;
+}
+
+/* ===============================
+   TARGET BOOST — EXACTLY AS YOUR ORIGINAL
+   =============================== */
+
+.target_boost {
+  font-size: 3rem;
+  font-weight: bold;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: unset;
+  width: 200px;
+  height: 200px;
+  margin-bottom: 50px;
+  margin-right: 50px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  overflow: hidden;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.left_target_boost.target_boost {
+  color: var(--team-0-secondary);
+}
+.right_target_boost.target_boost {
+  color: var(--team-1-secondary);
+}
+.target_boost.entering {
+  animation: fadeIn 0.5s ease-in-out;
+}
+.target_boost.exiting {
+  animation: fadeOut 0.5s ease-in-out;
+}
+.left_target_boost {
+}
+.right_target_boost {
+}
+.target_boost_container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+.target_boost_meter {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.5s ease-in-out;
+}
+
+.left_target_boost_meter {
+  background: conic-gradient(
+    var(--team-left-primary-dark) calc(90deg * var(--target_boost) / 100),
+    var(--team-left-primary-light) calc(180deg * var(--target_boost) / 100),
+    var(--team-left-primary-light) calc(30deg * var(--target_boost) / 100),
+    var(--team-left-primary) calc(270deg * var(--target_boost) / 100),
+    var(--team-left-primary-dark) calc(360deg * var(--target_boost) / 100),
+    var(--glass-bg) calc(0deg * var(--target_boost) / 100)
+  ) !important;
+  transition: all 0.5s ease-in-out;
+}
+
+.right_target_boost_meter {
+  background: conic-gradient(
+    var(--team-right-primary-dark) calc(90deg * var(--target_boost) / 100),
+    var(--team-right-primary-light) calc(180deg * var(--target_boost) / 100),
+    var(--team-right-primary-light) calc(30deg * var(--target_boost) / 100),
+    var(--team-right-primary) calc(270deg * var(--target_boost) / 100),
+    var(--team-right-primary-dark) calc(360deg * var(--target_boost) / 100),
+    var(--glass-bg) calc(0deg * var(--target_boost) / 100)
+  ) !important;
+
+  transition: all 0.5s ease-in-out;
+}
+.target_boost_meter_inner {
+  position: absolute;
+  margin: auto;
+  width: 80%;
+  height: 80%;
+  border-radius: 50%;
+  z-index: 50;
+}
+.left_target_boost_meter_inner {
+  background: var(--team-left-mutual);
+}
+.right_target_boost_meter_inner {
+  background: var(--team-left-mutual);
+}
+.target_boost_svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 500;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.target_boost_svg_circle {
+  stroke-dasharray: 4 25%;
+  stroke-width: 41;
+  stroke-dashoffset: 18;
+  fill: transparent;
+}
+.left_target_boost_svg_circle {
+  stroke: var(--team-left-mutual);
+}
+.right_target_boost_svg_circle {
+  stroke: var(--team-left-mutual);
+}
+.target_boost_value {
+  position: absolute;
+  z-index: 500;
+  color: white;
+}
+.left_target_boost_value {
+  color: var(--team-left-secondary);
+}
+.right_target_boost_value {
+  color: var(--team-right-secondary);
+}