@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ===================================================================== UTStatsDB :: style5.css :: "Arena Terminal" modern dark theme Drop-in layout 5 for UTStatsDB 3.x. Non-destructive: does not touch style1/2/3. Re-skins the existing table markup via its own classes. ===================================================================== */ :root{ --bg:#080b10; --panel:#101620; --panel-2:#141b27; --panel-3:#0d1320; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16); --amber:#ffb627; --amber-dim:#caa24a; --cyan:#27e3d4; --red:#ff5151; --blue:#5b8cff; --green:#43d17a; --text:#e9eef5; --muted:#8593a8; --muted-2:#5a6678; --display:'Chakra Petch','Segoe UI',sans-serif; --body:'Barlow','Segoe UI',Arial,sans-serif; --mono:'JetBrains Mono','Consolas',monospace; } /* ---------- page shell ---------- */ /* Background lives on so it always fills the full viewport, in both top-nav and side-nav layouts (body alone doesn't stretch wide in side-nav). */ html{ -webkit-text-size-adjust:100%; background-color:var(--bg); background-image: radial-gradient(720px 380px at 80% -6%,rgba(255,182,39,.10),transparent 70%), radial-gradient(620px 360px at 6% 2%,rgba(39,227,212,.08),transparent 70%), linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:auto,auto,46px 46px,46px 46px; background-attachment:fixed; min-height:100%; } body,body.side-nav,body.top-nav{ background:transparent; color:var(--text); font-family:var(--body); font-size:15px; line-height:1.5; margin:0; padding:24px 14px 60px; min-height:100vh; overflow-x:auto; -webkit-font-smoothing:antialiased; } a{ color:var(--cyan); text-decoration:none; transition:color .15s,filter .15s; } a:hover{ color:var(--amber); } img{ max-width:100%; height:auto; } img.mapimage{ max-height:192px; border-radius:6px; border:1px solid var(--line-strong); } .mapimage.small{ max-height:128px; } /* ---------- header / logo wordmark ---------- This install prints TWO logo s (a UT logo that falls back to the UTStatsDB logo when utlogo5.png is missing, plus the UTStatsDB logo), which is why you saw a doubled logo. We hide both images and draw the "UNREAL FIGHT CLUB" wordmark on the UTStatsDB link instead. Works in top-nav and side-nav. Edit the content: strings to change the name; delete this block to restore the original image logos. */ img[alt="Unreal Tournament Logo"], img[alt="UTStatsDB Logo"]{ display:none; } a[href="https://utstatsdb.com"]{ display:inline-block; text-decoration:none; line-height:1; font-family:var(--display); font-weight:700; font-size:36px; letter-spacing:.04em; text-shadow:0 0 24px rgba(255,182,39,.35); margin:6px 0 14px 0; } a[href="https://utstatsdb.com"]::before{ content:"UNREAL "; color:var(--text); } a[href="https://utstatsdb.com"]::after{ content:"FIGHT CLUB"; color:var(--amber); } a[href="https://utstatsdb.com"]:hover::before, a[href="https://utstatsdb.com"]:hover::after{ filter:brightness(1.12); } /* ---------- top nav bar ---------- */ td.topbar{ width:min(94vw,1100px); /* span the page instead of shrinking to content */ padding:14px 20px; text-align:center; line-height:2.4; /* vertical room so wrapped rows never collide */ color:var(--muted-2); /* tone of the ยท separators between links */ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.4); } .topbar{ font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } a.topbar{ display:inline-block; font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:6px 12px; margin:2px 2px; border-radius:7px; transition:color .15s, background .15s, text-shadow .15s; } a.topbar:hover{ color:var(--amber); background:rgba(255,182,39,.12); text-shadow:0 0 12px rgba(255,182,39,.45); } /* ---------- side nav bar ---------- */ td.sidebar{ background:linear-gradient(180deg,var(--panel-2),var(--panel-3)); border-right:1px solid var(--line-strong); padding:14px 10px; } .sidebar{ font-family:var(--display); font-size:14px; font-weight:600; color:var(--text); } a.sidebar{ display:block; font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:transparent; padding:9px 12px; margin:2px 0; border-radius:6px; border-left:2px solid transparent; text-decoration:none; } a.sidebar:hover{ color:var(--text); background:rgba(255,182,39,.10); border-left:2px solid var(--amber); } .menulinks{ margin:10px 0; padding-top:10px; border-top:1px solid var(--line); } /* ---------- panels / boxes ---------- */ .box{ border:1px solid var(--line)!important; border-radius:10px; background:linear-gradient(155deg,rgba(20,27,39,.85),rgba(16,22,32,.85)); box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04); overflow:hidden; border-collapse:separate; } .titlemsg{ color:var(--amber); font-family:var(--display); font-weight:600; letter-spacing:.04em; } /* ---------- headings ---------- */ .heading{ font-family:var(--display); font-size:15px; font-weight:700; color:var(--amber); background:linear-gradient(180deg,#1a2230,#161d29); letter-spacing:.05em; text-transform:uppercase; padding:11px 12px; box-shadow:inset 3px 0 0 var(--amber); } .medheading{ font-family:var(--display); font-size:13px; font-weight:600; color:var(--text); background:#1a2230; letter-spacing:.04em; text-transform:uppercase; padding:9px 12px; } .hlheading{ font-family:var(--display); font-size:13px; font-weight:700; color:var(--amber); background:#1a2230; letter-spacing:.04em; text-transform:uppercase; padding:9px 12px; } .hlheadingred{ font-family:var(--display); font-size:13px; font-weight:700; color:var(--red); background:#1a2230; text-transform:uppercase; padding:9px 12px; } .hlheadingblue{ font-family:var(--display); font-size:13px; font-weight:700; color:var(--blue); background:#1a2230; text-transform:uppercase; padding:9px 12px; } .lglheading{ font-family:var(--display); font-size:14px; font-weight:700; color:var(--text); background:#1a2230; letter-spacing:.04em; padding:10px 12px; } a.lglheading{ font-family:var(--display); font-size:14px; font-weight:700; color:var(--text); background:transparent; letter-spacing:.03em; } a.lglheading:hover{ color:var(--amber); } .smheading{ font-family:var(--mono); font-size:10.5px; font-weight:500; color:var(--muted); background:#11151f; letter-spacing:.12em; text-transform:uppercase; padding:9px 8px; text-decoration:none; border-bottom:1px solid var(--line); } a.smheading{ font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; } a.smheading:hover{ color:var(--amber); background:#11151f; } .header{ font-family:var(--display); font-weight:700; color:var(--amber); text-transform:uppercase; letter-spacing:.05em; } /* ---------- data cells (rows) ---------- */ .grey,.greyn,a.grey{ font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--text); background:#161c28; padding:8px 10px; font-variant-numeric:tabular-nums; } .greyn{ white-space:nowrap; } a.grey{ color:var(--cyan); } a.grey:hover{ color:var(--amber); } .dark,.darkn,a.dark{ font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--text); background:#0e131d; padding:8px 10px; font-variant-numeric:tabular-nums; } .darkn{ white-space:nowrap; } a.dark{ color:var(--cyan); } a.dark:hover{ color:var(--amber); } .darkgrey{ font-family:var(--body); font-size:13px; font-weight:600; color:#0b0e14; background:var(--muted); padding:8px 10px; } .warn{ font-family:var(--body); font-size:13px; font-weight:600; color:#fff; background:#5a1d1d; padding:8px 10px; } .tinytext{ font-family:var(--mono); font-size:11px; font-weight:400; color:var(--muted); } .opnote{ font-family:var(--body); font-size:13px; font-weight:600; color:var(--amber); } /* humans gold, bots cyan */ .darkhuman,a.darkhuman{ font-family:var(--body); font-size:13.5px; font-weight:600; color:var(--amber); background:#0e131d; text-decoration:none; padding:8px 10px; } a.darkhuman:hover{ color:var(--red); } .greyhuman,a.greyhuman{ font-family:var(--body); font-size:13.5px; font-weight:600; color:var(--amber); background:#161c28; text-decoration:none; padding:8px 10px; } a.greyhuman:hover{ color:var(--red); } .darkbot,a.darkbot{ font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--cyan); background:#0e131d; text-decoration:none; padding:8px 10px; } a.darkbot:hover{ color:var(--amber); } .greybot,a.greybot{ font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--cyan); background:#161c28; text-decoration:none; padding:8px 10px; } a.greybot:hover{ color:var(--amber); } a.idmatch{ font-family:var(--body); font-size:13.5px; color:var(--red); background:#0e131d; font-weight:600; text-decoration:none; } /* ---------- pagination ---------- */ .pages,a.pages{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.06em; text-decoration:none; } a.pages:hover{ color:var(--amber); } /* ---------- forms ---------- */ .forms,.formsb,.searchform,.searchformbox, input,select,textarea,button{ font-family:var(--body); font-size:13.5px; color:var(--text); } input,select,textarea{ background:#0c111a; border:1px solid var(--line-strong); border-radius:6px; color:var(--text); padding:7px 10px; outline:none; } input:focus,select:focus,textarea:focus{ border-color:var(--amber); box-shadow:0 0 0 2px rgba(255,182,39,.18); } input[type=submit],button,input[type=button]{ font-family:var(--display); font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; background:linear-gradient(180deg,#ffc23f,#f0a40c); color:#0b0e14; border:none; border-radius:6px; padding:8px 16px; } input[type=submit]:hover,button:hover,input[type=button]:hover{ filter:brightness(1.08); } .searchformbox{ font-weight:400; } .searchformbox td,.searchform td{ padding:3px; } /* ---------- status (server query) ---------- */ .status{ font-family:var(--body); font-size:13px; border:1px solid var(--line)!important; border-radius:10px; text-align:left; background:rgba(16,22,32,.8); box-shadow:0 10px 30px rgba(0,0,0,.4); overflow:hidden; border-collapse:separate; } a.status{ font-family:var(--body); font-size:13px; color:var(--amber); text-decoration:none; border:none; } a.status:hover{ color:var(--cyan); } .statusnb,.statusnbw{ font-family:var(--body); font-size:13px; padding-left:6px; } .statusnbw{ white-space:nowrap; } .statustitle,.spectitle{ font-family:var(--display); font-size:13px; font-weight:600; color:var(--amber); background:#1a2230; text-transform:uppercase; letter-spacing:.04em; padding:9px 12px; } .offline{ color:var(--red); font-weight:600; } .redteambar{ font-family:var(--body); font-size:13px; color:#ffd9d9; background:linear-gradient(180deg,#3a0d0d,#260808); padding:7px 10px; } .blueteambar{ font-family:var(--body); font-size:13px; color:#d9e2ff; background:linear-gradient(180deg,#0d1840,#080f26); padding:7px 10px; } /* ---------- team colors / scores ---------- */ .blueteam{ color:#fff; background:#2a52d6; font-weight:600; padding:6px 8px; } .redteam{ color:#fff; background:#d62a2a; font-weight:600; padding:6px 8px; } .greenteam{ color:#08210f; background:#37c46b; font-weight:600; padding:6px 8px; } .goldteam{ color:#241f06; background:#e3c023; font-weight:600; padding:6px 8px; } .blueteamscore{ color:#9fb4ff; background:#11151f; font-weight:600; padding:6px 8px; } .redteamscore{ color:#ff9f9f; background:#11151f; font-weight:600; padding:6px 8px; } .greenteamscore{ color:#8fe7ad; background:#11151f; font-weight:600; padding:6px 8px; } .goldteamscore{ color:#ecd87a; background:#11151f; font-weight:600; padding:6px 8px; } /* ---------- chat log ---------- */ .chatlink,a.chatlink{ font-family:var(--display); font-size:13px; font-weight:600; color:var(--amber); background:#1a2230; } a.chatlink:hover{ color:var(--cyan); } .chat,.chatred,.chatblue,.chatgreen,.chatgold,.chatsys,.chatkill, .votesys,.chatweapspec{ font-family:var(--mono); font-size:12px; font-weight:500; background:#0e131d; padding:5px 9px; } .chat{ color:#cfd7e3; } .chatred{ color:#ff7676; } .chatblue{ color:#7d9bff; } .chatgreen{ color:#5fd98a; } .chatgold{ color:#e6c94f; } .chatsys{ color:#5fae8a; } .chatkill{ color:#c9c552; } .votesys{ color:#37b3b1; } .chatweapspec{ color:#b07ad6; } /* ---------- activity graphs (hourly / weekly) ---------- */ /* geometry preserved from stock so inline heights still line up */ .tgheading{ font-family:var(--display); font-weight:600; color:var(--text); background:#11151f!important; padding:14px 10px; } .tglheading{ font-family:var(--display); font-size:14px; font-weight:700; color:var(--amber)!important; background:#1a2230!important; letter-spacing:.05em; text-transform:uppercase; padding:10px 12px; } .tgmainbox{ overflow:hidden; text-align:left; width:390px; height:150px; } .tgsubbox{ font-size:0; width:390px; height:130px; background:#0b0f18!important; border:1px solid var(--line)!important; border-radius:6px; float:right; background-image:repeating-linear-gradient(to top,transparent 0,transparent 25px,rgba(255,255,255,.04) 25px,rgba(255,255,255,.04) 26px)!important; } .tgbarspace{ width:5px; float:left; } .tgbar{ font-size:0; width:9px; float:left; position:relative; background:linear-gradient(to top,#f0a40c,#ffd76a)!important; border:none!important; border-radius:2px 2px 0 0; box-shadow:0 0 8px rgba(255,182,39,.5); } .tglabel{ font-family:var(--mono); font-size:9px; color:var(--muted)!important; font-weight:400; width:9px; text-align:center; float:left; position:relative; border:1px solid transparent; } .tgblank{ font-size:0; height:0; clear:both; } .wgmainbox{ overflow:hidden; text-align:left; width:180px; height:150px; } .wgsubbox{ font-size:0; width:180px; height:130px; background:#0b0f18!important; border:1px solid var(--line)!important; border-radius:6px; float:right; } .wgbarspace{ width:13px; float:left; } .wgbar{ font-size:0; width:9px; float:left; position:relative; background:linear-gradient(to top,#0f8f86,#3ff0e0)!important; border:none!important; border-radius:2px 2px 0 0; box-shadow:0 0 8px rgba(39,227,212,.5); } .wgprespace{ width:10px; float:left; } .wglabel{ font-family:var(--mono); font-size:9px; color:var(--muted)!important; font-weight:400; width:9px; text-align:center; float:left; position:relative; border:1px solid transparent; } .graph{ background:#0b0f18; border:1px solid var(--line); border-radius:6px; } /* ---------- help ---------- */ .help{ font-family:var(--body); color:var(--text); font-size:14px; text-align:left; line-height:1.65; } .helphdr{ font-family:var(--display); font-size:20px; font-weight:700; color:var(--amber); text-transform:uppercase; letter-spacing:.03em; } a.help{ color:var(--cyan); font-weight:600; text-decoration:none; } a.help:hover{ color:var(--amber); } #matchup{ width:auto; max-width:920px; overflow:auto; margin:0 auto; } /* ---------- footer ---------- */ footer{ max-width:920px; margin:42px auto 10px auto; padding-top:20px; text-align:center; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted-2); text-transform:uppercase; } footer a{ color:var(--cyan); } footer a:hover{ color:var(--amber); } /* ---------- small screens (best-effort; markup uses fixed widths) ---------- */ @media (max-width:640px){ body{ padding:14px 6px 40px; font-size:14px; } a[href="https://utstatsdb.com"]{ font-size:24px; } td.topbar{ padding:10px 8px; } a.topbar{ font-size:12.5px; padding:5px 9px; } }