/* ===================================================================================== * Panel v2 - one token set, both themes. PLAN_StatusSiteV2.md §8. * * Palette is the v1 page's dark scheme lifted into custom properties, then extended with the * semantic colours the new views need (rung colours, ping series, ok/warn/fail). * * ⚠ Light is defined on bare :root and dark overrides it, so a browser with no preference and * no stored choice still gets a complete palette. Every colour is defined in the light block - * a colour whose ONLY definition is inside a media query is a colour that disappears. * ⚠ text_color_paleblue is unreadable on white - the v1 Launcher paint code already falls back * to a darker blue there, and so does this. * ===================================================================================== */ :root { --bg:#f5f6f8; --bg2:#ffffff; --bg3:#eceef2; --line:#d8dce4; --fg:#1b1f27; --fg2:#5a6474; --fg3:#8892a4; --accent:#0b6bcb; --accent2:#0a5aa8; --vlum:42%; --vbg:14%; --vbd:55%; /* version-chip colour, light theme */ --subsel:#6d4bd6; /* the selected SUB-tab: a quiet violet, not the tab-bar blue */ --ok:#1a7f37; --warn:#9a6700; --fail:#b42318; --info:#0a5aa8; --rung-direct:#1a7f37; --rung-nat:#9a6700; --rung-mona:#7048c6; --flash:#fff6c2; --mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace; --r:8px; --row:30px; } :root[data-theme="dark"], :root:not([data-theme="light"]) { --bg:#0f1216; --bg2:#161a21; --bg3:#1d2229; --line:#2a313b; --fg:#e6e9ef; --fg2:#a3adbb; --fg3:#6f7987; --accent:#4ea1ff; --accent2:#77b8ff; --vlum:72%; --vbg:18%; --vbd:52%; /* version-chip colour, dark theme */ --subsel:#a78bfa; --ok:#3fb950; --warn:#d29922; --fail:#f85149; --info:#58a6ff; --rung-direct:#3fb950; --rung-nat:#d29922; --rung-mona:#a371f7; --flash:#3a3413; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg:#f5f6f8; --bg2:#ffffff; --bg3:#eceef2; --line:#d8dce4; --fg:#1b1f27; --fg2:#5a6474; --fg3:#8892a4; --accent:#0b6bcb; --accent2:#0a5aa8; --vlum:42%; --vbg:14%; --vbd:55%; --subsel:#6d4bd6; --ok:#1a7f37; --warn:#9a6700; --fail:#b42318; --info:#0a5aa8; --rung-direct:#1a7f37; --rung-nat:#9a6700; --rung-mona:#7048c6; --flash:#fff6c2; } } *{box-sizing:border-box} /* ⚠ THE PANEL HAD NO [hidden] RULE. `[hidden]{display:none}` is only a UA-stylesheet default, so any class that sets `display` silently outranks it - which is how the tab hint stayed on screen while marked hidden. `.hidden` is toggled on ten elements here (the map tooltip and its Reset button, folded table rows, a whole view in Compare Logs), so this is stated once, for all of them, rather than patched per component. */ [hidden]{display:none!important} body{margin:0;background:var(--bg);color:var(--fg); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} /* ---- shell: TOP TAB BAR, same idiom and wording as the classic page (user 2026-08-25: "I liked the old layout with buttons on top"). No sidebar. ---- */ .top{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--bg2); border-bottom:1px solid var(--line);position:sticky;top:0;z-index:36;flex-wrap:wrap} /* ⚠ z-index 36, ABOVE the floating chat window (35, chat.css): the bar is a stacking context, so its account menu can never rise above the bar itself - at 20 the menu opened UNDER the chat (2026-09-15). The phone chat sheet (38) still covers the bar, and the window never overlaps the bar itself (its top is clamped below it). */ /* The title opens the first tab (the World Map) without a reload (2026-09-15). Nobody selects it as text, but everybody drags across it while reaching for a tab - so the selection is pure noise and the click may as well do the thing you already wanted (user, 2026-08-26). */ .brand{font-weight:700;font-size:17px;letter-spacing:.2px;cursor:pointer; user-select:none;-webkit-user-select:none;-moz-user-select:none} .brand:active{opacity:.65} .brand span{color:var(--accent);font-weight:600;margin-left:7px} /* nicknames stay on ONE line - the Games host column wrapped to two and looked broken */ td.nick{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px} .brand small{color:var(--fg3);font-weight:400;margin-left:6px} /* ---- the logo (markup: mmb_brand_html in lib/boot.php, user 2026-09-14) ---------------------------- Desktop: the letters of "Modern MP" light up one after another under the mouse - a glow, no background. Phone: "EE2.eu" and "Modern MP" take turns in ONE slot, the new word wiping over the old behind a bright edge, so the bar keeps the room the two words used to take. */ .brand{position:relative} .brand .brand-a{color:inherit;font-weight:inherit;margin-left:0} .brand .brand-b{color:var(--accent);font-weight:600;margin-left:7px;white-space:pre} .brand .brand-b i{font-style:normal;display:inline-block} @media (hover:hover) and (min-width:701px) and (prefers-reduced-motion:no-preference){ .brand:hover .brand-b i{animation:brand-glow 1s cubic-bezier(.3,.6,.3,1) calc(var(--i) * 55ms) both} } @keyframes brand-glow{ 0%{transform:none;text-shadow:none} 35%{transform:translateY(-2px);color:color-mix(in srgb,var(--accent) 55%,#fff); text-shadow:0 0 6px color-mix(in srgb,var(--accent) 90%,transparent),0 0 16px color-mix(in srgb,var(--accent) 55%,transparent)} 100%{transform:none;text-shadow:0 0 7px color-mix(in srgb,var(--accent) 45%,transparent)} } @media (max-width:700px){ .brand{display:inline-grid;grid-template-areas:"w";align-items:center;overflow:hidden} .brand .brand-a,.brand .brand-b{grid-area:w;margin-left:0;white-space:nowrap} .brand .brand-a{animation:brand-a 9s cubic-bezier(.65,0,.35,1) infinite} .brand .brand-b{animation:brand-b 9s cubic-bezier(.65,0,.35,1) infinite} .brand::after{content:"";position:absolute;top:10%;bottom:10%;left:0;width:2px;border-radius:2px;pointer-events:none; background:var(--accent);box-shadow:0 0 8px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 60%,transparent); opacity:0;animation:brand-edge 9s cubic-bezier(.65,0,.35,1) infinite} } @media (max-width:700px) and (prefers-reduced-motion:reduce){ .brand .brand-a,.brand .brand-b,.brand::after{animation:none} .brand .brand-b,.brand::after{display:none} } /* A: shown, wiped away from the left, parked hidden on the other side, wiped back in. B: the mirror image. */ @keyframes brand-a{0%,42%{clip-path:inset(0 0 0 0)} 50%{clip-path:inset(0 0 0 100%)} 50.01%,92%{clip-path:inset(0 100% 0 0)} 100%{clip-path:inset(0 0 0 0)}} @keyframes brand-b{0%,42%{clip-path:inset(0 100% 0 0)} 50%,92%{clip-path:inset(0 0 0 0)} 99.99%{clip-path:inset(0 0 0 100%)} 100%{clip-path:inset(0 100% 0 0)}} @keyframes brand-edge{0%,41.9%{left:0;opacity:0} 42%{left:0;opacity:1} 50%{left:100%;opacity:1} 50.1%,91.9%{left:0;opacity:0} 92%{left:0;opacity:1} 99.9%{left:100%;opacity:1} 100%{left:100%;opacity:0}} .spacer{flex:1} .tabs{display:flex;gap:4px;flex-wrap:wrap;padding:6px 14px;background:var(--bg2); border-bottom:1px solid var(--line);position:sticky;top:45px;z-index:19} .tab{padding:7px 13px;border-radius:9px;cursor:pointer;color:var(--fg2);font-weight:550; border:1px solid transparent;white-space:nowrap;font-size:14px} .tab:hover{background:var(--bg3);color:var(--fg)} .tab.on{background:var(--accent);color:#fff} .tabs{display:block;padding:0} .tabrow{display:flex;gap:4px;flex-wrap:wrap;padding:7px 16px} /* hoisted into the title bar - no padding of its own, it inherits the bar's */ .tabrow.sectiontabs{padding:0;margin-left:18px} .tabrow.subrow{background:var(--bg3);border-top:1px solid var(--line);padding:6px 16px} .tab.sec{font-size:14px;font-weight:650} .tab.sec.on{background:var(--accent);color:#fff} .subrow .tab{font-size:13.5px} /* The sub-tabs, boxed. On a desktop this is exactly the row they were before - they wrap inside it and the hint takes the slack beside them. On a phone it becomes the scroller. */ .tabstrip{display:flex;gap:4px;flex-wrap:wrap;min-width:0;flex:0 1 auto} /* ---- the tab hint: what this tab is --------------------------------------------------------- It sits after the last sub-tab and takes the leftover width. ⚠ NO FRAME. It was --fg3 at 11.5px, which read as fine print, so it was given a tinted border and background - and that swung too far the other way (user, 2026-09-05: "too noticeable ... it takes so much attention in this blue frame. Maybe remove that frame and just keep text bigger"). What made it readable was the TYPOGRAPHY, not the box: the tab's name in full ink and the caption at 12.5px. The ⓘ alone marks it as a note and separates it from the last tab. */ /* ⚠ flex-basis 0, NOT auto. With `auto` the basis is the caption's own width, so a long one demanded more room than the row had left and flex-wrap moved the whole chip BELOW the tabs (user, 2026-09-05). Basis 0 asks for nothing and takes what is spare, so it stays beside them and the TEXT wraps instead of the element. */ .tabtools { flex:0 0 auto; align-self:center; margin-left:auto; padding-left:10px } .tabhint { flex:1 1 0; min-width:0; align-self:center; display:flex; align-items:baseline; gap:6px; margin-left:10px; padding-left:13px; border-left:1px solid var(--line); color:var(--fg2); font-size:12.5px; line-height:1.35; overflow:hidden } .tabhint::before { content:'ⓘ'; flex:0 0 auto; color:var(--info); line-height:1.2 } /* The tab's name carries full-strength ink; the explanation stays one step back from it. */ /* .tabhintname is gone with the repeated tab title - the sub-tab row already says which one. */ /* Up to TWO lines, then ellipsis. One line truncated most captions; unlimited lines would let a caption push the tab row taller than the content it labels. */ /* The optional link sits after the caption and never shrinks - a truncated link is useless. */ .tabhintlink { flex:0 0 auto; color:var(--accent); white-space:nowrap } .tabhintlink:hover { text-decoration:underline } .tabhinttext { min-width:0; overflow:hidden; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2 } /* On a narrow screen it takes its own line rather than squeezing the tabs to nothing. */ /* ⚠ 900px, THE SAME BREAKPOINT AS THE HEADER. At 820 the hint kept its beside-the-tabs styling for 80px after the tabs had already become a full-width scroller, and drew a left border against nothing. */ @media (max-width:900px) { /* Full width now, so the rule moves to the top - a left border there would divide nothing. */ .tabhint { flex:1 0 100%; margin:7px 0 0; padding:7px 0 0; border-left:0; border-top:1px solid var(--line) } .tabhinttext { white-space:normal } } /* ---- sub-tabs ------------------------------------------------------------------------------- ⚠ THE SELECTED SUB-TAB WAS NOT RECOGNISABLE. It was one shade of dark grey against another, so a reader could not tell which of them they were on and clicked around looking for it (user, 2026-09-06, watching somebody else use it). Two changes, and both matter: - EVERY sub-tab now reads as a button: its own surface, its own border, a hairline of depth. Against the row's darker ground they look pressable rather than like text. - THE SELECTED ONE IS ORANGE, not the accent blue. Blue is what the MAIN tab row already uses for its selection, so repeating it here would be one colour meaning "selected" at two levels; a second hue says "you are here, inside that". A tint plus a solid border plus an underline - not a saturated fill, which would shout louder than the main tab above it. */ .subrow .tab{ background:color-mix(in srgb, var(--bg2) 60%, transparent); border:1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow:0 1px 0 color-mix(in srgb, #000 10%, transparent); } .subrow .tab:hover{ background:var(--bg2); color:var(--fg); border-color:color-mix(in srgb, var(--fg3) 70%, transparent) } .subrow .tab.on{ /* ⚠ QUIET. The first version used the "on multiplayer" orange with a 2px underline and a glow, which read louder than the MAIN tab above it and inverted the hierarchy (user, 2026-09-06: "too strong, especially that frame-bottom orange line"). A soft violet says "you are here" without competing: distinct from the tab-bar blue, and nowhere near as hot as the orange. */ background:color-mix(in srgb, var(--subsel) 11%, var(--bg2)); border-color:color-mix(in srgb, var(--subsel) 45%, transparent); color:var(--fg); font-weight:650; /* One hairline, not a bar - enough to find, not enough to shout. */ box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--subsel) 55%, transparent); } .subrow .tab.on:hover{ background:color-mix(in srgb, var(--subsel) 16%, var(--bg2)) } /* A locked tab keeps its dashed invitation - the selection styling must not out-shout it. */ .subrow .tab.locked{ background:transparent; box-shadow:none } /* ---- the MAIN (section) tabs: the same glass, without losing the blue -------------------- * The sub-tabs got their translucent surfaces and violet selection on 2026-09-06; the row above * them stayed a flat --bg3 hover and a flat blue fill, which is what made it look like the one * unmodernised control on the page (user, 2026-09-07: "The main tab still uses fixed blue color. * Would it be possible to improve that fixed blue to also be semi-transparent and look modern * with mouse hover events ... Selected tab should STILL be blue and noticeable just maybe a bit * different"). * * ⚠ IT IS THE SUB-TAB RECIPE IN BLUE, not a lit solid fill. The first attempt kept the saturated * --accent background and added a pale border and a bloom, which only made a strong thing * stronger (user, 2026-09-07: "still bad, and even worse with even lighter frame. This light blue * is too strong for these, I thought it would be different semi-transparent blue, similar to what * we have in sub-tabs"). * * So: a TINT over the bar, an accent border, an underline hairline - exactly `.subrow .tab.on` * one section up, swapping the violet for the tab-bar blue. Hierarchy is kept by degree rather * than by hue: a slightly heavier tint (15% vs 11%) and a 2px underline against the sub-tab's * 1px, so the main row still reads as the outer level. * * ⚠ AND THE LABEL BECOMES --fg, NOT #fff. That is what makes the transparency safe: white text * on a translucent accent measured about 3.9:1 in the light theme, under the 4.5:1 this text size * needs. Foreground text on a 15% tint of the bar is far clearer than the old solid ever was. */ .sectiontabs .tab.sec { border:1px solid transparent; transition:background-color .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease; } /* Unselected: nothing until you approach it, then a real glass surface. */ .sectiontabs .tab.sec:not(.on):not(.locked):hover { color:var(--fg); background:color-mix(in srgb, var(--bg3) 70%, transparent); border-color:color-mix(in srgb, var(--fg3) 45%, transparent); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); } .sectiontabs .tab.sec.on { background:color-mix(in srgb, var(--accent) 15%, var(--bg2)); border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--fg); box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--accent) 70%, transparent); } .sectiontabs .tab.sec.on:hover { background:color-mix(in srgb, var(--accent) 21%, var(--bg2)); } .sectiontabs .tab.sec:active { transform:translateY(1px) } .sectiontabs .tab.sec:focus-visible { outline:2px solid var(--accent); outline-offset:2px } @media (prefers-reduced-motion:reduce) { .sectiontabs .tab.sec { transition:none } .sectiontabs .tab.sec:active { transform:none } } /* A tab a guest can SEE but not open. Deliberately inviting rather than disabled-looking: the point is to show what an account is worth, so it keeps the normal hover and gains a padlock. The data behind it is still refused server-side - this is advertising, not a permission. */ .tab.locked{color:var(--fg3);border-style:dashed;border-color:var(--line)} .tab.locked:hover{color:var(--accent);border-color:var(--accent);border-style:solid} .tab.locked .lockicon{margin-left:6px;font-size:11px;opacity:.85;vertical-align:middle} /* ---- the account menu + profile chooser ------------------------------------------------------ ⚠ The bar shows the chosen PROFILE NICKNAME; the email is inside the menu, one click deeper. */ .acctbtn.needpick{ border-color:color-mix(in srgb, var(--warn) 60%, transparent); color:var(--warn) } /* ---- the account menu, REDESIGNED 2026-09-15 ---------------------------------------------------------------------- User: nicer, colours, columns for sections, some transparency, animations under the pointer, wider, no "Playing as". Mica panel; the profile on top the way the chats show it (its colour in --me, its game avatar); two columns of sections; every row brings its own accent in --ic, and its icon tile lifts and tints when pointed at. */ .acctwho{ display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:6px; border-radius:13px; background:linear-gradient(120deg, color-mix(in srgb, var(--me, var(--accent)) 17%, transparent), color-mix(in srgb, var(--me, var(--accent)) 3%, transparent) 72%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--me, var(--accent)) 22%, transparent) } .acctav{ flex:0 0 56px; width:56px; height:44px; border-radius:11px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg, var(--me, var(--accent)), color-mix(in srgb, var(--me, var(--accent)) 55%, #000)); box-shadow:0 8px 18px -10px var(--me, var(--accent)), inset 0 0 0 1px rgba(255,255,255,.2) } .acctav img{ display:block; width:100%; height:100%; object-fit:cover } .acctav span{ font:700 19px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4) } .acctwhot{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px } .acctwho b{ display:block; font:650 16px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.1px; color:var(--me, var(--fg)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .acctmailsm{ display:block; font-size:11.5px; color:var(--fg3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .acctenh{ flex:0 0 auto; padding:4px 9px; border-radius:999px; font:700 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--fg); white-space:nowrap; background:linear-gradient(90deg, color-mix(in srgb, #febc34 26%, transparent), color-mix(in srgb, #39d3b6 22%, transparent)); box-shadow:inset 0 0 0 1px color-mix(in srgb, #febc34 42%, transparent) } .acctcols{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px } .acctcol{ min-width:0; display:flex; flex-direction:column; gap:2px } .acctsec{ padding:7px 10px 4px; font:700 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg3) } /* under the pointer (user 2026-09-15: the tilting tiles looked unprofessional): the row tints and only the emoji zooms a little */ .acctmenu .acctitem{ --ic:var(--accent); display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; border:0; border-radius:11px; background:none; color:var(--fg); font:inherit; text-align:left; text-decoration:none; cursor:pointer; transition:background .15s ease } .acctmenu .acctitem:hover{ background:color-mix(in srgb, var(--ic) 11%, transparent); text-decoration:none } .acctmenu .acctitem:focus-visible{ outline:2px solid color-mix(in srgb, var(--ic) 70%, transparent); outline-offset:-2px } .acctemo{ flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; border-radius:10px; font-size:16px; line-height:1; background:color-mix(in srgb, var(--ic, var(--accent)) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ic, var(--accent)) 22%, transparent); transition:background .15s ease, box-shadow .15s ease } .acctemo i{ display:block; font-style:normal; transition:transform .18s ease-out } .acctmenu .acctitem:hover .acctemo{ background:color-mix(in srgb, var(--ic) 22%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ic) 36%, transparent) } .acctmenu .acctitem:hover .acctemo i{ transform:scale(1.2) } .acctlbl{ min-width:0; display:flex; flex-direction:column; gap:1px } .acctlbl b{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .acctlbl small{ font-size:11px; color:var(--fg3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* the red cross on Reset settings: only the icon is red, Sign out stays the loudest row */ .acctemo.danger{ color:var(--fail) } .acctsep{ height:1px; margin:6px 8px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 16%, transparent), transparent) } .acctmenu .acctitem.acctout b{ color:var(--fail) } .acctmenu .acctitem.acctout:hover{ background:color-mix(in srgb, var(--fail) 13%, transparent) } /* The chooser. A GRID because forty profiles on one account is normal here - a dropdown would be forty look-alike lines - and it is modal because until one is picked there is nothing to do. */ /* The suggestion is a question, not the unavoidable first-run chooser: it is narrower and it can always be dismissed. */ .sgcard{ max-width:430px } .sgback .pfrow{ justify-content:flex-end } .pfback{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb, #000 55%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) } .pfcard-wrap{ width:min(620px, 100%); max-height:min(80vh, 720px); display:flex; flex-direction:column; gap:9px; padding:16px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.5) } .pfcard-wrap h3{ margin:0; font-size:16px; color:var(--fg) } .pfsub{ margin:0; font-size:12px; color:var(--fg2); line-height:1.45 } /* A nickname inside the switch dialog. Blue and bold so the two names stand out of the sentence without quotes around them (user, 2026-09-08). --accent is theme-aware, so this stays readable in dark mode where the plain-text colour is not. */ .pfnick{ color:var(--accent); font-weight:700 } /* ---- the profile chooser, REDESIGNED 2026-09-15 (user: more modern, default scrollbar, show avatars) ------------------ Mica card like Profile Style; search with an icon; cards = avatar (game avatar or initial) + nickname in its colour + id and last played; "Current" tag; the pick gets an accent ring and a check. Only .pfpick: the other .pfcard-wrap dialogs keep theirs. */ .pfpback{ background:rgba(8,12,18,.45); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px) } .pfcard-wrap.pfpick{ width:min(760px, 100%); max-height:min(84vh, 780px); gap:0; padding:0; overflow:hidden; border-radius:18px; border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:color-mix(in srgb, var(--bg2) 95%, transparent); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); box-shadow:0 40px 90px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); animation:pfpin .18s ease-out } @keyframes pfpin { from { opacity:0; transform:translateY(8px) scale(.985) } } .pfphead{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px 10px } .pfpht{ flex:1; min-width:0 } .pfpick h3{ margin:0 0 3px; font-size:18px; font-weight:650; letter-spacing:-.15px } .pfpx{ width:32px; height:32px; margin:-4px -6px 0 0; border:0; border-radius:9px; background:none; color:var(--fg3); font-size:22px; line-height:1; cursor:pointer } .pfpx:hover{ color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent) } .pfpsearch{ position:relative; display:block; margin:0 18px 12px } .pfpsearch svg{ position:absolute; left:11px; top:50%; width:16px; height:16px; transform:translateY(-50%); color:var(--fg3); pointer-events:none } .pfpsearch input{ width:100%; box-sizing:border-box; height:38px; padding:0 12px 0 34px; border-radius:11px; font:inherit; font-size:13.5px; color:var(--fg); border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:color-mix(in srgb, var(--fg) 5%, transparent); outline:none; transition:border-color .15s ease, box-shadow .15s ease } .pfpsearch input:focus{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) } .pfpgrid{ flex:1; min-height:120px; overflow:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); align-content:start; gap:8px; padding:8px 18px 16px; scrollbar-gutter:stable } .pfpgrid::-webkit-scrollbar{ width:10px } .pfpgrid::-webkit-scrollbar-track{ background:transparent } .pfpgrid::-webkit-scrollbar-button{ display:none; height:0 } .pfpgrid::-webkit-scrollbar-thumb{ background-color:color-mix(in srgb, var(--fg) 15%, transparent); border-radius:10px; border:3px solid transparent; background-clip:content-box; min-height:40px } .pfpgrid:hover::-webkit-scrollbar-thumb{ background-color:color-mix(in srgb, var(--fg) 26%, transparent) } @supports not selector(::-webkit-scrollbar) { .pfpgrid{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--fg) 22%, transparent) transparent } } .pfp{ position:relative; display:flex; align-items:center; gap:11px; min-width:0; padding:8px 12px 8px 8px; border-radius:13px; cursor:pointer; text-align:left; font:inherit; color:var(--fg); border:1px solid color-mix(in srgb, var(--fg) 9%, transparent); background:color-mix(in srgb, var(--fg) 3%, transparent); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease } .pfp:hover{ background:color-mix(in srgb, var(--fg) 7%, transparent); border-color:color-mix(in srgb, var(--fg) 18%, transparent) } .pfp:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:1px } .pfp.on{ border-color:color-mix(in srgb, var(--accent) 70%, transparent); background:color-mix(in srgb, var(--accent) 13%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 10px 24px -16px var(--accent) } .pfpav{ flex:0 0 52px; width:52px; height:41px; display:grid; place-items:center; border-radius:9px; overflow:hidden; font:700 18px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); background:linear-gradient(145deg, hsl(var(--h, 210) 55% 52%), hsl(var(--h, 210) 50% 34%)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) } .pfpav.pfpimg{ background:#10151d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) } .pfpav img{ width:100%; height:100%; object-fit:contain } .pfptxt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px } .pfptxt b{ font-size:13.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .pfptxt small{ font-size:11.5px; color:var(--fg3); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .pfpnow{ margin-right:5px; font-weight:700; color:var(--accent) } /* a chosen nickname colour, kept readable on each theme like the chats do (lightness clamped) */ .pfpick{ --pfp-lmin:58; --pfp-lmax:80 } :root[data-theme="light"] .pfpick{ --pfp-lmin:24; --pfp-lmax:44 } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pfpick{ --pfp-lmin:24; --pfp-lmax:44 } } .pfptxt b.pfpnc{ color:var(--nc) } @supports (color: hsl(from red h s l)) { .pfptxt b.pfpnc{ color:hsl(from var(--nc) h s clamp(var(--pfp-lmin), l, var(--pfp-lmax))) } } .pfpcheck{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font:800 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-style:normal; color:#fff; background:var(--accent); box-shadow:0 0 0 2px var(--bg2); opacity:0; transform:scale(.6); transition:opacity .15s ease, transform .18s ease } .pfp.on .pfpcheck{ opacity:1; transform:none } .pfpnone{ grid-column:1/-1; padding:26px 14px; text-align:center; color:var(--fg3); font-size:13px } .pfpfoot{ display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid color-mix(in srgb, var(--fg) 9%, transparent) } .pfpcount{ flex:1; font-size:12px; color:var(--fg3) } .pfpick .pfok, .pfpick .pfcancel{ height:36px; padding:0 18px; border-radius:10px; font-size:13.5px } .pfpick .pfok:disabled{ opacity:.45 } @media (max-width: 560px) { .pfback.pfpback{ padding:0; align-items:stretch } .pfcard-wrap.pfpick{ width:100%; max-height:none; height:100%; height:100dvh; border-radius:0; border:0 } .pfpgrid{ grid-template-columns:minmax(0, 1fr); padding:8px 14px 14px } .pfphead{ padding:14px 14px 8px } .pfpsearch{ margin:0 14px 10px } .pfpfoot{ padding:10px 14px calc(10px + env(safe-area-inset-bottom)) } } @media (prefers-reduced-motion: reduce) { .pfcard-wrap.pfpick, .pfp, .pfpcheck { animation:none !important; transition:none !important } } /* ⚠ NARROWER THAN THE PROFILE PICKER. That one lists names and wants the room; this one is three sentences and read as a banner at 620px (user, 2026-09-08: "gets too wide ... it can be wide but not extreme"). 460 keeps each description to two or three comfortable lines. */ .locwrap{ width:min(460px, 100%) } /* A radio with a title and an explanation under it. The description is what makes three location choices comprehensible without a help page, so it is part of the control, not a tooltip - which is why it is nearly the size of the title rather than fine print (user, 2026-09-08). */ .locopt{ display:flex; align-items:flex-start; gap:10px; padding:11px 12px; margin-top:8px; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:var(--bg3); transition:border-color .15s ease, background .15s ease } .locopt:hover{ border-color:var(--fg3); background:var(--bg2) } .locopt input{ margin:3px 0 0; flex:none; accent-color:var(--accent); width:16px; height:16px } .locopt:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--bg2)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) } .locoptt{ display:flex; flex-direction:column; gap:3px; min-width:0 } /* The name carries the accent, so the eye lands on the three CHOICES and reads the explanations only when it needs them. The selected one goes to full strength. */ .locoptname{ font-size:13.5px; font-weight:650; color:var(--accent); letter-spacing:.1px } .locopt:has(input:checked) .locoptname{ color:var(--accent2) } .locoptd{ font-size:12.5px; color:var(--fg2); line-height:1.5 } /* The reader's own flag standing in for an emoji in the option name. Slightly taller than the text, like every other flag on the panel, and nudged onto the text baseline. */ .locoptname .locoptflag{ height:1.05em; vertical-align:-.12em; display:inline-block } /* Why the location could not be read. Amber rather than red: nothing broke, the browser or the operating system simply declined - and the reader can act on both. */ .locnote{ margin-top:9px; padding:8px 10px; border-radius:8px; font-size:11.5px; line-height:1.45; color:var(--fg); border:1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background:color-mix(in srgb, var(--warn) 12%, var(--bg2)) } .pfrow{ display:flex; justify-content:flex-end; gap:8px } .pfok,.pfcancel{ font:inherit; font-size:13px; padding:7px 16px; border-radius:8px; cursor:pointer; border:1px solid var(--line); background:var(--bg3); color:var(--fg2) } .pfok{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600 } .pfok:disabled{ opacity:.7; cursor:default } .pfcancel:hover{ color:var(--fg); border-color:var(--fg3) } .main{padding:14px;max-width:1900px;margin:0 auto} @media (max-width:900px){.tabs{top:0;position:static}} /* ---- THE HEADER ON A PHONE ------------------------------------------------------------------- ⚠ THE BAR USED TO WRAP INTO FIVE OR SIX LINES OF DIFFERENT HEIGHTS, each starting at a different x because the section row carries an 18px indent meant for sitting BESIDE the brand (user, 2026-09-06: "Entire top looks weird ... Big breaks, unaligned lines"). Every strip becomes ONE sideways-scrolling line instead: three tidy rows, flush left, short enough to stay sticky. */ @media (max-width:900px) { .top{gap:8px;row-gap:6px;padding:7px 12px} /* ⚠ THE IDENTITY LINE HAS TO FIT IN ONE ROW, or the header is back to breaking. Signed in as an admin it carries brand + View as + theme + Sign out; at these sizes that is ~350px of a 360px bar, and the brand truncates rather than pushing anything to a second line. */ .brand{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .top button,.top .tab{font-size:12.5px;padding:4px 9px} /* ⚠ THE ADDRESS GOES, or the identity line is two lines. At 360px the signed-in address is wider than the brand itself, and brand + address + theme + Sign out is ~450px of content in a 360px bar - so it wrapped, which is half of the "big breaks". It tells a signed-in reader nothing the Sign-out button does not, and it survives as that button's title. */ .top .note{display:none} /* The nickname stays, cut with an ellipsis: the account button takes the room left between the brand and the theme button. */ .top:has(.acctwrap) .spacer{display:none} .acctwrap{flex:1 1 0;min-width:0;display:flex;justify-content:flex-end} .acctbtn{display:flex;align-items:center;max-width:100%;min-width:0;padding:4px 6px} .acctmail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .caretdn{flex:none} /* order:9 drops the section row BELOW the identity line rather than between brand and buttons. */ .tabrow.sectiontabs{order:9;flex:1 0 100%;margin-left:0;padding:2px 0 1px} .tabstrip,.tabrow.sectiontabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;scrollbar-width:none} .tabstrip::-webkit-scrollbar,.tabrow.sectiontabs::-webkit-scrollbar{display:none} /* The strip is the whole line; the hint sits under it, not beside it. */ .tabrow.subrow{display:block;padding:6px 12px} .tabstrip{width:100%} .tab{padding:6px 11px;font-size:13.5px} .tab.sec{font-size:13.5px} } /* Only while there IS more to the right - measured, not assumed, so a desktop never fades and the end of a scroll does not pretend to continue. */ .tabstrip.hasmore,.sectiontabs.hasmore{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)} /* ---- the signed-in account menu ------------------------------------------------------------ The address used to be a dead label; it is the handle for account actions now. */ .acctwrap{position:relative} .acctbtn{background:transparent;border:1px solid transparent;color:var(--fg2); font-size:13px;padding:4px 8px;border-radius:8px;cursor:pointer; max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acctbtn:hover{background:var(--bg3);border-color:var(--line);color:var(--fg)} .accticon{display:none;font-size:14px} .caretdn{color:var(--fg3);margin-left:4px} .acctmenu{ position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:min(540px, calc(100vw - 20px)); padding:8px; border-radius:18px; border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:linear-gradient(160deg, color-mix(in srgb, var(--me, var(--accent)) 9%, transparent), transparent 40%), color-mix(in srgb, var(--bg2) 84%, transparent); -webkit-backdrop-filter:blur(24px) saturate(165%); backdrop-filter:blur(24px) saturate(165%); box-shadow:0 26px 60px -22px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.1); animation:acctin .16s ease-out } @keyframes acctin { from { opacity:0; transform:translateY(-4px) } } /* a phone: one column, pinned to the screen edges rather than to the button */ @media (max-width: 560px) { .acctmenu{ position:fixed; left:10px; right:10px; top:58px; width:auto; max-height:calc(100vh - 70px); overflow:auto } .acctcols{ grid-template-columns:1fr } } @media (prefers-reduced-motion: reduce) { .acctmenu, .acctemo, .acctemo i { animation:none !important; transition:none !important } } /* ---- the verification wall ------------------------------------------------------------------- Shown INSTEAD of the app when a signed-in address has not been activated. It is the only thing on the page, so it is allowed to be large and to say the whole thing rather than hint at it. */ .verifywall{max-width:640px;margin:36px auto;padding:26px 28px;text-align:center; background:var(--bg2);border:1px solid var(--line);border-radius:14px} .vwicon{font-size:40px;line-height:1;margin-bottom:6px} .verifywall h2{margin:6px 0 12px;font-size:21px} .verifywall p{margin:0 0 12px;line-height:1.6;color:var(--fg2);text-align:left} .vwlead{color:var(--fg)!important;font-size:15px} .vwacts{display:flex;gap:12px;align-items:center;justify-content:center; flex-wrap:wrap;margin-top:18px;text-align:center!important} .vwgo{display:inline-block;padding:10px 18px;border-radius:9px;font-weight:600; background:var(--accent);color:#fff;border:1px solid var(--accent)} .vwgo:hover{text-decoration:none;filter:brightness(1.08)} .vwalt{color:var(--fg2);font-size:13.5px} .vwfoot{text-align:center!important;font-size:12.5px} /* ---- controls ---- */ .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px} input,select,button{font:inherit;color:var(--fg);background:var(--bg2); border:1px solid var(--line);border-radius:var(--r);padding:5px 9px} input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px} button{cursor:pointer} button:hover{background:var(--bg3)} /* Destructive actions read as destructive - the classic page had .btn.danger and the kick buttons looked like ordinary buttons without it (user, 2026-08-26). Red text + red border rather than a solid fill: same as the old page, and it stays legible in both themes. */ button.dflt{color:var(--fg3);border-style:dashed;padding:2px 8px;font-size:12.5px} button.dflt:hover{color:var(--fg);border-style:solid} .modalback{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex; align-items:flex-start;justify-content:center;padding:60px 16px;z-index:50;overflow:auto} button.warn{color:var(--warn,#d08a2a);border-color:color-mix(in srgb,var(--warn,#d08a2a) 45%,transparent)} button.danger{color:var(--fail);border-color:color-mix(in srgb,var(--fail) 45%,transparent)} button.danger:hover{background:color-mix(in srgb,var(--fail) 12%,transparent); border-color:var(--fail)} button.on{background:var(--accent);border-color:var(--accent);color:#fff} .grow{flex:1;min-width:160px} .note{color:var(--fg3);font-size:13.5px} .warnbar{background:color-mix(in srgb,var(--warn) 18%,var(--bg2));border:1px solid var(--warn); border-radius:var(--r);padding:6px 10px;margin-bottom:8px} /* ---- tables ---- */ .tw{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)} table{border-collapse:collapse;width:100%;font-size:14px} th{position:sticky;top:0;background:var(--bg3);text-align:left;font-weight:600;color:var(--fg2); padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1} td{padding:7px 11px;border-bottom:1px solid var(--line);vertical-align:top} tr.r:hover{background:var(--bg3);cursor:pointer} /* MonaNAT ladder drag handle. Only the grip is draggable - the row is full of inputs. */ td.drag{width:22px;padding-right:0} .grip{cursor:grab;color:var(--fg3);user-select:none;font-size:15px;line-height:1} .grip:active{cursor:grabbing} .grip:hover{color:var(--fg)} tr.dragging{opacity:.45} /* MonaNAT node health, left-edge stripe + a wash so it reads on any row background. */ tr.rowgood td:first-child{box-shadow:inset 3px 0 0 #2ea043} tr.rowwarn td:first-child{box-shadow:inset 3px 0 0 #d29922} tr.rowbad td:first-child{box-shadow:inset 3px 0 0 #f85149} tr.rowoff td:first-child{box-shadow:inset 3px 0 0 var(--fg3)} tr.rowgood td{background:rgba(46,160,67,.07)} tr.rowwarn td{background:rgba(210,153,34,.09)} tr.rowbad td{background:rgba(248,81,73,.09)} tr.rowoff td{opacity:.55} .compact td{padding:5px 11px} td.mono,.mono{font-family:var(--mono);font-size:13px} /* nowrap: "4.7 MB" was breaking after the number and the unit dropped to a second line (user, 2026-09-04: "Total column should be wider, because B moves to next line"). A number and its unit are one token; the trailing expander gives the table the room. */ td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} td.time{color:var(--fg2);white-space:nowrap;font-variant-numeric:tabular-nums} .trunc{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} /* new-row flash: respects reduced motion (§4c) */ @keyframes flashrow{from{background:var(--flash)}to{background:transparent}} tr.new{animation:flashrow var(--flashms,1400ms) ease-out 1} /* ---- the per-cell flash on state tables ------------------------------------------------------- ⚠ PER CELL, NOT PER ROW. On Players Online the last-seen timestamp advances on every keepalive, so a row-level flash would light the whole table every poll for ever. This way the heartbeat blinks one cell and a real change is impossible to miss. */ @keyframes flashcell { from { background:color-mix(in srgb, var(--accent) 34%, transparent) } to { background:transparent } } td.cellflash{animation:flashcell var(--flashms,1400ms) ease-out 1} @media (prefers-reduced-motion:reduce){ td.cellflash{animation:none;box-shadow:inset 0 -2px 0 var(--accent)} } /* In a game right now. A frame, deliberately quiet - it marks a handful of rows in a live list, it is not a warning (user, 2026-09-06: "orange frame or shadow (not too noticeable)"). */ tr.rowmp > td{background:color-mix(in srgb, var(--sr2) 7%, transparent)} tr.rowmp > td:first-child{box-shadow:inset 3px 0 0 var(--sr2)} /* Status chips. Only MP/Observer carry colour: those are the two that change what a row MEANS. */ .pill.st-mp{border-color:color-mix(in srgb,var(--sr2) 55%,var(--line)); background:color-mix(in srgb,var(--sr2) 14%,transparent)} .pill.st-obs{border-color:color-mix(in srgb,var(--info) 55%,var(--line)); background:color-mix(in srgb,var(--info) 12%,transparent)} .pill.st-sp,.pill.st-menu{color:var(--fg2)} /* The country is now the column, not a footnote to an address - so it reads at full strength (user, 2026-09-06: "country should have better visible font, and emoji/flag near it"). */ .flag{line-height:1;margin-right:7px;display:inline-flex;align-items:center} /* ⚠ THE FLAG IS A VENDORED SVG, NOT AN EMOJI - Windows has no flag glyphs (see mmbFlag()). Sized in `em` so it scales with whatever text it sits beside, and deliberately a little TALLER than the line: that is how a flag reads on Android, and a flag matched exactly to the cap height looks like a smudge (user, 2026-09-08). 4x3 aspect is the file's own, kept here so nothing squashes. The 2px radius and the hairline border are what stop a white flag (Japan, Poland's lower half) from bleeding into a light background - without a border they simply vanish. */ .flagimg{ height:1.15em; width:auto; aspect-ratio:4/3; display:block; border-radius:2px; vertical-align:-.15em; box-shadow:0 0 0 1px rgba(0,0,0,.18); background:var(--bg3); } :root:not([data-theme="light"]) .flagimg{ box-shadow:0 0 0 1px rgba(255,255,255,.22) } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .flagimg{ box-shadow:0 0 0 1px rgba(0,0,0,.18) } } :root[data-theme="dark"] .flagimg{ box-shadow:0 0 0 1px rgba(255,255,255,.22) } .cname{font-size:13.5px;color:var(--fg)} /* Four status chips must not wrap onto a second line; the column sizes to them instead. */ td.statuscell{white-space:nowrap;width:1%} /* Content-sized columns. width:1% is the CSS idiom for "as narrow as the content allows"; the trailing .expander cell is width:100% and takes everything left over, so the row still fills the table without any column being stretched. */ table.fitcols th,table.fitcols td{width:1%;white-space:nowrap} table.fitcols th.expander,table.fitcols td.expander{width:100%} /* ---- the raw column dump (expand) ------------------------------------------------------------- 47 columns one-per-line is a screenful of scrolling; wrapped pairs fit on a few rows. ⚠ The NAME is the dim monospaced half and the VALUE is full-strength ink - at this density the two must never be mistakable for each other. */ .dbgrid{display:flex;flex-wrap:wrap;gap:5px 8px} .dbkv{display:flex;align-items:baseline;gap:6px;padding:2px 9px;border-radius:6px; border:1px solid var(--line);background:color-mix(in srgb,var(--fg) 4%,transparent); max-width:100%;min-width:0} .dbk{font-family:var(--mono);font-size:11.5px;color:var(--fg3);white-space:nowrap} .dbk::after{content:':'} .dbv{font-size:12.5px;color:var(--fg);word-break:break-all;min-width:0} .dbv.dbempty{color:var(--fg3)} @media (prefers-reduced-motion:reduce){tr.new{animation:none;box-shadow:inset 3px 0 0 var(--accent)}} .pill{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--bg3); border:1px solid var(--line);font-size:12.5px;white-space:nowrap} .perm-tree{margin-top:10px;display:flex;flex-direction:column;gap:2px} .perm-sec{border:1px solid var(--bd,#3a3a3a);border-radius:6px;padding:7px 10px} .perm-head{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600} .perm-name{flex:0 0 auto} .perm-count{color:var(--fg3);font-weight:400;font-size:12px} .perm-kids{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 2px 22px} .perm-kids label{display:flex;align-items:center;gap:6px;font-weight:400;cursor:pointer} .perm-admin{display:flex;align-items:center;gap:6px;margin:12px 0 4px;cursor:pointer} /* Admin -> Chat Access (assets/chataccess.js) */ .ca-check{display:flex;align-items:baseline;gap:2px;margin:6px 0;cursor:pointer;flex-wrap:wrap} .ca-check .hint{color:var(--fg3);font-size:12.5px} .ca-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0} .ca-chans{display:flex;flex-direction:column;margin:4px 0 10px} tr.ca-off td{opacity:.55} .card .pill.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)} .card .pill.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)} .seen{font-size:11px;line-height:1.6;white-space:nowrap;opacity:.9} .ok{color:var(--ok)} .warn{color:var(--warn)} .fail{color:var(--fail)} /* ---- ladder bar (Joins) ---- */ /* ⚠ WIDER ON A WIDE SCREEN, UNCHANGED ON A PHONE, and no breakpoint to maintain: clamp() grows the bar with the viewport from its old 120px and stops at 250px, so it roughly doubles without turning into a stripe across the table (user, 2026-09-05: "could be twice the size, maybe not to go to extreme"). */ .ladder{display:flex;height:14px;border-radius:3px;overflow:hidden;background:var(--bg3); min-width:clamp(120px,17vw,250px)} .ladder i{display:block;height:100%;position:relative;overflow:hidden} /* The timings, written on the segments. White with a shadow rather than a theme ink: it has to hold up on the light amber and the bright green alike, and it sits ON the colour, not beside it. Hidden below 900px, where the bar is at its minimum and there is no room to be honest with. */ .ladder b{display:none} @media (min-width:900px){ .ladder{height:16px} .ladder i.lab b{display:block;text-align:center;white-space:nowrap; font:600 10px/16px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)} } .ladder i.d{background:var(--rung-direct)} .ladder i.n{background:var(--rung-nat)} .ladder i.m{background:var(--rung-mona)} .lad-l{font-size:11px;color:var(--fg3);white-space:nowrap} /* ---- detail ---- */ tr.det td{background:var(--bg3);padding:10px 14px} .kv{display:grid;grid-template-columns:190px 1fr;gap:4px 14px;font-size:13.5px} .kv dt{color:var(--fg3)} .kv dd{margin:0;font-family:var(--mono);word-break:break-word;white-space:pre-wrap} /* ---- cards / pulse ---- */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:12px} .card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px} /* ⚠⚠ STAT CARDS ARE ONE FIXED SKELETON: number, label, optional description - always in that order and always in the same place. The first attempt at this centred the whole block (justify-content:center) and made it WORSE: a card with a description has three rows and one without has two, so centring floated every card's number to a different height and the row stopped reading as a set (user, 2026-09-08: "numbers are in quite random positions compared to the ones next to them"). The underlying cause is that the value has FOUR font sizes - statValue() picks 34/24/18/15px from the string length - so even top-aligned, a short number and a long one never shared a baseline. Fixing it needs three things, not one: 1. the value gets ONE line box (36px) whatever font bucket it lands in, so every number in a row sits at the same height; 2. content is TOP-packed, never centred, so the label is always directly under the number; 3. a min-height covering all three rows, so a card WITHOUT a description is the same shape as one with it instead of being the odd short box in the row - which is what made "ENet sleep" look wrong in the first place. Scoped to `.cards > .card`: `.card` is also a plain container in panels, modals and the profile chooser, where none of this applies. */ .cards > .card{display:flex;flex-direction:column;text-align:center;min-height:88px} /* One line box for every bucket. `display:block` is kept deliberately - `.card b` relies on it for `text-overflow:ellipsis`, which a flex container would silently stop honouring. */ .cards > .card > b{line-height:36px;min-height:36px} .card b{display:block;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums} /* ⚠ `>` IS LEAD-LINED. This styles a stat card's LABEL, which is a DIRECT child; without the combinator it also hit every span nested anywhere inside a card - tables, tooltips, panels - and upper-cased player nicknames three separate times (2026-09-05). A stat card's own label is unaffected: it is a direct child. */ .card > span{color:var(--fg3);font-size:12px;text-transform:uppercase;letter-spacing:.6px} /* ⚠ A NICKNAME IS REPRODUCED EXACTLY. Upper-casing one invents a name nobody has, so this is a correctness rule, not a preference - stated outright so no future container can undo it. */ .nick, .tname, .wtipnick, td.nick, .card .nick, .card .tname { text-transform:none; letter-spacing:0 } /* ---- charts ---- */ .chart{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:8px} .chart svg{display:block;width:100%;height:auto} .legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--fg2);margin-top:6px} .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px} .cats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px} .cats label{display:inline-flex;align-items:center;gap:4px;cursor:pointer} .logview{font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;max-height:70vh;overflow:auto; background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:8px} /* Two short tables side by side; they stack only when there is genuinely no room. */ .fld{display:flex;flex-direction:column;gap:3px} .fld>label{color:var(--fg3);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px} .fld input,.fld select{width:100%} .fld .hint{font-size:11.5px;line-height:1.35} .bar.top{align-items:flex-start} .cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;align-items:start} th.num{text-align:right} /* ---- Compare logs ------------------------------------------------------------------------- * One merged timeline, one colour per player. The colour lives on a CSS variable set inline on * the row, so the same value paints the tag, the left rule and the picker chip. */ .cmpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px; max-height:230px;overflow:auto;margin:8px 0} .cmppick{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:var(--r); padding:6px 9px;background:var(--bg2);cursor:pointer} .cmppick.sel{border-color:var(--accent)} .cmppick i{width:10px;height:10px;border-radius:3px;flex:0 0 auto;background:var(--line)} .cmppick .who{font-weight:600} .cmppick .sub{color:var(--fg2);font-size:11px} .cmpline{display:flex;gap:8px;padding:1px 6px;border-left:3px solid var(--c);white-space:pre-wrap; word-break:break-word} .cmpline:hover{background:var(--bg3)} .cmpline .t{color:var(--fg2);flex:0 0 auto} .cmpline .w{color:var(--c);font-weight:600;flex:0 0 auto} .cmpline.hit{background:color-mix(in srgb,var(--accent) 14%,transparent)} .cmpwrap{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2); font-family:var(--mono);font-size:12px;line-height:1.5;overflow:auto;max-height:64vh;padding:6px 0} .threads{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0} .thread{border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer; background:var(--bg2);font-family:var(--mono);font-size:11px} .thread.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)} .thread b{font-weight:600} .thread span{color:var(--fg2)} /* Join kind. Amber for a host-quit migration: it is not a failure, but it is the case worth spotting in a list, so it must not look like every other row. */ .tag-new{background:color-mix(in srgb,var(--accent) 18%,transparent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)} .tag-hq{background:color-mix(in srgb,#d29922 22%,transparent); border:1px solid color-mix(in srgb,#d29922 55%,transparent)} /* RECONNECT had no entry at all, so it fell through to .tag-other and read as grey lower-case prose beside two proper labels. It is its own kind of join and gets its own colour. */ .tag-rc{background:color-mix(in srgb,var(--rung-mona) 20%,transparent); border:1px solid color-mix(in srgb,var(--rung-mona) 55%,transparent)} .tag-other{background:var(--bg3);border:1px solid var(--line)} /* ============================================================================================= * ONE VISUAL LANGUAGE - added 2026-09-04. * * ⚠ WHY THIS BLOCK EXISTS. Seven class names were in daily use in the JS and defined NOWHERE: * `primary` (six Save buttons in monanat.js/users.js), `sect` (six section headings), and * `tablewrap` / `empty` / `k` / `v` / `panel` (all in views2.js). They were not styled badly - * they were not styled at all, which is why the Traffic overview tab had stat cards with no * big number, a table with no frame and a chart with no panel. The aliases are gone from the * JS now; the two that named a real idea (`sect`, `empty`) are defined here properly. * * THE RULES, so the next view does not drift again: * 1. Vertical space comes from .stack, never an inline marginTop. There were ~35 of those * across six files, using six different values. * 2. Every hand-written view opens with .pagehead - a title and one line saying what the tab * answers. Half of them used to open with a bare grey paragraph and half with nothing. * 3. A block of content is a .card. A heading inside one is .sect. * 4. Nothing / working / failed are .empty, .empty.busy and .warnbar. One shape each. * ============================================================================================= */ /* -- spacing scale. One dial, so "a bit more room" is a token, not a number in a JS file. ---- */ :root { --s1:6px; --s2:10px; --s3:14px; --s4:22px; } /* Rule 1. Everything a view appends goes in a .stack and the gaps take care of themselves. */ .stack > * + * { margin-top: var(--s3); } .stack.tight > * + * { margin-top: var(--s2); } /* Rule 2. The tab says what it is; the sub-line says which question it answers. The rule under it does the separating, so a page header costs almost no vertical space of its own. */ .pagehead { border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:var(--s3) } /* With the blurb moved to the tab row, a view whose title merely repeats its tab leaves this box empty - and an empty box would still draw its rule and its margin. */ .pagehead:empty { display:none } .pagehead h2 { margin:0 0 3px; font-size:19px; font-weight:650; letter-spacing:-.15px } /* ONE LINE. A dashboard that opens with a paragraph is not a dashboard (user, 2026-09-04: "It goes to two lines instead of one. This text looks unprofessional."). */ .pagehead p { margin:0; color:var(--fg2); font-size:13.5px; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } @media (max-width:700px) { .pagehead p { white-space:normal } } /* -- log viewer: auto-detected module filters + configured topic filters --------------------- */ .filtergroup { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px } .flabel { font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--fg3); flex:0 0 auto; min-width:150px } .cats label.off { opacity:.45 } .fcount { font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--fg3); background:var(--bg3); border-radius:999px; padding:0 5px; margin-left:1px } .pagehead .bar { margin:10px 0 0 } /* Rule 3. A section heading inside a card or a column. Small spaced caps separate it from body text without needing a box or a large font. */ .sect { font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--fg3); margin:0 0 var(--s2) } .card > .sect:not(:first-child), .stack > .sect { margin-top:var(--s4) } .card h3 { margin:0 0 4px; font-size:15.5px; font-weight:650 } .card > .note:first-of-type { margin-bottom:var(--s2) } .card > .tw { border-radius:6px } /* Rule 4. The three states every asynchronous view has, now the same three shapes everywhere. */ .empty { color:var(--fg3); font-size:13.5px; padding:18px 14px; text-align:center; border:1px dashed var(--line); border-radius:var(--r); background:var(--bg2) } .empty.busy::after { content:""; display:inline-block; width:9px; height:9px; margin-left:8px; border-radius:50%; background:var(--accent); animation:pulse 1.1s ease-in-out infinite; vertical-align:middle } @keyframes pulse { 0%,100% { opacity:.25; transform:scale(.8) } 50% { opacity:1; transform:scale(1) } } @media (prefers-reduced-motion:reduce) { .empty.busy::after { animation:none; opacity:.7 } } /* A VALUE BEING MEASURED (mmbPending). Sits where the digits will, sized in ch, so the tile does not jump when the real number lands. The sweep is a moving highlight over a flat bar - the standard "this is coming" idiom, and it cannot be mistaken for content. */ /* Inside a stat card the value is 34px, so the default .72em bar would be a slab and its ch-based width would fill the whole tile. Scaled down to read as a placeholder for the digits, and capped so it can never be wider than the card. */ .cards > .card > b > .pending{ height:.5em; max-width:100% } .pending{ display:inline-block; height:.72em; vertical-align:-.02em; border-radius:4px; background:linear-gradient(90deg, color-mix(in srgb, var(--fg3) 22%, transparent) 0%, color-mix(in srgb, var(--fg3) 22%, transparent) 35%, color-mix(in srgb, var(--accent) 34%, transparent) 50%, color-mix(in srgb, var(--fg3) 22%, transparent) 65%, color-mix(in srgb, var(--fg3) 22%, transparent) 100%); background-size:260% 100%; animation:shimmer 1.5s linear infinite } @keyframes shimmer { from { background-position:130% 0 } to { background-position:-130% 0 } } /* THE CHART'S OWN WAITING STATE - a different idiom on purpose: the frame it is going to fill, with a line sweeping along the baseline, rather than a dashed "nothing here" box. Heights match the real chart (130px plot) so the tab does not reflow when the first two samples arrive. */ .chartskel .chartskelplot{ position:relative; height:130px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg2); overflow:hidden } .chartskel .chartskelbar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 70%, transparent) 50%, transparent 100%); background-size:45% 100%; background-repeat:no-repeat; animation:sweep 1.6s ease-in-out infinite } @keyframes sweep { from { background-position:-45% 0 } to { background-position:145% 0 } } .chartskel .chartskelnote{ color:var(--fg3); font-size:12px; padding:7px 2px 0; text-align:center } @media (prefers-reduced-motion:reduce) { .pending{ animation:none } .chartskel .chartskelbar{ animation:none; background-position:50% 0; opacity:.6 } } /* -- a modal that is a card, not a floating div ---------------------------------------------- */ .modalback .card { box-shadow:0 18px 48px rgba(0,0,0,.32); width:100% } /* -- the sign-in card: the whole page when there is nothing else, an overlay when there is ---- * Same markup both ways (mmb_signin_card), so the captcha and the csrf field cannot go missing * from one of them. Over the panel it sits on the standard semi-transparent backdrop. */ .signincard { max-width:390px; margin:6vh auto } .signinback { align-items:flex-start; padding-top:12vh; backdrop-filter:blur(2px) } .signinwho { margin:0 0 14px } .signinrow { margin:0 0 9px } .signinrow input { width:100% } .signincaptcha { margin:0 0 12px; display:flex; justify-content:center } .signinbtn { width:100% } .signinfoot { margin:12px 0 0; text-align:center } /* The recovery hint after repeated failures. Sits under the error bar and reads as help, not as a second warning - so no colour of its own beyond the link. */ .signinhelp { margin:-4px 0 12px; line-height:1.45 } /* ---- THE SIGN-IN CALL TO ACTION IN THE BAR --------------------------------------------------- ⚠ IT WAS A .tab AMONG .tabs AND READ AS ONE (user, 2026-09-07). A signed-out visitor is exactly who this panel most needs to reach - they are one click from an account - so this is the one control in the bar allowed to ask for attention: a real frame, and a slow ring that expands once every few seconds. NOT a blink; most of the cycle is the button sitting still. ⚠ REDUCED MOTION TURNS THE PULSE OFF, and the frame alone still carries it. */ .tab.signincta { border:1px solid var(--accent); color:var(--accent); font-weight:650; animation:mmbctapulse 4.5s ease-out infinite } .tab.signincta:hover { background:var(--accent); color:var(--bg2); border-color:var(--accent) } @keyframes mmbctapulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent) } 12% { box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent) } 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent) } } @media (prefers-reduced-motion: reduce) { .tab.signincta { animation:none } } .modalhead { display:flex; align-items:baseline; gap:10px; margin-bottom:var(--s2) } .modalhead h3 { margin:0; flex:1 } .modalhead .x { cursor:pointer; color:var(--fg3); font-size:19px; line-height:1; padding:0 4px } .modalhead .x:hover { color:var(--fg) } /* -- THE JOIN TRANSCRIPT: what one player actually saw --------------------------------------- * Opened from the player's NAME in the Joins tab rather than by unfolding the row (user, * 2026-09-04: "Just in nicer form than expanding everything"). One line per message, the clock * in the gutter and the event type as its own column, so it scans like the chat it was. */ td.nick .talk { margin-left:6px; cursor:pointer; color:var(--fg3); font-size:11px; border:1px solid var(--line); border-radius:999px; padding:0 6px; white-space:nowrap } td.nick .talk:hover { color:var(--accent); border-color:var(--accent) } .talkwrap { border:1px solid var(--line); border-radius:var(--r); background:var(--bg); max-height:56vh; overflow:auto; padding:4px 0 } .talkline { display:grid; grid-template-columns:74px 128px 1fr; gap:10px; align-items:baseline; padding:4px 12px; font-size:13px; border-left:3px solid transparent } .talkline + .talkline { border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent) } .talkline .t { color:var(--fg3); font-family:var(--mono); font-size:11.5px } .talkline .k { font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--fg2) } .talkline .x { word-break:break-word } /* The moments worth spotting at a glance in a join that went wrong. */ .talkline.k-connected { border-left-color:var(--ok) } .talkline.k-connected .k { color:var(--ok) } .talkline.k-joining { border-left-color:var(--accent) } .talkline.k-joining .k { color:var(--accent) } .talkline.k-disconnected_self, .talkline.k-disconnected { border-left-color:var(--warn) } .talkline.k-disconnected_self .k, .talkline.k-disconnected .k { color:var(--warn) } .talkline.k-failed, .talkline.k-timeout { border-left-color:var(--fail) } .talkline.k-failed .k, .talkline.k-timeout .k { color:var(--fail) } @media (max-width:640px) { .talkline { grid-template-columns:64px 1fr } .talkline .k { grid-column:2 } .talkline .x { grid-column:1/-1 } } /* -- NAT negotiation: one cell per player, both families in it ------------------------------ * The natneg table has 39 columns, 16 of them one endpoint each. Chips instead: the family is * the label, the protocol rides along, and a TCP-only endpoint says so rather than passing for * the UDP one the game would actually have used. */ .eps { display:flex; flex-direction:column; gap:3px } .epswho { font-weight:600; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .epsrow { display:flex; flex-wrap:wrap; gap:4px } .ep { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11.5px; border:1px solid var(--line); border-radius:999px; padding:1px 8px; background:var(--bg3); white-space:nowrap } .ep b { font-family:inherit; font-weight:700; color:var(--fg3); font-size:10px; letter-spacing:.4px } .ep i { font-style:normal; font-size:9.5px; letter-spacing:.5px; color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 45%,transparent); border-radius:3px; padding:0 3px } /* TCP where UDP is missing is a fact worth noticing, not decoration. */ .ep i.tcp { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 55%,transparent) } /* Game pills: EE2 and AOS in their own colours, so a mixed list is not two identical greys. */ .pill.game-ee2 { background:color-mix(in srgb,var(--accent) 18%,transparent); border-color:color-mix(in srgb,var(--accent) 45%,transparent) } .pill.game-aos { background:color-mix(in srgb,var(--rung-mona) 20%,transparent); border-color:color-mix(in srgb,var(--rung-mona) 50%,transparent) } /* -- MTU: the lower value is the one that binds ----------------------------------------------- * The host takes the joiner's advertised MTU outright and the joiner applies min() against its * own 1400, so the pair converges on the smaller of the two. Marking it saves the reader doing * that comparison on every row. */ /* ⚠ ONE LINE. The " / " separator gave the cell two break points, so each number dropped onto its own line and every row in the table got twice as tall (user, 2026-09-05). Nothing else in this cell can wrap, so pinning the whole box is the whole fix. */ .mtubox { white-space:nowrap } .mtueff { color:var(--ok); font-weight:650 } .mtusep { color:var(--fg3) } .mtunone { color:var(--fg3) } /* -- the row expander ------------------------------------------------------------------------ * Nothing on screen used to say a row could be opened at all. */ /* ⭐ AND IT IS THE SLACK-EATER. The table is width:100%, so with a handful of columns the * browser shared the leftover width out among them and every column sat miles from its * neighbour (user, 2026-09-04: "Columns should be as wide as data, you recently made it 100% * width which is bad ... should all be close to the left"). Giving the LAST cell width:100% * makes it absorb all the slack, so the real columns collapse to their content and pack left. * The descriptor's `w` values still act as minimums. */ th.expander { width:100% } td.expander, th.expander { text-align:center; padding-left:0; padding-right:8px } th { white-space:nowrap } td.expander .caret { display:inline-block; color:var(--fg3); font-size:15px; line-height:1; transition:transform .12s ease } tr.r:hover td.expander .caret { color:var(--accent) } tr.r.open td.expander .caret { transform:rotate(180deg); color:var(--accent) } @media (prefers-reduced-motion:reduce) { td.expander .caret { transition:none } } /* A hand-built detail is a layout, not a field dump - let it breathe. */ tr.det .cols2 { align-items:stretch } tr.det details > summary { cursor:pointer; list-style:revert } tr.det details[open] > summary { margin-bottom:6px } /* A Result that carries a reason gets a marker beside it, NOT an underline on the pill - an underlined pill reads as a hyperlink. */ .whyi { margin-left:5px; color:var(--fg3); cursor:help; font-size:12px; vertical-align:middle } .whyi:hover { color:var(--accent) } /* An endpoint chip whose TCP address differs from its UDP one - the interesting case. */ .ep.alt { border-color:color-mix(in srgb,var(--warn) 55%,transparent); background:color-mix(in srgb,var(--warn) 12%,transparent) } /* -- lockout countdown ------------------------------------------------------------------------ */ .lockon { color:var(--fail); font-weight:650 } .lockoff { color:var(--fg3) } tr.rowlocked td:first-child { box-shadow:inset 3px 0 0 var(--fail) } tr.rowlocked td { background:rgba(248,81,73,.07) } /* -- "View as": one control in the title bar, next to the signed-in address ------------------- * It was a full-width strip above the tabs and it was in the way (user, 2026-09-04: "The 'View * as' tab is annoying. This should eventually display near the admin account mail in the * top-right"). Idle it is an ordinary button; ACTIVE it is a loud amber pill, because a preview * you have forgotten about is a bug report about missing tabs. */ /* ⚠ IT IS AN ACCOUNT-MENU ROW NOW, not a title-bar button (moved 2026-09-07). `.acctitem` gives it the row layout; the only thing left here is the ACTIVE state, which still has to shout - a preview that is running changes what every tab shows. The width clamps are gone with the bar. */ .viewasbtn.on-preview { background:color-mix(in srgb,var(--warn) 22%,var(--bg2)); color:var(--fg); font-weight:600 } .viewasbtn.on-preview:hover { background:color-mix(in srgb,var(--warn) 32%,var(--bg2)) } /* The one mark left outside the menu while a preview runs - see viewAsControl(). */ .acctbtn.previewing { border-color:var(--warn); box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent) } /* -- STATUS PANELS: sized to their content, wrapping like a dashboard ------------------------ * The old .cols2 grid gave every panel half the page whatever it contained, so a five-row table * sat in a very wide box (user, 2026-09-05: "too wide for the content it has ... not modern * enough"). Flex with `flex:0 1 auto` sizes each card to its table and wraps the rest, so a * third panel moves to the right when there is room and drops below when there is not. */ .panels { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-start } .panels > .panel { flex:0 1 auto; min-width:230px; max-width:100%; padding:12px 14px } /* ⚠ The global rule is table{width:100%}; inside a panel that is the whole problem. */ .panels .tw { border:0; border-radius:0; background:transparent; overflow:visible } .panels table { width:auto } /* ⚠ NOT 11px. These are the first tables on the front page and they were being read as fine print (user, 2026-09-05: "You made text in ladders still small"). */ .panels th { background:transparent; padding:0 16px 6px 0; font-size:12px; letter-spacing:.4px; text-transform:uppercase; border-bottom:1px solid var(--line) } .panels td { padding:6px 16px; padding-left:0; font-size:14px; border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent) } /* Colour is the message in these tables: green OK, red Failed. A zero stays neutral - nothing having failed is not a red fact. */ /* ⚠ ONE STYLE PER COLUMN ROLE, and the builder is the only thing that applies it. The panels had drifted apart - one table's labels dimmer than the next one's, bold numbers in some and plain in others (user, 2026-09-05: "Why can't you use the same style in all?"). Both roles now name their colour outright rather than inheriting whatever the cell happened to sit in. A semantic span inside a number cell still wins, but only on colour. */ .panels td.plabel { color:var(--fg); font-weight:500 } .panels td.pnum { color:var(--fg); font-weight:650; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap } .numstrong { font-weight:650 } .numstrong.ok { color:var(--ok) } .numstrong.warn { color:var(--warn) } .numstrong.fail { color:var(--fail) } .numzero { color:var(--fg3) } /* Belt and braces: a number cell names its own colour, so scope the semantic ones INSIDE it. These are the green OK / red Failed columns the user asked for twice - they are not allowed to depend on which rule happens to be written last. */ .panels td.pnum .ok { color:var(--ok) } .panels td.pnum .warn { color:var(--warn) } .panels td.pnum .fail { color:var(--fail) } .panels td.pnum .numzero { color:var(--fg3) } /* ⚠ A BAND, NOT A FIT. `width:max-content` alone would re-measure every poll and the box would twitch as the text changed, which is what looks unprofessional; a floor and a ceiling mean it only moves when the content genuinely leaves the band (user, 2026-09-05). */ .pingrow .ingame, .pingrow .feedbox { width:max-content; min-width:28ch; max-width:56ch } /* The feed's facts and the host's own words are two different things, so they sit next to each other rather than stacked - stacked, the little grid looked like a stray header above the message (user, 2026-09-05: "displays above ... and looks bad. Should be next to it"). */ .pingside { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-start } .pingrow.stackside { flex-direction:column } .pingrow.stackside > * { width:100% } /* The feed's own facts, kept apart from the host's words. */ .feedbox { display:grid; grid-template-columns:auto 1fr; gap:2px 14px; font-size:12.5px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb, var(--bg2) 60%, transparent) } /* The game picker gets the whole toolbar row - its options name every player in the game. */ .gamepick { flex:1 1 100%; min-width:0 } /* Table and the host's own status text, side by side when the window allows it. The table asks for its content width; the status takes what is left and drops below when there is too little. */ .pingrow { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-start } .pingrow > :first-child { flex:0 1 auto; min-width:min(100%, 420px) } .pingrow > :last-child { flex:1 1 260px; min-width:0 } /* Top Crashes: sized to its content and no further. ⚠ width:auto, NOT 100% - the page is allowed to have room left over; stretching a table across it is what made Exception look enormous (user, 2026-09-05). */ .crashtbl { width:auto } .crashtbl td, .crashtbl th { padding-left:14px; padding-right:14px; white-space:nowrap } /* The one column that could be long is capped instead of flexible; the full text is the title. */ .crashtbl td.exccell { max-width:46ch; overflow:hidden; text-overflow:ellipsis } .crashtbl td.time { font-size:12.5px } /* The patch a date belongs to, in a quiet box beside it - not a column of its own, which could only have carried one of the two versions. */ .vchip { display:inline-block; margin-left:8px; padding:0 6px; border-radius:5px; font-size:11px; font-variant-numeric:tabular-nums; color:var(--fg2); border:1px solid var(--line); background:color-mix(in srgb, var(--fg) 6%, transparent) } /* The ping table: content-sized like Hosted Games, but with more room - it is the thing people come to this tab to read, so it gets a larger type size and wider cells. */ .pingtbl { width:100% } .pingtbl th.fit, .pingtbl td.fit { width:1%; white-space:nowrap } .pingtbl td, .pingtbl th { padding-left:12px; padding-right:12px } .pingtbl td { font-size:14px } .pingtbl td.nick { font-size:14px; font-weight:600 } /* ⚠ A chart is a block. Left inline it sat on the line of text above it (user, 2026-09-05: "Jitter per player table/chart seems to be overlapping on text"). */ .chart svg { display:block } .chart + .chart { margin-top:16px } /* ⚠ width:1% IS THE IDIOM FOR "as wide as its content". A cell can never be narrower than what it holds, so an absurdly small request makes the browser fall back to the content width; the columns without `.fit` then absorb all the remaining space (user, 2026-09-05: "don't make columns width respecting total width"). */ .hg { width:100% } .hg th.fit, .hg td.fit { width:1%; white-space:nowrap } /* ---- hosted games: the status says what happened, in one glance --------------------------- Colour carries it (user, 2026-09-05: openstaging green, closedstaging yellow, closedplaying red) - and the SERVER picks the tone, because the same raw status means "playing now" in the live frame and "it did start" in history. */ .gpill { display:inline-block; padding:1px 9px; border-radius:999px; white-space:nowrap; font-size:11.5px; font-weight:650; border:1px solid transparent } .gpill.good { color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent); border-color:color-mix(in srgb,var(--ok) 40%,transparent) } .gpill.warn { color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent); border-color:color-mix(in srgb,var(--warn) 40%,transparent) } .gpill.bad { color:var(--fail); background:color-mix(in srgb,var(--fail) 14%,transparent); border-color:color-mix(in srgb,var(--fail) 40%,transparent) } /* The Join button. Deliberately the loudest thing in the row - it is the one control on this page that DOES something rather than reporting something (user, 2026-09-06: "some very noticeable button called Join"). */ /* ⚠ AN , NOT A