@charset "UTF-8"; /* ========================================================================= GamingAnalytics — "Cockpit" theme Visual skin loaded AFTER style-liberty-dark.css / style-tt.css. Only repaints color, surface, radius, shadow and type — no layout, position or JS-driven structural rules are touched, so sidebar collapse, dropdowns, DataTables and tooltips keep working exactly as before. ========================================================================= */ @import url('//fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* ---- re-tint the template's own bootstrap variables ------------------ */ --primary: #a78bfa; --secondary: #d946ef; --success: #2dd4bf; --info: #38bdf8; --warning: #d97706; --danger: #f43f5e; --light: #1b1533; --dark: #f1effa; --light-bg-color: #150f2b; --card-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 2px 10px rgba(76, 29, 149, .18); /* ---- cockpit design tokens -------------------------------------------- */ --ga-bg: #000000; --ga-bg-alt: #0c0a18; --ga-fg: #f4f2fb; --ga-fg-muted: #b7b0d4; --ga-fg-faint: #857da8; --ga-accent: #a78bfa; --ga-accent-2: #d946ef; --ga-teal: #2dd4bf; --ga-glass: rgba(18, 14, 34, .72); --ga-glass-strong: rgba(12, 10, 22, .88); --ga-glass-soft: rgba(255, 255, 255, .04); --ga-border: rgba(167, 139, 250, .16); --ga-border-hi: rgba(196, 181, 253, .34); --ga-radius: 18px; --ga-radius-sm: 12px; --ga-radius-pill: 999px; --ga-gradient: linear-gradient(135deg, #a020a0 0%, #800080 100%); --ga-shadow: 0 0 0 .5px rgba(255, 255, 255, .05) inset, 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 40px rgba(0, 0, 0, .42), 0 2px 10px rgba(76, 29, 149, .16); --ga-shadow-lift: 0 0 0 .5px rgba(255, 255, 255, .08) inset, 0 20px 56px rgba(0, 0, 0, .5), 0 8px 24px rgba(124, 58, 237, .22); } /* Light theme — toggled by data-theme="light" on , set by the appearance switch in the header and persisted in localStorage. Every component below is written against the --ga-* / bootstrap variables, so redefining them here is enough to reskin the whole site. */ :root[data-theme="light"] { --primary: #7c3aed; --secondary: #c026d3; --success: #0d9488; --light-bg-color: #efe9fb; --dark: #1c1533; --card-shadow: 0 12px 30px rgba(124, 58, 237, .12), 0 2px 8px rgba(124, 58, 237, .08); --ga-bg: #f7f5fc; --ga-bg-alt: #ffffff; --ga-fg: #1c1533; --ga-fg-muted: #55507a; --ga-fg-faint: #7c7699; --ga-glass: rgba(255, 255, 255, .78); --ga-glass-strong: rgba(255, 255, 255, .95); --ga-glass-soft: rgba(124, 58, 237, .05); --ga-border: rgba(124, 58, 237, .16); --ga-border-hi: rgba(124, 58, 237, .38); --ga-shadow: 0 0 0 .5px rgba(124, 58, 237, .05) inset, 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 30px rgba(76, 29, 149, .1); --ga-shadow-lift: 0 0 0 .5px rgba(124, 58, 237, .08) inset, 0 20px 44px rgba(76, 29, 149, .16); } /* ---------------------------------------------------------------------- * * Base * ---------------------------------------------------------------------- */ html, body { background-color: var(--ga-bg) !important; color: var(--ga-fg); font-family: "Inter", "Nunito", -apple-system, "Segoe UI", sans-serif; } /* style-liberty-dark.css hardcodes .container-fluid to #070a29 - this is the actual "gap between cards" color on every page, independent of --ga-bg */ .container-fluid { background-color: transparent !important; } body { background: var(--ga-bg) !important; background-attachment: fixed; } ::selection { background: rgba(167, 139, 250, .35); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, .35); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, .55); } a { color: var(--ga-accent); } a:hover, a:focus { color: var(--ga-accent-2); } h1, h2, h3, h4, h5, h6 { color: var(--ga-fg); font-weight: 800; letter-spacing: -.01em; } .text16, .text18, .text24, .text30 { color: var(--ga-accent) !important; } /* ---------------------------------------------------------------------- * * Top bar / header * ---------------------------------------------------------------------- */ .header, .sticky-header .header { background: var(--ga-glass) !important; background-image: none !important; border-bottom: 1px solid var(--ga-border); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(0, 0, 0, .35); } .menu-right, .user-panel-top { background: transparent !important; } /* GA brand mark + quick-access chip rail, injected at the left of the header */ .ga-topbar-wrap { padding-top: .35rem; padding-bottom: .3rem; padding-right: 6.5rem; border-bottom: 1px solid var(--ga-border); } .ga-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: .2rem .1rem; } .ga-topbar-left, .ga-topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .ga-topbar-right { gap: .5rem; } .ga-beta-notice { margin: 0; color: var(--ga-fg-faint) !important; font-size: 12px; white-space: nowrap; } .ga-topbar-right .user-dropdown-details, .ga-topbar-right .profile_details, .ga-topbar-right .profile_details > ul { display: flex; align-items: center; margin: 0; padding: 0; } .ga-topbar-right .profile_details > ul { list-style: none; } .ga-topbar-right .profile_img img { width: 32px; height: 32px; } /* pin the account avatar to the top-right corner of the header, above everything else in the utility rail */ .ga-topbar-right .user-dropdown-details { position: absolute; top: .55rem; right: 1rem; z-index: 5; } .ga-topbar-wrap { position: relative; } /* the profile dropdown panel — Bootstrap's own .dropdown-menu already sets display:block/li stacking; the rule above only targets the *trigger* wrapper (.profile_details > ul), never .drp-mnu, so this stays a normal vertical list */ .drp-mnu { min-width: 220px; padding: .5rem 0; } .drp-mnu li { display: block; width: 100%; } .drp-mnu li a { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; white-space: nowrap; } .drp-mnu .user-info { padding: .4rem 1rem .6rem; border-bottom: 1px solid var(--ga-border); margin-bottom: .3rem; } .ga-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--ga-fg) !important; text-decoration: none !important; white-space: nowrap; } .ga-brand:hover { color: var(--ga-fg) !important; } .ga-brand__logo { width: 128px !important; height: 35px !important; max-width: 128px !important; max-height: 35px !important; object-fit: contain; display: block; flex: 0 0 auto; /* the SVG's navy/purple/white fills are fixed, not currentColor — the logo was drawn for a light backdrop (navy + purple read against white), so give it a permanent light chip regardless of site theme */ background: #f5f3fb; border-radius: var(--ga-radius-sm); padding: .3rem .55rem; transition: transform .25s var(--ga-spring, ease); } .ga-brand:hover .ga-brand__logo { transform: scale(1.04); } .ga-chip-rail { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } /* live game search, ported from the "new" codebase's search box */ .ga-game-search { position: relative; width: 220px; flex: 0 0 auto; } .ga-game-search__icon { position: absolute; top: 50%; left: .9rem; transform: translateY(-50%); color: var(--ga-fg-faint); font-size: 12px; pointer-events: none; z-index: 1; } .ga-game-search input, #ga-game-search-input { width: 100%; background: var(--ga-glass-soft); border: 1px solid var(--ga-border); border-radius: var(--ga-radius-pill); color: var(--ga-fg); font-size: 12.5px; /* the generic input[type="text"] rule under "Forms" below sets its own padding with !important; matched specificity meant it was winning (even with !important added here too) and crushing the left padding down to .9rem - collapsing the reserved space for .ga-game-search__icon so the icon sat directly on top of the placeholder text. The #id selector adds enough specificity to actually win regardless of !important/order. */ padding: .42rem .9rem .42rem 2.4rem !important; outline: none; transition: border-color .15s ease, background .15s ease; } .ga-game-search input::placeholder { color: var(--ga-fg-faint); } .ga-game-search input:focus { border-color: var(--ga-border-hi); background: rgba(167, 139, 250, .1); } .ga-game-search .ga-search-results { width: min(720px, 92vw); max-height: 75vh; padding: .6rem; } .ga-game-search .ga-search-result { padding: .55rem .7rem; } .ga-game-search .ga-search-result__img { width: 64px; height: 36px; border-radius: 8px; } .ga-game-search .ga-search-result__name { font-size: 13.5px; } .ga-search-results div.ga-search-result { display: flex !important; flex-direction: row !important; align-items: center !important; gap: .6rem; padding: .4rem .5rem; border-radius: var(--ga-radius-sm); color: var(--ga-fg-muted) !important; -webkit-tap-highlight-color: transparent; } .ga-search-results div.ga-search-result:hover { background: rgba(167, 139, 250, .16) !important; } .ga-search-result__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit !important; text-decoration: none !important; } .ga-search-result__name:hover { color: #fff !important; } .ga-search-result__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--ga-radius-sm); color: var(--ga-fg-muted) !important; text-decoration: none !important; } .ga-search-result__icon:hover { background: rgba(167, 139, 250, .25) !important; color: #fff !important; } .ga-search-result__img { display: flex; align-items: center; justify-content: center; width: 64px; height: 36px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; background: var(--ga-glass-soft); color: var(--ga-fg-faint); font-size: 14px; } .ga-search-result__img img { width: 100%; height: 100%; /* Steam capsule art is a wide rectangle - contain (not cover) so the whole image shows instead of being cropped/zoomed into a square */ object-fit: contain; display: block; } .ga-search-result__name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .ga-game-search { width: 160px; } } .ga-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: var(--ga-radius-pill); background: var(--ga-glass-soft); border: 1px solid var(--ga-border); color: var(--ga-fg-muted) !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; transition: all .18s ease; } .ga-chip { -webkit-tap-highlight-color: transparent; } .ga-chip:hover, .ga-chip:focus, .ga-chip:active, .ga-chip:visited { color: #fff !important; border-color: var(--ga-border-hi); background: rgba(124, 58, 237, .55); transform: translateY(-1px); outline: none; } .ga-chip .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ga-teal); box-shadow: 0 0 0 3px rgba(45, 212, 191, .18); } .ga-utility-rail { display: flex; align-items: center; gap: .4rem; } .ga-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--ga-glass-soft); border: 1px solid var(--ga-border); color: var(--ga-fg-muted); font-size: 14px; cursor: pointer; transition: all .18s ease; } .ga-theme-toggle:hover { color: #fff; border-color: var(--ga-border-hi); background: rgba(167, 139, 250, .16); } .ga-lang-switch .dropdown-menu { min-width: 150px; } .ga-lang-switch .dropdown-menu a.active { color: #fff !important; background: rgba(167, 139, 250, .16); } .ga-banner-btn .btn, .menu-right .btn-primary, .menu-right .btn-danger { border-radius: var(--ga-radius-pill) !important; border: 1px solid var(--ga-border-hi) !important; background: var(--ga-gradient) !important; padding: .4rem 1rem !important; font-size: 12.5px !important; font-weight: 700 !important; box-shadow: 0 6px 18px rgba(124, 58, 237, .3) !important; } .menu-right .btn a { color: #fff !important; text-decoration: none !important; } .menu-right .text14 { color: var(--ga-fg-faint) !important; font-size: 12px; } /* user dropdown */ .profile_img img { border: 2px solid var(--ga-border-hi); } .user-active { background: var(--ga-teal) !important; } .user-anon { background: var(--ga-fg-faint) !important; } .dropdown-menu, .drp-mnu { background: var(--ga-glass-strong) !important; border: 1px solid var(--ga-border) !important; border-radius: var(--ga-radius-sm) !important; box-shadow: var(--ga-shadow-lift) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .dropdown-menu .user-info .user-name { color: var(--ga-fg) !important; } .dropdown-menu li a, .drp-mnu li a { color: var(--ga-fg-muted) !important; } .dropdown-menu li a:hover, .drp-mnu li a:hover { background: rgba(167, 139, 250, .14) !important; color: #fff !important; } /* Bootstrap tooltips (data-toggle="tooltip") - style-liberty-dark.css leaves these hardcoded to a white background regardless of theme */ .tooltip-inner { background-color: var(--ga-glass-strong) !important; color: var(--ga-fg) !important; border: 1px solid var(--ga-border-hi) !important; box-shadow: var(--ga-shadow-lift); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--ga-border-hi); } .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--ga-border-hi); } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--ga-border-hi); } .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--ga-border-hi); } /* per-row "..." actions menu (gb_last_template.php's image column) */ .ga-row-actions-wrap { position: relative; } .ga-row-actions { position: absolute; top: -4px; right: -4px; opacity: 0; transition: opacity .15s ease; } tr:hover .ga-row-actions, .ga-row-actions:focus-within { opacity: 1; } .ga-row-actions__toggle { background: var(--ga-glass-strong) !important; border: 1px solid var(--ga-border) !important; color: var(--ga-fg) !important; border-radius: 50% !important; width: 22px; height: 22px; line-height: 1; padding: 0 !important; font-weight: 800; } .ga-row-actions .dropdown-menu { left: 40px !important; border: 1px solid #fff !important; } .ga-row-actions .dropdown-item { color: var(--ga-fg-muted) !important; font-size: 12.5px; padding: .4rem .8rem; white-space: nowrap; } .ga-row-actions .dropdown-item:hover { background: rgba(167, 139, 250, .14) !important; color: #fff !important; } /* ---------------------------------------------------------------------- * * Layout — the old fixed left sidebar is gone; elem-sidebar-menu.php now * renders a horizontal mega-menu bar (.ga-hmenu) stacked on top of the * header bar. Both are fixed; the template's own left-offset rules * (written for the 250px/60px sidebar) are neutralised here. * ---------------------------------------------------------------------- */ .main-content { margin-left: 0 !important; } .header.sticky-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; /* must stay above .ga-hmenu (2060) - the game-search results dropdown (.ga-search-results) lives inside this header and extends down over the .ga-hmenu bar beneath it; when .ga-hmenu was raised above this header's old 1035, the hmenu bar started painting over that dropdown instead of the other way around, hiding search results behind it. */ z-index: 2070; } .content-top-gap { margin-top: 0 !important; padding-top: calc(var(--ga-stack-height, 148px) - 20px) !important; padding-left: .5rem !important; } /* ---------------------------------------------------------------------- * * Horizontal mega-menu (replaces the old vertical sidebar) * ---------------------------------------------------------------------- */ .ga-hmenu { position: fixed; top: var(--ga-header-height, 60px); left: 0; right: 0; /* must stay above .ga-menu-backdrop (2050) - .ga-mega dropdown panels are descendants of this element with no z-index of their own, so they inherit whatever stacking context .ga-hmenu establishes here. When the backdrop was raised to sit above page widgets like DataTables' Buttons toolbar, it ended up sitting above the open mega-menu too, so the backdrop (not the menu) caught hover/clicks - Bootstrap's dropdown then saw focus/hover "leave" immediately and auto-closed it (the "shows and disappears" symptom). */ z-index: 2060; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-height: 42px; padding: .2rem 1rem; background: var(--ga-glass-strong); border-bottom: 1px solid var(--ga-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); /* deliberately NOT overflow:auto/hidden here — .ga-mega dropdown panels are positioned relative to this element and need to hang below it; any overflow other than visible on this box would clip them */ } .ga-menu-search { position: relative; flex: 0 0 auto; width: 200px; margin: 0; } .ga-menu-search input { width: 100%; background: var(--ga-glass-soft); border: 1px solid var(--ga-border); border-radius: var(--ga-radius-pill); color: var(--ga-fg); font-size: 12.5px; padding: .4rem .9rem; outline: none; transition: border-color .15s ease, background .15s ease; } .ga-menu-search input::placeholder { color: var(--ga-fg-faint); } .ga-menu-search input:focus { border-color: var(--ga-border-hi); background: rgba(167, 139, 250, .1); } .ga-search-results { display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 340px; max-height: 60vh; overflow-y: auto; background: var(--ga-glass-strong); border: 1px solid var(--ga-border); border-radius: var(--ga-radius-sm); box-shadow: var(--ga-shadow-lift); padding: .4rem; z-index: 1040; white-space: normal; } .ga-search-results a { display: flex; align-items: baseline; gap: .4rem; padding: .4rem .6rem; border-radius: var(--ga-radius-sm); color: var(--ga-fg-muted) !important; font-size: 12.5px; text-decoration: none !important; } .ga-search-results a .fa { font-size: 10px; color: var(--ga-fg-faint); flex: 0 0 auto; margin-top: .25em; } .ga-search-results a:hover { background: rgba(167, 139, 250, .16); color: #fff !important; } .ga-search-results a:hover .fa { color: #fff; } .ga-search-empty { padding: .5rem .6rem; color: var(--ga-fg-faint); font-size: 12.5px; } .ga-search-result-heading { padding: .5rem .6rem .2rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ga-accent); } .ga-search-result-heading:not(:first-child) { margin-top: .3rem; border-top: 1px solid var(--ga-border); padding-top: .5rem; } .ga-hmenu-list { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; } .ga-hmenu-item { position: static; } .ga-hmenu-link { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: var(--ga-radius-pill); color: var(--ga-fg-muted) !important; font-size: 13px; font-weight: 700; text-decoration: none !important; background: transparent; white-space: nowrap; border: 1px solid transparent; cursor: pointer; } .ga-hmenu-link .fa { font-size: 12px; color: var(--ga-accent); opacity: .9; } .ga-hmenu-link:hover, .ga-hmenu-item.show .ga-hmenu-link { color: #fff !important; background: rgba(167, 139, 250, .16); border-color: var(--ga-border-hi); } .ga-menu-backdrop { position: fixed; inset: 0; /* well above any individual page's own widgets - DataTables' Buttons extension in particular defaults its column-visibility/export toolbar to z-index ~2002+ (by design, so it floats above everything on its own page), which was poking through above the old 1025 backdrop on data-table-heavy pages like strank_popupcoming - only part of the screen was actually blurred/dimmed. */ z-index: 2050; background: rgba(5, 3, 12, .75); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .ga-menu-backdrop.active { opacity: 1; pointer-events: auto; } .ga-mega { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 1.1rem 1.4rem; border: none; border-top: 1px solid var(--ga-border); border-radius: 0 0 var(--ga-radius) var(--ga-radius); background: var(--ga-glass-strong) !important; box-shadow: var(--ga-shadow-lift) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); column-count: 4; column-gap: 1.75rem; max-height: calc(100vh - 70px); overflow-y: auto; } @media (max-width: 1100px) { .ga-mega { column-count: 3; } } @media (max-width: 820px) { .ga-mega { column-count: 2; } } @media (max-width: 560px) { .ga-mega { column-count: 1; left: 0; right: 0; } } .ga-mega-group { break-inside: avoid; margin: 0 0 1.1rem; } .ga-mega-heading { display: flex; align-items: center; gap: .45rem; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--ga-fg); margin-bottom: .35rem; padding-bottom: .35rem; border-bottom: 1px solid var(--ga-border); } .ga-mega-heading .fa { color: var(--ga-accent); } .ga-mega-subhead { display: block; margin: .5rem 0 .15rem; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ga-fg-faint); } .ga-mega-link { display: flex; align-items: baseline; gap: .4rem; padding: .3rem .4rem; border-radius: var(--ga-radius-sm); color: var(--ga-fg-muted) !important; font-size: 12.5px; line-height: 1.35; text-decoration: none !important; white-space: normal; } .ga-mega-link .fa { font-size: 10px; color: var(--ga-fg-faint); flex: 0 0 auto; margin-top: .25em; } .ga-mega-link:hover { background: rgba(167, 139, 250, .16); color: #fff !important; } .ga-mega-link:hover .fa { color: #fff; } @media (max-width: 768px) { .ga-menu-search { width: 140px; } } /* Mobile nav toggle button - hidden entirely above the collapse breakpoint below, so it never affects laptop/desktop (.ga-hmenu stays exactly as it was: a horizontal bar with every item visible). */ .ga-hmenu-mobile-toggle { display: none; } /* Below this width a horizontal strip of ~8 pill links plus dropdowns simply doesn't fit - the old fallback (flex-wrap:nowrap + overflow-x:auto) turned it into a horizontally-scrolling strip, which meant hunting sideways through unlabeled-until-tapped pills to find a section, on top of a separate horizontal scroll for the page itself. Replaced with a standard mobile pattern: a hamburger button reveals #ga-main-nav as a full-width vertical list (see #ga-hmenu-mobile-toggle's click handler in elem-sidebar-menu.php); each item's own dropdown-toggle still works exactly as before (Bootstrap's dropdown plugin), just restyled below to expand its section inline instead of as an absolutely-positioned panel. */ @media (max-width: 700px) { .ga-menu-search { display: none; } .ga-hmenu { flex-wrap: nowrap; min-width: 0; } .ga-hmenu-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--ga-radius-sm); border: 1px solid var(--ga-border); background: var(--ga-glass-soft); color: var(--ga-fg); font-size: 16px; } .ga-hmenu-list { display: none; } .ga-hmenu.ga-mobile-nav-open .ga-hmenu-list { display: flex; flex-direction: column; align-items: stretch; gap: .15rem; position: fixed; top: var(--ga-stack-height, 100px); left: 0; right: 0; max-height: calc(100vh - var(--ga-stack-height, 100px)); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--ga-glass-strong); border-bottom: 1px solid var(--ga-border); padding: .5rem; margin: 0; z-index: 2060; /* above .ga-menu-backdrop's 2050 - it needs to stay visible/tappable above the now-stronger backdrop */ } .ga-hmenu.ga-mobile-nav-open .ga-hmenu-link { width: 100%; justify-content: flex-start; font-size: 19px; padding: .7rem .85rem; } /* the mega-panel's own type scale (12/12.5/10.5px) was tuned for a compact desktop dropdown - bump it up now that it's the actual mobile menu text */ .ga-hmenu.ga-mobile-nav-open .ga-mega-heading { font-size: 16px; } .ga-hmenu.ga-mobile-nav-open .ga-mega-subhead { font-size: 13px; } .ga-hmenu.ga-mobile-nav-open .ga-mega-link { font-size: 17px; padding: .5rem .4rem; } /* belt-and-braces for the list's own overflow-y:auto (declared above) - iOS Safari in particular can refuse to scroll a fixed-position element if the body behind it is still scrollable, since a touch there can get interpreted as scrolling the body instead of this panel. Toggled via JS (see elem-sidebar-menu.php) rather than :has() for broader support. */ body.ga-mobile-nav-locked { overflow: hidden; } /* each section's mega-panel, inline instead of an absolutely-positioned overlay - there's no room to hang a 4-column panel off a pill in a 280px-wide vertical list */ .ga-hmenu.ga-mobile-nav-open .ga-mega { /* Bootstrap's dropdown plugin positions .dropdown-menu via Popper.js, which sets its own inline position/transform on the element - an inline style beats a plain (non-!important) rule here regardless of source order, so both need !important to actually win and keep the panel inline in the vertical list instead of floating near the toggle. */ position: static !important; transform: none !important; inset: auto !important; display: block !important; column-count: 1; max-height: none; padding: .3rem .5rem .6rem 1.5rem; margin: 0; border: none; border-top: none; border-radius: 0; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Bootstrap's dropdown plugin toggles .show and sets display via its own JS/CSS; since panels are no longer absolutely positioned here there's nothing to visually hide until opened, so hide by the .show class ourselves instead. */ .ga-hmenu.ga-mobile-nav-open .ga-mega:not(.show) { display: none !important; } } /* ---------------------------------------------------------------------- * * bootstrap-select "filters" widgets (combobox/search panels used across * the report pages). Their own bootstrap-select.css is linked inline, * late in the page, so every rule here needs !important to win regardless * of load order. * ---------------------------------------------------------------------- */ .bootstrap-select .dropdown-toggle, .bootstrap-select > .btn, .bootstrap-select .btn-light, .bootstrap-select .btn-default { background: var(--ga-glass-soft) !important; border: 1px solid var(--ga-border) !important; color: var(--ga-fg) !important; border-radius: var(--ga-radius-sm) !important; box-shadow: none !important; padding: .6rem 1rem !important; } .bootstrap-select .dropdown-toggle:hover, .bootstrap-select .dropdown-toggle:focus, .bootstrap-select.open .dropdown-toggle { border-color: var(--ga-border-hi) !important; background: rgba(167, 139, 250, .14) !important; color: #fff !important; } /* bootstrap's stock .btn-light:focus box-shadow is a light gray/white glow - renders as a stark white ring against this dark theme; and on keyboard focus specifically (:focus-visible, not plain :focus/click) Chrome/Firefox also draw their own native focus ring on top regardless of box-shadow, which is the actual white ring reported here. Replace both with the same violet glow used on .form-control:focus. */ .bootstrap-select .dropdown-toggle:focus, .bootstrap-select .dropdown-toggle.focus, .bootstrap-select .dropdown-toggle:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, .16) !important; } .bootstrap-select .dropdown-toggle .filter-option, .bootstrap-select .dropdown-toggle .filter-option-inner-inner, .bootstrap-select .dropdown-toggle .caret { color: inherit !important; } .bootstrap-select .dropdown-menu, .bootstrap-select .dropdown-menu.inner { background: var(--ga-glass-strong) !important; border: 1px solid var(--ga-border) !important; border-radius: var(--ga-radius-sm) !important; box-shadow: var(--ga-shadow-lift) !important; } .bootstrap-select .dropdown-menu li a, .bootstrap-select .dropdown-menu .dropdown-item, .bootstrap-select .no-results { color: var(--ga-fg-muted) !important; background: transparent !important; } .bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li.selected a, .bootstrap-select .dropdown-menu li.active a { background: rgba(167, 139, 250, .22) !important; color: #fff !important; } .bootstrap-select .bs-searchbox { padding: 4px 2px !important; } .bootstrap-select .bs-searchbox .form-control, .bootstrap-select .bs-searchbox input { background: var(--ga-glass-soft) !important; color: var(--ga-fg) !important; border: 1px solid var(--ga-border) !important; width: 100% !important; box-sizing: border-box; } .bs-searchbox, .bs-actionsbox, .bs-donebutton, .bs-caret { background: transparent !important; } /* mirrored scrollbar above wide tables, synced with .table-responsive's own bottom scrollbar via assets/js/scripts.js - see ga_add_top_scrollbars() */ .ga-table-top-scroll { overflow-x: auto; overflow-y: hidden; height: 14px; margin-top: .6rem; margin-bottom: .6rem; } .ga-table-top-scroll > div { height: 1px; } .bootstrap-select .glyphicon, .bootstrap-select .bs-caret .caret { color: var(--ga-fg-muted) !important; } /* bootstrap-select copies the original