/* --------------------------------------------------------------------- Re-themes Bootstrap's own CSS custom properties to this app's light palette, instead of fighting Bootstrap's defaults with overrides sprinkled everywhere. Everything below either sets a Bootstrap variable Bootstrap already reads, or covers the handful of things (brand mark, type badges, connection dot) that don't map onto any built-in Bootstrap component. index.html still declares data-bs-theme="dark" on (left alone since this is a CSS-only change) - that only matters for Bootstrap's `color-scheme` (native scrollbars/form-control rendering), which we override back to light below. Every actual color comes from the variables in this file, not from Bootstrap's own dark-mode defaults. --------------------------------------------------------------------- */ :root, [data-bs-theme="dark"] { color-scheme: light; --bs-body-bg: #ffffff; --bs-body-color: #1c2530; --bs-secondary-color: #57606a; --bs-tertiary-color: #8b949e; --bs-border-color: #d7dce2; --bs-border-color-translucent: #d7dce2; --bs-secondary-bg: #f1f3f5; --bs-tertiary-bg: #f6f8fa; --bs-emphasis-color: #0d1117; /* Bootstrap components that need alpha (e.g. the plain .navbar's own brand/link colors, which aren't navbar-light/navbar-dark) read this RGB triplet via rgba(var(--bs-emphasis-color-rgb), x) rather than the hex color above - left unset, it fell through to Bootstrap's own dark-theme value (255,255,255), rendering the navbar brand as white-on-white on this light-overridden background. */ --bs-emphasis-color-rgb: 13, 17, 23; --bs-primary: #0f8a72; --bs-primary-rgb: 15, 138, 114; --bs-primary-text-emphasis: #0f8a72; --bs-link-color: #0f8a72; --bs-link-color-rgb: 15, 138, 114; --bs-link-hover-color: #0c6c59; --bs-link-hover-color-rgb: 12, 108, 89; --bs-danger: #dc3545; --bs-danger-rgb: 220, 53, 69; --bs-warning: #b5860b; --bs-warning-rgb: 181, 134, 11; --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --bs-font-monospace: 'JetBrains Mono', ui-monospace, monospace; --bs-body-font-size: 14px; --bs-border-radius-sm: 4px; --bs-border-radius: 6px; --bs-border-radius-lg: 8px; /* app-only tokens with no Bootstrap equivalent */ --accent: #0f8a72; --accent-bright: #5ee6c8; --accent-dim: #a7e8da; --accent-bg: rgba(15, 138, 114, 0.08); --type-string: #1b7fa8; --type-text: #4f8f2a; --type-integer: #9c6b12; --type-float: #9a4fb0; --type-boolean: #c0392b; --type-datetime: #4a63c4; } ::selection { background: var(--accent-dim); color: #06231d; } /* Same root cause as --bs-emphasis-color-rgb above, but this one can't be fixed via a CSS variable value alone: Bootstrap bakes the navbar toggler's hamburger icon as a pre-rendered SVG data-URI, with the stroke color already substituted in at its own build time rather than read live from a variable - its dark-theme variant (white stroke) is what applies here since keeps data-bs-theme="dark" (see the note above styles.css's :root block), rendering as a barely-visible white-on-light icon. Overriding the same variable Bootstrap sets it from, on the same selector Bootstrap uses, with an identical SVG string but our own text color instead of white. */ [data-bs-theme="dark"] .navbar-toggler-icon { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(13, 17, 23, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ---------- Brand ---------- */ .brand-mark { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, var(--accent-bright), var(--accent)); display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-monospace); font-weight: 700; font-size: 11px; color: #06231d; flex-shrink: 0; } /* ---------- Buttons: reuse Bootstrap's own per-component variables ---------- */ .btn-primary { --bs-btn-bg: var(--accent-bright); --bs-btn-border-color: var(--accent-bright); --bs-btn-color: #06231d; --bs-btn-hover-bg: #46d6b6; --bs-btn-hover-border-color: #46d6b6; --bs-btn-hover-color: #06231d; --bs-btn-active-bg: #46d6b6; --bs-btn-active-border-color: #46d6b6; --bs-btn-active-color: #06231d; --bs-btn-disabled-bg: var(--accent-bright); --bs-btn-disabled-border-color: var(--accent-bright); font-weight: 600; } .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color); } .btn-link { --bs-btn-color: var(--bs-secondary-color); } .btn-link:hover { --bs-btn-hover-color: var(--bs-body-color); } /* ---------- Sidebar ---------- */ #sidebarOffcanvas { background: var(--bs-tertiary-bg); width: 280px; } .list-group-item { background: transparent; border-color: transparent; border-radius: var(--bs-border-radius) !important; color: var(--bs-secondary-color); margin-bottom: 2px; cursor: pointer; } .list-group-item:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); } .list-group-item.active { background: var(--accent-bg) !important; color: var(--accent) !important; border-color: var(--bs-border-color) !important; } /* ---------- Main content ---------- */ .main-content { max-width: 960px; } /* Fixes the sidebar+main flex row overflowing the viewport instead of shrinking, from ~768px (where #sidebarOffcanvas stops being an overlay and becomes a normal flex sibling, fixed at 280px wide) up to ~992px (where main's own content is finally narrow enough to fit next to it anyway) - a flex item's default min-width is `auto`, not 0, so `main`'s wide children (tables, side-by-side language columns) were keeping it from shrinking at all, pushing the excess off the right edge of the page with only a hard-to-find page-level scrollbar to reach it. `min-width: 0` lets `main` actually shrink to the space left over next to the sidebar; each table's own `.table-responsive` wrapper (already used throughout) then scrolls internally instead. */ main.flex-grow-1 { min-width: 0; } /* Sidebar scrolls independently from main content, desktop layout only (>=768px, where #sidebarOffcanvas is a normal flex sibling rather than Bootstrap's offcanvas overlay - below that breakpoint the overlay already has its own fixed height/positioning and scrolls internally via .offcanvas-body, so this is left alone there). Without this, neither the sidebar nor had any height cap, so the sidebar simply grew as tall as the class list - scrolling down to reach the bottom of a long list scrolled the whole page and dragged `main` out of view with it (Ron's report, 2026-09-06: "als ik de onderste klas opzoek... dan loopt het scherm... van het scherm"). Pins to the viewport height instead and lets the navbar row stay a plain (no longer scrolling-away) flex item, with the sidebar and main each scrolling only their own overflow. */ @media (min-width: 768px) { html, body { height: 100%; } body { display: flex; flex-direction: column; margin: 0; overflow: hidden; } body > .d-flex { flex: 1 1 auto; min-height: 0; } #sidebarOffcanvas { overflow-y: auto; } main.flex-grow-1 { overflow-y: auto; } } /* ---------- Type / reference badges ---------- */ .type-badge { font-family: var(--bs-font-monospace); font-weight: 500; border: 1px solid var(--bs-border-color); background: var(--bs-secondary-bg); color: var(--bs-body-color); } .type-badge.type-string { color: var(--type-string); } .type-badge.type-text { color: var(--type-text); } .type-badge.type-integer { color: var(--type-integer); } .type-badge.type-float { color: var(--type-float); } .type-badge.type-boolean { color: var(--type-boolean); } .type-badge.type-datetime { color: var(--type-datetime); } /* ---------- Connection indicator ---------- */ .conn-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .conn-dot.ok { background: var(--accent); } .conn-dot.bad { background: var(--bs-danger); } .conn-dot.pending { background: var(--bs-warning); } /* ---------- Toasts ---------- */ .toast.toast-ok { border-left: 3px solid var(--accent) !important; } /* ---------- Table hover tint to match the theme ---------- */ .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--bs-secondary-bg); } /* ---------- Records table value cells ---------- */ /* A value cell wraps like any other text by default - fine for a genuinely long string, but a short value like "1106 GR 110" splitting awkwardly onto a second line (Ron's report, 2026-09-11, once the postcode+huisnr label made these values a bit longer) just looks broken. The table's own .table-responsive wrapper already scrolls horizontally for anything that doesn't fit, so nowrap here trades "might need to scroll" for "never wraps mid-value", which reads better for this table's mostly-short, id/label-shaped data. Scoped to .entities-table specifically (entitiesTableHtml's own records table) - td.font-monospace.small is also used for at least one unrelated table (the Gebruikersbeheer key/value list), which shouldn't be affected by this. */ .entities-table td { white-space: nowrap; } /* ---------- Records table: room for the horizontal scrollbar ---------- */ /* .entities-table's own .table-responsive wrapper can need real horizontal scrolling (see the nowrap comment above - a genuinely long value, e.g. Scherm Element Instantie's Inhoud, forces this). On a system whose scrollbars overlay content instead of reserving their own space, that horizontal scrollbar then sits right on top of the last row - table-sm's tight row height made this bad enough to visually cover about half the row and block its checkbox (Ron's report, 2026-09-15, hit on both a rebuilt class and its predecessor). Padding-bottom inside the scrollable wrapper gives the scrollbar its own empty space to render into either way, overlay or not. */ .table-responsive:has(> .entities-table) { padding-bottom: 1rem; } /* ---------- Address hover tooltip (wireAddressTooltips) ---------- */ /* Bootstrap's default tooltip CSS caps .tooltip-inner at ~200px and wraps past that - reasonable for arbitrary long text, but an address detail like "Myndenhof 110 Hoekhuis, 1106 GR" is short enough to just fit on one line, and wrapping mid-postcode looked broken (Ron's report, 2026-09-11: "breekt nog steeds af na de 4 numerieke posities van de postcode"). customClass: 'address-tooltip-popup' on the Tooltip instance (see wireAddressTooltips) tags the popup itself so this only affects these tooltips, not any other Bootstrap tooltip the app might add later. */ .address-tooltip-popup .tooltip-inner { white-space: nowrap; max-width: none; } /* ---------- Class/attribute tree (sidebar) ---------- */ .tree-class { margin-bottom: 2px; } .tree-class-row { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: var(--bs-border-radius); color: var(--bs-secondary-color); cursor: pointer; } .tree-class-row:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); } .tree-class-row.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; } .tree-caret { background: none; border: none; padding: 0 2px; width: 16px; flex-shrink: 0; font-size: 10px; color: var(--bs-tertiary-color); line-height: 1; cursor: pointer; } .tree-caret:hover { color: var(--bs-body-color); } .tree-attrs { padding-left: 22px; } .tree-attr-row { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--bs-border-radius); font-size: 0.82rem; color: var(--bs-secondary-color); cursor: pointer; } .tree-attr-row:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); } /* ---------- Language coverage chips ---------- */ .lang-chips { display: inline-flex; gap: 3px; flex-shrink: 0; } .lang-chip { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .lang-chip.present { background: var(--accent); } .lang-chip.missing { background: transparent; border: 1px solid var(--bs-border-color); } /* ---------- Attribute compare-table name cells ---------- */ .name-cell { cursor: pointer; } .name-cell:hover .fw-medium { color: var(--accent); } .name-cell:hover .fst-italic { color: var(--accent) !important; } /* ---------- Reference typeahead (isA/hasA fields, New/Edit record modal) ---------- */ .ref-typeahead-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; max-height: 260px; overflow-y: auto; margin-top: 2px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .ref-typeahead-results .list-group-item-action { cursor: pointer; } .ref-typeahead-results .list-group-item-action.ref-add-new { color: var(--accent); font-weight: 600; }