/* ============================================================ PEGBOARD THEME — "Midnight Slate" A rich dark theme with jewel-tone panel accents. Deep navy backgrounds, high contrast text, vibrant accents. To use a Google Font, add to PegboardApp.html : Then set: --font-base: 'Inter', sans-serif; ============================================================ */ :root { /* ════════════════════════════════════════════════════════════ APP BACKGROUNDS ════════════════════════════════════════════════════════════ */ --bg: #0D1117; /* main app background */ --panel-bg: #161B22; /* generic panel background */ --panel-alt: #1C2128; /* alternate panel */ --header-bg: #0D1117; /* top header bar */ --border: #30363D; /* default border */ --border-lit: #484F58; /* lighter border */ --text: #E6EDF3; /* primary text */ --muted: #7D8590; /* muted / secondary text */ --white: #FFFFFF; --black: #0D1117; /* Legacy aliases */ --navy: #0D1117; --navy2: #161B22; --purple: #7C3AED; --ltpur: #EDE9FE; --mdpur: #A78BFA; --teal: #2DD4BF; --ltteal: #CCFBF1; --amber: #F59E0B; --ltamb: #FEF3C7; --ltgrn: #DCFCE7; --ltred: #FEE2E2; --gray: #7D8590; --lgray: #F0F6FC; --mgray: #30363D; --font: var(--font-base); /* ════════════════════════════════════════════════════════════ TYPOGRAPHY ════════════════════════════════════════════════════════════ */ --font-base: 'Segoe UI', system-ui, Arial, sans-serif; --font-display: 'Segoe UI', system-ui, Arial, sans-serif; --font-mono: 'Courier New', 'Consolas', monospace; --font-xs: 11px; --font-sm: 13px; --font-md: 15px; --font-lg: 17px; --font-xl: 20px; --font-2xl: 24px; --font-3xl: 28px; --font-panel-title: 14px; --font-timer: 18px; --font-player: 14px; --font-grade: 12px; --font-queue-name: 15px; --font-queue-pos: 13px; --font-badge: 12px; --font-btn-sm: 12px; --font-btn-md: 14px; --font-btn-lg: 17px; --font-suggestion: 17px; --font-next-match: 24px; --font-stat-value: 22px; --font-stat-label: 13px; --font-lb-name: 14px; --font-lb-value: 13px; /* ════════════════════════════════════════════════════════════ COURTS PANEL — Deep Teal ════════════════════════════════════════════════════════════ */ --theme-courts-bg: #0F2027; --theme-courts-accent: #2DD4BF; --theme-courts-hdr-from: #0F2027; --theme-courts-hdr-to: #1A3A4A; /* ════════════════════════════════════════════════════════════ QUEUE PANEL — Deep Amber ════════════════════════════════════════════════════════════ */ --theme-queue-bg: #1A1200; --theme-queue-accent: #F59E0B; --theme-queue-hdr-from: #1A1200; --theme-queue-hdr-to: #2D1F00; /* ════════════════════════════════════════════════════════════ MEMBERS PANEL — Deep Indigo ════════════════════════════════════════════════════════════ */ --theme-members-bg: #0F0A1E; --theme-members-accent: #818CF8; --theme-members-hdr-from: #0F0A1E; --theme-members-hdr-to: #1A1235; /* ════════════════════════════════════════════════════════════ LEADERBOARD PANEL — Deep Gold ════════════════════════════════════════════════════════════ */ --theme-leaders-bg: #1A1400; --theme-leaders-accent: #FBBF24; --theme-leaders-hdr-from: #1A1400; --theme-leaders-hdr-to: #2D2400; /* ════════════════════════════════════════════════════════════ SESSION PANEL — Deep Slate ════════════════════════════════════════════════════════════ */ --theme-session-bg: #0D1117; --theme-session-accent: #60A5FA; --theme-session-hdr-from: #0D1117; --theme-session-hdr-to: #1A2535; /* ════════════════════════════════════════════════════════════ COURT TILES ════════════════════════════════════════════════════════════ */ --theme-court-tile-bg: rgba(255,255,255,0.03); --theme-court-tile-border: rgba(255,255,255,0.08); --theme-court-inplay-bg: rgba(45,212,191,0.08); --theme-court-inplay-border: #2DD4BF; --theme-court-hold-bg: rgba(245,158,11,0.08); --theme-court-empty-bg: rgba(255,255,255,0.01); --theme-court-team-a: #7DD3FC; --theme-court-team-b: #FCA5A5; /* ════════════════════════════════════════════════════════════ GENDER PILLS ════════════════════════════════════════════════════════════ */ --theme-gender-male: #22D3EE; --theme-gender-female: #F472B6; --theme-gender-other: #A78BFA; --theme-gender-text: #0D1117; /* ════════════════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════════════════ */ --theme-btn-end-bg: rgba(239,68,68,0.12); --theme-btn-end-border: rgba(239,68,68,0.35); --theme-btn-end-text: #FCA5A5; --theme-btn-end-hover-bg: rgba(239,68,68,0.25); --theme-btn-end-hover-border: rgba(239,68,68,0.6); --theme-btn-markpaid-bg: rgba(52,211,153,0.12); --theme-btn-markpaid-border: rgba(52,211,153,0.35); --theme-btn-markpaid-text: #6EE7B7; --theme-btn-join-bg: rgba(125,130,141,0.12); --theme-btn-join-border: rgba(125,130,141,0.3); --theme-btn-join-text: #9CA3AF; --theme-btn-endsession-bg: rgba(239,68,68,0.12); --theme-btn-endsession-border: rgba(239,68,68,0.35); --theme-btn-endsession-text: #FCA5A5; --theme-btn-endsession-hover: rgba(239,68,68,0.25); --theme-btn-paid-bg: #0D4F3C; --theme-btn-paid-hover: #0F6B52; --theme-hold-from: #0D4F3C; --theme-hold-to: #0A3D2E; --theme-hold-progress: rgba(45,212,191,0.25); /* ════════════════════════════════════════════════════════════ NEXT MATCH ════════════════════════════════════════════════════════════ */ --theme-suggestion-bg: #0D1F2D; --theme-suggestion-border: rgba(45,212,191,0.2); --theme-next-match-bg: #0D1F2D; --theme-next-match-border: #2DD4BF; --theme-next-match-text: #FFFFFF; --theme-next-match-hover: #2DD4BF; --theme-sugg-team-a: #7DD3FC; --theme-sugg-team-b: #86EFAC; /* ════════════════════════════════════════════════════════════ GRADE BADGES ════════════════════════════════════════════════════════════ */ --theme-grade-c: #94A3B8; --theme-grade-cp: #CBD5E1; --theme-grade-b: #60A5FA; --theme-grade-bp: #93C5FD; --theme-grade-a: #FBBF24; --theme-grade-ap: #FDE68A; --theme-grade-aplus: #F87171; /* ════════════════════════════════════════════════════════════ STATUS DOTS ════════════════════════════════════════════════════════════ */ --theme-dot-oncourt: #34D399; --theme-dot-waiting: #94A3B8; --theme-dot-resting: #FBBF24; --theme-dot-unpaid: #F87171; /* ════════════════════════════════════════════════════════════ MEMBER / QUEUE CARDS ════════════════════════════════════════════════════════════ */ --theme-queue-card-border: rgba(245,158,11,0.15); --theme-member-card-border: rgba(129,140,248,0.15); --theme-member-unpaid-border: rgba(248,113,113,0.4); --theme-member-unpaid-bg: rgba(248,113,113,0.06); /* ════════════════════════════════════════════════════════════ LEADERBOARD / WINS ════════════════════════════════════════════════════════════ */ --theme-medal-gold: #FBBF24; --theme-medal-silver: #CBD5E1; --theme-medal-bronze: #D97706; --theme-wins-bar-bg: #FBBF24; --theme-wins-bar-zero: #30363D; --theme-lb-bar: #FBBF24; --theme-lb-rank1: #FBBF24; --theme-lb-rank2: #CBD5E1; --theme-lb-rank3: #D97706; --theme-inplay-accent: #34D399; --theme-singles-active: #34D399; /* ════════════════════════════════════════════════════════════ CALENDAR ════════════════════════════════════════════════════════════ */ --theme-cal-today-bg: rgba(45,212,191,0.12); --theme-cal-today-border: #2DD4BF; --theme-cal-selected-bg: #2DD4BF; --theme-cal-selected-text: #0D1117; --theme-cal-recurring: rgba(245,158,11,0.12); /* ════════════════════════════════════════════════════════════ FORMAT TOGGLE ════════════════════════════════════════════════════════════ */ --theme-format-active-bg: rgba(45,212,191,0.15); --theme-format-active-border: #2DD4BF; --theme-format-singles-bg: rgba(52,211,153,0.15); --theme-format-singles-border: #34D399; --theme-format-singles-text: #34D399; --theme-format-active-border2: #0D4F3C; /* ════════════════════════════════════════════════════════════ ADMIN / RECEPTION ════════════════════════════════════════════════════════════ */ --theme-adm-bg: #161B22; --theme-adm-section-bg: #1C2128; --theme-adm-lb-bg: #161B22; --theme-adm-tab-active-bg: rgba(45,212,191,0.1); --theme-adm-tab-active-border: #2DD4BF; --theme-adm-tab-active-text: #2DD4BF; --theme-adm-btn-primary-bg: #0D4F3C; --theme-input-bg: #1C2128; --theme-input-focus: #2DD4BF; --theme-rec-header-bg: #0D1117; --theme-rec-header-border: #30363D; --theme-rec-ok-btn: #0D4F3C; --theme-rec-ok-hover: #2DD4BF; --theme-rec-input-bg: #1C2128; --theme-rec-select-bg: #1C2128; --theme-hist-sticky-bg: #1A1400; /* ════════════════════════════════════════════════════════════ SCREEN 3 PANEL BORDERS ════════════════════════════════════════════════════════════ */ --theme-s3-left-border: #2DD4BF; --theme-s3-centre-border: #818CF8; --theme-s3-right-border: #F59E0B; /* ════════════════════════════════════════════════════════════ LIVE BADGE ════════════════════════════════════════════════════════════ */ --theme-live-bg: rgba(248,113,113,0.15); --theme-live-border: rgba(248,113,113,0.4); --theme-live-text: #F87171; /* ════════════════════════════════════════════════════════════ DEBUG PANEL ════════════════════════════════════════════════════════════ */ --theme-debug-bg: #161B22; --theme-debug-bg2: #161B22; --theme-debug-border:#FBBF24; --theme-debug-title: #FBBF24; --theme-debug-value: #34D399; --theme-overlay-bg: #161B22; /* ════════════════════════════════════════════════════════════ MISC ════════════════════════════════════════════════════════════ */ --theme-result-a: #0D4F3C; --theme-result-b: #4C1D95; --theme-btn-go-hover: #0D4F3C; --theme-btn-browse-hover: #4338CA; --theme-queue-pool-border: #30363D; --theme-muted-text: #7D8590; --theme-resting-dot: #FBBF24; --theme-text-white: #FFFFFF; --theme-text-black: #0D1117; --theme-text-muted2: #7D8590; --theme-text-disabled: #484F58; --theme-pin-dot-filled: #2DD4BF; --theme-header-bg: #0D1117; --theme-border: #30363D; --theme-court-hold-bg: rgba(245,158,11,0.1); --theme-court-empty-bg: rgba(255,255,255,0.01); --theme-btn-endsession-bg: rgba(239,68,68,0.12); --theme-btn-endsession-border: rgba(239,68,68,0.35); --theme-btn-endsession-text: #FCA5A5; --theme-btn-endsession-hover: rgba(239,68,68,0.25); /* ════════════════════════════════════════════════════════════ SESSION MESSAGE PANEL ════════════════════════════════════════════════════════════ */ --theme-msg-bg: rgba(255,255,255,0.04); /* panel background */ --theme-msg-border: var(--theme-session-accent); /* panel border */ --theme-msg-border-left: var(--theme-session-accent); /* left accent border*/ --theme-msg-title-color: var(--theme-session-accent); /* NOTICE label */ --theme-msg-title-size: var(--font-xs); /* NOTICE font size */ --theme-msg-body-color: var(--text); /* message text colour */ --theme-msg-body-size: var(--font-sm); /* message font size */ --theme-msg-height: 25%; /* % of session panel */ /* ════════════════════════════════════════════════════════════ SESSION PANEL LAYOUT ════════════════════════════════════════════════════════════ */ --theme-stats-height: 280px; /* height for 6 stat rows + header */ --theme-stats-row-pad: 11px; /* padding top/bottom each row */ /* ════════════════════════════════════════════════════════════ RECEPTION PAYMENT PANEL ════════════════════════════════════════════════════════════ */ --theme-pay-panel-bg: rgba(255,255,255,0.03); /* panel background */ --theme-pay-panel-border: var(--theme-session-accent); /* panel border */ --theme-pay-hint-color: var(--theme-muted-text); /* hint text */ --theme-pay-name-color: var(--white); /* selected name */ --theme-pay-fee-color: var(--theme-session-accent); /* fee amount */ --theme-pay-selected-border: var(--theme-session-accent); /* selected member */ --theme-pay-selected-bg: rgba(96,165,250,0.08); /* selected member bg */ --theme-pay-cancel-bg: rgba(239,68,68,0.12); /* cancel btn bg */ --theme-pay-cancel-border: rgba(239,68,68,0.35); /* cancel btn border */ --theme-pay-cancel-text: var(--theme-btn-end-text); /* cancel btn text */ --theme-pay-cancel-hover: rgba(239,68,68,0.25); /* cancel btn hover */ }