/* * 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. */ /* --------------------------------------------------------------------------- * Luxury shell — gilt accent, depth, and touch-friendly controls app-wide * ------------------------------------------------------------------------- */ :root { --mtik-gilt: #b89b6a; --mtik-gilt-soft: color-mix(in srgb, var(--mtik-gilt) 14%, transparent); --mtik-gilt-line: color-mix(in srgb, var(--mtik-gilt) 38%, var(--bs-border-color)); --mtik-ink: #1c1a16; --mtik-panel-shadow: 0 0.55rem 1.35rem rgba(28, 24, 18, 0.07); --mtik-panel-shadow-hover: 0 0.75rem 1.75rem rgba(28, 24, 18, 0.11); } [data-bs-theme="dark"] { --mtik-panel-shadow: 0 0.65rem 1.5rem rgba(0, 0, 0, 0.42); --mtik-panel-shadow-hover: 0 0.85rem 1.85rem rgba(0, 0, 0, 0.52); } .mtik-app .app-header { border-bottom: 1px solid var(--mtik-gilt-line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); background: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 92%, var(--mtik-gilt)), var(--bs-body-bg)); } .mtik-app .mtk-page-back { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding-inline: 0.55rem; line-height: 1; } .mtik-app .app-sidebar { border-right: 1px solid var(--mtik-gilt-line); background: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 94%, var(--mtik-gilt)), var(--bs-body-bg)); } .mtik-app .app-main { background: radial-gradient(ellipse 120% 80% at 50% -20%, var(--mtik-gilt-soft), transparent 55%), var(--bs-body-tertiary-bg, var(--bs-tertiary-bg)); } .mtik-app .app-content-header { border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 85%, var(--mtik-gilt)); } .mtik-app .app-content > .container-fluid { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } @media (max-width: 767.98px) { .mtik-app .app-content > .container-fluid { padding-left: max(0.75rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); } } /* --------------------------------------------------------------------------- * The page itself never scrolls sideways * * On a phone the panel is a column of cards and a swipe left or right should do * nothing. Anything wider than the screen belongs inside its own scroller - that * is what .table-responsive is for, and a wide table is meant to be swiped within * its card - but a single control with a fixed minimum width, a long unbroken * voucher code or an over-wide chart used to drag the whole document across and * take the header and sidebar with it. * * `overflow-x: clip` rather than `hidden`: hidden turns the element into a scroll * container, which would break any sticky positioning inside it. Both are named so * an old WebView that has never heard of clip still gets the containment. * ------------------------------------------------------------------------- */ @media (max-width: 991.98px) { html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } .app-wrapper, .app-main, .app-content, .app-content-header, .app-footer { max-width: 100%; min-width: 0; } /* A grid or flex child will not shrink below the width of its own content unless * it is told it may, which is how one wide card ends up widening the page. */ .app-content > .container-fluid > .row > [class^="col"], .app-content > .container-fluid > .row > [class*=" col"] { min-width: 0; } /* Codes, MAC addresses, tunnel keys and e-mail addresses: no space to break at, * so they set the width of whatever card they land in. */ .card-body, .card-header, .list-group-item { overflow-wrap: anywhere; } /* Inside a table the same rule would be wrong - the table has its own scroller * and a broken-up MAC address is harder to read than a swipe. */ .table td, .table th { overflow-wrap: normal; } } /* --------------------------------------------------------------------------- * 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. * ------------------------------------------------------------------------- */ /* The app's secondary action: Back, Cancel, Clear, "All vouchers". Filled dark with * light ink, the same pairing in both themes, so it matches the row actions further * down this file rather than being the one pale control on a page of solid ones. * * It keeps the -outline- name it was born with because it is used in a hundred places * and the name is not what it looks like - what matters is that it is the quiet * neutral next to a coloured primary, which a slate fill is. * * Deliberately NOT applied to .btn-outline-secondary: that one is the *unselected* * half of the filter groups (All / Unused / In use), where being quieter than the * selected button is the entire job. */ .btn-outline-neutral, .btn-outline-primary { --bs-btn-font-weight: 600; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: rgba(255, 255, 255, .65); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); } .btn-outline-neutral { --bs-btn-bg: #343d47; --bs-btn-border-color: #343d47; --bs-btn-hover-bg: #434e5b; --bs-btn-hover-border-color: #434e5b; --bs-btn-active-bg: #232a32; --bs-btn-active-border-color: #232a32; --bs-btn-disabled-bg: #545e6b; --bs-btn-disabled-border-color: #545e6b; } [data-bs-theme="dark"] .btn-outline-neutral { --bs-btn-bg: #414b57; --bs-btn-border-color: #566270; --bs-btn-hover-bg: #4e5a68; --bs-btn-hover-border-color: #687584; --bs-btn-active-bg: #343d47; --bs-btn-active-border-color: #566270; } /* Search, Refresh, Copy - a page-level action that is not destructive and not the * page's single primary. Indigo, the same accent .btn-brand and the Edit row action * carry, so an accent means one thing across the app. */ .btn-outline-primary { --bs-btn-bg: #4338ca; --bs-btn-border-color: #4338ca; --bs-btn-hover-bg: #4f46e5; --bs-btn-hover-border-color: #4f46e5; --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3; --bs-btn-disabled-bg: #7b74d8; --bs-btn-disabled-border-color: #7b74d8; --bs-btn-focus-shadow-rgb: 99, 102, 241; } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-bg: #4b41d6; --bs-btn-border-color: #6b63e0; --bs-btn-hover-bg: #574fe0; --bs-btn-hover-border-color: #8079e8; --bs-btn-active-bg: #3f36bd; --bs-btn-active-border-color: #6b63e0; } /* 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 * * Every set of sub-pages in the panel uses this: router Configure, the subscriber's * screens, the Landing Page screens, one's own profile, and the two ways of filling * in a voucher batch. One switcher everywhere, so "these are the pages of this * thing" looks the same wherever it appears. * * Bootstrap's `.nav-tabs` and `.nav-pills` draw an inactive tab as a plain blue link * 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 filled, so which page you * are on is legible at a glance. * * Works on both a