/* static/css/backend_esa.css
Applies ONLY when */
/* Only provide fallback vars when no theme-* class is present */
body.backend:not([class*="theme-"]){
--bg: #070013;
--panel: rgba(255,255,255,.06);
--panel2: rgba(255,255,255,.09);
--text: rgba(224,221,225,.96);
--muted: rgba(224,221,225,.72);
--line: rgba(224,221,225,.14);
--brand1: #700987;
--brand2: #36b1df;
--brand3: #1179bf;
background:
radial-gradient(1100px 700px at 18% 10%, rgba(112,9,135,.35), transparent 60%),
radial-gradient(900px 600px at 82% 0%, rgba(54,177,223,.22), transparent 55%),
linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.60)),
var(--bg) !important;
color: var(--text);
padding: 18px; /* your legacy uses 20px everywhere; close enough */
}
/* Header/footer to match ESA feel */
body.backend header{
background: rgba(0,0,0,.40) !important;
border: 1px solid var(--line);
backdrop-filter: blur(8px);
box-shadow: 0 18px 50px rgba(0,0,0,.25);
margin-bottom: 14px;
}
body.backend .header-container{
width: min(1500px, 94%);
}
body.backend footer{
background: rgba(0,0,0,.40) !important;
border: 1px solid var(--line);
color: var(--muted) !important;
}
/* =========
Header
========= */
.mkt-header{
position: sticky;
top:0;
z-index: 50;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--bg) 70%, rgba(0,0,0,.2));
}
.mkt-header-inner{
width: min(1160px, calc(100% - 40px));
margin: 0 auto;
display:flex;
align-items:center;
justify-content:space-between;
padding: 14px 0;
gap: 14px;
}
.mkt-logo{
display:flex;
align-items:center;
gap:10px;
font-weight: 800;
}
/* Links */
body.backend a{ color: rgba(54,177,223,.95); }
body.backend .nav-links a{ color: rgba(54,177,223,.95) !important; }
body.backend .nav-links a:hover{ filter: brightness(1.2); }
/* Main content container */
body.backend .content{
width: min(1500px, 94%);
}
/* Cards used by results/tournaments/etc */
body.backend .match-card,
body.backend .tournament-card,
body.backend .card,
body.backend .modal{
background: rgba(0,0,0,.35) !important;
color: var(--text);
border: 1px solid var(--line);
border-radius: 18px !important;
box-shadow: 0 18px 55px rgba(0,0,0,.28);
padding: 20px;
}
/* Tables */
body.backend table{
background: rgba(0,0,0,.28) !important;
border: 1px solid var(--line);
box-shadow: 0 18px 55px rgba(0,0,0,.22) !important;
}
body.backend td{
color: var(--text) !important;
border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
body.backend tr:nth-child(even) td{
background: rgba(255,255,255,.03) !important;
}
body.backend tr:hover td{
background: rgba(54,177,223,.10) !important;
}
/* Global buttons in legacy CSS */
body.backend .score-buttons button,
body.backend .bottom-buttons button,
body.backend .toggle-container button,
body.backend .view-pairings button{
position: relative;
background: rgba(255,255,255,.10);
color: var(--text) !important;
border: 1px solid rgba(255,255,255,.20);
border-radius: 14px ;
font-weight: 800;
backdrop-filter: blur(6px);
box-shadow:
0 8px 22px rgba(0,0,0,.25),
0 0 0 1px rgba(255,255,255,.05) inset;
transition: filter .12s ease, transform .08s ease;
}
body.backend .score-buttons button::after,
body.backend .bottom-buttons button::after,
body.backend .toggle-container button::after,
body.backend .view-pairings button::after{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
opacity: .6;
pointer-events:none;
}
body.backend button:hover{ filter: brightness(1.12) !important; }
/* Danger buttons */
body.backend .danger,
body.backend .bottom-buttons .danger{
background: rgba(255,60,60,.14) !important;
border-color: rgba(255,60,60,.28) !important;
}
body.backend .danger:hover{ filter: brightness(1.08) !important; }
/* Active state */
body.backend .active,{
background: rgba(0,255,160,.16) !important;
border-color: rgba(0,255,160,.28) !important;
}
/* Modals/overlays */
body.backend .modal-overlay,
body.backend .overlay{
background: rgba(0,0,0,.62) !important;
backdrop-filter: blur(8px);
}
/* Inputs inside modals/forms */
body.backend input,
body.backend select,
body.backend textarea{
color: var(--text) !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
}
body.backend input,
body.backend textarea{
background: rgba(0,0,0,.35) !important;
}
body.backend input:focus,
body.backend select:focus,
body.backend textarea:focus{
outline: none;
box-shadow: 0 0 0 4px rgba(54,177,223,.16);
border-color: rgba(54,177,223,.55) !important;
}
/* Small status colors */
body.backend .winner{ color: rgba(0,255,160,.90) !important; }
body.backend .draw{ color: rgba(224,221,225,.65) !important; }
body.backend .dropped{ opacity: .65; }
/* =========================================================
Backend: Make editable fields feel interactive + readable
Applies to all backend pages (reg_portal, results, admin ops)
========================================================= */
body.backend input,
body.backend select,
body.backend textarea{
/* brighter than card surface so “editable” reads immediately */
color: var(--text) !important;
border: 1px solid rgba(255,255,255,.22) !important;
border-radius: 14px !important;
/* subtle depth so it doesn’t feel flat/muddy */
box-shadow:
0 10px 24px rgba(0,0,0,.22),
0 0 0 1px rgba(255,255,255,.05) inset;
transition: filter .12s ease, border-color .12s ease, box-shadow .12s ease;
}
body.backend input,
body.backend textarea{
background: rgba(255,255,255,.10) !important;
}
/* Hover: “this is interactive” without being loud */
body.backend input:hover,
body.backend textarea:hover{
border-color: rgba(255,255,255,.32) !important;
filter: brightness(1.06);
}
body.backend select:hover{
border-color: rgba(255,255,255,.35) !important;
}
/* Focus: strong theme ring + glow, marketing-style */
body.backend input:focus,
body.backend select:focus,
body.backend textarea:focus{
outline: none !important;
border-color: rgba(54,177,223,.65) !important;
box-shadow:
0 0 0 4px rgba(54,177,223,.18),
0 14px 34px rgba(0,0,0,.30),
0 0 0 1px rgba(255,255,255,.06) inset !important;
filter: brightness(1.08);
}
/* Placeholder readability */
body.backend input::placeholder,
body.backend textarea::placeholder{
color: rgba(224,221,225,.55);
}
/* Disabled/readonly: clearly “locked” */
body.backend input:disabled,
body.backend select:disabled,
body.backend textarea:disabled,
body.backend input[readonly],
body.backend textarea[readonly]{
background: rgba(0,0,0,.22) ;
border-color: rgba(255,255,255,.10) !important;
color: rgba(224,221,225,.55) !important;
box-shadow: none !important;
filter: none !important;
cursor: not-allowed;
}
/* Optional: make checkboxes/radios match the theme a bit */
body.backend input[type="checkbox"],
body.backend input[type="radio"]{
accent-color: var(--brand2);
}
/* Table contexts: keep inputs compact and aligned */
body.backend table input,
body.backend table select{
padding: 8px 10px !important;
border-radius: 12px !important;
box-shadow:
0 8px 18px rgba(0,0,0,.18),
0 0 0 1px rgba(255,255,255,.05) inset;
}
body.backend input,
body.backend select,
body.backend textarea{
background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%) !important;
}
/* =========================================================
Results page tweaks (matches your existing markup)
========================================================= */
/* =========================================================
Mock-card treatment for Results match cards
========================================================= */
body.backend .match-card{
position: relative;
overflow: hidden;
/* mock-card glass */
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.32)) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 20px !important;
/* depth */
box-shadow:
0 18px 60px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.05) inset !important;
padding: 16px 16px 14px !important;
transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
/* top gradient accent bar like marketing */
body.backend .match-card::before{
content:"";
position:absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand1), var(--brand2), var(--brand3));
opacity: .95;
}
/* subtle sheen */
body.backend .match-card::after{
content:"";
position:absolute;
inset:-2px;
background:
radial-gradient(900px 280px at 15% 0%, rgba(255,255,255,.16), transparent 55%),
radial-gradient(700px 240px at 90% 10%, rgba(54,177,223,.10), transparent 55%);
opacity: .75;
pointer-events:none;
mix-blend-mode: screen;
}
/* hover lift like mock tiles */
body.backend .match-card:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,.22) !important;
box-shadow:
0 22px 75px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.07) inset !important;
}
/* Header: more “card header” structure */
body.backend .match-header{
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
body.backend .match-header h3{
margin: 0 0 8px;
font-size: 14px;
font-weight: 900;
letter-spacing: .6px;
text-transform: uppercase;
opacity: .85;
}
/* Player line: bigger + readable */
body.backend .match-header span{
font-weight: 900;
letter-spacing: .1px;
}
/* Winner/loser colors pop on dark cards */
body.backend .winner{ color: rgba(0,255,160,.92) !important; }
body.backend .loser{ color: rgba(224,221,225,.78) !important; }
body.backend .draw{ color: rgba(224,221,225,.62) !important; }
/* =========================================================
/* =========================================================
Results buttons — glass by default, solid green winner
========================================================= */
/* ---------- Base glass button ---------- */
body.backend button,
body.backend .score-buttons button,
body.backend .bottom-buttons button,
body.backend .toggle-container button,
body.backend .view-pairings button{
position: relative;
background: rgba(255,255,255,.10) ;
color: var(--text) !important;
border: 1px solid rgba(255,255,255,.20) !important;
border-radius: 14px !important;
font-weight: 800;
backdrop-filter: blur(6px);
box-shadow:
0 8px 22px rgba(0,0,0,.25),
0 0 0 1px rgba(255,255,255,.05) inset;
transition: filter .12s ease, transform .08s ease;
}
/* subtle glass highlight */
body.backend button::after{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
background: linear-gradient(
180deg,
rgba(255,255,255,.22),
rgba(255,255,255,0) 55%
);
opacity: .6;
pointer-events:none;
}
/* hover/press */
body.backend button:hover{ filter: brightness(1.12); }
body.backend button:active{ transform: translateY(1px); }
/* ---------- Score buttons (neutral glass) ---------- */
body.backend .score-buttons button{
border-radius: 999px !important;
font-size: 14px !important;
padding: 8px 12px !important;
}
/* ---------- ACTIVE RESULT: solid glass-green ---------- */
body.backend .score-buttons button.active{
background: rgba(40,167,69,.85) !important; /* solid glass green */
color: #ffffff !important;
border-color: rgba(0,0,0,.35) !important;
box-shadow:
0 10px 26px rgba(40,167,69,.45),
0 0 0 1px rgba(255,255,255,.18) inset;
filter: none;
}
/* keep highlight but softer on green */
body.backend .score-buttons button.active::after{
opacity: .35;
}
/* ---------- Utility caret button ---------- */
body.backend .score-buttons .toggle-actions-btn{
background: rgba(0,0,0,.40) !important;
border-radius: 14px !important;
font-size: 22px !important;
line-height: 32px;
}
/* ---------- Bottom actions ---------- */
body.backend .bottom-buttons button{
padding: 9px 12px !important;
}
/* danger actions still read as destructive, but glassy */
body.backend .bottom-buttons .danger{
background: rgba(200,40,40,.75) !important;
color: #fff !important;
border-color: rgba(0,0,0,.35) !important;
box-shadow:
0 2px 24px rgba(200,40,40,.45),
0 0 0 1px rgba(255,255,255,.12) inset;
}
body.backend .warn{
background: rgba(200, 125, 40, 0.459) !important;
color: #fff !important;
border-color: rgba(0,0,0,.35) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.12) inset;
}
/* ---------- Top toggle / View Pairings ---------- */
body.backend .toggle-container button,
body.backend .view-pairings button{
padding: 10px 20px !important;
}
header .nav-links {
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
header .nav-links br { display:none; } /* prevents the
damage */
header .nav-links > div { margin:0 !important; width:auto !important; }
.tourn-nav-inline{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}
.navbtn{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:10px;
border:1px solid var(--line, rgba(255,255,255,.14));
background: rgba(255,255,255,.06);
color: inherit;
text-decoration:none;
cursor:pointer;
}
.navbtn:hover{ filter: brightness(1.08); }
.navpill{
display:inline-block;
padding:2px 8px;
border-radius:999px;
font-weight:800;
font-size:12px;
border:1px solid var(--line, rgba(255,255,255,.14));
background: rgba(0,0,0,.25);
}
.navmeta{ opacity:.8; font-weight:700; margin-left:6px; }
.tourn-page-controls{ text-align:center; margin: 0 0 18px; }
.tourn-page-controls-top{ margin-bottom:12px; }
.tourn-page-controls-top .primary{
padding:10px 16px;
border-radius:12px;
font-weight:900;
}
.tourn-page-controls-row{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
align-items:center;
}
.tourn-round-chip{
display:inline-flex;
align-items:center;
padding:10px 12px;
border-radius:12px;
border:1px solid var(--line, rgba(255,255,255,.14));
background: rgba(255,255,255,.06);
}
/* =========================================================
Mobile user panel — icon + hamburger only
========================================================= */
@media (max-width: 640px){
/* shrink the toggle container */
.user-panel-toggle{
padding: 6px 8px;
gap: 6px;
border-radius: 999px;
}
h1{
font-size: medium;
}
/* hide text labels (name, roles, etc.) */
.user-panel-toggle .user-name,
.user-panel-toggle .user-roles,
.user-panel-toggle .label,
.user-panel-toggle span:not(.hamburger){
display: none !important;
}
/* keep hamburger visible */
.user-panel-toggle .hamburger{
font-size: 18px;
display: inline-block;
}
/* avatar stays visible */
.user-panel-toggle img{
width: 28px;
height: 28px;
border-radius: 50%;
}
/* tighten wrapper so it doesn't block header taps */
.user-panel-wrapper{
min-width: unset;
right: 10px;
top: 10px;
}
/* dropdown still full-width when opened */
.user-dropdown{
right: 0;
min-width: 200px;
}
}
/* =========================================================
Tables — gradient belongs on THEAD, not TH
========================================================= */
/* =========================================================
THEAD — dark, right-shifted, glass gradient (FINAL)
========================================================= */
body.backend th{
background: transparent !important;
}
body.backend table{
border-radius: 16px;
overflow: hidden;
}
body.backend thead{
position: relative;
background: linear-gradient(
90deg,
var(--brand1) 45%,
var(--brand2) 89%,
var(--brand3) 100%
);
backdrop-filter: blur(6px);
}
/* darken gradient without altering brand hue */
body.backend thead::after{
content:"";
position:absolute;
inset:0;
background: rgba(0,0,0,.38); /* tune: .32–.45 */
pointer-events:none;
}
/* subtle glass highlight */
body.backend thead::before{
content:"";
position:absolute;
inset:0;
background: linear-gradient(
180deg,
rgba(255,255,255,.16),
rgba(255,255,255,0) 55%
);
pointer-events:none;
}
/* header text */
body.backend thead th{
position: relative;
z-index: 1;
color: rgba(255,255,255,.92);
font-weight: 900;
letter-spacing: .6px;
text-transform: uppercase;
font-size: 12px;
border-bottom: 1px solid rgba(0,0,0,.45);
}
/* =========================================================
Backend UI component: Themed switch toggle (clean)
Markup:
========================================================= */
body.backend .switch{
position: relative;
display: inline-block;
width: 52px;
height: 28px;
}
/* Hide checkbox but keep it accessible/focusable */
body.backend .switch input{
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}
/* Track */
body.backend .switch .slider{
position: absolute;
inset: 0;
border-radius: 999px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(8px);
box-shadow:
0 10px 26px rgba(0,0,0,.20),
0 0 0 1px rgba(255,255,255,.05) inset;
transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
overflow: hidden;
}
/* Always-on glass sheen (UNDER the knob) */
body.backend .switch .slider::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(
180deg,
rgba(255,255,255,.22),
rgba(255,255,255,0) 55%
);
opacity: .45;
pointer-events:none;
z-index: 0; /* key: keep sheen behind knob */
}
/* Knob */
body.backend .switch .slider::before{
content:"";
position: absolute;
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
border-radius: 999px;
background: rgba(255,255,255,.92);
box-shadow:
0 10px 18px rgba(0,0,0,.25),
0 0 0 1px rgba(0,0,0,.18) inset;
transition: transform .22s ease;
z-index: 1; /* key: knob stays above sheen */
}
/* ON: theme gradient that stays crisp (no muddy black overlay) */
body.backend .switch input:checked + .slider{
background: linear-gradient(
90deg,
color-mix(in srgb, var(--brand1) 88%, black 12%) 12%,
color-mix(in srgb, var(--brand2) 88%, black 12%) 60%,
color-mix(in srgb, var(--brand3) 88%, black 12%) 92%
);
border-color: rgba(255,255,255,.24);
box-shadow:
0 12px 30px rgba(0,0,0,.28),
0 0 0 1px rgba(255,255,255,.10) inset,
0 0 22px rgba(54,177,223,.18);
}
/* slide distance for 52px track */
body.backend .switch input:checked + .slider::before{
transform: translateX(24px);
}
/* Focus ring */
body.backend .switch input:focus-visible + .slider{
box-shadow:
0 0 0 4px rgba(54,177,223,.18),
0 10px 26px rgba(0,0,0,.20),
0 0 0 1px rgba(255,255,255,.05) inset;
}
/* Editable backend inputs */
.backend input:not([type="checkbox"]),
.backend select,
.backend textarea{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.18);
border-radius: 10px;
color: var(--text);
padding: 8px 10px;
transition: border .15s, box-shadow .15s, background .15s;
}
.backend input:focus,
.backend select:focus,
.backend textarea:focus{
outline: none;
border-color: var(--brand2);
box-shadow: 0 0 0 2px rgba(54,177,223,.25);
}
/* Roster table rows */
.rp-tablewrap table tbody tr{
transition: background .15s, box-shadow .15s;
}
.rp-tablewrap table tbody tr:hover{
background: rgba(255,255,255,.04);
box-shadow: inset 0 0 0 9999px rgba(255,255,255,.02);
}
.nameCell{
display: flex;
flex-direction: column;
gap: 4px;
}
.nameTop{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
td .sub{
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
/* reg_portal roster: secondary lines */
body.backend td .sub {
font-size: 12px;
color: var(--muted);
line-height: 1.25;
}
body.backend tr.unpaired td{
background: rgba(var(--brand1) 0.253);
}
body.backend td.winner { color: rgba(0,255,153,.92); font-weight: 800; }
body.backend td.loser { color: rgba(254,40,33,.92); font-weight: 800; }
body.backend td.draw { color: rgba(255,205,17,.92); font-weight: 800; }
body.backend td.dropped{ opacity: .55; }