/* * Mtik UI layer on top of AdminLTE 4 / Bootstrap 5.3. * * Everything here must work in BOTH themes. Bootstrap 5.3 flips its own custom * properties when `data-bs-theme` changes on , so the rule of thumb is: * build from --bs-* variables, never from a hard-coded light/dark value. * * The two exceptions are the .stat-card gradients and .btn-brand, which sit on a * saturated colour with white text - that pairing reads the same in either theme, * which is exactly why it is safe to hard-code. */ /* --------------------------------------------------------------------------- * Theme-adaptive buttons * * `btn-outline-dark` is the trap: "dark" is near-black in both themes, so in dark * mode it renders black-on-black and the button effectively disappears. These use * --bs-emphasis-color, which flips to near-white in dark mode. * ------------------------------------------------------------------------- */ .btn-outline-neutral { --bs-btn-color: var(--bs-emphasis-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-bg); --bs-btn-hover-bg: var(--bs-emphasis-color); --bs-btn-hover-border-color: var(--bs-emphasis-color); --bs-btn-active-color: var(--bs-body-bg); --bs-btn-active-bg: var(--bs-emphasis-color); --bs-btn-active-border-color: var(--bs-emphasis-color); --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-border-color: var(--bs-border-color); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); } /* Filled accent button that keeps white text on a saturated fill in both themes. */ .btn-brand { --bs-btn-color: #fff; --bs-btn-bg: #4f46e5; --bs-btn-border-color: #4f46e5; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-color: #fff; --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3; --bs-btn-focus-shadow-rgb: 99, 102, 241; } /* Neutral chip/badge. `text-bg-light` is white-on-white in dark mode. */ .badge-neutral { background-color: var(--bs-secondary-bg); color: var(--bs-emphasis-color); border: 1px solid var(--bs-border-color); font-weight: 500; } /* Low-key callout. `alert-light` washes out to near-invisible in dark mode. */ .alert-subtle { background-color: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); } /* --------------------------------------------------------------------------- * Page switcher (router Configure) * * Bootstrap's `.nav-tabs` draws inactive tabs as plain blue links on a flat strip, * so a row of them sitting under a form reads as a line of body text rather than as * controls - operators were missing the switcher entirely. These are solid buttons * with a real border, and the selected one is a filled pill, so which page you are * on is legible at a glance. * * Built from --bs-* vars rather than `btn-dark`, per the note at the top of this * file: --bs-emphasis-color is near-black in light mode and near-white in dark, so * the filled state stays high-contrast instead of going black-on-black. * ------------------------------------------------------------------------- */ .page-switch { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 0; margin-bottom: .85rem; } .page-switch .nav-link { display: flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background-color: var(--bs-secondary-bg); color: var(--bs-emphasis-color); font-size: .875rem; font-weight: 600; line-height: 1.25; transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out; } .page-switch .nav-link:hover, .page-switch .nav-link:focus-visible { background-color: var(--bs-tertiary-bg); border-color: var(--bs-emphasis-color); color: var(--bs-emphasis-color); } .page-switch .nav-link.active { background-color: var(--bs-emphasis-color); border-color: var(--bs-emphasis-color); color: var(--bs-body-bg); } /* The switcher is detached from the panel below it, so the panel needs its own * full border rather than the "tabs sit on top" three-sided one. */ .page-switch-content { border: 1px solid var(--bs-border-color); border-radius: .5rem; } /* --------------------------------------------------------------------------- * Server health meters (Server Setup) * * The severity colours are the same three the status chips use, so "green is fine, * amber is watch it, red is act" means one thing across the whole app. They are * stated as rgb triples rather than pulled from --bs-success/-warning/-danger * because the fill needs a low-alpha wash of the same hue behind solid body text, * and Bootstrap's variables are already-composited colours with no alpha to give. * ------------------------------------------------------------------------- */ .health-meter { --health-rgb: 25, 135, 84; height: 100%; padding: .75rem .85rem; border: 1px solid var(--bs-border-color); border-left: 3px solid rgb(var(--health-rgb)); border-radius: .5rem; background-color: var(--bs-secondary-bg); } .health-meter.health-warn { --health-rgb: 255, 193, 7; } .health-meter.health-danger { --health-rgb: 220, 53, 69; } .health-meter .bi { color: rgb(var(--health-rgb)); } .health-value { font-variant-numeric: tabular-nums; font-weight: 700; } .health-bar { display: block; height: .5rem; margin-top: .5rem; border-radius: 999px; /* Track: a wash of the meter's own colour, so an empty bar still reads as its state. */ background-color: rgba(var(--health-rgb), .18); overflow: hidden; } .health-bar > span { display: block; height: 100%; border-radius: inherit; background-color: rgb(var(--health-rgb)); transition: width .4s ease-in-out; } /* A reading that jumps every few seconds should not animate for users who have asked * the system to stop moving things. */ @media (prefers-reduced-motion: reduce) { .health-bar > span { transition: none; } } /* --------------------------------------------------------------------------- * Status chips * * Every "what state is this in?" cell in the app. This exists because Bootstrap's * `.badge` defaults to `--bs-badge-color: #fff` with NO background of its own: any * status value that fell through a @class([...]) list rendered as white text on a * white card - present in the DOM, invisible on screen. A chip always carries its * own ink AND tint, so an unrecognised status degrades to the readable neutral * instead of disappearing. * * Ink/tint pairs are ink-on-tint rather than white-on-saturated: at badge size a * tinted chip is easier to read and far quieter in a dense table. * * Both themes run deep on purpose - the first pass was too pale to read as a chip * at all. Light tints sit ~1.30:1 against the page (up from ~1.13:1) and the dark * set is now solid deep colour rather than a 20% alpha wash, so a chip does not * change shade with whatever card it lands on. Every pair is checked for WCAG * contrast against its own background: the lowest is 7.0:1 against a 4.5:1 floor, * and every border clears 1.4:1 against the page so the shape is never lost. * Deep red is the one background that cannot separate itself from a dark page by * luminance (red barely contributes to it), which is what its border is for. * * A chip is never colour alone: each carries an icon in the markup, which is what * makes the state readable to a colourblind operator and in print. * ------------------------------------------------------------------------- */ .chip { --chip-ink: #2b3138; --chip-tint: #dde1e5; --chip-edge: #b9c0c7; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border: 1px solid var(--chip-edge); border-radius: 999px; background-color: var(--chip-tint); color: var(--chip-ink); font-size: .75rem; font-weight: 600; line-height: 1.25; white-space: nowrap; vertical-align: middle; } .chip > .bi { font-size: .8em; } /* Light: deeper tint, darker ink. Measured ink/tint 7.0-10.0:1. */ .chip-good { --chip-ink: #0a4f34; --chip-tint: #c7ead8; --chip-edge: #8ecfb0; } .chip-warn { --chip-ink: #5f3a00; --chip-tint: #f6e2b8; --chip-edge: #dfbd75; } .chip-bad { --chip-ink: #8a1626; --chip-tint: #f7d6da; --chip-edge: #e79aa4; } .chip-info { --chip-ink: #14407f; --chip-tint: #d3e3fb; --chip-edge: #9dc0f2; } .chip-idle { --chip-ink: #2b3138; --chip-tint: #dde1e5; --chip-edge: #b9c0c7; } /* Dark: solid deep colour, bright ink. Measured ink/tint 7.3-8.9:1. */ [data-bs-theme="dark"] .chip { --chip-ink: #ccd2d8; --chip-tint: #2a2f35; --chip-edge: #454c54; } [data-bs-theme="dark"] .chip-good { --chip-ink: #86e8b8; --chip-tint: #0d3327; --chip-edge: #1c6a4c; } [data-bs-theme="dark"] .chip-warn { --chip-ink: #f8cf7e; --chip-tint: #3a2a05; --chip-edge: #7a5a12; } [data-bs-theme="dark"] .chip-bad { --chip-ink: #fbb0ba; --chip-tint: #511620; --chip-edge: #7d2735; } [data-bs-theme="dark"] .chip-info { --chip-ink: #a9cbfb; --chip-tint: #143664; --chip-edge: #23508f; } [data-bs-theme="dark"] .chip-idle { --chip-ink: #ccd2d8; --chip-tint: #2a2f35; --chip-edge: #454c54; } /* Forced-colours (Windows high contrast): tints are dropped by the OS, so fall * back to the system border and let the icon + label carry the state. */ @media (forced-colors: active) { .chip { border-color: ButtonBorder; color: ButtonText; } } /* --------------------------------------------------------------------------- * Action bars * * One row of actions, laid out identically everywhere: same gap, same wrap, same * right alignment, so the buttons in row 1 of one table sit exactly where the eye * expects them in row 1 of another. * * The ORDER is the contract, and it is fixed for every table in the app: * * 1. open - go look at the thing (View, Preview, Open, Configure) * 2. edit - change what it is (Edit, Rename) * 3. operate - do something with it (Terminal, Backups, Push, Check, Print) * 4. toggle - flip its state (Enable/Disable, Lock/Unlock, Activate) * 5. destroy - remove it (Delete) - ALWAYS last, never mid-row * * Destructive last is the point of the whole thing: Delete never lands where the * previous row's Edit was, so a mis-click cannot delete a record. * * Always ONE row, at every width. Wrapping turned a phone's action cell into a * vertical stack of buttons several rows tall, which pushed the rest of the table * off screen and moved Delete somewhere different in every row - defeating the * fixed order above. Every action bar sits inside .table-responsive, so the table * scrolls sideways instead; the buttons keep their positions and the row stays one * row high. * ------------------------------------------------------------------------- */ .action-bar { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: .3rem; white-space: nowrap; } /* Forms are how POST/DELETE actions are submitted; they must not break the row. */ .action-bar > form { display: inline-flex; margin: 0; } /* Nothing in the bar may shrink or wrap its own label - a squeezed button that * breaks "Back up now" across two lines is what makes a row grow taller. */ .action-bar > *, .action-bar > form > * { flex: 0 0 auto; white-space: nowrap; } /* Phones: trim the padding and type so more of the row fits before the table has to * scroll. The buttons stay on one line either way - this only reduces how far the * operator has to swipe to reach Delete. */ @media (max-width: 575.98px) { .action-bar { gap: .25rem; } .action-bar .btn { --bs-btn-padding-x: .4rem; --bs-btn-padding-y: .2rem; --bs-btn-font-size: .75rem; } .action-bar .btn .bi { margin-right: .2rem !important; } } /* Semantic action buttons. * * `btn-outline-secondary` was the default here and is the worst choice in dark * mode: Bootstrap paints it grey-on-grey (#6c757d ink on a dark surface), so the * most-used button in the app was also the hardest to see. * * These are filled, not outlined. An outline button on a busy table row is mostly * page showing through a thin line, which is why the first pass read as too light * in both themes. Each now carries the same deep ink-on-tint pair as the matching * status chip, so the row's buttons look like solid controls and Delete's red is * unmistakable next to Edit's indigo. Measured ink/fill contrast is 6.5-11.1:1 * against a 4.5:1 floor, in both themes; hover deepens the fill rather than * inverting it, so nothing flashes light-on-light mid-click. */ .btn-act-open, .btn-act-edit, .btn-act-run, .btn-act-toggle, .btn-act-danger { --bs-btn-font-weight: 600; --bs-btn-border-width: 1px; --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); } /* 1. open - the neutral. Recedes next to the coloured actions without going faint. */ .btn-act-open { --bs-btn-color: #2b3138; --bs-btn-bg: #e9ecef; --bs-btn-border-color: #c4cad0; --bs-btn-hover-color: #1b2026; --bs-btn-hover-bg: #d8dde2; --bs-btn-hover-border-color: #aeb5bd; --bs-btn-active-color: #1b2026; --bs-btn-active-bg: #ccd2d8; --bs-btn-active-border-color: #9aa2ab; --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-bg: var(--bs-secondary-bg); --bs-btn-disabled-border-color: var(--bs-border-color); } [data-bs-theme="dark"] .btn-act-open { --bs-btn-color: #dee2e6; --bs-btn-bg: #2a2f35; --bs-btn-border-color: #454c54; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #363c44; --bs-btn-hover-border-color: #576069; --bs-btn-active-color: #fff; --bs-btn-active-bg: #3f464f; --bs-btn-active-border-color: #626c76; } /* 2. edit - indigo, so "change this" is the accent in the row. */ .btn-act-edit { --bs-btn-color: #3b31c9; --bs-btn-bg: #e4e2fc; --bs-btn-border-color: #b3adf4; --bs-btn-hover-color: #2e259e; --bs-btn-hover-bg: #d3d0f9; --bs-btn-hover-border-color: #9a92ef; --bs-btn-active-color: #251d85; --bs-btn-active-bg: #c4c0f6; --bs-btn-active-border-color: #8279ea; --bs-btn-focus-shadow-rgb: 99, 102, 241; } [data-bs-theme="dark"] .btn-act-edit { --bs-btn-color: #c3caff; --bs-btn-bg: #2a2773; --bs-btn-border-color: #3f3d99; --bs-btn-hover-color: #e0e4ff; --bs-btn-hover-bg: #343184; --bs-btn-hover-border-color: #514eb0; --bs-btn-active-color: #e0e4ff; --bs-btn-active-bg: #3c3994; --bs-btn-active-border-color: #6360c2; } /* 3. operate - green, a working action. */ .btn-act-run { --bs-btn-color: #0a5c3c; --bs-btn-bg: #cfeede; --bs-btn-border-color: #8ecfb0; --bs-btn-hover-color: #084a30; --bs-btn-hover-bg: #bde5d0; --bs-btn-hover-border-color: #74c19c; --bs-btn-active-color: #063d28; --bs-btn-active-bg: #aadcc2; --bs-btn-active-border-color: #5cb389; } [data-bs-theme="dark"] .btn-act-run { --bs-btn-color: #86e8b8; --bs-btn-bg: #0d3327; --bs-btn-border-color: #1c6a4c; --bs-btn-hover-color: #a6f0cc; --bs-btn-hover-bg: #124232; --bs-btn-hover-border-color: #26805c; --bs-btn-active-color: #a6f0cc; --bs-btn-active-bg: #16503c; --bs-btn-active-border-color: #2f966d; } /* 4. toggle - amber, because flipping state is reversible but not nothing. */ .btn-act-toggle { --bs-btn-color: #6b4200; --bs-btn-bg: #f8e8c6; --bs-btn-border-color: #dfbd75; --bs-btn-hover-color: #573500; --bs-btn-hover-bg: #f3ddad; --bs-btn-hover-border-color: #d3ab55; --bs-btn-active-color: #452a00; --bs-btn-active-bg: #eed195; --bs-btn-active-border-color: #c69a3c; } [data-bs-theme="dark"] .btn-act-toggle { --bs-btn-color: #f8cf7e; --bs-btn-bg: #3a2a05; --bs-btn-border-color: #7a5a12; --bs-btn-hover-color: #fbdda4; --bs-btn-hover-bg: #48340a; --bs-btn-hover-border-color: #916c18; --bs-btn-active-color: #fbdda4; --bs-btn-active-bg: #553e0d; --bs-btn-active-border-color: #a87e1e; } /* 5. destroy - the only red in the row. */ .btn-act-danger { --bs-btn-color: #96182a; --bs-btn-bg: #fbdde1; --bs-btn-border-color: #e79aa4; --bs-btn-hover-color: #7c1322; --bs-btn-hover-bg: #f8ccd2; --bs-btn-hover-border-color: #de8290; --bs-btn-active-color: #660f1c; --bs-btn-active-bg: #f4bac2; --bs-btn-active-border-color: #d3697a; --bs-btn-focus-shadow-rgb: 220, 53, 69; } [data-bs-theme="dark"] .btn-act-danger { --bs-btn-color: #fbb0ba; --bs-btn-bg: #511620; --bs-btn-border-color: #7d2735; --bs-btn-hover-color: #fdc9d0; --bs-btn-hover-bg: #611a27; --bs-btn-hover-border-color: #963041; --bs-btn-active-color: #fdc9d0; --bs-btn-active-bg: #70202f; --bs-btn-active-border-color: #ae3a4d; } /* Forced colours: the OS drops every fill, so the label and border carry the button. */ @media (forced-colors: active) { .btn-act-open, .btn-act-edit, .btn-act-run, .btn-act-toggle, .btn-act-danger { border-color: ButtonBorder; } } /* --------------------------------------------------------------------------- * Coloured stat cards * ------------------------------------------------------------------------- */ .stat-card { position: relative; overflow: hidden; border: 0; border-radius: 0.9rem; color: #fff; min-height: 118px; background-image: linear-gradient(135deg, var(--stat-from) 0%, var(--stat-to) 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 16px -6px var(--stat-glow, rgba(0, 0, 0, .35)); transition: transform .16s ease, box-shadow .16s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 12px 26px -8px var(--stat-glow, rgba(0, 0, 0, .45)); } /* Anchor variants keep the card looking like a card, not a link. */ a.stat-card, a.stat-card:hover, a.stat-card:focus { color: #fff; text-decoration: none; } a.stat-card:focus-visible { outline: 3px solid var(--bs-focus-ring-color, rgba(255, 255, 255, .6)); outline-offset: 2px; } .stat-card__label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; /* Pure-white labels at this size vibrate against the gradient; ease them back. */ color: rgba(255, 255, 255, .82); margin-bottom: .35rem; } .stat-card__value { font-size: 2rem; font-weight: 700; line-height: 1.1; margin-bottom: 0; font-variant-numeric: tabular-nums; } .stat-card__meta { font-size: .78rem; color: rgba(255, 255, 255, .8); margin-bottom: 0; margin-top: .4rem; } /* Oversized watermark glyph, decorative only. */ .stat-card__icon { position: absolute; right: -.35rem; bottom: -.9rem; font-size: 4.5rem; line-height: 1; opacity: .18; pointer-events: none; } .stat-card__spark { position: absolute; inset: auto 0 0 0; height: 34px; opacity: .5; pointer-events: none; } /* Phones show two cards per row rather than one, so each card is roughly half the * width it was designed at. Scale the type and the watermark glyph back to match - * at full size the value overflows on long numbers and the icon crowds the meta line. */ @media (max-width: 575.98px) { .stat-card { min-height: 104px; } .stat-card__label { font-size: .68rem; letter-spacing: .02em; } .stat-card__value { font-size: 1.5rem; } .stat-card__meta { font-size: .7rem; } .stat-card__icon { font-size: 3rem; bottom: -.6rem; } } /* The navbar router scope picker: wide enough for a site name, capped so a long one * cannot push the account menu off a phone screen. */ .router-scope-select { width: auto; max-width: 46vw; min-width: 8rem; } /* Palette. Each pair is a same-hue ramp so the gradient reads as one colour. * --stat-glow tints the drop shadow to match, which is what makes them pop. */ .stat-indigo { --stat-from: #6366f1; --stat-to: #4338ca; --stat-glow: rgba(79, 70, 229, .5); } .stat-blue { --stat-from: #3b82f6; --stat-to: #1d4ed8; --stat-glow: rgba(37, 99, 235, .5); } .stat-green { --stat-from: #22c55e; --stat-to: #15803d; --stat-glow: rgba(22, 163, 74, .5); } .stat-red { --stat-from: #f43f5e; --stat-to: #be123c; --stat-glow: rgba(225, 29, 72, .5); } .stat-teal { --stat-from: #14b8a6; --stat-to: #0f766e; --stat-glow: rgba(13, 148, 136, .5); } .stat-amber { --stat-from: #f59e0b; --stat-to: #b45309; --stat-glow: rgba(217, 119, 6, .5); } .stat-purple { --stat-from: #a855f7; --stat-to: #7e22ce; --stat-glow: rgba(147, 51, 234, .5); } .stat-pink { --stat-from: #ec4899; --stat-to: #be185d; --stat-glow: rgba(219, 39, 119, .5); } .stat-slate { --stat-from: #64748b; --stat-to: #334155; --stat-glow: rgba(71, 85, 105, .5); } .stat-cyan { --stat-from: #06b6d4; --stat-to: #0e7490; --stat-glow: rgba(8, 145, 178, .5); } /* The traffic row: sky/orange deliberately echo the download/upload series hues in * the charts below them, so the cards and the plot read as one story. */ .stat-sky { --stat-from: #38bdf8; --stat-to: #0369a1; --stat-glow: rgba(2, 132, 199, .5); } .stat-orange { --stat-from: #fb923c; --stat-to: #c2410c; --stat-glow: rgba(234, 88, 12, .5); } /* Dark mode: full-saturation gradients glare against a dark page. Damp them * slightly and trade the coloured glow for a plain shadow. */ [data-bs-theme="dark"] .stat-card { filter: saturate(.92) brightness(.94); box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -6px rgba(0, 0, 0, .6); } [data-bs-theme="dark"] .stat-card:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 14px 28px -10px rgba(0, 0, 0, .7); } @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card:hover { transition: none; transform: none; } } /* --------------------------------------------------------------------------- * Panels, charts, misc * ------------------------------------------------------------------------- */ .panel-card { border: 1px solid var(--bs-border-color); border-radius: 0.9rem; background-color: var(--bs-body-bg); } .panel-card > .card-header { background-color: transparent; border-bottom: 1px solid var(--bs-border-color); font-weight: 600; } .chart-box { position: relative; width: 100%; } .chart-box > canvas { max-width: 100%; } /* Small leading swatch for legends/lists. */ .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; } /* --------------------------------------------------------------------------- * Avatars * ------------------------------------------------------------------------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; background-color: var(--bs-secondary-bg); color: var(--bs-emphasis-color); font-weight: 600; overflow: hidden; flex: 0 0 auto; } .avatar-sm { width: 2rem; height: 2rem; font-size: .8rem; } .avatar-md { width: 3rem; height: 3rem; font-size: 1.1rem; } .avatar-xl { width: 7rem; height: 7rem; font-size: 2.4rem; } .avatar-ring { box-shadow: 0 0 0 3px var(--bs-body-bg), 0 0 0 5px #6366f1; } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------------------- * Sign-in brand * * The logo and the app name share one row and one height, so the pair reads as a * single lockup instead of an image with a caption beside it. The height is the * only number here - the name's line-height matches it and the logo keeps its own * aspect ratio inside it. * ------------------------------------------------------------------------- */ .login-brand { --login-brand-height: 2.5rem; display: flex; align-items: center; justify-content: center; gap: .625rem; max-width: 100%; } .login-brand img { height: var(--login-brand-height); width: auto; max-width: 9rem; object-fit: contain; flex: 0 0 auto; } /* Scales down rather than wrapping, so a long name stays on the logo's line even on the narrowest phone. */ .login-brand-name { font-size: clamp(1.25rem, 6vw, 1.75rem); font-weight: 700; line-height: var(--login-brand-height); color: var(--bs-emphasis-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* --------------------------------------------------------------------------- * Sidebar scrolling on phones * * Below lg the sidebar is a fixed overlay that AdminLTE sizes with 100vh. On a * phone 100vh is the *largest* viewport - it counts the strip behind the address * bar and bottom toolbar - so the menu runs past the visible area and its last * items (Server Setup, My Profile) cannot be scrolled to. Dynamic viewport units * measure what is actually on screen; the vh line stays first as the fallback for * browsers without dvh, and the extra bottom padding clears the home indicator on * notched devices. * ------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .sidebar-expand-lg .app-sidebar { max-height: 100vh; max-height: 100dvh; } .sidebar-expand-lg .app-sidebar .sidebar-wrapper { height: calc(100vh - 3.5rem - 1px); height: calc(100dvh - 3.5rem - 1px); padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; } } /* --------------------------------------------------------------------------- * Sidebar section headings * ------------------------------------------------------------------------- */ .sidebar-menu .nav-header { padding: 1rem 1rem .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } .sidebar-menu .nav-header:first-child { padding-top: .35rem; } /* The sidebar is pinned to data-bs-theme="dark" in the layout, so its own colours * are constant - only the active marker needs help standing out. */ .sidebar-menu .nav-link.active { background-color: rgba(99, 102, 241, .22); color: #fff; border-left: 3px solid #6366f1; } /* --------------------------------------------------------------------------- * Theme toggle * ------------------------------------------------------------------------- */ .theme-toggle .bi { font-size: 1.05rem; } /* Show the icon matching the ACTIVE theme, hide the other. */ [data-bs-theme="light"] .theme-toggle [data-theme-icon="dark"] { display: none; } [data-bs-theme="dark"] .theme-toggle [data-theme-icon="light"] { display: none; }