/* * 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); } /* --------------------------------------------------------------------------- * 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; }