/* ========================================================================= DragonInit — app-wide Bootstrap re-skin (SCOPED: .di-app) Re-themes the Bootstrap Slate classes used by every in-app page rendered under Views/Shared/_Layout.cshtml to the di-* dark brand. Loaded GLOBALLY from _Layout (after dadbt6.styles.css) and scoped under .di-app (on the @RenderBody wrapper), so the di-nav/di-footer chrome and the Bootstrap-free landing (_LandingLayout, which never loads this sheet) are untouched. This is the generalized twin of di-tracker.css: the generic override layer (di-tracker.css:34-142) lives here re-scoped .di-tracker -> .di-app; the tracker keeps only its bespoke components (.di-party/.di-hpbar/#battlelog...). Keeps all Bootstrap JS + modals intact (re-skin only — DADBT-31). Base is Slate (already dark), so this is a brand refinement, not a light->dark conversion. Bootstrap .bg-* and .text-* utilities are !important, so those overrides are !important too; component classes win on scope. ========================================================================= */ /* App-surface tokens (--app-bg/--panel/--row/…) live in di-core.css :root — defined globally (di-core loads on every page) so di-tracker.css resolves them independently of this sheet, and overlays Bootstrap relocates to still resolve them. */ /* App-wide brand background + body text. Un-prefixed body rule brands every _Layout page's backdrop (behind the semi-transparent di-nav/di-footer). DADBT-60: mirror the landing's obsidian base + the two radial glows (from di-home.css) so every app page shares the landing's "crisp" background, and the shared obsidian header + black-overlay footer read as one color instead of three. `html body` (specificity 0,0,2) so this reliably beats Bootstrap Slate's own `body{background-color:var(--bs-body-bg)}` (#272b30) regardless of load order. */ html body{ background: radial-gradient(1100px 600px at 78% -8%, rgba(138,124,240,.16), transparent 60%), radial-gradient(900px 520px at 12% 4%, rgba(233,162,59,.10), transparent 55%), var(--app-bg); } .di-app{ color:var(--vellum); font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif; } .di-app .mono,.di-app .di-mono{font-family:"Space Mono",ui-monospace,monospace} /* Overlay fallbacks WITHOUT the .di-app prefix — theme modals/dropdowns/backdrop whether or not Bootstrap reparents them to (outside .di-app). Loaded on every _Layout page (never the landing), so this themes all app overlays. */ .modal-content{background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--vellum)!important;border-radius:14px} .modal-header{background:var(--obsidian-2)!important;border-bottom:1px solid var(--line)!important;color:var(--vellum)!important} .modal-body{background:var(--panel)!important;color:var(--vellum)!important} .modal-footer{background:var(--panel-2)!important;border-top:1px solid var(--line)!important} .modal-title{color:var(--vellum)!important} .dropdown-menu,.dropdown-primary{background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--vellum)!important} .dropdown-item{color:var(--vellum-dim)!important} .dropdown-item:hover{background:var(--surface-hi)!important;color:var(--vellum)!important} .modal-backdrop,.modal-backdrop.show{background-color:#000!important;opacity:.6!important} /* ---------- surface / text utility overrides (Bootstrap = !important) ---------- */ .di-app .bg-primary{background:var(--panel)!important} .di-app .bg-dark{background:var(--obsidian-2)!important} .di-app .bg-secondary{background:var(--surface-hi)!important} .di-app .bg-light{background:var(--panel-2)!important} .di-app .bg-info{background:var(--arcane)!important} .di-app .bg-danger{background:rgba(239,68,68,.85)!important} .di-app .bg-success{background:rgba(233,162,59,.30)!important} .di-app .bg-warning{background:rgba(233,162,59,.22)!important;color:var(--ember-hi)!important} .di-app .text-light{color:var(--vellum)!important} .di-app .text-dark{color:var(--vellum)!important} .di-app .text-primary{color:var(--vellum-dim)!important} .di-app .text-secondary{color:var(--vellum-dim)!important} .di-app .text-muted{color:var(--muted)!important} .di-app .text-danger{color:var(--hp-crit)!important} .di-app .text-success{color:var(--hp-full)!important} .di-app .text-info{color:var(--arcane)!important} .di-app .text-warning{color:var(--ember)!important} /* Links get the arcane colour - but NOT anchors that are really buttons. `.di-app a` is specificity (0,1,1) and beats `.di-btn-primary` (0,1,0), so without this exclusion every in the app rendered arcane-on-ember: poor contrast, and not what the button primitive says it should look like. Caught S10 D8 on the new /support CTA, but it was hitting every anchor-button already - including the DADBT-56 "Create your first campaign". */ .di-app a:not(.di-btn){color:var(--arcane)} /* ---------- buttons ---------- */ .di-app .btn{ font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;border-radius:9px; border:1px solid transparent;transition:transform .14s,box-shadow .14s,background .14s,border-color .14s; } .di-app .btn:focus-visible{outline:3px solid var(--arcane);outline-offset:2px;box-shadow:none} .di-app .btn-primary{ background:linear-gradient(180deg,var(--ember-hi),var(--ember))!important;color:#241703!important; border-color:transparent!important;box-shadow:0 1px 0 rgba(255,255,255,.30) inset,0 10px 22px -14px rgba(233,162,59,.8); } .di-app .btn-primary:hover{transform:translateY(-1px)} .di-app .btn-secondary{background:rgba(255,255,255,.03)!important;color:var(--vellum-dim)!important;border-color:var(--line)!important} .di-app .btn-secondary:hover{border-color:var(--muted)!important;color:var(--vellum)!important} .di-app .btn-danger{background:rgba(239,68,68,.14)!important;color:#ff9d9d!important;border-color:rgba(239,68,68,.5)!important} .di-app .btn-danger:hover{background:rgba(239,68,68,.24)!important} .di-app .btn-success{background:rgba(74,222,128,.12)!important;color:#8ff0b4!important;border-color:rgba(74,222,128,.45)!important} .di-app .btn-success:hover{background:rgba(74,222,128,.22)!important} .di-app .btn-dark{background:var(--panel-2)!important;color:var(--vellum-dim)!important;border-color:var(--line)!important} .di-app .btn-outline-secondary,.di-app .btn-outline-light{background:rgba(255,255,255,.03)!important;color:var(--vellum-dim)!important;border-color:var(--line)!important} .di-app .btn-outline-secondary:hover,.di-app .btn-outline-light:hover{border-color:var(--muted)!important;color:var(--vellum)!important} .di-app .btn-outline-success{background:transparent!important;color:#8ff0b4!important;border-color:rgba(74,222,128,.45)!important} /* active/selected toggle look (KO adds bg-success/bold) */ .di-app .btn.bg-success{background:rgba(233,162,59,.30)!important;color:var(--ember-hi)!important;border-color:var(--ember)!important} .di-app .btn-close,.btn-close{background-color:transparent!important;border:0!important;filter:invert(1) grayscale(1) brightness(2)!important;opacity:.85} .di-app .btn-close:hover,.btn-close:hover{opacity:1} /* ---------- forms ---------- */ .di-app .form-control,.di-app .form-control-sm,.di-app .form-select,.di-app select,.di-app textarea,.di-app input[type=text],.di-app input[type=number],.di-app input[type=email],.di-app input[type=password]{ background:var(--panel-2)!important;color:var(--vellum)!important;border:1px solid var(--line)!important;border-radius:8px; } .di-app .form-control::placeholder,.di-app input::placeholder{color:#5f5876} .di-app .form-control:focus,.di-app .form-select:focus,.di-app input:focus,.di-app textarea:focus{ border-color:var(--arcane)!important;box-shadow:0 0 0 .15rem rgba(138,124,240,.25)!important;outline:none; } .di-app input.bg-light,.di-app .bg-light.form-control-sm{background:var(--panel-2)!important;color:var(--vellum)!important;border-color:var(--line)!important} .di-app .form-check-input{background-color:var(--panel-2)!important;border-color:var(--line)} .di-app .form-check-input:checked{background-color:var(--ember)!important;border-color:var(--ember)} .di-app .form-label,.di-app .col-form-label,.di-app label{color:var(--vellum-dim)} /* in-dialog section headers stay in the body font — Grenze is reserved for the dialog title (.modal-title) */ .di-app label.text-light,.modal-content label.text-light{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;font-size:1em;letter-spacing:.01em} /* ---------- headings -> Grenze display font (brand) ---------- */ .di-app h1,.di-app h2,.di-app h3,.di-app h4,.di-app h5,.di-app h6{font-family:"Grenze Gotisch","Hanken Grotesk",serif;color:var(--vellum)} /* ---------- modals (scoped; the un-prefixed rules above catch reparented ones) ---------- */ .di-app .modal-content{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:14px;color:var(--vellum)} .di-app .modal-header{background:var(--obsidian-2)!important;border-bottom:1px solid var(--line)!important;color:var(--vellum)!important} .di-app .modal-header.bg-dark{background:var(--obsidian-2)!important} .di-app .modal-body{background:var(--panel)!important;color:var(--vellum)} .di-app .modal-footer{background:var(--panel-2)!important;border-top:1px solid var(--line)!important} .di-app .modal-title{font-family:"Grenze Gotisch",serif;color:var(--vellum)} /* ---------- nav-tabs (sub-header + in-modal tabs) ---------- */ .di-app .nav-tabs{border-bottom:1px solid var(--line)} .di-app .nav-tabs .nav-link{color:var(--vellum-dim);border:1px solid transparent;background:transparent} .di-app .nav-tabs .nav-link:hover{color:var(--vellum);border-color:var(--line-soft)} .di-app .nav-tabs .nav-link.active{color:var(--ember);background:var(--panel);border-color:var(--line) var(--line) var(--panel)} /* ---------- campaign tab strip: wrap/scroll (DADBT-83, S10) ---------- The strip had NO overflow handling. It fit while there were five tabs; Battle Report makes six and Progression (DADBT-84) will make seven, at which point a phone silently clips the last one - an unreachable tab, not just an ugly one. Scroll horizontally rather than wrap, so the tabs stay on one line and the bottom border still reads as a single strip. */ .di-app .nav-tabs.di-tabs-scroll{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch} .di-app .nav-tabs.di-tabs-scroll .nav-item{flex:0 0 auto} .di-app .nav-tabs.di-tabs-scroll .nav-link{white-space:nowrap} /* a hairline scrollbar, so the strip doesn't gain a chunky grey bar on desktop */ .di-app .nav-tabs.di-tabs-scroll::-webkit-scrollbar{height:3px} .di-app .nav-tabs.di-tabs-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px} /* ---------- nav-pills (kill the leftover #1b6ec2 from _Layout.cshtml.css) ---------- */ .di-app .nav-pills .nav-link{color:var(--vellum-dim)} .di-app .nav-pills .nav-link.active{background:var(--ember)!important;color:#241703!important} /* ---------- dropdown menus (kebabs) ---------- */ .di-app .dropdown-menu,.di-app .dropdown-primary{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:10px;box-shadow:0 24px 48px -24px rgba(0,0,0,.85)} .di-app .dropdown-item{color:var(--vellum-dim)} .di-app .dropdown-item:hover{background:var(--surface-hi);color:var(--vellum)} .di-app .dropdown-item.text-danger:hover{background:rgba(239,68,68,.14)} .di-app .dropdown-menu hr{border-color:var(--line);opacity:.6} /* ---------- tables ---------- */ .di-app .table{color:var(--vellum);--bs-table-bg:transparent} .di-app .table > :not(caption) > * > *{background:transparent;color:inherit;border-color:var(--row-line)} .di-app .table-sm th,.di-app .table-sm td{padding:.25rem .4rem;vertical-align:middle} .di-app .table thead th,.di-app .table th{ font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);font-weight:400;border-bottom:1px solid var(--row-line); } /* striped/hover grids (e.g. Monsters library) */ .di-app .table-striped > tbody > tr:nth-of-type(odd) > *{background:rgba(255,255,255,.02);color:inherit} .di-app .table-hover > tbody > tr:hover > *{background:var(--surface-hi);color:inherit} /* ---------- breadcrumb ---------- */ .di-app .breadcrumb{background:transparent;padding:.4rem 0;margin-bottom:.4rem} .di-app .breadcrumb a{color:var(--vellum-dim)} .di-app .breadcrumb a:hover{color:var(--vellum)} .di-app .breadcrumb-item.active,.di-app .breadcrumb-item+.breadcrumb-item::before{color:var(--muted)} /* ---------- badges ---------- */ .di-app .badge{font-weight:600} /* ---------- progress bars (charge bars + Stats CSS bar-graphs) ---------- */ .di-app .progress{background:rgba(255,255,255,.06)!important;border-radius:6px} .di-app .progress-bar{color:var(--vellum)!important} .di-app .progress-bar.bg-info{background:var(--arcane)!important;color:#241703!important} .di-app .progress-bar.bg-danger{background:var(--row-line)!important;color:var(--muted)!important} /* ---------- alerts (Privacy/Terms beta banner, Monsters SRD notice) ---------- */ .di-app .alert{background:var(--panel-2);border:1px solid var(--line);color:var(--vellum-dim);border-radius:10px} .di-app .alert-warning{background:rgba(233,162,59,.10);border-color:rgba(233,162,59,.35);color:var(--ember-hi)} .di-app .alert-secondary{background:rgba(138,124,240,.08);border-color:rgba(138,124,240,.28);color:var(--vellum-dim)} .di-app .alert a{color:var(--arcane)} /* ---------- input groups (Monsters filter toolbar) ---------- */ .di-app .input-group-text{background:var(--obsidian-2)!important;border:1px solid var(--line)!important;color:var(--muted)!important} /* ---------- misc ---------- */ .di-app .pointer{cursor:pointer} .di-app hr{border-color:var(--line)}