/* Canonical topbar typography for pages that adopted the shared renderer (assets/js/bo-topbar.js). Scoped to [data-bo-topbar] so it can never reach a page that has not opted in - the other ~146 pages keep their current sheets. WHAT IT LOCKS (and only this): the three type sizes the owner asked to unify. Nothing here touches height, padding, background or colour - those stay owned by the per-theme sheets, so real variants (e.g. `.admin-page-topbar{min-height:62px}`) keep working. Chosen values - these are the majority in this repo and what the adopted pages already compute, so adopting the sheet is a no-op for them: h1 22px / 900 (was: 26px/900 in reports*.css, 20px/800, 18px/800 in main-admin-detail, 28px/800 in bo-charcoal-cms, 17px in the *-md.css suite) .user-title-icon 36x36 box, 20px glyph (was: 40x40/18px, 38x38/19px, 36x36/18px) theme button 36x36 box, 18px glyph (was: 40x40/17px, 44x44) Values are written with !important because every one of those sheets also declares them with !important; the specificity here adds the [data-bo-topbar] attribute so this wins on adopted pages only. The reference geometry the component renders into (measured, unchanged by this sheet, kept here so phase 3 has the spec in one place): .report-topbar display:flex gap:12px padding:0 20px min-height:64px border-bottom:1px solid background:#FFF8EB .user-title-wrap display:flex gap:12px align-items:center .report-actions display:flex gap:12px align-items:center margin-left:auto */ /* 0. Same horizontal padding everywhere. A few page families inset the header 18px instead of 20px, which moves the whole right-hand cluster 2px sideways on a page switch. Desktop only - the narrow layout has its own padding and is deliberately left alone. */ /* The id-guard is the same idiom the theme sheets use (`:not(#bo-charcoal-off)`). A plain class chain tied with a later sheet here and lost, so this rule needs to sit above them rather than beside them. */ @media (min-width:1024px){ html:not(#bo-charcoal-off) body.report-body .report-shell .report-main .report-topbar[data-bo-topbar]{ padding-left:20px!important; padding-right:20px!important; } } /* 0b. Reserve the scrollbar gutter so a page that happens to scroll does not shift the whole header sideways. vip-level-edit measured clientWidth 1568 against 1574 elsewhere purely because its content is taller than the viewport, and that 6px moved the cluster with it. Reserving the gutter makes the usable width the same on every adopted page whether or not it scrolls. */ html:has(.report-topbar[data-bo-topbar]){ scrollbar-gutter:stable; } /* 0c. Same content frame width everywhere. The page body was inset 18px on most BO pages, 22px on the referral / member-deposit family and 16px on promotion / game, so the whole frame measured 1272px / 1264px / 1276px and looked narrower on some pages when paging. 18px is the majority. Desktop only, like the header inset above. The id-guard again out-ranks the referral family's own inset. */ @media (min-width:1024px){ /* Two id-guards, not one. `.report-content`'s inset is the one shell metric a page sheet also states: bo-charcoal-cms.css sets `padding: 10px 16px` for `.promotion-bonus-page` and `12px 16px 16px` for `.page-bonus-category-title` (promotion.html carries both body classes), and those selectors tie this rule exactly - 1 id / 4 classes / 2 elements. A tie is broken by order, and the order is not always the file order: the SPA router ADDS a swapped-in page's sheets and never re-inserts them, so a page entered from a swap can have bo-charcoal-cms.css AFTER bo-shell.css. Measured: with that sheet moved to the end of , the frame came back 16px inset (card left 276 vs 278, width 1239 vs 1235) - the owner's "整个设计会跑掉" screenshot measures the same 16px. The second id-guard makes the inset order-independent; it is the idiom this file already uses for the referral family's two-id guard below. */ html:not(#bo-charcoal-off):not(#bo-charcoal-legacy) body.report-body .report-shell .report-main .report-content{ padding-left:18px!important; padding-right:18px!important; } /* The referral family sets its own inset through a two-id guard, so a plain class chain ties with it; mirroring that selector and loading later wins the tie. */ html:not([data-bo-theme="dark"]) body:not(#bo-charcoal-off):not(#bo-charcoal-legacy).referral-page.report-body.bo-charcoal .report-content, html[data-bo-theme="dark"] body:not(#bo-charcoal-off):not(#bo-charcoal-legacy).referral-page.report-body.bo-charcoal .report-content{ padding-left:18px!important; padding-right:18px!important; } } /* 0c-1. The module row (auth.js MODULE_TABS) is the first child of .report-content, and it is drawn as a 1:1 copy of Admin Management's .mad-chrome row - so it takes the same 8px inset under the header that Admin Management's workspace carries. Left to the pages it inherited whatever .report-content padding they happened to declare: 18px on the Member and Transaction listing pages, 12px on referral, i.e. the same row at two heights on one page switch. This replaces the per-page rule that retired bo-group-tabs.css used to carry for the Member pages, and covers the Transaction module row with it. Desktop only, like the two insets above. */ @media (min-width:1024px){ html:not(#bo-charcoal-off) body.report-body .report-shell .report-main .report-content:has(> .bo-module-tabs){ padding-top:8px!important; } /* Referral's two-id guard again, mirrored for the same reason as 0c. */ html:not([data-bo-theme="dark"]) body:not(#bo-charcoal-off):not(#bo-charcoal-legacy).referral-page.report-body.bo-charcoal .report-content:has(> .bo-module-tabs), html[data-bo-theme="dark"] body:not(#bo-charcoal-off):not(#bo-charcoal-legacy).referral-page.report-body.bo-charcoal .report-content:has(> .bo-module-tabs){ padding-top:8px!important; } } /* 0c-2. The module row's BOTTOM spacing, on the pages whose content column has no gap of its own. 0c-1 nailed the row to the same 8px under the header everywhere, but its distance to the first content block still came from the page: the Member, Transaction, Promotion, VIP and Agent content columns are `display:flex; flex-direction:column` with a 16px gap, so there the row sat 16px above the first block, while the Design pages declare no gap at all - Banner Management's column is even `display:block` - so the row was welded to the card below it. 16px is what the majority already computes and what User Management shows, so every page that computed 0 gets exactly that: the six Design pages, Livechat Template when the Setting module joined (Setting measured again: Timezone 16, Duplicate IP 12, Compliance Policy 12, Livechat Template 0), and five of the seven Game Management pages - Provider, Provider Sessions, Game Category, Game Sub Category and Game all compute 0, while Provider Transactions and Provider Bet Report carry 16 of their own. The rule is scoped by page class on purpose - a container-level `gap` would also re-space every OTHER sibling on those pages, which is a different change nobody asked for. A page that already resolves to a gap of its own keeps it: Page Customize 14px (the same rhythm as Deposit Approval), Image To URL 16px, and Duplicate IP / Compliance Policy 12px. Desktop only, like the insets above; bo-module-tabs.css already carries 12px of its own Promotion Bonus (`promotion-workspace-page promotion-bonus-page`) joined the list after the owner reported its row welded to the card below - "图一tab的间距设计与图二不相符" against Promotion Debug, which already sat at 16px. It had never been measured: it appears in none of the lists above, and its column is `display:flex; flex-direction:column` with `row-gap:0px`. The other ten module pages DESIGN.md never recorded were measured at the same time and all already compute 16px of their own (the six Report-family pages, promotion-report, transaction-report, win-lose-report, agent-performance-report), so this is the only class the whitelist was missing. Measured with the row painted: gap = row bottom -> first block top. Desktop only, like the insets above; bo-module-tabs.css already carries 12px of its own for the narrow layout. */ @media (min-width:1024px){ html:not(#bo-charcoal-off) body.report-body:is(.banner-management-page,.site-customize-page,.advertisement-popup-page,.frontend-display-page,.social-page,.layout-section-page,.livechat-template-page,.page-game-provider,.provider-session-page,.page-game-category,.page-game-sub-category,.page-game,.promotion-bonus-page) .report-shell .report-main .report-content:has(> .bo-module-tabs) > .bo-module-tabs{ margin-bottom:16px!important; } } /* 0d. Sidebar rows. The BO rail drifts the same way the header did: the wallet family (member-wallet / wallet-ledger / member-deposit) ships its own rail metrics, so the same category sat 5px higher there than on User Management and the row text rendered at weight 800 instead of 900. Measured across 11 BO pages, 8 already resolve to the values pinned below, so this is the majority rather than a new opinion. .report-nav padding 12px 10px 10px, gap 3px (== the row drift source) top-level row weight 900, line-height 21px sub item weight 600, line-height 15.6px, padding 9px 38px 9px 10px The id-guard matches the idiom the theme sheets use so this wins on BO pages only. */ html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav{ padding:12px 10px 10px!important; gap:3px!important; } html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav > a, html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav .nav-group-btn{ font-size:14px!important; font-weight:900!important; line-height:21px!important; } /* Some themes put a -0.01em tracking on the OPEN group's button (bo-charcoal-shell.css: `.report-sidebar .nav-group.open > .nav-group-btn`), which the label span inherits as -0.14px at 14px. The wallet family never had it, so the very same row read cramped on one page and loose on another. Normalise the whole rail to no tracking - label spans included, since that is where it was actually inherited. */ html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav > a, html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav > a span, html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav .nav-group-btn, html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav .nav-group-btn span, html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav .report-sub, html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav .report-sub span, html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .bo-sidebar-logout span{ letter-spacing:normal!important; } html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav .report-sub{ font-size:13px!important; font-weight:600!important; line-height:15.6px!important; padding:9px 38px 9px 10px!important; } /* casino-overview-report resolved the sub label to 17.55px line-height against 15.6px everywhere else; pin the span too so the sub rows keep the same rhythm. */ html:not(#bo-charcoal-off) body.report-body .report-shell .report-sidebar .report-nav .report-sub span{ line-height:15.6px!important; } /* One rail width for the whole BO: 230px - the owner's value, carried in the tree by 1e87f664 (Security & Audit panel) and re-applied from their working tree after the sync. The tree briefly read 260px because reports.css and reports-dashboard-original.css each declare it twice in a :root block that came in with a stale-snapshot WIP commit (0da8f81d, "must not be merged as-is"); a first pass of this fix then read 250px off a live deployment that predates 1e87f664. Measured: 260x804 before, 230 after, on dashboard.html and member-wallet.html. The lock keeps the value here (the shell owns the rail's metrics) - `width` and custom properties sit outside the drift guard's metric list. */ html:not(#bo-charcoal-off) body.report-body{ --sidebar-w:230px; } /* 0e-pre. Rail rows: one padding for every row, and the pin's space reserved only where a pin can actually appear. bo-global-quicknav.css reserved `.report-nav a[data-menu-key]{padding-right:38px}` for the `.bo-sidebar-pin` button (26px wide at right:9px). Only rows get a pin - auth.js emits data-menu-key on plain links and on the nav-group-direct anchors, never on the group