/* UX pass, Oct 27 2026 (ux1027). Loaded after every other stylesheet. 1. Top bar: one row on laptops and desktops (it wrapped to three rows from the side switch, war clock, time zone, alerts and avatar), and it slims down once the page is scrolled. 2. PvP / Life side palettes readable in both themes (Life set cream panels but kept the dark theme's light text; PvP set dark panels but kept the light theme's dark text). 3. The bottom-left "Something wrong?" and camera buttons become two small round buttons that stay out of the footer. 4. Guild HQ announcements: long posts fold, mentions read as chips, "Take down" steps back. The matching script is /features/ux1027.js. */ /* ---------------------------------------------------------------- 1. top bar */ @media (min-width: 900px) { .topbar { padding-block: 8px; transition: padding .25s var(--ease); } .topbar-in { gap: 10px; } .hubs { flex: 1 1 auto; min-width: 0; } #topActions, #topActions:not([data-tb="labels"]) { flex: 0 0 auto !important; flex-wrap: nowrap !important; row-gap: 0; } .topbar-in > #topActions { flex-shrink: 0; } .gs-open, .do-open { margin-right: 0; } .side-switch { font-size: 12.5px; padding: 6px 9px; } .warclock { height: 34px; } /* once scrolled, the bar gives the page more room */ html.ux-scrolled .topbar { padding-block: 4px; } html.ux-scrolled .hubs a { padding-block: 6px; } } @media (min-width: 900px) and (max-width: 1499px) { .prefs-btn .prefs-short { display: none; } .gs-open > span, .do-open > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gs-open, .do-open { width: 40px; min-width: 40px; padding: 0 !important; justify-content: center; flex: none !important; } } @media (min-width: 900px) and (max-width: 1399px) { .brand-name { display: none; } .warclock .wc-l { display: none; } .warclock { padding: 0 10px 0 9px; } } /* ---------------------------------------------------------------- 2. side palettes */ /* Life on the dark theme: calm greens on the same dark ground, instead of cream panels under light text. */ :root[data-wp-theme="dark"][data-side="life"] { --ground: #0B1210; --panel: rgba(255,255,255,.045); --panel-solid: #121A16; --panel-2: rgba(255,255,255,.07); --rule: rgba(255,255,255,.09); --rule-strong: rgba(255,255,255,.18); --text: #E8EFE8; --ink: #E8EFE8; --muted: #A2AFA3; --faint: #8F9C90; --accent: #7BC48A; --accent-2: #9FD9AA; --accent-ink: #0B1A0F; --accent-soft: rgba(123,196,138,.16); --glass: rgba(11,18,16,.74); --glow-1: rgba(94,140,97,.22); --glow-2: rgba(50,110,130,.14); color-scheme: dark; } /* Life on the light theme: cream panels need the dark text they were drawn for. */ :root:not([data-wp-theme="dark"])[data-side="life"] { --text: #2E3A2F; --muted: #5C6A5D; --faint: #6B786C; --glass: rgba(251,250,246,.78); } /* PvP is dark on both themes; on the light theme it kept dark text, so give it the dark theme's text and glass. */ :root:not([data-wp-theme="dark"])[data-side="pvp"] { --text: #E8EBF0; --muted: #A9B2C0; --faint: #93A0B0; --glass: rgba(11,13,17,.78); --glass-line: rgba(255,255,255,.08); --ball: #48C07C; --enemy: #EE6A5E; --ally: #6AA2FF; --flex: #B28CF5; --live: #F4D35E; --ball-soft: rgba(72,192,124,.14); --enemy-soft: rgba(238,106,94,.14); --ally-soft: rgba(106,162,255,.14); --flex-soft: rgba(178,140,245,.15); --map-land: #0F1622; --map-land-2: #131C2A; --map-grid: rgba(232,237,243,.045); --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 8px rgba(0,0,0,.3); --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px rgba(0,0,0,.45); --shadow-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 70px rgba(0,0,0,.6); --glow-1: rgba(229,72,77,.16); --glow-2: rgba(90,70,200,.14); } /* the Life tiles: readable labels, no half-faded sub-text */ .life-tile span { opacity: 1; color: var(--muted); } .life-tile:hover, .life-tile:focus-visible { border-color: var(--rule-strong); } /* ---------------------------------------------------------------- 3. bottom-left buttons */ @media (min-width: 900px) { /* problem.js appends its own