/** * The compatibility layer — where the tokens reach 1,389 blade files. * * This is the other half of `tokens.css` and the reason that file matters. There * is no realistic path to editing every screen in this product, so the only way * to change how it LOOKS is to restyle the classes those screens already carry. * Every rule below is Bootstrap 3 or AdminLTE markup, redrawn in terms of the * tokens, so a screen nobody has touched since 2019 still picks up the brand * colour, the border weight, the radius and the density. * * --- * * WHY THIS LOADS LAST. The order in `css.blade.php` is tailwind → vendor → * rtl → page → app → THIS. Bootstrap and AdminLTE are inside `vendor.css`, and a * layer that means to override them has to come after them. `app.css` is the * project's own historical overrides, and this comes after that too — because * those overrides are exactly the hardcoded colours this replaces. * * WHICH MEANS IT NEEDS A KILL SWITCH, and it has one: `UI_REFRESH=false` removes * the file from the page and the product looks precisely as it did before. A * visual change across every screen at once is not something to ship without a * way to take it back in one line. * * --- * * TWO RULES FOLLOWED THROUGHOUT. * * **Logical properties, not physical ones.** `padding-inline-start`, not * `padding-left`. This product runs in Arabic for most of its users and * `rtl.css` is a 33KB third-party file that mirrors physical properties by hand; * anything written logically here needs no entry in it and cannot be missed. * * **`!important` only where a vendor rule is already using it.** Reaching for it * everywhere wins the argument today and makes the next layer impossible. */ /* ------------------------------------------------------------------- The page ------------------------------------------------------------------- */ /** * `` is hardcoded in the layout, and a class selector * beats a bare `html`, so dark mode would render a white page behind everything. * Matched at equal-or-higher specificity rather than fixed in the layout, * because the layout is shared with the POS and every print view. */ html, html.tw-bg-white { background-color: rgb(var(--sx-canvas)); } body, .wrapper, .content-wrapper { background-color: rgb(var(--sx-canvas)); color: rgb(var(--sx-text)); font-family: var(--sx-font-sans); font-size: var(--sx-text-base); line-height: var(--sx-leading-normal); } /* Arabic gets the face that is actually installed for it. */ [dir='rtl'] body, html[lang='ar'] body { font-family: var(--sx-font-arabic); } a { color: rgb(var(--sx-accent)); } a:hover, a:focus { color: rgb(var(--sx-accent-hover)); } hr { border-top-color: rgb(var(--sx-border)); } /* ------------------------------------------------------------------- Panels — the thing an ERP screen is mostly made of ------------------------------------------------------------------- Flat, hairline-bordered, no shadow. AdminLTE draws a 3px coloured strip on top of every box and a drop shadow under it; at four boxes per screen that is decoration competing with the data. ------------------------------------------------------------------- */ .box, .panel, .nav-tabs-custom { background-color: rgb(var(--sx-surface)); border: var(--sx-hairline) solid rgb(var(--sx-border)); border-radius: var(--sx-radius); box-shadow: none; } /* The coloured top strip becomes a hairline like every other edge. */ .box.box-primary, .box.box-info, .box.box-success, .box.box-warning, .box.box-danger, .box.box-default { border-top: var(--sx-hairline) solid rgb(var(--sx-border)); } .box-header, .panel-heading { background-color: rgb(var(--sx-surface)); border-bottom: var(--sx-hairline) solid rgb(var(--sx-border)); color: rgb(var(--sx-text)); padding: var(--sx-panel-pad); } .box-header .box-title, .panel-heading { font-size: var(--sx-text-lg); font-weight: var(--sx-weight-medium); } .box-body, .panel-body { padding: var(--sx-panel-pad); } .box-footer { background-color: rgb(var(--sx-surface-sunken)); border-top: var(--sx-hairline) solid rgb(var(--sx-border)); padding: var(--sx-panel-pad); } /* ------------------------------------------------------------------- Tables — where the work happens ------------------------------------------------------------------- */ .table { color: rgb(var(--sx-text)); margin-bottom: 0; } .table > thead > tr > th { background-color: rgb(var(--sx-surface-sunken)); border-bottom: var(--sx-hairline) solid rgb(var(--sx-border-strong)); color: rgb(var(--sx-text-muted)); font-size: var(--sx-text-xs); font-weight: var(--sx-weight-medium); letter-spacing: 0.02em; text-transform: uppercase; padding: var(--sx-row-y) var(--sx-row-x); white-space: nowrap; } .table > tbody > tr > td, .table > tfoot > tr > td, .table > tfoot > tr > th { border-top: var(--sx-hairline) solid rgb(var(--sx-border)); padding: var(--sx-row-y) var(--sx-row-x); vertical-align: middle; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgb(var(--sx-surface)); } .table-striped > tbody > tr:nth-of-type(even) { background-color: rgb(var(--sx-neutral-25)); } .table-hover > tbody > tr:hover { background-color: rgb(var(--sx-accent-subtle)); } /** * IN AN ERP, A RIGHT-ALIGNED CELL IS A NUMBER. * * So right-aligned cells get equal-width digits. One declaration, and every * money column in the product lines up — including the several hundred screens * nobody is going to revisit. */ .table > thead > tr > th.text-right, .table > tbody > tr > td.text-right, .table > tfoot > tr > td.text-right, .table > tfoot > tr > th.text-right { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ------------------------------------------------------------------- Buttons ------------------------------------------------------------------- */ .btn { border-radius: var(--sx-radius-sm); border-width: var(--sx-hairline); font-size: var(--sx-text-base); font-weight: var(--sx-weight-medium); padding: var(--sx-control-y) var(--sx-control-x); transition: background-color 0.12s ease, border-color 0.12s ease; } .btn:focus, .btn:focus-visible { outline: 2px solid rgb(var(--sx-focus-ring) / 0.5); outline-offset: 1px; } .btn-primary { background-color: rgb(var(--sx-accent)); border-color: rgb(var(--sx-accent)); color: rgb(var(--sx-neutral-0)); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: rgb(var(--sx-accent-hover)); border-color: rgb(var(--sx-accent-hover)); color: rgb(var(--sx-neutral-0)); } .btn-default { background-color: rgb(var(--sx-surface)); border-color: rgb(var(--sx-border-strong)); color: rgb(var(--sx-text)); } .btn-default:hover, .btn-default:focus { background-color: rgb(var(--sx-surface-sunken)); border-color: rgb(var(--sx-border-strong)); color: rgb(var(--sx-text)); } .btn-success { background-color: rgb(var(--sx-success-600)); border-color: rgb(var(--sx-success-600)); } .btn-warning { background-color: rgb(var(--sx-warning-600)); border-color: rgb(var(--sx-warning-600)); } .btn-danger { background-color: rgb(var(--sx-danger-600)); border-color: rgb(var(--sx-danger-600)); } .btn-info { background-color: rgb(var(--sx-info-500)); border-color: rgb(var(--sx-info-500)); } .btn-link { color: rgb(var(--sx-accent)); } /* ------------------------------------------------------------------- Forms ------------------------------------------------------------------- */ .form-control { background-color: rgb(var(--sx-surface)); border: var(--sx-hairline) solid rgb(var(--sx-border-strong)); border-radius: var(--sx-radius-sm); box-shadow: none; color: rgb(var(--sx-text)); font-size: var(--sx-text-base); height: var(--sx-control-height); padding: var(--sx-control-y) var(--sx-control-x); } .form-control:focus { border-color: rgb(var(--sx-accent)); box-shadow: 0 0 0 3px rgb(var(--sx-focus-ring) / 0.18); } .form-control[disabled], .form-control[readonly] { background-color: rgb(var(--sx-surface-sunken)); color: rgb(var(--sx-text-muted)); } textarea.form-control { height: auto; } label, .control-label { color: rgb(var(--sx-text-muted)); font-size: var(--sx-text-sm); font-weight: var(--sx-weight-medium); margin-bottom: var(--sx-space-1); } .help-block, .text-muted, small { color: rgb(var(--sx-text-muted)); } /* select2 is load-bearing on this product — it is bound in 8 handlers in pos.js — so it is restyled rather than replaced. */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background-color: rgb(var(--sx-surface)); border: var(--sx-hairline) solid rgb(var(--sx-border-strong)); border-radius: var(--sx-radius-sm); min-height: var(--sx-control-height); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: rgb(var(--sx-accent)); } /* ------------------------------------------------------------------- Status — labels carry MEANING, so they read the semantic tokens ------------------------------------------------------------------- */ .label { border-radius: var(--sx-radius-pill); font-size: var(--sx-text-xs); font-weight: var(--sx-weight-medium); letter-spacing: 0.01em; padding: 3px 9px; } .label-default { background-color: rgb(var(--sx-status-draft)); } .label-primary { background-color: rgb(var(--sx-accent)); } .label-success { background-color: rgb(var(--sx-status-approved)); } .label-warning { background-color: rgb(var(--sx-status-pending)); } .label-danger { background-color: rgb(var(--sx-status-overdue)); } .label-info { background-color: rgb(var(--sx-info-500)); } /* ------------------------------------------------------------------- Alerts — a stated fact, not a shouted one ------------------------------------------------------------------- */ .alert { border: var(--sx-hairline) solid rgb(var(--sx-border)); border-radius: var(--sx-radius); border-inline-start-width: 3px; padding: var(--sx-space-3) var(--sx-space-4); } .alert-success { background-color: rgb(var(--sx-success-500) / 0.08); border-color: rgb(var(--sx-success-500) / 0.35); border-inline-start-color: rgb(var(--sx-success-600)); color: rgb(var(--sx-text)); } .alert-info { background-color: rgb(var(--sx-info-500) / 0.08); border-color: rgb(var(--sx-info-500) / 0.35); border-inline-start-color: rgb(var(--sx-info-500)); color: rgb(var(--sx-text)); } .alert-warning { background-color: rgb(var(--sx-warning-500) / 0.10); border-color: rgb(var(--sx-warning-500) / 0.35); border-inline-start-color: rgb(var(--sx-warning-600)); color: rgb(var(--sx-text)); } .alert-danger { background-color: rgb(var(--sx-danger-500) / 0.08); border-color: rgb(var(--sx-danger-500) / 0.35); border-inline-start-color: rgb(var(--sx-danger-600)); color: rgb(var(--sx-text)); } /* ------------------------------------------------------------------- Navigation ------------------------------------------------------------------- */ .main-header .navbar, .main-header .logo { background-color: rgb(var(--sx-surface)); border-bottom: var(--sx-hairline) solid rgb(var(--sx-border)); box-shadow: none; color: rgb(var(--sx-text)); } .main-header .logo { border-inline-end: var(--sx-hairline) solid rgb(var(--sx-border)); font-weight: var(--sx-weight-bold); } .main-header .navbar .nav > li > a, .main-header .logo { color: rgb(var(--sx-text)); } .main-header .navbar .nav > li > a:hover, .main-header .navbar .nav > li > a:focus { background-color: rgb(var(--sx-surface-sunken)); color: rgb(var(--sx-text)); } .main-sidebar, .left-side { background-color: rgb(var(--sx-neutral-900)); } .sidebar-menu > li > a { border-inline-start: 3px solid transparent; color: rgb(var(--sx-neutral-300)); font-size: var(--sx-text-base); } .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { background-color: rgb(var(--sx-neutral-800)); border-inline-start-color: rgb(var(--sx-primary-500)); color: rgb(var(--sx-neutral-0)); } .sidebar-menu .treeview-menu > li > a { color: rgb(var(--sx-neutral-400)); } .sidebar-menu .treeview-menu > li.active > a, .sidebar-menu .treeview-menu > li > a:hover { color: rgb(var(--sx-neutral-0)); } .nav-tabs { border-bottom: var(--sx-hairline) solid rgb(var(--sx-border)); } .nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: rgb(var(--sx-text-muted)); font-weight: var(--sx-weight-medium); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background-color: transparent; border: 0; border-bottom: 2px solid rgb(var(--sx-accent)); color: rgb(var(--sx-text)); } /* ------------------------------------------------------------------- Things that genuinely float — the only place a shadow belongs ------------------------------------------------------------------- */ .dropdown-menu { background-color: rgb(var(--sx-surface-raised)); border: var(--sx-hairline) solid rgb(var(--sx-border)); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-popover); padding: var(--sx-space-1) 0; } .dropdown-menu > li > a { color: rgb(var(--sx-text)); padding: var(--sx-space-2) var(--sx-space-4); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: rgb(var(--sx-accent-subtle)); color: rgb(var(--sx-text)); } .modal-content { background-color: rgb(var(--sx-surface)); border: 0; border-radius: var(--sx-radius-lg); box-shadow: var(--sx-shadow-modal); } .modal-header, .modal-footer { border-color: rgb(var(--sx-border)); } .popover, .tooltip-inner { border-radius: var(--sx-radius); } /* ------------------------------------------------------------------- Pagination and dashboard tiles ------------------------------------------------------------------- */ .pagination > li > a, .pagination > li > span { background-color: rgb(var(--sx-surface)); border-color: rgb(var(--sx-border)); color: rgb(var(--sx-text)); } .pagination > .active > a, .pagination > .active > span { background-color: rgb(var(--sx-accent)); border-color: rgb(var(--sx-accent)); } /** * The dashboard's stat tiles. AdminLTE paints these in saturated blocks of * colour; a command centre reads better as figures on the same surface as * everything else, with one accent doing the pointing. */ .small-box { background-color: rgb(var(--sx-surface)) !important; border: var(--sx-hairline) solid rgb(var(--sx-border)); border-radius: var(--sx-radius); box-shadow: none; } .small-box > .inner { padding: var(--sx-space-4); } .small-box h3, .small-box p { color: rgb(var(--sx-text)) !important; } .small-box h3 { font-size: var(--sx-text-2xl); font-variant-numeric: tabular-nums; font-weight: var(--sx-weight-bold); } .small-box p { color: rgb(var(--sx-text-muted)) !important; font-size: var(--sx-text-sm); } .small-box .icon { color: rgb(var(--sx-border-strong)) !important; } /* ------------------------------------------------------------------- DataTables — kept as the engine, restyled to match ------------------------------------------------------------------- */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background-color: rgb(var(--sx-surface)); border: var(--sx-hairline) solid rgb(var(--sx-border-strong)); border-radius: var(--sx-radius-sm); color: rgb(var(--sx-text)); } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: rgb(var(--sx-text-muted)); font-size: var(--sx-text-sm); } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: rgb(var(--sx-accent)) !important; border-color: rgb(var(--sx-accent)) !important; color: rgb(var(--sx-neutral-0)) !important; } /* ------------------------------------------------------------------- Content header ------------------------------------------------------------------- */ .content-header > h1 { color: rgb(var(--sx-text)); font-size: var(--sx-text-2xl); font-weight: var(--sx-weight-bold); } .content-header > h1 > small { color: rgb(var(--sx-text-muted)); font-weight: var(--sx-weight-normal); } /* ------------------------------------------------------------------- Print — the one place none of this applies ------------------------------------------------------------------- A receipt or an invoice is printed on white by a thermal printer that knows nothing about a theme. Forcing the light values here means a user browsing in dark mode does not print a black rectangle. ------------------------------------------------------------------- */ @media print { body, .wrapper, .content-wrapper, .box, .panel { background: #fff !important; color: #000 !important; } .box, .panel, .table > tbody > tr > td, .table > thead > tr > th { border-color: #999 !important; } }