/* ═══════════════════════════════════════════════════════════════════════════ * theme-pro.css — the panel's design layer * ═══════════════════════════════════════════════════════════════════════════ * * One stylesheet, linked from the of every page in panel/, panel/user/ * and panel/consultancy/, immediately after demo.css and therefore last of the * template's own sheets. That position is the whole mechanism: these rules win * over core.css and theme-default.css on equal specificity, so almost nothing * here needs !important. * * ── Why one file rather than 134 ─────────────────────────── * * The panel is 134 pages of markup built on the same Sneat template, using the * same handful of classes: .card, .table, .btn, .badge, .form-control, the * DataTables chrome. Restyling those classes once changes every page. Editing * pages one at a time would take a hundred commits and would leave the app in * two visual styles for the whole of it. * * ── What "professional accounting software" means here ───── * * It is a set of decisions, not a mood: * * * One accent. Blue, and only for what you can act on - a link, the primary * button, the current tab, the selected row. Colour that means nothing is * noise on a screen where red and green mean something. * * Red and green are money and status. Never decoration. The template shipped * an acid lime for "success" and an orange-red for "danger", both of which * read as a warning at a glance; those are retinted at source, in the vendor * sheets, to a ledger green and a ledger red. * * Figures line up. font-variant-numeric: tabular-nums on every table cell * and every input, so a column of amounts is a column and not a ragged * edge. This is the single largest difference between a bookkeeping screen * and a web page with numbers on it. * * Density over air. 13px in tables, 8px cell padding, hairline rules. A * reconciliation screen is read a row at a time; every 4px of padding is a * row that came off the screen. * * Flat. 1px borders and a shadow you have to look for. The template's * borderless cards on soft shadows float; a ledger does not float. * * ── The tokens are a contract ────────────────────────────── * * The shared partials - menu_collapse.php, nav_chrome.php, stat_tiles.php, * period_picker.php, row_menu.php - and a few pages with styles of their own * all draw their colours from the custom properties below. Change a token here * and the whole panel follows. Write a hex literal in a page and it does not, * which is how the app came to hold 435 copies of one purple. */ :root { /* ── Surfaces ──────────────────────────────────────────── */ --pro-canvas: #eef1f6; /* the page behind the cards */ --pro-surface: #ffffff; /* cards, menus, table bodies */ --pro-surface-alt: #f7f9fc; /* table heads, toolbars, hovered rows */ --pro-line: #e3e8f0; /* hairline: card edges, row rules */ --pro-line-strong: #cfd8e5; /* input edges, the rule under a table head */ /* ── Ink ───────────────────────────────────────────────── */ --pro-ink: #16202e; /* headings and figures */ --pro-ink-2: #45566c; /* body text */ --pro-ink-3: #78889b; /* labels, meta, anything muted */ /* ── The accent ────────────────────────────────────────── */ --pro-accent: #1a56db; --pro-accent-dark: #1449b8; --pro-accent-soft: #e9f0fd; /* ── Semantic: money and status only ───────────────────── */ --pro-pos: #0f7b4f; --pro-pos-soft: #e7f4ed; --pro-neg: #b42318; --pro-neg-soft: #fdeceb; --pro-warn: #c77700; --pro-warn-soft: #fdf3e6; --pro-info: #0e7490; --pro-info-soft: #e4f1f5; /* ── Shape ─────────────────────────────────────────────── */ --pro-radius: 8px; /* cards, modals, popovers */ --pro-radius-sm: 6px; /* buttons, inputs, chips */ --pro-shadow: 0 1px 2px rgba(16, 24, 40, .06); --pro-shadow-pop: 0 10px 28px rgba(16, 24, 40, .14); /* ── The left navigation ───────────────────────────────── */ --pro-nav-bg: #111c2e; --pro-nav-bg-deep: #0c1524; --pro-nav-ink: #9fb2cc; --pro-nav-ink-strong: #ffffff; --pro-nav-hover: rgba(255, 255, 255, .07); --pro-nav-line: rgba(255, 255, 255, .09); /* ── Metrics shared with menu_collapse.php ─────────────── */ --pro-rail: 74px; /* the collapsed menu */ --pro-nav: 264px; /* the same menu, hovered */ --pro-ease: cubic-bezier(.4, 0, .2, 1); /* ── Bootstrap's own variables ─────────────────────────── */ /* Set here rather than chased selector by selector: everything in core.css that reads them follows without another rule being written. The -rgb pair has to stay a bare triple - Bootstrap feeds it to rgba(). */ --bs-body-font-size: .875rem; --bs-body-color: #45566c; --bs-body-bg: #eef1f6; --bs-border-color: #e3e8f0; --bs-primary: #1a56db; --bs-primary-rgb: 26, 86, 219; --bs-link-color: #1a56db; --bs-link-hover-color: #1449b8; --bs-border-radius: 6px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 8px; } /* ═══════════════════════════════════════════════════════════ * Base * ═══════════════════════════════════════════════════════════ */ body { background: var(--pro-canvas); color: var(--pro-ink-2); font-size: .875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--pro-ink); font-weight: 600; letter-spacing: -.005em; } h4, .h4 { font-size: 1.125rem; } h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: .875rem; } .text-muted { color: var(--pro-ink-3) !important; } small, .small { font-size: .8125rem; } hr { border-color: var(--pro-line); opacity: 1; } /* Figures, wherever they are typed or shown. Tabular figures are fixed-width, so 1.111,00 and 8.888,00 occupy the same space and a column has an edge. */ .table, .table th, .table td, .form-control, .form-select, input, select, textarea, .stile__value, .pp__year { font-variant-numeric: tabular-nums; } /* Keyboard focus stays visible everywhere. The template drops the outline on several controls and replaces it with a shadow that its own :hover then overwrites, which leaves parts of a form untraversable without a mouse. */ :focus-visible { outline: 2px solid var(--pro-accent); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════ * Layout: the top bar and the content column * ═══════════════════════════════════════════════════════════ */ /* The template's bar is a floating rounded card inset from three edges. On a screen whose content is a full-width table that reads as a second card hovering over the first. Flattened to a bar: full bleed, one hairline under it, and sticky, so the page you are on and the account you are signed in as stay put while a long ledger scrolls. z-index sits under Bootstrap's modal (1050) and under the row menu (1080), both of which must be able to cover it. */ .layout-navbar.navbar-detached, .layout-navbar { margin: 0 !important; width: auto !important; max-width: none !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--pro-line); background: var(--pro-surface) !important; min-height: 56px; padding: .5rem 1.25rem !important; position: sticky; top: 0; z-index: 1040; } /* Room the flattened bar no longer needs above it. */ .layout-page > .content-wrapper > .container-xxl.container-p-y, .layout-page > .content-wrapper > .container-fluid.container-p-y { padding-top: 1.25rem; padding-bottom: 1.25rem; } /* ═══════════════════════════════════════════════════════════ * Cards * ═══════════════════════════════════════════════════════════ */ .card { background: var(--pro-surface); border: 1px solid var(--pro-line); border-radius: var(--pro-radius); box-shadow: var(--pro-shadow); margin-bottom: 1rem; } .card-header, h5.card-header, h6.card-header { background: transparent; border-bottom: 1px solid var(--pro-line); padding: .875rem 1.125rem; font-size: .9375rem; font-weight: 600; color: var(--pro-ink); } .card-header .card-title, .card-title { font-size: .9375rem; font-weight: 600; color: var(--pro-ink); margin-bottom: 0; } .card-body { padding: 1.125rem; } .card-footer { background: transparent; border-top: 1px solid var(--pro-line); padding: .75rem 1.125rem; } /* A table is the card's content, not something inside its padding. */ .card > .table-responsive > .table, .card > .table, .card-body > .table-responsive > .table:only-child { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════ * Tables — the screens this app is for * ═══════════════════════════════════════════════════════════ */ .table { --bs-table-bg: transparent; color: var(--pro-ink-2); font-size: .8125rem; border-color: var(--pro-line); } /* The column names: small, uppercase, spaced, and quiet. They are read once, on arrival; the rows are read all day. */ .table > thead > tr > th, .table > thead > tr > td, table.dataTable > thead > tr > th { background: var(--pro-surface-alt); color: var(--pro-ink-3); font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .625rem .75rem; border-bottom: 1px solid var(--pro-line-strong) !important; border-top: 0; white-space: nowrap; vertical-align: middle; } .table > tbody > tr > td, .table > tbody > tr > th { padding: .5rem .75rem; border-bottom: 1px solid var(--pro-line); border-top: 0; vertical-align: middle; line-height: 1.45; } /* The last rule would draw against the card's own bottom edge. */ .table > tbody > tr:last-child > td, .table > tbody > tr:last-child > th { border-bottom: 0; } /* Row hover through Bootstrap's own accent variable rather than a background on the cell: the cells carry an inset box-shadow of --bs-table-accent-bg, which would paint over any background-color set here. Applied to every table, not only .table-hover - following one row across fourteen columns is what these screens are for. */ .table > tbody > tr:hover { --bs-table-accent-bg: var(--pro-surface-alt); } /* Inside a horizontal scroller the head stays put while the rows move. Where a table is not in a scrolling box this does nothing, which is why it is safe to apply to all of them. */ .table-responsive > .table > thead > tr > th { position: sticky; top: 0; z-index: 2; } .table-responsive { border-radius: var(--pro-radius); scrollbar-width: thin; } /* Bootstrap's contextual rows, softened. The vendor tints are strong enough to turn a whole row into a warning; here the tint is a hint and the eye is caught by the ink, not the fill. */ .table > tbody > tr.table-danger { --bs-table-accent-bg: var(--pro-neg-soft); color: var(--pro-neg); } .table > tbody > tr.table-success { --bs-table-accent-bg: var(--pro-pos-soft); color: var(--pro-pos); } .table > tbody > tr.table-warning { --bs-table-accent-bg: var(--pro-warn-soft); color: var(--pro-warn); } /* ═══════════════════════════════════════════════════════════ * Buttons * ═══════════════════════════════════════════════════════════ */ /* The template lifts every button 1px on hover and drops a coloured shadow under it. Both are removed: a toolbar of eleven buttons that all jump is a toolbar that is never still, and the shadow makes a small control look like a card. */ .btn { font-size: .8125rem; font-weight: 500; padding: .4375rem .875rem; border-radius: var(--pro-radius-sm); box-shadow: none !important; transform: none !important; letter-spacing: 0; } .btn-sm { font-size: .75rem; padding: .25rem .625rem; } .btn-lg { font-size: .875rem; padding: .5625rem 1.125rem; } .btn-primary, .btn-primary:focus { background-color: var(--pro-accent); border-color: var(--pro-accent); color: #fff; } .btn-primary:hover, .btn-primary:active, .btn-primary.active { background-color: var(--pro-accent-dark) !important; border-color: var(--pro-accent-dark) !important; color: #fff; } .btn-outline-primary { color: var(--pro-accent); border-color: var(--pro-accent); } .btn-outline-primary:hover, .btn-outline-primary.active, .btn-check:checked + .btn-outline-primary { background-color: var(--pro-accent) !important; border-color: var(--pro-accent) !important; color: #fff !important; } /* The neutral button. The template's "secondary" is a filled grey block that competes with the primary; an outline in the hairline colour does not. */ .btn-secondary, .btn-outline-secondary { background-color: transparent; border-color: var(--pro-line-strong); color: var(--pro-ink-2); } .btn-secondary:hover, .btn-outline-secondary:hover { background-color: var(--pro-surface-alt) !important; border-color: var(--pro-line-strong) !important; color: var(--pro-ink) !important; } /* ═══════════════════════════════════════════════════════════ * Badges and status chips * ═══════════════════════════════════════════════════════════ */ /* Not uppercased here: a badge on these screens sometimes holds a count, a currency or a filename, and forcing case on those does more harm than the tidier column of statuses is worth. */ .badge { font-size: .6875rem; font-weight: 600; padding: .3em .5em; border-radius: 4px; letter-spacing: .01em; line-height: 1.35; box-shadow: none !important; } .badge.bg-label-primary { background-color: var(--pro-accent-soft) !important; color: var(--pro-accent) !important; } .badge.bg-label-success { background-color: var(--pro-pos-soft) !important; color: var(--pro-pos) !important; } .badge.bg-label-danger { background-color: var(--pro-neg-soft) !important; color: var(--pro-neg) !important; } .badge.bg-label-warning { background-color: var(--pro-warn-soft) !important; color: var(--pro-warn) !important; } .badge.bg-label-info { background-color: var(--pro-info-soft) !important; color: var(--pro-info) !important; } .badge.bg-label-secondary { background-color: var(--pro-surface-alt) !important; color: var(--pro-ink-3) !important; } /* ═══════════════════════════════════════════════════════════ * Forms * ═══════════════════════════════════════════════════════════ */ .form-control, .form-select { font-size: .8125rem; padding: .4375rem .75rem; color: var(--pro-ink); background-color: var(--pro-surface); border: 1px solid var(--pro-line-strong); border-radius: var(--pro-radius-sm); } .form-control:focus, .form-select:focus { border-color: var(--pro-accent); box-shadow: 0 0 0 3px var(--pro-accent-soft) !important; } .form-control::placeholder { color: var(--pro-ink-3); opacity: .8; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--pro-surface-alt); color: var(--pro-ink-3); } .form-control-sm, .form-select-sm { font-size: .75rem; padding: .25rem .5rem; } /* The select's chevron is a background image pinned .875rem from the right edge, so the right padding is not padding - it is the room the arrow sits in. Setting all four sides above put "In and out" underneath its own chevron; these put the room back, and must come after the -sm shorthand or that shorthand takes it away again. */ .form-select { padding-right: 1.75rem; } .form-select-sm { padding-right: 1.5rem; background-position: right .5rem center; } /* Field names, in the same key as the column names above them, so a form and a table read as one screen. */ .form-label, .col-form-label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--pro-ink-3); margin-bottom: .3rem; } .input-group-text { background-color: var(--pro-surface-alt); border-color: var(--pro-line-strong); color: var(--pro-ink-3); font-size: .8125rem; } .form-check-input { border-color: var(--pro-line-strong); } .form-check-input:checked { background-color: var(--pro-accent); border-color: var(--pro-accent); } .form-check-input:focus { box-shadow: 0 0 0 3px var(--pro-accent-soft); } .form-check-label { font-size: .8125rem; color: var(--pro-ink-2); } /* ═══════════════════════════════════════════════════════════ * Tabs and pills * ═══════════════════════════════════════════════════════════ */ /* Underline tabs, matching period_picker.php's year row - the app had three different tab treatments and this is the one that costs the least height. */ .nav-tabs { border-bottom: 1px solid var(--pro-line); gap: .125rem; } .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent !important; box-shadow: none !important; padding: .5rem .875rem; margin-bottom: -1px; font-size: .8125rem; font-weight: 500; color: var(--pro-ink-3); } .nav-tabs .nav-link:hover { color: var(--pro-ink-2); } .nav-tabs .nav-link.active { color: var(--pro-accent); border-bottom-color: var(--pro-accent); font-weight: 600; } .nav-pills .nav-link { border-radius: var(--pro-radius-sm); font-size: .8125rem; font-weight: 500; color: var(--pro-ink-2); padding: .375rem .75rem; } .nav-pills .nav-link.active, .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus { background-color: var(--pro-accent); color: #fff; box-shadow: none; } /* ═══════════════════════════════════════════════════════════ * Menus, modals, alerts * ═══════════════════════════════════════════════════════════ */ .dropdown-menu { border: 1px solid var(--pro-line); border-radius: var(--pro-radius); box-shadow: var(--pro-shadow-pop); padding: .25rem; font-size: .8125rem; } .dropdown-item { border-radius: var(--pro-radius-sm); padding: .4rem .625rem; color: var(--pro-ink-2); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--pro-accent-soft); color: var(--pro-accent); } .dropdown-divider { border-color: var(--pro-line); } .modal-content { border: 1px solid var(--pro-line); border-radius: var(--pro-radius); box-shadow: var(--pro-shadow-pop); } .modal-header { border-bottom: 1px solid var(--pro-line); padding: 1rem 1.25rem; } .modal-title { font-size: 1rem; font-weight: 600; color: var(--pro-ink); } .modal-body { padding: 1.25rem; } .modal-footer { border-top: 1px solid var(--pro-line); padding: .75rem 1.25rem; gap: .5rem; } .alert { border-radius: var(--pro-radius-sm); border-width: 1px; font-size: .8125rem; padding: .625rem .875rem; } .alert-success { background-color: var(--pro-pos-soft); border-color: var(--pro-pos); color: var(--pro-pos); } .alert-danger { background-color: var(--pro-neg-soft); border-color: var(--pro-neg); color: var(--pro-neg); } .alert-warning { background-color: var(--pro-warn-soft); border-color: var(--pro-warn); color: var(--pro-warn); } .alert-info { background-color: var(--pro-info-soft); border-color: var(--pro-info); color: var(--pro-info); } .tooltip-inner { background: var(--pro-ink); border-radius: var(--pro-radius-sm); font-size: .75rem; padding: .3rem .5rem; } /* ═══════════════════════════════════════════════════════════ * Pagination * ═══════════════════════════════════════════════════════════ */ .pagination { font-size: .75rem; } .pagination .page-link { color: var(--pro-ink-2); background: var(--pro-surface); border: 1px solid var(--pro-line); border-radius: var(--pro-radius-sm) !important; margin: 0 2px; padding: .3rem .55rem; box-shadow: none !important; } .pagination .page-link:hover { background: var(--pro-surface-alt); color: var(--pro-ink); border-color: var(--pro-line-strong); } .pagination .page-item.active .page-link { background: var(--pro-accent); border-color: var(--pro-accent); color: #fff; } .pagination .page-item.disabled .page-link { color: var(--pro-ink-3); background: var(--pro-surface-alt); } /* ═══════════════════════════════════════════════════════════ * DataTables * ═══════════════════════════════════════════════════════════ */ /* 97 pages load datatables.min.css from a CDN, and they load it *after* this file - the link sits below the theme links in every head. So unlike everything above, these rules are outranked on load order and need !important to land. Worth doing rather than reordering 97 heads: the search box and the row count are on nearly every screen in the panel. */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: .75rem !important; color: var(--pro-ink-3) !important; padding-top: .35rem !important; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { color: var(--pro-ink) !important; background: var(--pro-surface) !important; border: 1px solid var(--pro-line-strong) !important; border-radius: var(--pro-radius-sm) !important; padding: .25rem .5rem !important; font-size: .75rem !important; box-shadow: none !important; } .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { border-color: var(--pro-accent) !important; box-shadow: 0 0 0 3px var(--pro-accent-soft) !important; outline: 0 !important; } .dataTables_wrapper .dataTables_filter input { min-width: 14rem; } /* The sort arrows. Left at the vendor's opacity they are near-black against an 11px uppercase label and read as part of the text. */ table.dataTable thead th.sorting::before, table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::before, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::before, table.dataTable thead th.sorting_desc::after { color: var(--pro-ink-3) !important; opacity: .45 !important; } table.dataTable thead th.sorting_asc::before, table.dataTable thead th.sorting_desc::after { color: var(--pro-accent) !important; opacity: 1 !important; } table.dataTable thead th { outline: 0 !important; } /* The row DataTables stripes. Its own odd/even colours ignore the palette. */ table.dataTable.stripe tbody tr.odd, table.dataTable tbody tr.odd { background-color: transparent !important; } /* ═══════════════════════════════════════════════════════════ * Selected things, on the pages the period picker has not reached * ═══════════════════════════════════════════════════════════ */ /* The panel's "this one is chosen" colour was `aquamarine`, and it was applied * as an inline background-color by jQuery - 80 calls across 26 pages, on year * cards, month chips, tab strips and picked table rows. An inline style beats * every stylesheet, so no theme could reach it: whatever else the app looked * like, the selected year stayed mint green. * * Those calls now toggle .is-selected, the name period_picker.php already uses, * and the look lives here. The classes are listed rather than matched with a * wildcard because they are a closed set - six year names, five month names, * one row name - and a [class*="year-"] would also catch the picker's own * buttons, which are styled in period_picker.php and must not be overruled. */ /* The year cards on the pages that still draw a card per year. */ .card.is-selected, .card.sel-year { border-color: var(--pro-accent); background: var(--pro-accent-soft); box-shadow: inset 0 0 0 1px var(--pro-accent); } .card.is-selected .card-title, .card.is-selected span, .card.sel-year .card-title, .card.sel-year span { color: var(--pro-accent) !important; } /* Chips and tab strips: the chosen one is filled, the way the picker's months are, so the two patterns read the same while the migration is unfinished. Every selector is guarded against the picker's own classes. A page that has moved to period_picker.php keeps the legacy names on the same element - the year row on Invoice reads class="pp__year year-button tab-button" - so without the guard this rule would fill a tab the picker draws as an underline, which is the one thing the picker exists to stop. */ .tab-button.is-selected:not(.pp__year), .tab-month.is-selected:not(.pp__month), .year-button.is-selected:not(.pp__year), .year-timesheet.is-selected:not(.pp__year), .year-request.is-selected:not(.pp__year), .month-button.is-selected:not(.pp__month), .month-button-hol.is-selected:not(.pp__month), .month-timesheet.is-selected:not(.pp__month), .month-request.is-selected:not(.pp__month) { background: var(--pro-accent) !important; border-color: var(--pro-accent) !important; color: #fff !important; font-weight: 600; } /* A picked row in a list - Internal Timesheet picks a person this way. Tinted rather than filled: it is a row of text, not a control. */ .user-name.is-selected, tr.is-selected > td { background: var(--pro-accent-soft) !important; color: var(--pro-accent) !important; font-weight: 600; } /* ═══════════════════════════════════════════════════════════ * Scrollbars * ═══════════════════════════════════════════════════════════ */ /* Thin and neutral. A 17px platform scrollbar down the side of every table inside every card is a lot of furniture on a screen made of tables. The left menu sets its own on top of this - see menu_collapse.php. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--pro-line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--pro-ink-3); background-clip: content-box; } /* ═══════════════════════════════════════════════════════════ * Print * ═══════════════════════════════════════════════════════════ */ /* Statements, invoice lists and reports get printed and filed. Without this the navigation prints as a navy column down the left of page one. */ @media print { #layout-menu, .layout-navbar, .dataTables_length, .dataTables_filter, .dataTables_paginate { display: none !important; } .layout-page { padding-left: 0 !important; } body { background: #fff; } .card { border: 0; box-shadow: none; margin-bottom: .5rem; break-inside: avoid; } .table > thead > tr > th { background: #fff; border-bottom: 1px solid #000 !important; } .table-responsive { overflow: visible !important; } }