/* RXA Web — "Command Center" custom CSS layer. * * Loaded after MudBlazor.min.css so our rules override the framework's. * Strictly additive — palette + typography come from MudTheme; this file * adds the structural / decorative touches that aren't first-class * MudBlazor properties (clip-paths, accent bars, background texture). */ /* ─── Faction theme (GDI / Nod) ─────────────────────────────────────── * The default UI chrome is GDI gold. Setting * flips the chrome to Nod red without redesigning anything. Toggle is * persisted to localStorage and applied by the boot script in App.razor * BEFORE first paint, so there's no GDI-gold flash on Nod-mode load. * * GDI-team display colours in pages (faction emblems, GDI scoreboard, * GDI row tints) intentionally stay gold — those represent the in-game * GDI faction, not the UI skin. Only chrome accents swap. * * Nod mode also brightens --mud-palette-error so destructive buttons * stay visually distinct from primary-red (filled error → brighter red, * filled primary → Nod red). Both readable with white text. */ :root, html[data-faction="gdi"] { --rxa-faction-accent: #c8a028; --rxa-faction-accent-rgb: 200, 160, 40; --rxa-faction-contrast: #000000; } /* In-game faction colours — fixed regardless of UI skin. GDI is always gold and Nod is always red because these represent the game-world side, not the UI chrome. Used by faction row accents, scoreboards, emblems, faction split views, etc. */ :root { --rxa-gdi-color: #c8a028; --rxa-nod-color: #b02828; } html[data-faction="nod"] { --rxa-faction-accent: #b02828; --rxa-faction-accent-rgb: 176, 40, 40; --rxa-faction-contrast: #ffffff; /* MudBlazor reads these on every render via the cascade; setting them at wins over the theme provider's :root selectors. Primary uses canonical Nod red #b02828 (5.7:1 on white = AAA); error shifts to a brighter brick red so filled-destructive stays visually distinct from filled-primary in Nod mode. */ --mud-palette-primary: #b02828; --mud-palette-primary-text: #ffffff; --mud-palette-primary-rgb: 176, 40, 40; --mud-palette-primary-darken: #7a1818; --mud-palette-primary-lighten: #d04040; --mud-palette-primary-hover: #8a1a1a; --mud-palette-primary-hover-darken: #6a1414; --mud-palette-error: #d23a3a; --mud-palette-error-text: #ffffff; --mud-palette-error-darken: #a82424; --mud-palette-error-lighten: #e86060; --mud-palette-error-hover: #b82a2a; } /* Nod-theme MudSelect readability — when an outlined select is focused * or holding a value, MudBlazor paints the value text using --mud-palette-primary * (Nod red) on top of the now-red outline + selection-tint, producing * red-on-red unreadable text. Force the displayed value + the dropdown's * own popover items to render in white on Nod. Applies to all MudSelect * controls site-wide, not just the Player Index page. * * .mud-select-input = the collapsed value shown inside the select field * .mud-input-slot = the wrapper that text sits in for outlined/filled variants * .mud-list-item-text = each option in the popped-open list */ html[data-faction="nod"] .mud-select .mud-select-input, html[data-faction="nod"] .mud-select .mud-input-slot, html[data-faction="nod"] .mud-input-control-input-container .mud-input-slot, html[data-faction="nod"] .mud-select-popover .mud-list-item-text { color: #ffffff !important; } /* Selected-option highlight in the dropdown popover — also red-on-red without * this override. Keep the indicator chip subtle but legible. */ html[data-faction="nod"] .mud-popover .mud-selected-item .mud-list-item-text { color: #fff !important; } /* ─── World heatmap (Player Index + Leaderboard) ────────────────────────── * Shared visual for the WorldHeatmap.razor component. The base map is a * TopoJSON-derived SVG (CC0 world-atlas data) injected client-side at runtime, * sitting under bloom + label layers with identical viewBox/preserveAspectRatio * so labels stay pinned to continents. Heavy C&C tactical skin layered on top: * radial dark-cyan inset, hex-grid backdrop, animated scan-line sweep, faction- * tinted corner brackets on the card. Nod theme recolours coastlines + fill to * red without changing geometry. */ .pi-heatmap-card { background: radial-gradient(ellipse at center, rgba(8,18,28,.96) 0%, rgba(2,6,12,1) 100%); position:relative; overflow:hidden; border: 1px solid rgba(80, 220, 255, 0.25) !important; box-shadow: inset 0 0 30px rgba(80, 220, 255, 0.06), 0 0 18px rgba(0,0,0,.6); } .pi-heatmap-card::before, .pi-heatmap-card::after { content:''; position:absolute; width:24px; height:24px; pointer-events:none; border-color: var(--mud-palette-primary); opacity:.55; } .pi-heatmap-card::before { top:6px; left:6px; border-top:2px solid; border-left:2px solid; } .pi-heatmap-card::after { bottom:6px; right:6px; border-bottom:2px solid; border-right:2px solid; } .pi-heatmap-wrap { position:relative; padding:.5rem 1rem 1rem; } .pi-heatmap-svgwrap { position:relative; width:100%; aspect-ratio: 2 / 1; min-height: 360px; max-height:540px; background: radial-gradient(ellipse at 50% 50%, rgba(20,45,70,.85) 0%, rgba(2,8,16,.95) 70%, rgba(0,0,0,1) 100%); border: 1px solid rgba(80, 220, 255, 0.18); overflow:hidden; } .pi-heatmap-hex { position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.45; background-image: url("data:image/svg+xml;utf8,"); background-size: 56px 48px; } .pi-heatmap-scan { position:absolute; left:0; right:0; height:120px; pointer-events:none; z-index:4; background: linear-gradient(180deg, transparent 0%, rgba(80,220,255,0.06) 40%, rgba(80,220,255,0.14) 50%, rgba(80,220,255,0.06) 60%, transparent 100%); animation: pi-scan-sweep 7s linear infinite; mix-blend-mode: screen; } @keyframes pi-scan-sweep { 0% { top:-120px; } 100% { top:100%; } } .pi-heatmap-svgwrap::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:5; opacity:.35; background-image: repeating-linear-gradient(180deg, transparent 0px, transparent 2px, rgba(80,220,255,0.05) 3px, transparent 4px); } .pi-heatmap-svg, .pi-heatmap-blooms, .pi-heatmap-labels { position:absolute; inset:0; width:100%; height:100%; z-index:1; } .pi-heatmap-svg { pointer-events:none; } .rxa-world-fill { fill: rgba(80, 170, 220, 0.10); stroke: none; } .rxa-world-stroke { fill: none; stroke: rgba(120, 230, 255, 0.7); stroke-width: 0.5; stroke-linejoin: round; stroke-dasharray: 1.4 0.6; filter: drop-shadow(0 0 1.5px rgba(120, 230, 255, 0.55)) drop-shadow(0 0 4px rgba(80, 200, 255, 0.35)); } html[data-faction="nod"] .rxa-world-stroke { stroke: rgba(255, 120, 120, 0.75); filter: drop-shadow(0 0 1.5px rgba(255, 100, 100, 0.55)) drop-shadow(0 0 4px rgba(255, 60, 60, 0.35)); } html[data-faction="nod"] .rxa-world-fill { fill: rgba(220, 80, 80, 0.10); } .pi-heatmap-blooms { z-index:2; pointer-events:none; mix-blend-mode: screen; filter: blur(2px); } .pi-heatmap-labels { z-index:3; pointer-events:none; } .pi-heatmap-labels g { pointer-events: auto; } .pi-heatmap-bloom { animation: pi-pulse 4s ease-in-out infinite; } @keyframes pi-pulse { 0%,100% { opacity: 0.85; transform-origin: center; } 50% { opacity: 1; } } .pi-lbl-name { font-size: 14px; font-weight: 600; letter-spacing: 1.5px; fill: rgba(220,235,255,.92); paint-order: stroke; stroke: rgba(0,0,0,0.85); stroke-width: 4px; stroke-linejoin: round; } .pi-lbl-count { font-size: 28px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,0.9); stroke-width: 5px; stroke-linejoin: round; font-family: 'Rajdhani', 'Segoe UI', sans-serif; } .pi-lbl-pct { font-size: 15px; font-weight: 700; fill: rgba(255,200,140,1); paint-order: stroke; stroke: rgba(0,0,0,0.85); stroke-width: 4px; stroke-linejoin: round; } .pi-heatmap-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:5; } /* ─── Lifetime stats infographic (Leaderboards page header) ─────────────── * Same visual language as the preview modules — Rajdhani uppercase headers, * vertical-divider stat grid, faction-tinted left border, tib-green ornaments. * Designed to be screenshot-friendly: max-width 1200px, no horizontal scroll, * everything inside a single visual frame. Two stat rows (primary + secondary) * collapse to two columns on tablet and one column on mobile. */ .rxa-lt-card { position: relative; background: linear-gradient(135deg, rgba(13,12,10,0.92), rgba(5,8,14,0.92)); border: 1px solid var(--mud-palette-lines-default); border-left: 3px solid var(--mud-palette-primary); padding: 1.5rem 1.75rem 1rem; margin-bottom: 1rem; overflow: hidden; } .rxa-lt-card::before { /* Subtle scan-line texture across the whole card for the C&C readout feel. */ content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.25; background-image: repeating-linear-gradient(180deg, transparent 0px, transparent 2px, rgba(80,220,255,0.05) 3px, transparent 4px); } .rxa-lt-header { position: relative; z-index: 1; margin-bottom: 1.25rem; } .rxa-lt-eyebrow { font-family: "Rajdhani", "Segoe UI", sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: 4px; text-transform: uppercase; color: var(--rxa-tib-green); line-height: 1.1; } .rxa-lt-sub { font-family: "Rajdhani", "Segoe UI", sans-serif; font-weight: 500; font-size: 0.92rem; letter-spacing: 1px; color: var(--mud-palette-text-secondary); margin-top: 0.35rem; } .rxa-lt-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(13,12,10,0.7); border: 1px solid var(--mud-palette-lines-default); margin-bottom: 0.75rem; } .rxa-lt-grid-primary { border-top: 1px solid rgba(var(--mud-palette-primary-rgb), 0.4); border-bottom: 1px solid rgba(var(--mud-palette-primary-rgb), 0.4); } .rxa-lt-stat { padding: 1rem 1.25rem; border-right: 1px solid rgba(255,255,255,0.06); text-align: center; } .rxa-lt-stat:last-child { border-right: none; } .rxa-lt-stat-label { font-family: "Rajdhani", "Segoe UI", sans-serif; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 0.7rem; color: var(--mud-palette-text-secondary); margin-bottom: 0.35rem; } .rxa-lt-stat-value { font-family: "Rajdhani", "Segoe UI", sans-serif; font-weight: 700; font-size: 2.25rem; line-height: 1.05; color: #fff; letter-spacing: 0.5px; } .rxa-lt-grid-primary .rxa-lt-stat-value { /* Primary row gets a subtle faction-coloured text-glow. */ text-shadow: 0 0 18px rgba(var(--mud-palette-primary-rgb), 0.35); } .rxa-lt-stat-value-md { font-size: 1.6rem; } .rxa-lt-stat-sub { font-family: "Rajdhani", "Segoe UI", sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.5px; color: var(--mud-palette-text-secondary); margin-top: 0.25rem; } .rxa-lt-loading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 0; } .rxa-lt-footer { position: relative; z-index: 1; font-family: "Rajdhani", "Segoe UI", sans-serif; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.7rem; color: var(--mud-palette-text-disabled); text-align: right; margin-top: 0.5rem; } @media (max-width: 900px) { .rxa-lt-grid { grid-template-columns: repeat(2, 1fr); } .rxa-lt-stat:nth-child(even) { border-right: none; } .rxa-lt-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.06); } } @media (max-width: 540px) { .rxa-lt-grid { grid-template-columns: 1fr; } .rxa-lt-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); } .rxa-lt-stat:last-child { border-bottom: none; } .rxa-lt-stat-value { font-size: 1.8rem; } } /* ─── Background texture ────────────────────────────────────────────── * Extremely subtle 32×32 grid, evokes a tactical / readout panel without * being noisy. Visible at edges but invisible behind content. */ body { background-image: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: 32px 32px; } /* ─── Tiberium-green "selected" accent ───────────────────────────── * Used for the SELECTED state in pickers (MudChipSet selections, toggle * buttons, etc.). Distinct from the primary gold "active page / primary * action" colour so a user can tell at a glance "this is the option I * just picked". Soft glow + inset highlight evoke the in-game tiberium * crystal sheen without being saturated to the point of glare. */ :root { --rxa-tib-green: #5fcf5f; --rxa-tib-green-dim: #3d8a3d; --rxa-tib-green-glow: rgba(95, 207, 95, 0.45); --rxa-tib-green-text: #061206; /* near-black for high contrast on green */ } /* ─── AppBar accent ────────────────────────────────────────────────── * Thin GDI-gold underline on the AppBar. Separates the top chrome from * page content with a faction-flavoured line rather than the default * neutral divider. */ .mud-appbar { border-bottom: 1px solid var(--mud-palette-primary) !important; } /* AppBar height fits the wide "Totem Arts · Command Center" lockup with * breathing room above and below. MudMainContent margin-top adjusts via the * inherited --mud-appbar-height variable that we re-set here. */ .rxa-appbar-tall { height: 96px !important; min-height: 96px !important; } .rxa-appbar-tall + .mud-drawer-container, :has(> .rxa-appbar-tall) .mud-main-content { padding-top: 96px; } /* MudMainContent uses a margin / padding sized from --mud-appbar-height. * Overriding the variable scopes the change to inside our layout. */ .mud-layout:has(.rxa-appbar-tall) { --mud-appbar-height: 96px; } /* Totem Arts · Command Center brand lockup (inline SVG — see BrandLockup.razor). * Two-tone: the Totem Arts wordmark (.tac-mark) stays white; the divider + * COMMAND CENTER (.tac-accent) follow the faction skin — gold for GDI, red * for NOD. Subtle drop shadow lifts it off the dark AppBar; tiny hover scale. */ .rxa-brand-link { display: inline-flex; align-items: center; text-decoration: none; } .rxa-brand-lockup { height: 50px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)); transition: transform 150ms ease, filter 150ms ease; } .rxa-brand-link:hover .rxa-brand-lockup { transform: scale(1.03); filter: drop-shadow(0 2px 12px rgba(var(--rxa-faction-accent-rgb), 0.45)); } .rxa-brand-lockup .tac-mark { fill: #ffffff; } .rxa-brand-lockup .tac-accent { fill: #d9a531; } /* GDI gold */ html[data-faction="nod"] .rxa-brand-lockup .tac-accent { fill: #e23b2e; } /* NOD red */ /* Narrower viewports: shrink the lockup so the AppBar controls still fit. */ @media (max-width: 1200px) { .rxa-brand-lockup { height: 40px; } } /* Sidebar section labels — small uppercase headers between nav-link * groups (Live / History / Config). Visual grouping without the * collapse/expand UI of MudNavGroup. */ .rxa-nav-section { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; color: var(--mud-palette-primary); padding: 1.1rem 1.25rem 0.5rem 1.25rem; border-bottom: 1px solid var(--mud-palette-primary); margin: 0.5rem 0.75rem 0.35rem 0.75rem; } /* ─── Drawer nav: faction-accent active bar ────────────────────────── * Active nav-link gets a 3px gold left-edge bar + slightly tinted * background. Hover state gets a fainter version. */ .mud-nav-link.active.mud-nav-link { border-left: 3px solid var(--mud-palette-primary); background-color: rgba(var(--rxa-faction-accent-rgb), 0.10); padding-left: calc(1rem - 3px); /* keep label aligned despite added border */ } .mud-nav-link:not(.active):hover { border-left: 3px solid rgba(var(--rxa-faction-accent-rgb), 0.35); padding-left: calc(1rem - 3px); } /* ─── Chips: subtle corner cut ────────────────────────────────────── * Diagonal cut on top-left and bottom-right corners. Small enough to * look like a deliberate panel chamfer, not a Photoshop accident. */ .mud-chip { /* Subtler chamfer (3px corner cut) — chips read as wider rectangles * with a hint of bevel rather than parallelograms. */ clip-path: polygon( 3px 0%, 100% 0%, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0% 100%, 0% 3px ); border-radius: 0 !important; font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: 1px; text-transform: uppercase !important; /* Bigger fonts so chip labels fill more of the chip + uppercase * for the C&C/milsim feel. Padding tightened on the vertical so the * chip doesn't look mostly-blank around larger text. */ font-size: 1.2rem !important; min-height: 38px !important; height: auto !important; padding: 4px 26px !important; } .mud-chip.mud-chip-size-small { font-size: 1.05rem !important; min-height: 32px !important; padding: 3px 18px !important; } .mud-chip.mud-chip-size-medium { font-size: 1.3rem !important; min-height: 44px !important; padding: 5px 30px !important; } .mud-chip.mud-chip-size-large { font-size: 1.5rem !important; min-height: 52px !important; padding: 8px 36px !important; } /* Event-Log category chips — uniform width regardless of label length so * the table column and the filter strip don't shimmy as different * categories scroll past. Letters always centred. */ .mud-chip.rxa-cat-chip { min-width: 110px !important; justify-content: center !important; padding-left: 8px !important; padding-right: 8px !important; } /* Per-category colours for the Event Log chips. 15 distinct hues — each * category gets a unique fill so the filter strip and the inline row * chips read at a glance instead of relying on the ~7 MudBlazor palette * colours (which forced duplicates like KILL/CHEAT both red and * PLAYER/CHARACTERS both green). Text colour is a dark shade of the * background for readability without losing the hue identity. */ .mud-chip.rxa-cat-player { background-color: #5fcf5f !important; color: #0b1f0b !important; } .mud-chip.rxa-cat-kill { background-color: #e06060 !important; color: #240a0a !important; } .mud-chip.rxa-cat-mine { background-color: #e0a030 !important; color: #2a1a05 !important; } .mud-chip.rxa-cat-beacon { background-color: #c068e0 !important; color: #1f0a26 !important; } .mud-chip.rxa-cat-vehicle { background-color: #4ad6cc !important; color: #062624 !important; } .mud-chip.rxa-cat-characters { background-color: #b8d860 !important; color: #1c220a !important; } .mud-chip.rxa-cat-building { background-color: #c8a028 !important; color: #1f1805 !important; } .mud-chip.rxa-cat-econ { background-color: #f0d840 !important; color: #28220a !important; } .mud-chip.rxa-cat-vote { background-color: #e070a0 !important; color: #260a1a !important; } .mud-chip.rxa-cat-admin { background-color: #6080e0 !important; color: #0a0f24 !important; } .mud-chip.rxa-cat-match { background-color: #60a0e0 !important; color: #0a1626 !important; } .mud-chip.rxa-cat-demo { background-color: #a080e0 !important; color: #150a26 !important; } .mud-chip.rxa-cat-cheat { background-color: #ff4040 !important; color: #2a0606 !important; } .mud-chip.rxa-cat-chat { background-color: #c0c0c0 !important; color: #1a1a1a !important; } .mud-chip.rxa-cat-sys { background-color: #7889a0 !important; color: #0c1118 !important; } /* Off-state filter chip — used when a category is hidden from the event * log. Dimmed background, struck-through label, distinct from any of * the live category colours so it's unmistakably "click to enable". * `!important` overrides MudBlazor's filled-default palette so the * Color="Default" props don't paint a bright filled chip in dark mode. * Defined AFTER the per-category rules so it wins via source order when * a chip carries both classes. */ .mud-chip.rxa-cat-chip-off, .mud-chip.rxa-cat-chip.rxa-cat-chip-off { background-color: rgba(255, 255, 255, 0.04) !important; color: rgba(255, 255, 255, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; text-decoration: line-through; box-shadow: none !important; } .mud-chip.rxa-cat-chip-off:hover { background-color: rgba(255, 255, 255, 0.07) !important; color: rgba(255, 255, 255, 0.65) !important; } /* SELECTED chip — used by MudChipSet for the chosen option. Overrides * whatever Color the chip was originally so the green selected state * reads identically regardless of the chip's normal palette role. */ .mud-chip.mud-chip-selected, .mud-chip-set .mud-chip.mud-chip-variant-filled.mud-chip-color-primary.mud-chip-selected, .mud-chip-set .mud-chip.mud-selected { background-color: var(--rxa-tib-green) !important; color: var(--rxa-tib-green-text) !important; box-shadow: 0 0 14px var(--rxa-tib-green-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; } .mud-chip.mud-chip-variant-outlined.mud-chip-selected, .mud-chip.mud-chip-variant-text.mud-chip-selected { background-color: rgba(95, 207, 95, 0.12) !important; color: var(--rxa-tib-green) !important; border: 1px solid var(--rxa-tib-green) !important; box-shadow: 0 0 10px var(--rxa-tib-green-glow) !important; } /* Toggle / selected button state — Mud doesn't have a built-in * "toggled" class but pages can opt in via class="rxa-selected" on * a button to get the same green treatment. */ .mud-button.rxa-selected, .mud-button.mud-button-filled.rxa-selected { background-color: var(--rxa-tib-green) !important; color: var(--rxa-tib-green-text) !important; box-shadow: 0 0 14px var(--rxa-tib-green-glow) !important; } .mud-button.mud-button-outlined.rxa-selected { background-color: rgba(95, 207, 95, 0.10) !important; color: var(--rxa-tib-green) !important; border-color: var(--rxa-tib-green) !important; box-shadow: 0 0 10px var(--rxa-tib-green-glow) !important; } /* ─── Buttons: sharp corners, no clip-path (clip clipped the bottom border). */ .mud-button-filled, .mud-button-outlined { border-radius: 0 !important; } /* Chat Filter behaviour panel — per-tier action chips. Fixed min-width so * toggling Severe between REPLACE and WARN+REPLACE doesn't reflow the row. * Tier labels are also fixed-width so the action chips line up vertically. */ .rxa-cf-tier-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; min-height: 36px; } .rxa-cf-tier-label { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 2px; width: 130px; flex: 0 0 130px; text-align: left; } /* Action chip — locked to the SAME fixed box as every Behaviour-panel button * (210px × 38px). 210px is the widest natural label on the row * ("RESEED SILLY WORDS"); fixing every box to 210 means short labels (OFF / * WARN / ENABLE WARNING / STOP WARNING) centre inside the same box without * any of them stretching beyond it. */ .rxa-cf-action-chip { display: inline-block; box-sizing: border-box; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; text-transform: uppercase; width: 210px; min-width: 210px; max-width: 210px; flex: 0 0 210px; height: 38px; line-height: 38px; padding: 0 16px; text-align: center; border-radius: 0; clip-path: polygon( 3px 0%, 100% 0%, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0% 100%, 0% 3px ); } .rxa-cf-action-severe { background: rgba(208, 64, 64, 0.18); color: #ff8585; border: 1px solid #b02828; } .rxa-cf-action-general { background: rgba(224, 160, 48, 0.15); color: #e0a030; border: 1px solid #a07820; } .rxa-cf-action-allow { background: rgba(95, 207, 95, 0.13); color: #5fcf5f; border: 1px solid #3aa03a; } /* Permissions matrix table — checkbox grid with per-area cards. */ .rxa-perm-area-header { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 2px; text-transform: uppercase; color: var(--mud-palette-primary); padding: 10px 16px; background: rgba(var(--rxa-faction-accent-rgb), 0.06); border-bottom: 1px solid var(--mud-palette-primary); } .rxa-perm-table { width: 100%; border-collapse: collapse; } .rxa-perm-table thead th { font-family: "Rajdhani", sans-serif; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.85rem; padding: 10px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); background: rgba(255, 255, 255, 0.02); } .rxa-perm-table tbody tr:hover { background: rgba(var(--rxa-faction-accent-rgb), 0.05); } .rxa-perm-table td { padding: 6px 8px; border-bottom: 1px solid var(--mud-palette-table-lines); vertical-align: middle; } .rxa-perm-action-col { text-align: left; width: 360px; } .rxa-perm-name { font-weight: 500; font-size: 0.95rem; } .rxa-perm-key { font-family: ui-monospace, monospace; font-size: 0.7rem; opacity: 0.45; } .rxa-perm-role-col { text-align: center; width: 110px; } .rxa-perm-cell { text-align: center; } /* MudCheckBox renders as an inline-flex with its own padding/label slot; * text-align alone isn't enough to centre it under the column header. * Force a centred flex layout inside the cell and strip the default * left-padding so the box sits dead centre. */ .rxa-perm-cell .mud-checkbox { display: inline-flex !important; justify-content: center; margin: 0 !important; padding: 0 !important; } .rxa-perm-cell .mud-checkbox .mud-icon-button { margin: 0 !important; } .rxa-perm-owner { background: rgba(176, 40, 40, 0.06); border-left: 1px solid rgba(176, 40, 40, 0.25); } /* Uniform sizing for every MudButton across the Chat Filter page (Behaviour * panel, Test panel, Banned/Silly list panels). FIXED width (not min-width) * so long labels like "RESEED SILLY WORDS" cannot stretch the button — * every button on this page is the same 210px × 38px box as the action chip. */ .rxa-cf-behaviour .mud-button, .rxa-cf-test .mud-button, .rxa-cf-list .mud-button { width: 210px !important; min-width: 210px !important; max-width: 210px !important; height: 38px !important; min-height: 38px !important; font-size: 0.9rem !important; padding: 0 16px !important; letter-spacing: 0.5px; /* If a label is too long for 210px (shouldn't happen with current text), * truncate cleanly rather than break the uniform width. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Count chips on Banned/Silly headers — fixed width so 1, 12, 123, 4567 * all centre-align to the same visual box. Tabular-num digits so digits * have equal advance. */ .rxa-cf-count-chip { min-width: 64px !important; font-variant-numeric: tabular-nums; text-align: center; font-weight: 700; } /* Sectioned scoped span: the count chip's inner text wrapper inherits * width so the parent .rxa-cf-count-chip rule lands on a real box. */ .rxa-cf-count-chip .mud-chip-content { width: 100%; text-align: center; } /* Mouse focus on a button (e.g. Bots tab category chips) shouldn't leave * the button looking "stuck on" until you click elsewhere. Use * :focus-visible so keyboard tabbing still shows the focus ring for a11y * but a mouse click clears the focus styling immediately on mouseup. */ .mud-button:focus:not(:focus-visible), .mud-button-root:focus:not(:focus-visible), .mud-chip:focus:not(:focus-visible) { box-shadow: none !important; outline: none !important; } /* ─── Cards / panels: subtle inset border + outline ──────────────── */ .mud-paper { border: 1px solid var(--mud-palette-lines-default); } /* ─── Tables: refined dividers, larger text, faction-row-accent helper ── */ .mud-table { border: 1px solid var(--mud-palette-lines-default); } .mud-table-cell { border-bottom-color: var(--mud-palette-table-lines) !important; /* Bump table cell font from MudBlazor's small default. Players / * Events / Chat tables were borderline unreadable at the previous * size on a typical 24" monitor. */ font-size: 0.95rem !important; padding-top: 8px !important; padding-bottom: 8px !important; } .mud-table-head .mud-table-cell { font-family: "Rajdhani", sans-serif; font-weight: 600; letter-spacing: 0.75px; text-transform: uppercase; font-size: 0.85rem !important; } /* Helper classes used by Players + Chat tables to put a 3px coloured * left edge on rows — pages add these conditionally via the row's * RowClassFunc / class binding. */ .rxa-row-gdi td:first-child { border-left: 3px solid var(--rxa-gdi-color); padding-left: calc(1rem - 3px); } .rxa-row-nod td:first-child { border-left: 3px solid var(--rxa-nod-color); padding-left: calc(1rem - 3px); } .rxa-row-admin td:first-child { border-left: 3px solid var(--mud-palette-warning); padding-left: calc(1rem - 3px); } .rxa-row-pm td:first-child { border-left: 3px solid #8090e0; padding-left: calc(1rem - 3px); } .rxa-row-system td:first-child { border-left: 3px solid var(--mud-palette-text-disabled); padding-left: calc(1rem - 3px); } /* Hero panel — slightly stronger border + faint gold accent shadow. */ .rxa-hero { border-color: var(--mud-palette-lines-default) !important; box-shadow: inset 0 0 0 1px rgba(var(--rxa-faction-accent-rgb), 0.08); } /* ─── Section header treatment ──────────────────────────────────── */ .rxa-section-title { font-family: "Rajdhani", sans-serif; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--mud-palette-text-secondary); border-left: 3px solid var(--mud-palette-primary); padding-left: 0.75rem; margin-bottom: 0.75rem; } /* ─── Input focus rings get a faction tint ──────────────────────── */ .mud-input-control-input-container:focus-within .mud-input-slot { box-shadow: 0 0 0 1px var(--mud-palette-primary); } /* ─── Chip color variants — readable contrast on dark ─────────── */ /* MudBlazor's filled chips inherit the contrast text from the palette * (we set those in RxaTheme.cs), but the outlined variants ignore that * and use the palette colour AS the text colour, which on a dark * background is fine for bright accents but the .mud-chip-text variant * is weaker. Bump font weight on outlined for legibility. */ .mud-chip.mud-chip-variant-outlined, .mud-chip.mud-chip-variant-text { font-weight: 700; } /* ─── Buttons: bigger text + consistent height ───────────────────── * ~50% larger than MudBlazor stock. Filled / outlined buttons also pick * up the chamfered corners from the clip-path rule above. */ .mud-button { font-size: 1.15rem !important; padding: 8px 20px !important; min-height: 44px !important; } .mud-button.mud-button-size-small { font-size: 1rem !important; padding: 6px 16px !important; min-height: 36px !important; } .mud-button.mud-button-size-large { font-size: 1.3rem !important; padding: 12px 28px !important; min-height: 52px !important; } .mud-icon-button { min-width: 40px !important; min-height: 40px !important; } .mud-icon-button.mud-icon-button-size-small { min-width: 36px !important; min-height: 36px !important; } /* EXCEPTION: MudNumericField up/down spinners are also .mud-icon-buttons, but the 36/40px min-height above makes the stacked pair overflow the dense field and bleed onto adjacent controls (unclickable). Shrink them to fit. */ .mud-input-numeric-spin .mud-icon-button, .mud-input-numeric-spin button { min-width: 0 !important; min-height: 0 !important; height: 1.1rem !important; width: 1.6rem !important; padding: 0 !important; } /* ─── Input fields: bigger text so values are legible ───────────── */ .mud-input-slot, .mud-select .mud-input-slot { font-size: 1rem !important; } .mud-input-label { font-size: 0.95rem !important; } /* ─── Pass C: micro-polish ───────────────────────────────────────── * Hover transitions for buttons / chips / nav-links / table rows. * Empty states styling + loading-skeleton helper. */ .mud-button, .mud-chip, .mud-nav-link, .mud-icon-button { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 80ms ease; } .mud-button:hover:not(:disabled):not(.mud-button-disabled) { transform: translateY(-1px); } .mud-button:active:not(:disabled):not(.mud-button-disabled) { transform: translateY(0); } /* Table rows get a soft hover tint */ .mud-table tbody tr { transition: background-color 120ms ease; } /* MudAlert "Info" used for empty states — tone it down so it doesn't * shout for attention when something just isn't there yet. */ .mud-alert-filled-info, .mud-alert-text-info { background-color: var(--mud-palette-table-striped) !important; border: 1px dashed var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary) !important; } /* Loading: thin progress strip on top of tables already exists via * MudTable's LoadingProgressColor. We just tint it gold. */ .mud-table-loading-progress { background-color: var(--mud-palette-primary) !important; } /* Page-title h4: the default sits flush-left flat. Add the same * accent treatment as our .rxa-section-title for visual consistency * without having to touch every page. */ .mud-typography-h4 { position: relative; } .mud-typography-h4::before { content: ""; position: absolute; left: -16px; top: 12%; bottom: 12%; width: 4px; background: var(--mud-palette-primary); }