/* ============================================================================ * ui-teal.css — UI variant "D / Harbour Teal". * * Enabled with $UI_STYLE = 'teal'; in config.php. Scoped to body.ui-teal. * * Intent: built for staff who stare at the job list all shift. Cool teal chrome * against warm sand neutrals, with brass reserved for the one action that * commits a change, so "Save" and "Search" are the only brass on the screen and * teal is free to mean "you are here". * * Colour: this is the one variant that changes the HUE, not just the geometry. * crisp / panel / warm all re-use the shipped orange roles; teal re-points the * role tokens themselves on body.ui-teal. Everything downstream -- style.css, * listing-filters.css, ai-assist.css, the ng_* screens -- reads roles rather * than literals, so they follow with no edits. * * Why the roles are re-declared rather than the ramps: theme.css declares * `--color-chrome: var(--brand)` ON :root, and custom-property substitution * happens at the element that DECLARES the property. Overriding --brand further * down the tree would therefore change nothing. Each role that moves is * re-declared here against a local --tl-* ramp declared on the same element. * * Font: the mock named Inter. Nothing in lib/ ships it, and font-src in the CSP * is 'self' data:, so pulling it from Google would add a violation this variant * has no business adding. The system UI face is used instead -- it is the same * class of grotesque and is tighter than Montserrat at 14px in dense tables, * which was the reason for the swap. Drop a self-hosted Inter into lib/webfonts * and name it first in --ui-font if you want the real thing. * * Form layouts are untouched: #report_cond / #report_cond1 and any table * without a are excluded from the table rules. Add class "ui-plain" to * opt any other table out. * ========================================================================== */ body.ui-teal { /* --- local ramp ------------------------------------------------------- */ --tl-deep: #0F4C5C; /* chrome: header strip, footer, drawer */ --tl-deep-ink: #E9F2F4; /* text on the deep strip */ --tl-deep-faint: #A8C4CC; /* quieter text on the deep strip (footer) */ --tl-teal: #0E7490; /* navigation, links, selection */ --tl-teal-strong: #0B5F76; /* pressed / hover */ --tl-teal-line: #9FC6D1; /* teal hairline */ --tl-teal-fill: #BFDDE5; /* teal fill (report highlight) */ --tl-teal-soft: #E6F4F7; /* tinted panel / hovered row */ --tl-teal-soft-2: #D3E7EC; /* tinted stripe / selected row */ --tl-side: #F2F7F8; /* sidebar rail */ --tl-thead: #EFF5F6; /* column-header band */ --tl-brass: #B45309; /* primary action -- and only that */ --tl-brass-strong:#92400E; --tl-sand: #F7F5F2; /* warm canvas, takes the glare off */ --tl-stripe: #FBFAF8; /* warm zebra, a third of the canvas */ --tl-ink: #243B44; --tl-ink-2: #33505B; --tl-muted: #5B7480; --tl-faint: #86A0AB; --tl-line: #DCE4E7; --tl-line-soft: #EAF0F2; --tl-line-strong: #B9C9CF; /* --- roles (see theme.css for what each one is for) ------------------- */ /* chrome */ --color-chrome: var(--tl-deep); --color-chrome-ink: var(--tl-deep-ink); --color-nav-panel: var(--tl-deep); --color-nav-panel-ink: var(--tl-deep-ink); --color-footer: var(--tl-deep); --color-footer-ink: var(--tl-deep-faint); /* action + emphasis. --color-accent stays teal because it is what marks state -- active nav, links, selected row. Brass is applied to .btn-primary alone, further down, so a screen full of teal has exactly one warm button on it and that button is the one that writes to the database. */ --color-accent: var(--tl-teal); --color-accent-ink: #FFFFFF; --color-accent-hover: var(--tl-teal-strong); --color-accent-alt: var(--tl-brass); --color-accent-soft: var(--tl-teal-soft); --color-accent-stripe: var(--tl-teal-soft-2); --color-accent-line: var(--tl-teal-line); --color-accent-fill: var(--tl-teal-fill); --color-nav-active: var(--tl-teal); --color-link: var(--tl-teal); --color-blue: var(--tl-deep); --color-focus-ring: rgba(14, 116, 144, .30); /* surfaces */ --color-canvas: var(--tl-sand); --color-surface: #FFFFFF; --color-surface-alt: var(--tl-thead); --color-surface-sunken: var(--tl-stripe); /* text */ --color-text: var(--tl-ink); --color-text-2: var(--tl-ink-2); --color-text-alt: var(--tl-ink); --color-muted: var(--tl-muted); --color-faint: var(--tl-faint); --color-on-accent: #FFFFFF; /* structure */ --color-line: var(--tl-line); --color-line-soft: var(--tl-line-soft); --color-line-strong: var(--tl-line-strong); --radius: .5rem; /* status. Deliberately re-tuned rather than inherited: the shipped set is Bootstrap's, which is bright enough to fight teal chrome for attention. These are the same four meanings at a weight that sits under it. Note --color-warn lands on the same brass as the primary button -- in this palette "needs attention" and "commit this" are the one warm hue. */ --color-ok: #15803D; --color-warn: var(--tl-brass); --color-danger: #B91C1C; --color-info: var(--tl-teal); --color-export: #15803D; /* --- variant geometry -------------------------------------------------- */ --ui-header-h: 52px; --ui-radius: 8px; --ui-shadow: 0 1px 2px rgba(15, 76, 92, .06); --ui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--color-canvas); font-family: var(--ui-font); } /* style.css names 'Montserrat' on body, html, p and a few others, so the face has to be re-stated at the same specificity or better rather than inherited. */ body.ui-teal, body.ui-teal p, body.ui-teal .btn, body.ui-teal .form-control, body.ui-teal input, body.ui-teal select, body.ui-teal textarea, body.ui-teal table { font-family: var(--ui-font); } /* --------------------------------------------------------------------------- * Chrome — deep harbour strip. No accent rule under it: the strip is already a * different hue from everything below, which is what a rule would have been * doing on the near-black panel variant. * ------------------------------------------------------------------------- */ body.ui-teal .top-strip { padding: 0; } body.ui-teal .header { box-shadow: 0 1px 0 rgba(15, 76, 92, .22); } body.ui-teal .logo img { height: 32px; } body.ui-teal .top-strip > .container-fluid > .row { min-height: var(--ui-header-h); } /* The header is fixed, so the content offset must clear it. --ui-header-h is the header's own height; the extra 4px is breathing room, not a magic number. */ @media (min-width: 768px) { body.ui-teal .main-content { padding-top: calc(var(--ui-header-h) + 4px); } /* The sidebar rides on a tinted rail instead of the drop shadow classic uses to lift it off the page — a tint separates the two regions without putting a grey haze down the middle of every screen. */ body.ui-teal .dash-left { top: calc(var(--ui-header-h) + 4px); height: calc(100vh - var(--ui-header-h) - 4px); background: var(--tl-side); border-right: 1px solid var(--color-line); box-shadow: none; padding-top: 6px; } } /* Nav items read as pills; the active one is a solid teal block, so it holds up against the tinted rail the way coloured text alone would not. */ body.ui-teal .main-menu ul li a { padding: 8px 12px; margin: 1px 8px; border-radius: 6px; font-size: 13.5px; } body.ui-teal .main-menu ul ul li a { padding: 6px 10px; border-radius: 5px; } body.ui-teal .main-menu ul > li.active > a, body.ui-teal .main-menu ul > li.active > a:hover { background: var(--color-accent); color: var(--color-on-accent); } /* The caret glyph is a child that style.css colours separately. */ body.ui-teal .main-menu ul > li.active > a i { color: rgba(255, 255, 255, .85); } body.ui-teal .main-menu ul ul { background: transparent; } body.ui-teal .breadcrumb { background: none; border-radius: 0; padding: 0 2px 7px !important; margin: 0 0 12px; border-bottom: 1px solid var(--color-line); } body.ui-teal .breadcrumb-item + .breadcrumb-item::before { color: var(--color-line-strong); } body.ui-teal .main-content-area > h5 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--color-text); margin-bottom: 14px; } /* --------------------------------------------------------------------------- * List tables — tinted header band, warm stripe, no vertical rules. Rows are * held by the stripe and the band rather than by a full grid. * ------------------------------------------------------------------------- */ body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) { border-collapse: separate; border-spacing: 0; border-radius: var(--ui-radius); overflow: hidden; border: 1px solid var(--color-line); box-shadow: var(--ui-shadow); width: 100%; margin-bottom: 0; font-size: 13.5px; } body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) thead th { background: var(--tl-thead); color: var(--color-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 10px 12px; vertical-align: middle; line-height: 1.5; white-space: nowrap; border: 0; border-bottom: 1px solid var(--color-line); border-radius: 0; } body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) td { padding: 10px 12px; vertical-align: middle; line-height: 1.5; /* style.css sets 22px globally, which busts the 38px row */ color: var(--color-text-2); border: 0; border-bottom: 1px solid var(--color-line-soft); border-radius: 0; } /* border-collapse is separate here (the rounded corners need it), so the last row would otherwise double up against the table's own border. */ body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) tbody tr:last-child td { border-bottom: 0; } body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) tbody tr:nth-of-type(odd), body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) tr:nth-child(odd) { background: var(--color-surface); } body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) tbody tr:nth-of-type(even), body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) tr:nth-child(even) { background: var(--tl-stripe); } body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) tbody tr:hover, body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) tr:hover { background: var(--color-accent-soft); } /* Selection is the stronger tint plus a rail, so it stays distinct from hover. */ body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) tbody tr:is(.ui-selected, .li_active, .selected) td { background: var(--color-accent-stripe); color: var(--color-text); } body.ui-teal :is(#report, table.table:has(thead)):not(#report_cond):not(#report_cond1):not(.ui-plain) tbody tr:is(.ui-selected, .li_active, .selected) td:first-child { box-shadow: inset 4px 0 0 var(--color-accent); } body.ui-teal #report tr.reportsubheader td, body.ui-teal #report tr.reporttotalheader td { font-weight: 600; } /* Opt-in bounded scroller with a pinned header row — see the note in ui-crisp.css for why this cannot be applied globally. */ body.ui-teal .table-sticky { max-height: calc(100vh - 250px); overflow: auto; border-radius: var(--ui-radius); } body.ui-teal .table-sticky thead th { position: sticky; top: 0; z-index: 2; } /* --------------------------------------------------------------------------- * Controls, cards, modals. * ------------------------------------------------------------------------- */ body.ui-teal .btn { border-radius: 6px; padding: 6px 13px; font-weight: 600; } /* Brass, and only here. style.css already points .btn-primary at the accent roles, so this is the one place the two hues part company — every other accent surface in the app stays teal. */ body.ui-teal .btn-primary { background-color: var(--tl-brass); border: none; color: #FFFFFF; } body.ui-teal .btn-primary:hover, body.ui-teal .btn-primary.focus, body.ui-teal .btn-primary:focus, body.ui-teal .btn-primary:not(:disabled):not(.disabled).active, body.ui-teal .btn-primary:not(:disabled):not(.disabled):active, body.ui-teal .show > .btn-primary.dropdown-toggle { background-color: var(--tl-brass-strong); border-color: var(--tl-brass-strong); color: #FFFFFF; } body.ui-teal .btn-primary.focus, body.ui-teal .btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(180, 83, 9, .30); } body.ui-teal .form-control:focus { border-color: var(--color-accent); box-shadow: 0 0 0 .2rem var(--color-focus-ring); } body.ui-teal .card { border-radius: var(--ui-radius); border-color: var(--color-line); box-shadow: var(--ui-shadow); } body.ui-teal .card-header { background: var(--color-accent-soft); color: var(--color-accent); border-bottom: 1px solid var(--color-accent-line); font-weight: 650; } body.ui-teal .modal-content { border-radius: var(--ui-radius); border-color: var(--color-line); box-shadow: 0 18px 50px -18px rgba(15, 76, 92, .45); } /* modalbox.css (loaded everywhere by toasts.php) paints .modal-header with a solid --color-accent and sets `color: white` on the whole header. Turning the band into a light tint therefore has to bring the inherited white text back, or it goes invisible. Setting the colour on the HEADER rather than on .modal-title is the point: only the newer CRUD screens use
. The confirm and message boxes in toasts.php, and the respondent list in submit-emer.php, use a bare
with no class at all, so a .modal-title rule never reaches them and they were the ones that vanished. Contrast is 4.8:1 on the tint. */ body.ui-teal .modal-header { background: var(--color-accent-soft); border-bottom: 1px solid var(--color-accent-line); padding: 11px 16px; color: var(--color-accent); } body.ui-teal .modal-header .modal-title { color: var(--color-accent); font-size: 16px; font-weight: 700; } body.ui-teal .modal-header .close { color: var(--color-accent); text-shadow: none; opacity: .75; } body.ui-teal .modal-header .close:hover, body.ui-teal .modal-header .close:focus { color: var(--color-accent-hover); opacity: 1; } body.ui-teal .pagination .page-link { border-radius: 6px; margin-left: 2px; color: var(--color-text-2); border-color: var(--color-line); } body.ui-teal .pagination .active .page-link { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } body.ui-teal .footer { margin-top: 28px; } /* --------------------------------------------------------------------------- * Login screen — login.php. * ------------------------------------------------------------------------- */ /* The colour roles above already carry this page: the wash turns harbour teal and the button turns brass with no rules at all. What is left is geometry — the softer corner this variant uses, and the sand ground behind the card. */ body.ui-teal .oss-login-card { border-radius: 12px; border: 1px solid var(--color-line); box-shadow: 0 14px 44px -14px rgba(15, 76, 92, .38); } body.ui-teal .oss-hero { padding: 46px 40px; } body.ui-teal .oss-hero::before { background: linear-gradient(150deg, var(--color-chrome) 0%, var(--color-accent) 100%); opacity: .82; } body.ui-teal .oss-form { padding: 50px 44px; } body.ui-teal .oss-form h2 { font-weight: 700; } body.ui-teal .oss-form .form-control { height: 44px; border-radius: var(--ui-radius); border-color: var(--color-line); } /* Brass, alone on the screen, on the one control that commits — the rule the whole variant is built around. --color-accent-alt is already brass. */ body.ui-teal .oss-form .btn-primary { height: 44px; border-radius: var(--ui-radius); } body.ui-teal .oss-theme-pick select { border-radius: var(--ui-radius); }