/* ============================================================================ Grassroots360 — Admin Panel Theme ---------------------------------------------------------------------------- A fixed, cohesive colour palette for the ADMIN PANEL ONLY, built around the brand navy #1E3562. The public-facing website is still styled per-club by Components/Theme.razor (the customer-configurable theme) — none of the rules below leak onto it because every selector is scoped under `body.admin-portal`, a class only the admin layout (_AdminLayout.cshtml) adds to . Load order matters: _AdminLayout.cshtml links this file AFTER the block, so where the club theme uses broad selectors (.card, .bg-body, .btn-primary, .table …) these higher-specificity, admin-scoped rules win and give every admin page one consistent look. The palette is a tonal scale of #1E3562 (deep navy) plus a small set of semantic state colours. The whole admin panel is a dark navy theme — which keeps existing admin content (light card text, chart axis labels, translucent sub-panels) readable while standardising everything on the brand colour. ========================================================================== */ body.admin-portal { /* ---- Brand navy scale (built around #1E3562) ---------------------- */ --admin-primary: #1E3562; /* brand navy — main navigation */ --admin-primary-strong: #142647; /* darker navy — active/pressed, brand bar */ --admin-primary-soft: #33518A; /* light navy tint — subtle highlights */ --admin-bg: #15233F; /* page / app background (deepest) */ --admin-surface: #213A66; /* cards (raised above background) */ --admin-surface-2: #294679; /* card headers, striped rows, sub-panels */ --admin-surface-3: #325288; /* hover surfaces */ --admin-btn: #3360AE; /* primary action buttons (vivid navy) */ --admin-btn-hover: #284E92; --admin-btn-active: #21407A; --admin-accent: #E1C038; /* gold accent (sparingly) */ --admin-text: #E8EEF8; /* primary text on dark surfaces */ --admin-text-muted: #AFBDD8; /* muted / secondary text (≥4.5:1 on every surface incl. card headers) */ --admin-heading: #FFFFFF; /* headings */ /* Text colour for hover/active states whose background is a theme surface (outline buttons, pagination). White on the dark surfaces; flipped to dark navy by the light theme, where those hover surfaces are near-white. */ --admin-hover-text: #ffffff; /* ---- Semantic TEXT colours (AA on the theme surfaces) -------------- Bootstrap's .text-warning/.text-danger/etc. are tuned for white pages and fail on the navy surfaces (and amber fails on white), so the admin remaps them per theme. Also used for outline-danger/success buttons. */ --admin-text-warning: #E8B23E; --admin-text-danger: #F08F95; --admin-text-success: #63D3A6; --admin-text-info: #7FBCEE; /* .text-primary resolves to the brand navy via --bs-primary-rgb, which is invisible (1.07:1) on the navy card surfaces — use the palette's light navy on dark, the brand navy on light. */ --admin-text-primary: #9CBAEC; /* Accent colours for dashboard KPI numbers (theme-aware so they hold 3:1 large-text contrast on both card surfaces). */ --admin-kpi-teal: #20C997; --admin-kpi-purple: #B197E0; /* Overdue-date text in Tasks list / Kanban. */ --admin-overdue: #F4A0A5; /* Inline (Bootstrap pink #d63384 fails on navy). */ --admin-code: #F2A3C7; /* Contextual table-row tints (replace Bootstrap's fixed light .table-warning/-danger/-secondary backgrounds, which clash with the themed light cell text on the dark theme). Translucent so they sit naturally on either theme's card surface. */ --admin-row-warning: rgba(232, 178, 62, 0.16); --admin-row-danger: rgba(229, 97, 107, 0.18); --admin-row-muted: rgba(255, 255, 255, 0.10); /* Bootstrap's .btn-close is a black SVG — invert it for the navy modal surfaces; the light theme resets this to none. */ --admin-btn-close-filter: invert(1) grayscale(100%) brightness(180%); --admin-border: rgba(255, 255, 255, 0.10); --admin-border-strong: rgba(255, 255, 255, 0.18); /* ---- Surface overlays (kept as variables so they flip cleanly between the dark and light themes) -------------------------------------- */ --admin-stripe: rgba(255, 255, 255, 0.045); /* striped table rows */ --admin-hover: rgba(255, 255, 255, 0.08); /* table / row hover */ --admin-chip-bg: rgba(255, 255, 255, 0.14); /* chips, count badges */ --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.12); /* ---- Status pills (Tasks list) ----------------------------------- */ --admin-pill-bg: rgba(89, 166, 230, 0.22); --admin-pill-text: #CFE2F7; --admin-pill-done-bg: rgba(47, 180, 119, 0.22); --admin-pill-done-text: #B7EBD2; /* ---- Semantic state colours -------------------------------------- */ --admin-success: #2FB477; --admin-danger: #E5616B; --admin-warning: #E8B23E; --admin-info: #59A6E6; /* ---- Remap Bootstrap's own theme variables ----------------------- */ /* Setting these on cascades them over Bootstrap's :root values for every descendant, so utilities and components computed from --bs-primary (.text-primary, .bg-primary, focus rings, .form-check, pagination, …) follow the brand navy without per-component rules. */ --bs-primary: #1E3562; --bs-primary-rgb: 30, 53, 98; --bs-link-color: #8FB0E8; --bs-link-color-rgb: 143, 176, 232; --bs-link-hover-color: #B9CEF2; --bs-link-hover-color-rgb: 185, 206, 242; --bs-border-color: var(--admin-border); --bs-emphasis-color: var(--admin-heading); } /* ============================================================================ LIGHT THEME ---------------------------------------------------------------------------- Applied when the user picks "Light Theme" from the profile menu — the body gets the `admin-theme-light` class (set server-side from the g360_admin_theme cookie, and toggled live by JS). Only the palette VARIABLES change; every rule below this block reads those variables, so the whole content area re-skins to a light surface with dark text. The main navigation (header + sidebar) stays brand navy #1E3562 in BOTH themes. ========================================================================== */ body.admin-portal.admin-theme-light { --admin-bg: #EEF1F7; /* light blue-grey page background */ --admin-surface: #FFFFFF; /* white cards */ --admin-surface-2: #F3F6FC; /* card headers, sub-panels, stripes base */ --admin-surface-3: #E7ECF6; /* hover surfaces */ --admin-btn: #1E3562; /* primary buttons = brand navy on white */ --admin-btn-hover: #16284A; --admin-btn-active: #0F1D38; --admin-text: #1F2A44; /* dark navy text */ --admin-text-muted: #55637D; /* muted (≥4.5:1 on page bg and sub-panels) */ --admin-heading: #1E3562; /* navy headings */ --admin-hover-text: #1F2A44; /* hover surfaces are near-white here */ --admin-text-warning: #856404; --admin-text-danger: #B02A37; --admin-text-success: #146C43; --admin-text-info: #087990; --admin-text-primary: #1E3562; --admin-kpi-teal: #0F7B5F; --admin-kpi-purple: #6F42C1; --admin-overdue: #B3261E; --admin-code: #B02468; --admin-row-muted: rgba(30, 53, 98, 0.08); --admin-btn-close-filter: none; --admin-border: #DCE3EF; --admin-border-strong: #C3CEE2; --admin-stripe: rgba(30, 53, 98, 0.035); --admin-hover: rgba(30, 53, 98, 0.06); --admin-chip-bg: rgba(30, 53, 98, 0.10); --admin-card-shadow: 0 1px 3px rgba(30, 53, 98, 0.10), 0 1px 2px rgba(30, 53, 98, 0.06); --admin-pill-bg: rgba(30, 53, 98, 0.10); --admin-pill-text: #1E3562; --admin-pill-done-bg: rgba(31, 157, 87, 0.16); --admin-pill-done-text: #166534; --bs-link-color: #2C4E92; --bs-link-color-rgb: 44, 78, 146; --bs-link-hover-color: #1E3562; --bs-link-hover-color-rgb: 30, 53, 98; --bs-emphasis-color: #1F2A44; } /* ---------------------------------------------------------------------------- Base surfaces & typography -------------------------------------------------------------------------- */ body.admin-portal { background-color: var(--admin-bg) !important; color: var(--admin-text); } body.admin-portal main, body.admin-portal .app-main, body.admin-portal .app-content, body.admin-portal .app-content-header, body.admin-portal .app-wrapper { background-color: transparent !important; color: var(--admin-text); } /* Content headings + breadcrumbs sit directly on the navy app background. */ body.admin-portal .app-content-header h1, body.admin-portal .app-content-header h2, body.admin-portal .app-content-header h3, body.admin-portal .app-content-header h4 { color: var(--admin-heading); } body.admin-portal .breadcrumb { --bs-breadcrumb-divider-color: var(--admin-text-muted); margin-bottom: 0; } body.admin-portal .breadcrumb-item a { color: var(--admin-text-muted); text-decoration: none; } body.admin-portal .breadcrumb-item a:hover { color: var(--admin-text); } body.admin-portal .breadcrumb-item.active { color: var(--admin-text); } /* In-content text links (not buttons / nav / dropdowns) use a light navy. */ body.admin-portal .app-main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.breadcrumb-item *):not(.badge) { color: var(--bs-link-color); } body.admin-portal .app-main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover { color: var(--bs-link-hover-color); } /* Muted / helper text everywhere in admin (Bootstrap 5.3's .text-muted maps to a near-black grey that disappears on dark surfaces). */ body.admin-portal .text-muted, body.admin-portal .text-body-secondary, body.admin-portal .text-body-tertiary, body.admin-portal .form-text, body.admin-portal .card .text-muted, body.admin-portal .card .text-body-secondary, body.admin-portal .card .form-text { color: var(--admin-text-muted) !important; opacity: 1; } /* FontAwesome icons must follow their context's colour, not a fixed white. The public theme (Theme.razor) and site.css hard-code `.fa { color: white }`, which makes table-row action icons (e.g. the arrow on PendingActions, the ☰ hamburger on the Projects table) invisible on the light admin theme (white-on-white). Inheriting currentColor makes them follow the link / button / text colour, so they're readable on both themes and stay white when sat on a coloured badge/header (which sets `color: #fff` on the icon's parent). */ body.admin-portal .fa { color: inherit; } /* ---------------------------------------------------------------------------- Header navbar (top bar) — brand navy -------------------------------------------------------------------------- */ body.admin-portal .app-header, body.admin-portal .app-header.navbar, body.admin-portal .app-header.bg-body { background-color: var(--admin-primary) !important; border-bottom: 1px solid var(--admin-primary-strong); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } body.admin-portal .app-header .nav-link, body.admin-portal .app-header .nav-link > i, body.admin-portal .app-header .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.82); } body.admin-portal .app-header .nav-link:hover, body.admin-portal .app-header .nav-link:focus, body.admin-portal .app-header .nav-link:hover > i { color: #ffffff; } /* ---------------------------------------------------------------------------- Sidebar (main navigation) — brand navy -------------------------------------------------------------------------- */ body.admin-portal .app-sidebar, body.admin-portal .app-sidebar.bg-body-secondary { background-color: var(--admin-primary) !important; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.22); } /* Brand / logo cell sits flush with the rest of the navigation — same navy as the sidebar so the logo's background matches the menu, not a darker bar. The divider is a fixed overlay (not a theme variable) because the sidebar is always navy in both themes. */ body.admin-portal .sidebar-brand { background-color: var(--admin-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.10); } body.admin-portal .app-sidebar .sidebar-menu .nav-link { color: rgba(255, 255, 255, 0.80); } body.admin-portal .app-sidebar .sidebar-menu .nav-link .nav-icon { color: rgba(255, 255, 255, 0.62); } body.admin-portal .app-sidebar .sidebar-menu .nav-link:hover { background-color: rgba(255, 255, 255, 0.07); color: #ffffff; } body.admin-portal .app-sidebar .sidebar-menu .nav-link:hover .nav-icon { color: #ffffff; } /* Active leaf + open parent: a fixed translucent-white highlight with a gold accent edge. The sidebar is ALWAYS navy (both themes), so this uses a fixed overlay rather than a theme surface variable — otherwise the light theme's near-white surface would make the active label white-on-white. */ body.admin-portal .app-sidebar .sidebar-menu .nav-link.active { background-color: rgba(255, 255, 255, 0.14); color: #ffffff; border-left: 3px solid var(--admin-accent); } body.admin-portal .app-sidebar .sidebar-menu .nav-link.active .nav-icon { color: var(--admin-accent); } body.admin-portal .app-sidebar .nav-treeview .nav-link { color: rgba(255, 255, 255, 0.70); } body.admin-portal .app-sidebar .menu-open > .nav-link, body.admin-portal .app-sidebar .menu-is-opening > .nav-link { color: #ffffff; } /* ---------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ body.admin-portal .app-footer { background-color: var(--admin-primary) !important; color: rgba(255, 255, 255, 0.72); border-top: 1px solid var(--admin-primary-strong); } /* ---------------------------------------------------------------------------- Cards — the core surface. Both plain `.card` and the legacy `.card-admin` (previously forced white) now share one navy treatment so every admin page is consistent. -------------------------------------------------------------------------- */ body.admin-portal .card, body.admin-portal .card-admin { --bs-card-bg: var(--admin-surface); --bs-card-color: var(--admin-text); --bs-card-border-color: var(--admin-border); --bs-card-cap-bg: var(--admin-surface-2); --bs-card-cap-color: var(--admin-heading); background-color: var(--admin-surface) !important; color: var(--admin-text) !important; border: 1px solid var(--admin-border) !important; border-radius: 10px; box-shadow: var(--admin-card-shadow); } body.admin-portal .card-body, body.admin-portal .card-admin .card-body, body.admin-portal .card-text, body.admin-portal .card-title, body.admin-portal .card-subtitle { background-color: transparent !important; color: var(--admin-text) !important; } body.admin-portal .card-header, body.admin-portal .card-admin .card-header { background-color: var(--admin-surface-2) !important; color: var(--admin-heading) !important; border-bottom: 1px solid var(--admin-border) !important; font-weight: 600; } body.admin-portal .card-footer, body.admin-portal .card-admin .card-footer, body.admin-portal .card-admin-footer { background-color: var(--admin-surface-2) !important; color: var(--admin-text) !important; border-top: 1px solid var(--admin-border) !important; } /* ---------------------------------------------------------------------------- Tables inside cards — fill edge-to-edge with clean rounded corners ---------------------------------------------------------------------------- A flush table (and its themed band) has square corners that paint over the card's rounded corners, making the card look square at the top/ bottom. Clipping the card to its border-radius makes every child — header, thead, last row — follow the corner, so the table fills the card without hiding its rounded edge. Scoped with :has(.table) so ONLY table cards are clipped. Cards that hold a standalone/form dropdown menu (which must overflow the card) have no table and are left untouched. Row-action menus inside a table already live within .table-responsive (or are rendered fixed-position), so clipping the card does not change their behaviour. */ body.admin-portal .card:has(.table) { overflow: hidden; } /* Every card-body that holds a data table fills the card (no padding) so all tables look identical whether the page used `card-body p-0` or a padded body. The :has() guard keeps padding for non-table bodies and empty states (e.g. the "no rows yet" message shown when the table is absent). */ body.admin-portal .card-body:has(> .table-responsive), body.admin-portal .card-body:has(> .table) { padding: 0; } /* Drop the table's default bottom margin so it meets the card edge with no gap. */ body.admin-portal .card .table { margin-bottom: 0; } /* ---------------------------------------------------------------------------- Tables — light text on the navy card surface, navy-tinted headers & stripes -------------------------------------------------------------------------- */ body.admin-portal .table { --bs-table-color: var(--admin-text); --bs-table-bg: transparent; --bs-table-striped-bg: var(--admin-stripe); --bs-table-striped-color: var(--admin-text); --bs-table-hover-bg: var(--admin-hover); --bs-table-hover-color: var(--admin-text); --bs-table-border-color: var(--admin-border); color: var(--admin-text); } body.admin-portal .card .table, body.admin-portal .card .table > :not(caption) > * > * { --bs-table-color: var(--admin-text); --bs-table-bg: transparent; --bs-table-striped-bg: var(--admin-stripe); --bs-table-striped-color: var(--admin-text); --bs-table-hover-bg: var(--admin-hover); --bs-table-hover-color: var(--admin-text); --bs-table-border-color: var(--admin-border); color: var(--admin-text); } /* Table — Bootstrap leaves it at its default muted grey (--bs-secondary-color), which is illegible on the dark navy surface. Use the themed muted token so it stays readable in both admin themes. Covers captions whether they render as a table footer (caption-side: bottom) or the top. */ body.admin-portal caption, body.admin-portal .table > caption { color: var(--admin-text-muted); } /* Header row: a slightly raised navy band with light heading text. Plain (no Bootstrap variant) is the common pattern across admin tables. */ body.admin-portal .table > thead > tr > th { background-color: var(--admin-surface-2); color: var(--admin-heading); border-bottom: 2px solid var(--admin-border-strong); font-weight: 600; } /* Tables that use a Bootstrap variant header (.table-light/-dark/-secondary…) — keep them on the themed navy surface instead of a fixed grey/white. */ body.admin-portal .card .table > thead.table-light > tr > th, body.admin-portal .card .table > thead.table-light > tr > td, body.admin-portal .card .table > thead.table-dark > tr > th, body.admin-portal .card .table > thead.table-secondary > tr > th { background-color: var(--admin-surface-2) !important; color: var(--admin-heading) !important; border-color: var(--admin-border) !important; } /* ---------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ body.admin-portal .btn-primary { --bs-btn-bg: var(--admin-btn); --bs-btn-border-color: var(--admin-btn); --bs-btn-hover-bg: var(--admin-btn-hover); --bs-btn-hover-border-color: var(--admin-btn-hover); --bs-btn-active-bg: var(--admin-btn-active); --bs-btn-active-border-color: var(--admin-btn-active); --bs-btn-disabled-bg: var(--admin-btn); --bs-btn-disabled-border-color: var(--admin-btn); --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; --bs-btn-disabled-color: rgba(255, 255, 255, 0.90); /* .75 was 4.2:1 on the navy button */ background-color: var(--admin-btn) !important; border-color: var(--admin-btn) !important; color: #ffffff !important; } body.admin-portal .btn-primary:hover, body.admin-portal .btn-primary:focus { background-color: var(--admin-btn-hover) !important; border-color: var(--admin-btn-hover) !important; color: #ffffff !important; } body.admin-portal .btn-primary:active, body.admin-portal .btn-primary.active { background-color: var(--admin-btn-active) !important; border-color: var(--admin-btn-active) !important; } body.admin-portal .btn-outline-primary { --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--admin-btn); --bs-btn-hover-bg: var(--admin-btn); --bs-btn-hover-border-color: var(--admin-btn); --bs-btn-hover-color: #ffffff; --bs-btn-active-bg: var(--admin-btn-active); --bs-btn-active-border-color: var(--admin-btn-active); --bs-btn-active-color: #ffffff; } /* Outline-secondary is the workhorse "neutral" admin button (toolbars, Cancel). Theme it to a readable light-navy outline that fills navy on hover. */ body.admin-portal .btn-outline-secondary { --bs-btn-color: var(--admin-text); --bs-btn-border-color: var(--admin-border-strong); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--admin-surface-3); --bs-btn-hover-border-color: var(--admin-surface-3); /* Hover/active text follows the theme: white on the dark hover surfaces, dark navy on the light theme's near-white hover surfaces (a fixed white here was 1.2:1 — invisible — on the light theme). */ --bs-btn-hover-color: var(--admin-hover-text); --bs-btn-active-bg: var(--admin-surface-2); --bs-btn-active-border-color: var(--admin-surface-2); --bs-btn-active-color: var(--admin-hover-text); } /* ---------------------------------------------------------------------------- Contextual background / emphasis utilities used as accents in admin -------------------------------------------------------------------------- */ body.admin-portal .bg-primary, body.admin-portal .text-bg-primary { background-color: var(--admin-primary) !important; color: #ffffff !important; } body.admin-portal .bg-dark { background-color: var(--admin-primary-strong) !important; } body.admin-portal .border-primary { border-color: var(--admin-btn) !important; } /* ---------------------------------------------------------------------------- Forms — inputs stay light (white) for contrast on the navy cards, which is the most readable, lowest-risk pattern. We only re-tint focus, labels and the navy focus ring. -------------------------------------------------------------------------- */ body.admin-portal .form-control:focus, body.admin-portal .form-select:focus, body.admin-portal .form-check-input:focus { border-color: var(--admin-btn); box-shadow: 0 0 0 0.2rem rgba(51, 96, 174, 0.30); } body.admin-portal .form-check-input:checked { background-color: var(--admin-btn); border-color: var(--admin-btn); } body.admin-portal label, body.admin-portal .form-label, body.admin-portal .col-form-label { color: var(--admin-text); } /* ---------------------------------------------------------------------------- List groups -------------------------------------------------------------------------- */ body.admin-portal .list-group { --bs-list-group-bg: var(--admin-surface); --bs-list-group-color: var(--admin-text); --bs-list-group-border-color: var(--admin-border); --bs-list-group-action-hover-bg: var(--admin-surface-3); --bs-list-group-action-hover-color: var(--admin-heading); } body.admin-portal .list-group-item { background-color: var(--admin-surface) !important; color: var(--admin-text); border-color: var(--admin-border) !important; } /* ---------------------------------------------------------------------------- Pagination / nav-pills / tabs — keep on the navy palette -------------------------------------------------------------------------- */ body.admin-portal .page-link { --bs-pagination-bg: var(--admin-surface); --bs-pagination-color: var(--bs-link-color); --bs-pagination-border-color: var(--admin-border); --bs-pagination-hover-bg: var(--admin-surface-3); --bs-pagination-hover-color: var(--admin-hover-text); --bs-pagination-active-bg: var(--admin-btn); --bs-pagination-active-border-color: var(--admin-btn); --bs-pagination-disabled-bg: var(--admin-surface); } body.admin-portal .nav-pills { --bs-nav-pills-link-active-bg: var(--admin-btn); --bs-nav-pills-link-active-color: #ffffff; } /* ---------------------------------------------------------------------------- Misc — horizontal rules, code, definition lists on the dark surface -------------------------------------------------------------------------- */ body.admin-portal hr { border-color: var(--admin-border-strong); opacity: 1; } body.admin-portal .border { border-color: var(--admin-border) !important; } /* ---------------------------------------------------------------------------- Semantic text utilities — Bootstrap's fixed colours fail WCAG AA on the themed surfaces (amber #ffc107 is 1.6:1 on white; red #dc3545 is 2.5:1 on navy). Remapped per theme, scoped to the content area so fixed-context chrome (e.g. the white messages dropdown in the header) keeps Bootstrap's defaults, which are correct on white. -------------------------------------------------------------------------- */ body.admin-portal .app-main .text-warning { color: var(--admin-text-warning) !important; } body.admin-portal .app-main .text-danger { color: var(--admin-text-danger) !important; } body.admin-portal .app-main .text-success { color: var(--admin-text-success) !important; } body.admin-portal .app-main .text-info { color: var(--admin-text-info) !important; } /* :not(.badge) — badges pair text-primary with their own fixed background (e.g. "bg-white text-primary"), where the brand navy is already correct. */ body.admin-portal .app-main .text-primary:not(.badge) { color: var(--admin-text-primary) !important; } /* Dashboard KPI accent numbers/icons (previously hardcoded #20c997 / #6f42c1, which each failed in one theme). */ body.admin-portal .admin-kpi-teal { color: var(--admin-kpi-teal) !important; } body.admin-portal .admin-kpi-purple { color: var(--admin-kpi-purple) !important; } /* ---------------------------------------------------------------------------- Outline state buttons — Bootstrap's text colours sit on the card surface, where red/green fail on navy (2.5:1). Text/border use the themed semantic colours; hover fills with the solid state colour + white text. -------------------------------------------------------------------------- */ body.admin-portal .btn-outline-danger { --bs-btn-color: var(--admin-text-danger); --bs-btn-border-color: var(--admin-text-danger); --bs-btn-hover-bg: #BB2D3B; --bs-btn-hover-border-color: #BB2D3B; --bs-btn-hover-color: #ffffff; --bs-btn-active-bg: #A52834; --bs-btn-active-border-color: #A52834; --bs-btn-active-color: #ffffff; } body.admin-portal .btn-outline-success { --bs-btn-color: var(--admin-text-success); --bs-btn-border-color: var(--admin-text-success); --bs-btn-hover-bg: #157347; --bs-btn-hover-border-color: #157347; --bs-btn-hover-color: #ffffff; --bs-btn-active-bg: #126940; --bs-btn-active-border-color: #126940; --bs-btn-active-color: #ffffff; } /* ---------------------------------------------------------------------------- Solid state badges & buttons — Bootstrap's success/danger/secondary with white text sit at 4.5–4.7:1 (zero AA margin). Darkened one step (Bootstrap's own -600 shades) so white text clears 5.8:1 while staying clearly semantic. Warning/info keep dark text and already pass comfortably. -------------------------------------------------------------------------- */ body.admin-portal .badge.bg-success, body.admin-portal .badge.text-bg-success, body.admin-portal .btn-success { background-color: #157347 !important; border-color: #157347 !important; } body.admin-portal .badge.bg-danger, body.admin-portal .badge.text-bg-danger, body.admin-portal .btn-danger { background-color: #BB2D3B !important; border-color: #BB2D3B !important; } body.admin-portal .badge.bg-secondary, body.admin-portal .badge.text-bg-secondary, body.admin-portal .btn-secondary { background-color: #5C636A !important; border-color: #5C636A !important; } body.admin-portal .btn-success:hover, body.admin-portal .btn-success:focus { background-color: #126940 !important; border-color: #126940 !important; } body.admin-portal .btn-danger:hover, body.admin-portal .btn-danger:focus { background-color: #A52834 !important; border-color: #A52834 !important; } body.admin-portal .btn-secondary:hover, body.admin-portal .btn-secondary:focus { background-color: #51585E !important; border-color: #51585E !important; } /* ---------------------------------------------------------------------------- Contextual table rows — Bootstrap's .table-warning/-danger/-secondary paint a fixed LIGHT row background while the themed cell rule forces light text, which was ~1.1:1 (invisible) on the dark theme. Translucent tints sit on either theme's surface and keep the themed text readable. -------------------------------------------------------------------------- */ body.admin-portal .table tr.table-warning, body.admin-portal .table tr.table-warning > * { background-color: var(--admin-row-warning) !important; box-shadow: none; color: var(--admin-text) !important; } body.admin-portal .table tr.table-danger, body.admin-portal .table tr.table-danger > * { background-color: var(--admin-row-danger) !important; box-shadow: none; color: var(--admin-text) !important; } body.admin-portal .table tr.table-secondary, body.admin-portal .table tr.table-secondary > * { background-color: var(--admin-row-muted) !important; box-shadow: none; color: var(--admin-text) !important; } /* Subtle warning panels (e.g. refund confirmation band) — same fixed-light problem as the variant rows. */ body.admin-portal .bg-warning-subtle { background-color: var(--admin-row-warning) !important; } body.admin-portal .border-warning { border-color: var(--admin-warning) !important; } /* ---------------------------------------------------------------------------- Modals — Bootstrap keeps a white .modal-content while the page inherits the themed light text, which rendered light-on-white (1.2:1) on the dark theme. Theming the modal surface makes the inherited text correct in BOTH themes and removes the need for per-page `style="color: black"` workarounds. -------------------------------------------------------------------------- */ body.admin-portal .modal-content { background-color: var(--admin-surface); color: var(--admin-text); border: 1px solid var(--admin-border-strong); } body.admin-portal .modal-header, body.admin-portal .modal-footer { border-color: var(--admin-border); } body.admin-portal .modal-title { color: var(--admin-heading); } /* Bootstrap's .btn-close is a black SVG: invert it on the navy modal surface; the light theme resets the filter. Headers that set their own colour (e.g. .bg-danger with .btn-close-white) are unaffected. */ body.admin-portal .modal-content .btn-close:not(.btn-close-white) { filter: var(--admin-btn-close-filter); } /* ---------------------------------------------------------------------------- Inline code — Bootstrap pink #d63384 is 2.4:1 on the navy surfaces. -------------------------------------------------------------------------- */ body.admin-portal code { color: var(--admin-code); } /* ---------------------------------------------------------------------------- Scrollable dropdowns — say so ---------------------------------------------------------------------------- A menu that is taller than the room it has (the player actions menu is the long one) gets max-height + overflow-y, and then scrolls in total silence: iOS paints no scrollbar until a finger is already moving, so the list just looks like it ends. People were asking where the options had gone. The classic scroll-shadow trick, so it costs no JavaScript and no markup. Two pairs of gradients: a "cover" painted in the menu's own background colour, attached `local` so it travels with the content, and a shadow attached `scroll` so it stays pinned to the edge. At the top of the list the cover sits over the top shadow and hides it; scroll down and the cover moves away, revealing a shadow that says there is more above. Same in reverse at the bottom. A menu short enough not to scroll has both covers in place at once and shows nothing, so this is safe to apply to every dropdown. background-image rather than the `background` shorthand, so Bootstrap's own background-color (and the light theme's) is left alone. -------------------------------------------------------------------------- */ body.admin-portal .dropdown-menu { background-image: /* 1-2. The covers, in the menu's own colour, travelling WITH the content. */ linear-gradient(to bottom, var(--bs-dropdown-bg, #fff) 40%, rgba(0, 0, 0, 0)), linear-gradient(to top, var(--bs-dropdown-bg, #fff) 55%, rgba(0, 0, 0, 0)), /* 3-4. The shadows, pinned to the edges, under the covers. */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); background-position: 0 0, 0 100%, 0 0, 0 100%; background-repeat: no-repeat; background-size: 100% 32px, 100% 32px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; } /* ---------------------------------------------------------------------------- ...and a bar that says it outright ---------------------------------------------------------------------------- The shadow above is the polite version and it was not enough - people still could not tell the list continued. This is the blunt one: a strip pinned to the bottom of the menu with a chevron on it. position:sticky inside the scrolling menu, so it rides the bottom edge while there is more to come and settles into its own space on arrival. It reserves its own height, which a background image cannot, so the arrow never lands on top of an item the way the first attempt did. The two classes are put on by the admin layout when a menu is opened and as it scrolls: `g360-scrollable` only if the content really does overflow, so a menu that fits shows nothing at all, and `g360-at-bottom` once you arrive, which fades the strip out rather than removing it - removing it would change the scroll height underneath your finger. -------------------------------------------------------------------------- */ body.admin-portal .dropdown-menu.g360-scrollable::after { content: ""; display: block; position: sticky; bottom: 0; height: 22px; background-color: var(--bs-dropdown-bg, #fff); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23495057'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: 14px 14px; border-top: 1px solid rgba(0, 0, 0, .08); transition: opacity .15s ease-out; } body.admin-portal .dropdown-menu.g360-scrollable.g360-at-bottom::after { opacity: 0; } /* No strip at the top edge, deliberately. The player actions menu gives its group headings position:sticky, and two sticky things competing for the same edge is a fight nobody needs - the top shadow already covers that direction. */ /* A real scrollbar wherever the platform will draw one. iOS ignores this and keeps its overlay scrollbar, which is why the shadow above does the work. */ body.admin-portal .dropdown-menu { scrollbar-width: thin; } body.admin-portal .dropdown-menu::-webkit-scrollbar { width: 8px; } body.admin-portal .dropdown-menu::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .3); border-radius: 4px; } /* ---------------------------------------------------------------------------- Table scrollers must not trap a fixed dropdown ---------------------------------------------------------------------------- Bootstrap and AdminLTE both ship .table-responsive with -webkit-overflow-scrolling: touch. In WebKit that does more than ask for momentum scrolling: it makes the element a containing block for position: fixed descendants. Row action menus are positioned fixed precisely so they can leave the table and the card - and inside one of these they cannot, so they are clipped at the bottom edge of the table instead. Chromium ignores the property altogether, which is why this reproduces on a phone and not in a desktop browser pretending to be one. Momentum scrolling has been the default for overflow scrollers since iOS 13, so the property buys nothing on any device still in use; auto is its initial value and undoes the containing block. -------------------------------------------------------------------------- */ body.admin-portal .table-responsive { -webkit-overflow-scrolling: auto; }