/* ============================================================================ LCD x BOOTSTRAP 4 — visual neutralisation layer Bootstrap's grid (140 row/col-* occurrences) and spacing utilities (~200) are kept. Only its *visual* defaults are removed: rounded corners, blurred shadows, its font stack, and its button / form / table / pagination chrome. Loads after llm.css, so it wins on equal specificity. Where llm.css uses !important, so does this file -- deliberately, because llm.css was not de-importanted (see docs/redesign-lcd-plan.md, Phase 0). The invariant that makes that safe is asserted by tools/cascade-audit.js, which fails if a legacy sheet ever outranks this layer or if a rounded corner or blurred shadow survives. Run it after touching any stylesheet or order. ========================================================================= */ /* ------------------------------------------------- hard edges everywhere */ /* The selector list is broad on purpose: tools/cascade-audit.js asserts that no interactive element ends up with a radius > 2px or a blurred shadow, and every entry below was added because that gate caught one. .paginate_button a in particular needs the extra specificity to beat llm.css's `.dt-button, .paginate_button A, button { border-radius: 5px !important }`. */ .btn, .form-control, .card, .badge, .alert, .modal-content, .dropdown-menu, .page-link, .pagination, .pagination .page-link, .paginate_button a, .paginate_button .page-link, .input-group-text, .custom-select, .list-group-item, .progress, .popover, .tooltip-inner, .close, table, th, td, table.dataTable thead th, input, input[type="range"], input[type="search"], textarea, select, button { border-radius: 0 !important; } /* Bootstrap's focus rings, and llm.css's `INPUT`/`button` rules, are blurred haloes. The design has no blur anywhere: shadows are offset stamps. */ .btn:focus, .btn.focus, .form-control:focus, .custom-select:focus, .page-link:focus, .btn:not(:disabled):not(.disabled):active:focus { box-shadow: none !important; } /* llm.css sets `INPUT, TEXTAREA { box-shadow: 0 0 10px 2px !important }`, so this has to mirror the importance. The inked inset on framed fields still wins: `.form-control` (0,1,0) outranks `input` (0,0,1). */ input, textarea, select { box-shadow: none !important; } /* ------------------------------------------------------------- typography */ body, .btn, .form-control, input, textarea, select, button, .dropdown-menu, .modal-content { font-family: var(--lcd-font-ui); } h1, h2, h3, h4, h5, h6 { font-family: var(--lcd-font-ui); font-weight: 600; color: var(--lcd-fg); letter-spacing: -.01em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2, h3 { font-size: var(--fs-h2); } h4, h5, h6 { font-size: var(--fs-h3); } h1 a, h2 a, h3 a { color: inherit; } /* ---------------------------------------------------------------- surfaces */ /* In-flow surfaces: quiet frame. */ .card, .list-group-item { background-color: var(--lcd-panel); color: var(--lcd-fg); border: 1px solid var(--lcd-border); } /* Overlays keep the strong frame — they must separate from the page. */ .dropdown-menu, .modal-content, .popover { background-color: var(--lcd-panel); color: var(--lcd-fg); border: 1.5px solid var(--lcd-line); } .dropdown-menu, .popover { box-shadow: var(--lcd-key-shadow); } .dropdown-item { color: var(--lcd-fg); font-family: var(--lcd-font-data); font-size: var(--fs-key); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--lcd-row); color: var(--lcd-fg); } .modal { background-color: rgba(0, 0, 0, .55); } .close { color: var(--lcd-fg); text-shadow: none; opacity: .7; } .close:hover { color: var(--lcd-fg); opacity: 1; } /* ------------------------------------------------------------------ forms */ .form-control, input[type="text"], input[type="email"], input[type="search"], input[type="number"], textarea, select { background: var(--lcd-well) !important; color: var(--lcd-fg) !important; border: 1px solid var(--lcd-border) !important; box-shadow: var(--lcd-inset) !important; font-family: var(--lcd-font-data); font-size: var(--fs-data); padding: 7px 11px !important; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--lcd-fg-faint); font-family: var(--lcd-font-data); letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-key); } .form-control:focus, input:focus, textarea:focus, select:focus { background: var(--lcd-panel) !important; color: var(--lcd-fg) !important; border-color: var(--lcd-link) !important; } .form-control:disabled, .form-control[readonly] { background: var(--lcd-deep) !important; color: var(--lcd-fg-ghost) !important; } /* ----------------------------------------------------------------- tables */ /* Rules are drawn with inset box-shadow, never border. Borders on cells desynchronise DataTables' split head/body tables by up to 38px and columns.adjust() does not repair it. See docs/redesign-lcd-plan.md D10. */ .table { color: var(--lcd-fg); margin-bottom: 0; } .table th, .table td { border: 0 !important; border-top: 0 !important; box-shadow: inset 0 -1px 0 var(--lcd-hair); font-family: var(--lcd-font-data); font-size: var(--fs-data-lg); vertical-align: middle; padding: 6px 10px; } /* Header rows are set apart from data rows: bold condensed face, full ink. One rule, inherited by every .table on the site. */ .table thead th { box-shadow: inset 0 -1px 0 var(--lcd-border); background: var(--lcd-well); color: var(--lcd-fg); font-family: var(--lcd-font-ui); font-size: var(--fs-key); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; } .table-striped tbody tr:nth-of-type(odd), .table-striped tbody tr:nth-of-type(2n + 1) { background-color: var(--lcd-row); } .table-hover tbody tr:hover, .table tbody tr:hover { background-color: var(--lcd-row); color: var(--lcd-fg); } /* ------------------------------------------------------------- pagination */ .pagination { font-family: var(--lcd-font-data); } .page-link, li.paginate_button.page-item .page-link { background: var(--lcd-panel) !important; color: var(--lcd-fg) !important; border: 1.5px solid var(--lcd-line) !important; box-shadow: var(--lcd-key-shadow) !important; font-size: var(--fs-key); letter-spacing: .1em; margin: 0 6px 6px 0; padding: 4px 11px !important; } .page-link:hover, li.paginate_button.page-item .page-link:hover { background: var(--lcd-panel) !important; color: var(--lcd-fg) !important; box-shadow: var(--lcd-key-shadow-hover) !important; } .page-item.active .page-link, li.paginate_button.page-item.active .page-link { background: var(--lcd-sel-bg) !important; color: var(--lcd-sel-fg) !important; border-color: var(--lcd-line) !important; box-shadow: none !important; transform: translate(1px, 1px); } .page-item.disabled .page-link { background: var(--lcd-panel) !important; color: var(--lcd-fg-ghost) !important; box-shadow: none !important; } /* -------------------------------------------------------------- utilities */ blockquote, .blockquote { background: var(--lcd-well); border: 1px solid var(--lcd-border); box-shadow: var(--lcd-inset); border-radius: 0; padding: 22px 24px; } hr { border-top: 1px solid var(--lcd-hair); } code, pre, kbd, samp { font-family: var(--lcd-font-data); color: var(--lcd-fg); }