/* ============================================================================ density.css — DynastyDb COMPACT density pass ---------------------------------------------------------------------------- A pro-tool density refinement. Tightens type weight, control padding, the primary-button glow, sidebar rows, and card/page padding — the things that made screens read "chunky". Uses the existing token contract; introduces NO new colors. HOW TO APPLY 1. Drop this file at DynastyDb/wwwroot/css/density.css 2. Load it LAST in the css chain (after bootstrap-overrides.css), e.g. in App.razor / _Host.cshtml / index.html : 3. Turn it on by adding the attribute to the root tag: (The Blazor host renders ; set it there, or via theme.js alongside data-theme / data-layout.) Everything is gated behind html[data-density="compact"], so it's a clean, reversible switch — remove the attribute to return to current production. The selectors mirror the real ones in bootstrap-overrides.css / layout.css / shared.css and carry !important to win against their existing !important. ============================================================================ */ /* Card + nav rhythm variables (read by .card-body / nav gap) */ html[data-density="compact"] { --card-padding: 0.95rem; --nav-item-gap: 0.7rem; /* Density tokens consumed by page-scoped .razor.css (defined in tokens.css). Scoped CSS can't select on this html attribute, but inherits these vars. */ --density-display-size: 1.6rem; --density-heading-size: 1.2rem; --density-hero-pad-y: 1.25rem; --density-page-pad: 1.1rem; --density-card-pad: 1rem; --density-section-gap: 1rem; --density-empty-state-pad: 1.9rem; --density-empty-icon-size: 1.9rem; --density-avatar-size: 48px; --density-table-pad-y: 0.5rem; --density-table-pad-x: 0.6rem; } /* ---- Page titles — drop the heavy 760 weight & oversized display --------- */ html[data-density="compact"] .page-title, html[data-density="compact"] article.content > .container-fluid.py-4 h1, html[data-density="compact"] article.content > .container-fluid.py-4 h2 { font-size: 1.55rem !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; } html[data-density="compact"] .page-subtitle { font-size: var(--text-xs) !important; } html[data-density="compact"] .page-header { margin-bottom: var(--spacing-md) !important; } html[data-density="compact"] article.content > .container-fluid.py-4 > .page-header:first-child, html[data-density="compact"] .dynasty-page > .page-header:first-child { padding-bottom: 0.7rem !important; } /* ---- Form controls — from 12·16 to 7·11 --------------------------------- */ html[data-density="compact"] .form-control, html[data-density="compact"] .form-select { padding: 7px 11px !important; font-size: 0.84rem !important; border-radius: var(--radius-sm) !important; } html[data-density="compact"] .form-label, html[data-density="compact"] label { font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-family: var(--font-mono) !important; color: var(--text-tertiary) !important; margin-bottom: 0.35rem !important; } /* ---- Buttons — lose the 800 weight, the fat padding, the huge glow ------- */ html[data-density="compact"] .btn { font-weight: 650 !important; font-size: 0.82rem !important; padding: 0.5rem 1rem !important; } html[data-density="compact"] .btn-sm { padding: 0.32rem 0.7rem !important; font-size: 0.76rem !important; } html[data-density="compact"] .btn-lg { padding: 0.62rem 1.25rem !important; font-size: 0.9rem !important; } html[data-density="compact"] .btn-primary { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent), 0 2px 9px var(--accent-primary-glow) !important; } html[data-density="compact"] .btn-primary:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent), 0 4px 14px var(--accent-primary-glow) !important; } /* ---- Sidebar — tighten the airy rows ------------------------------------ */ html[data-density="compact"] .sidebar .nav-link { min-height: 2rem !important; padding: 4px 10px !important; font-size: 0.83rem !important; margin: 0 10px !important; } html[data-density="compact"] .sidebar .nav-link i { font-size: 0.78rem !important; margin-right: 9px !important; } html[data-density="compact"] .sidebar .nav-link-sub { min-height: 1.9rem !important; padding: 4px 10px 4px 30px !important; font-size: 0.8rem !important; } /* ---- Cards — trimmer header & body -------------------------------------- */ html[data-density="compact"] .card { margin-bottom: 0.85rem !important; } html[data-density="compact"] .card-header { padding: 0.65rem 1rem !important; } html[data-density="compact"] .card-body { padding: 0.85rem !important; } /* ---- Generic Bootstrap spacing utilities used as section padding --------- */ html[data-density="compact"] .container-fluid.py-4 { padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; } /* ---- Tables — denser rows ----------------------------------------------- */ html[data-density="compact"] .table > :not(caption) > * > * { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; } /* ============================================================================ ULTRA tier — maximum density (data-density="ultra"). For power users / dense data screens. Same contract, tighter still. Inherits nothing from compact (attribute is exclusive), so it restates the set. ============================================================================ */ html[data-density="ultra"] { --card-padding: 0.75rem; --nav-item-gap: 0.55rem; /* Density tokens consumed by page-scoped .razor.css (defined in tokens.css). Display headings land at the same scale as the global ultra .page-title. */ --density-display-size: 1.3rem; --density-heading-size: 1.05rem; --density-hero-pad-y: 1rem; --density-page-pad: 0.85rem; --density-card-pad: 0.8rem; --density-section-gap: 0.8rem; --density-empty-state-pad: 1.5rem; --density-empty-icon-size: 1.4rem; --density-avatar-size: 44px; --density-table-pad-y: 0.35rem; --density-table-pad-x: 0.5rem; } html[data-density="ultra"] .page-title, html[data-density="ultra"] article.content > .container-fluid.py-4 h1, html[data-density="ultra"] article.content > .container-fluid.py-4 h2 { font-size: 1.25rem !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; } html[data-density="ultra"] .page-subtitle { font-size: var(--text-xs) !important; } html[data-density="ultra"] .page-header { margin-bottom: 0.65rem !important; } html[data-density="ultra"] article.content > .container-fluid.py-4 > .page-header:first-child, html[data-density="ultra"] .dynasty-page > .page-header:first-child { padding-bottom: 0.5rem !important; } html[data-density="ultra"] .form-control, html[data-density="ultra"] .form-select { padding: 5px 9px !important; font-size: 0.8rem !important; border-radius: var(--radius-xs) !important; } html[data-density="ultra"] .form-label, html[data-density="ultra"] label { font-size: 0.64rem !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; font-family: var(--font-mono) !important; color: var(--text-tertiary) !important; margin-bottom: 0.25rem !important; } html[data-density="ultra"] .btn { font-weight: 650 !important; font-size: 0.78rem !important; padding: 0.38rem 0.8rem !important; } html[data-density="ultra"] .btn-sm { padding: 0.24rem 0.6rem !important; font-size: 0.72rem !important; } html[data-density="ultra"] .btn-lg { padding: 0.5rem 1.05rem !important; font-size: 0.86rem !important; } html[data-density="ultra"] .btn-primary { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 1px 5px var(--accent-primary-glow) !important; } html[data-density="ultra"] .sidebar .nav-link { min-height: 1.6rem !important; padding: 3px 9px !important; font-size: 0.78rem !important; margin: 0 10px !important; } html[data-density="ultra"] .sidebar .nav-link i { font-size: 0.74rem !important; margin-right: 8px !important; } html[data-density="ultra"] .sidebar .nav-link-sub { min-height: 1.5rem !important; padding: 3px 9px 3px 28px !important; font-size: 0.76rem !important; } html[data-density="ultra"] .card { margin-bottom: 0.65rem !important; } html[data-density="ultra"] .card-header { padding: 0.5rem 0.85rem !important; } html[data-density="ultra"] .card-body { padding: 0.7rem !important; } html[data-density="ultra"] .container-fluid.py-4 { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; } html[data-density="ultra"] .table > :not(caption) > * > * { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }