/* input(762,11): run-time error CSS1035: Expected colon, found '.' */ /* * JEDWare design system. * * Compiled to jedware.css by the Visual Studio Web Compiler extension (compilerconfig.json). * Linked from _Layout.cshtml AFTER style.min.css. * * AUTHORING RULES (same convention as report-generated.less) * ---------------------------------------------------------- * 1. This file is plain modern CSS that merely happens to compile through LESS. No LESS mixins, * no LESS @variables, no LESS operations — so it can drop the compiler dependency later by * being renamed to .css, and so the committed .css can be produced by copying this file. * * 2. Loading after style.min.css is what makes section 2 below work. Both sheets declare custom * properties on :root at identical specificity, so source order decides and this file wins. * The dark block uses :root[data-theme="dark"] (0,2,0) so it also beats style.css's * [data-theme="dark"] (0,1,0) regardless of order. * * 3. New markup uses jw-* classes. Never a bare element selector — style.less already styles * `nav`, `header`, `section`, `article` and `content` globally (see section 4). */ /* ============================================================================ * 1. TOKENS * Tier 1 primitives -> Tier 2 semantic -> Tier 3 domain. * Components consume Tier 2 and Tier 3 only, never Tier 1. * ========================================================================= */ :root { /* --- Tier 1: primitives. Cool graphite; orange is the only warm thing on the page. --- */ --jw-g-0: #FFFFFF; --jw-g-25: #FAFBFC; --jw-g-50: #F4F6F8; --jw-g-100: #E9EDF1; --jw-g-200: #D8DEE6; --jw-g-300: #BEC7D2; --jw-g-400: #94A0AF; --jw-g-500: #6B7789; --jw-g-600: #4E5968; --jw-g-700: #3A434F; --jw-g-800: #262D36; --jw-g-900: #171C22; --jw-g-950: #0E1216; --jw-brand: #F7921E; --jw-brand-600: #DE7C0C; --jw-brand-300: #FFB454; /* --- Tier 2: semantic (light) --- */ /* base #FBFBFD is the pre-refactor page background, restored; raised is a soft off-white one perceptible step above it (nothing in the chrome is pure #FFF). The near-flat base/raised hierarchy is deliberate — the old skin was equally flat (#FBFBFD page vs #FFF cards); borders and shadows carry the separation. */ --jw-surface-base: #FBFBFD; --jw-surface-raised: #FDFDFE; --jw-surface-sunken: var(--jw-g-100); --jw-surface-inset: var(--jw-g-50); --jw-surface-inverse: var(--jw-g-900); --jw-text-primary: var(--jw-g-900); --jw-text-secondary: var(--jw-g-600); --jw-text-muted: var(--jw-g-500); --jw-text-inverse: var(--jw-g-0); --jw-border-subtle: var(--jw-g-100); --jw-border-default: var(--jw-g-200); --jw-border-strong: var(--jw-g-300); /* Accent. Referenced by NO surface token — that is what keeps orange an accent. */ --jw-accent: var(--jw-brand); --jw-accent-hover: var(--jw-brand-600); --jw-accent-ink: #A65B00; /* 5.10:1 on white — accent used as TEXT */ --jw-on-accent: #1A1205; /* 8.02:1 on brand — white would be 2.31:1 and fails */ --jw-accent-wash: rgba(247, 146, 30, .12); --jw-focus: #0871C2; --jw-shadow-1: 0 1px 2px rgba(16,24,32,.06), 0 1px 3px rgba(16,24,32,.04); --jw-shadow-2: 0 2px 4px rgba(16,24,32,.06), 0 6px 16px rgba(16,24,32,.08); --jw-shadow-3: 0 12px 32px rgba(16,24,32,.16); --jw-radius-sm: 4px; --jw-radius-md: 7px; --jw-radius-lg: 11px; /* --- Tier 3: domain. These are the ORIGINAL product colours, restored deliberately. They are what customers have been reading for years, and recognition of the call-type palette was judged to outweigh the measured issues below. Do not "fix" them again without asking the team. The measurements are kept here so the trade-off stays visible rather than being rediscovered later as if it were new: - --jw-data-waiting #D2DAE2 measures 1.41:1 on white. It is effectively invisible as a line or fill in light mode; that is why it is not used for anything load-bearing and why wait time now has its own panel rather than a hairline over the columns. - --jw-data-answered #2ECC71 and --jw-data-lost #F53B57 measure dE 0.7 apart under deuteranopia — the two most important states in the product are close to one colour for red-green colourblind users (~8% of men). Anywhere these two appear together, colour must not be the ONLY channel: keep the labels, counts or icons. - --jw-data-internal #34495E (chroma 0.044) is a near-grey wearing a colour name, so it sits close to the waiting grey. Dark mode overrides it to #969da4, as it always did. --- */ --jw-data-inbound: #FD944D; --jw-data-outbound: #42CAFA; --jw-data-internal: #34495E; --jw-data-lost: #F53B57; --jw-data-answered: #2ECC71; --jw-data-dina: #b719ff; --jw-data-average: #7068CC; --jw-data-waiting: #D2DAE2; /* PROVISIONAL — --Hotline is consumed twice by the wallboard stylesheet but has never had a declared value, so it currently renders as nothing. This is a placeholder pending a product decision; it is not derived from anything. */ --jw-data-hotline: #9E3D6B; /* Categorical ramp — for series that carry NO domain meaning (IVR extensions, agents), where the only requirement is that neighbours stay apart. Drawn from the same original palette above so the two never look like different products, reordered so adjacent slots are maximally separated. The pale waiting grey is excluded: at 1.41:1 it would read as a missing series. Read by JW.charts.ramp(n) in jw-charts.js, which cycles past 8. */ --jw-cat-1: #42CAFA; --jw-cat-2: #FD944D; --jw-cat-3: #34495E; --jw-cat-4: #b719ff; --jw-cat-5: #2ECC71; --jw-cat-6: #F53B57; --jw-cat-7: #7068CC; --jw-cat-8: #009dfc; /* Agent presence status palette (Agent Status report). Traffic-light semantics: 1 = Available (green), 2 = Break/Away (amber), 3 = DND (red); 4/5 are tenant-defined custom statuses and deliberately NON-traffic colours (legacy hues from the old AgentStatus.js pie, kept for recognition). Colour is never the only channel: every use pairs the swatch with the tenant's status label and a duration. */ --jw-status-1: #2ECC71; --jw-status-2: #F7B924; --jw-status-3: #F53B57; --jw-status-4: #39539E; --jw-status-5: #1AB7EA; --jw-rail-w: 252px; --jw-topbar-h: 54px; /* Theme-switch surfaces. A separate pair because the generic surface tokens converge in dark mode (raised and sunken are both near-black), which made the knob invisible. */ --jw-switch-track: var(--jw-surface-sunken); --jw-switch-knob: var(--jw-surface-raised); --jw-font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Source Sans Pro", Roboto, "Helvetica Neue", Arial, sans-serif; --jw-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Fallback only, for the instant before data-theme lands on . The two explicit bindings below are what actually govern; see the note under them. */ color-scheme: light dark; } /* * Native controls must follow the APP's theme, not the operating system's. * * `color-scheme: light dark` alone hands the choice to the UA, which resolves it from * prefers-color-scheme. This app resolves its theme server-side from the jw-theme cookie and * pins it as data-theme on — so a user with a dark OS running the app in light mode got * dark checkboxes, dark ` — a model-bound field that round-trips * the open/closed state through the POST, and tools/report-formdata-baseline.js guards that * payload. A
element has no such binding, so swapping it would change the form data on * all nine tabs. * * The chevron stays the existing two-span .arrow, which style.css already rotates off * `:checked ~ .arrow`. Only its colour and the surrounding chrome change here. * --------------------------------------------------------------------------- */ .alt-advanced-settings { border-top: 1px solid var(--jw-border-subtle); margin-top: 12px; padding-top: 4px; } .alt-advanced-settings .toggleButton label { font-size: 12.5px; font-weight: 600; color: var(--jw-text-secondary); letter-spacing: .01em; } .alt-advanced-settings .toggleButton:hover label { color: var(--jw-text-primary); } .alt-advanced-settings .toggleButton .arrow span { background: var(--jw-text-muted); } /* Open state. The checkbox is visually-hidden, so :checked is the only signal available. */ .alt-advanced-settings .toggleButton > input[type="checkbox"]:checked ~ .arrow span { background: var(--jw-accent); } /* Keyboard users get no focus ring from a visually-hidden checkbox, so surface it on the label. */ .alt-advanced-settings .toggleButton > input[type="checkbox"]:focus-visible ~ .arrow { outline: 2px solid var(--jw-focus); outline-offset: 3px; border-radius: 2px; } .alt-hidden-settings h5 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--jw-text-muted); font-weight: 600; margin-bottom: 7px; } /* --- custom checkboxes: the hidden-companion bug ------------------------------ * * style.css draws all four checkbox variants by hiding the real input (opacity:0) and styling the * next to it: * * .checkbox input[type=checkbox] + span { width:20px; height:20px; border:1px solid … } * * That is an ADJACENT sibling selector, so it only matches when the span comes immediately after * the input. Razor's Html.EditorFor / CheckBoxFor on a bool emits TWO elements — the checkbox and * a hidden companion carrying the "false" value: * * * * so the span is no longer adjacent, the rule does not match, and the box is simply not drawn. * Measured: with the companion the span computes to display:inline, auto × auto, border 0 — * invisible. Without it, 20 × 20 with a 1px border. * * This affects every EditorFor-rendered checkbox in the app: the Admin settings lists and the * Advanced Report advanced-options panel among them. The plain ones (the * "Select all" toggles) have no companion and have always worked, which is why those pages look * half-broken rather than obviously broken. * * Fixed here rather than in style.less because that file needs Visual Studio's Web Compiler to * rebuild and style.min.css is what actually ships. Matching the companion explicitly gives * (0,3,3) against the original's (0,2,2), so it wins without needing !important, and it cannot * over-match a later unrelated the way `~ span` would. * * The four variants are normalised to one appearance on purpose — they differ today only by a * couple of pixels of margin and a hard-coded #cfdadd border that ignores the theme. * --------------------------------------------------------------------------- */ .checkbox input[type="checkbox"] + input[type="hidden"] + span, .checkbox-right input[type="checkbox"] + input[type="hidden"] + span, .checkbox-simple input[type="checkbox"] + input[type="hidden"] + span, .checkbox-simple-centered input[type="checkbox"] + input[type="hidden"] + span { width: 20px; height: 20px; display: block; position: relative; margin: 2.5px 7.5px 0 0; box-sizing: border-box; text-indent: -999px; overflow: hidden; border: 1px solid var(--jw-border-strong); border-radius: var(--jw-radius-sm); background: var(--jw-surface-raised); cursor: pointer; float: left; } /* The inner mark, scaled up when checked — same mechanism as the original. */ .checkbox input[type="checkbox"] + input[type="hidden"] + span::before, .checkbox-right input[type="checkbox"] + input[type="hidden"] + span::before, .checkbox-simple input[type="checkbox"] + input[type="hidden"] + span::before, .checkbox-simple-centered input[type="checkbox"] + input[type="hidden"] + span::before { content: ""; width: 10px; height: 10px; top: 0; left: 0; bottom: 0; right: 0; position: absolute; margin: auto; border-radius: 1px; background-color: var(--jw-accent); transform: scale(0); transition: transform .18s cubic-bezier(1, 0, .4, .5); } .checkbox input[type="checkbox"]:checked + input[type="hidden"] + span::before, .checkbox-right input[type="checkbox"]:checked + input[type="hidden"] + span::before, .checkbox-simple input[type="checkbox"]:checked + input[type="hidden"] + span::before, .checkbox-simple-centered input[type="checkbox"]:checked + input[type="hidden"] + span::before { transform: scale(1); } /* The real input is opacity:0 and absolutely positioned, so keyboard focus has nothing visible. Put the ring on the box the user can actually see. */ .checkbox input[type="checkbox"]:focus-visible + input[type="hidden"] + span, .checkbox-right input[type="checkbox"]:focus-visible + input[type="hidden"] + span, .checkbox-simple input[type="checkbox"]:focus-visible + input[type="hidden"] + span, .checkbox-simple-centered input[type="checkbox"]:focus-visible + input[type="hidden"] + span { outline: 2px solid var(--jw-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .checkbox input[type="checkbox"] + input[type="hidden"] + span::before, .checkbox-right input[type="checkbox"] + input[type="hidden"] + span::before, .checkbox-simple input[type="checkbox"] + input[type="hidden"] + span::before, .checkbox-simple-centered input[type="checkbox"] + input[type="hidden"] + span::before { transition: none; } } /* --- results cards ---------------------------------------------------------- * Views/Report/Results/_Results.cshtml (1,996 lines) and _DiffSection.cshtml build their KPI * tiles from .big-card > .card-body > .card-box and .card-footer > .widget. That markup is * deliberately NOT rewritten: it is deeply conditional, and ReportPrintStyle.min.css hooks these * exact selectors (.big-card .card-body .card-box .icon-wrapper, .col-4:first-child …), so * changing it would silently break printed reports. Restyling gets the same result with none of * that risk. * --------------------------------------------------------------------------- */ .Individual-cards .big-card { border-radius: var(--jw-radius-lg); box-shadow: var(--jw-shadow-1); border: 1px solid var(--jw-border-subtle); background-color: var(--jw-surface-raised); } .big-card .card-body .card-box { position: relative; overflow: hidden; border-radius: var(--jw-radius-lg); border: 1px solid var(--jw-border-subtle); background-color: var(--jw-surface-raised); box-shadow: var(--jw-shadow-1); padding: 13px 15px 14px; gap: 12px; } /* * The accent rail, matching .jw-stat on Daily Overview. * * The markup here cannot be touched (ReportPrintStyle.min.css hooks it), so the rail takes its * colour from the bg-* class already on .icon-wrapper-bg — the element that carries the call * type today. :has() reads it without a single markup change; this sheet already depends on * :has() for the sign-in screens in section 4c. */ .big-card .card-body .card-box::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--jw-card-rail, transparent); } .big-card .card-body .card-box:has(.bg-inbound) { --jw-card-rail: var(--jw-data-inbound); } .big-card .card-body .card-box:has(.bg-outbound) { --jw-card-rail: var(--jw-data-outbound); } .big-card .card-body .card-box:has(.bg-internal) { --jw-card-rail: var(--jw-data-internal); } .big-card .card-body .card-box:has(.bg-lost) { --jw-card-rail: var(--jw-data-lost); } .big-card .card-body .card-box:has(.bg-answered) { --jw-card-rail: var(--jw-data-answered); } .big-card .card-body .card-box:has(.bg-dina) { --jw-card-rail: var(--jw-data-dina); } .big-card .card-body .card-box:has(.bg-total) { --jw-card-rail: var(--jw-text-muted); } /* Was uppercase and painted with --link-color — one of the nine variables that was never declared, so this header had no colour at all until the alias layer gave it one. */ .big-card .card-header { text-transform: none; color: var(--jw-text-primary); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--jw-border-subtle); background-color: transparent; } .big-card .card-footer { background-color: var(--jw-surface-inset); border-top: 1px solid var(--jw-border-subtle); } .big-card .card-body .card-box .card-content .content-numbers, .widget-chart .widget-numbers, .widget .widget-numbers { font-size: 28px; font-weight: 650; letter-spacing: -.028em; line-height: 1.12; font-variant-numeric: tabular-nums; margin: 4px 0 6px; } /* The original stacked these with negative margins tuned to a 2.5rem numeral; at the new size the value and its description collided. */ .big-card .card-body .card-box .card-content { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .big-card .card-body .card-box .card-content .content-subheading, .widget-heading { opacity: 1; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--jw-text-muted); font-weight: 600; } .widget-subheading, .big-card .card-body .card-box .card-content .content-description { font-size: 12px; color: var(--jw-text-secondary); } /* The disc keeps the call-type colour coding; it was just oversized — five saturated 50px circles were the loudest thing on the page. Selector matches style.css:8043. The disc stays fully OPAQUE on purpose: the glyph inside carries .color-white with !important, so tinting the disc back would leave a white icon on a pale wash. Recolouring the glyph instead would mean fighting a second !important for no real gain. */ .icon-wrapper { width: 38px; height: 38px; border-radius: 99px; flex: none; justify-content: center; } .big-card .card-body .card-box .icon-wrapper { min-width: 38px; width: 38px; height: 38px; margin: 0 .75rem 0 0; border-radius: 99px; justify-content: center; } .icon-wrapper .icon-wrapper-bg { border-radius: 99px; } /* * .color-blue is deliberately NOT given a colour. Do not "fix" it again. * * _Results.cshtml uses a three-band traffic light on its rates — .color-green (12 uses), * .color-blue (27) and .color-lost (18). Only .color-lost has ever been declared (style.css); * the other two have always rendered in the inherited text colour, which is white in dark theme. * * An earlier pass read "defined nowhere" as a bug and declared .color-blue as the outbound blue. * That was wrong twice over: it changed the look of 27 figures nobody asked to change, and it * coloured only the MIDDLE band while leaving .color-green undeclared — so the traffic light read * plain / blue / red, which signals the opposite of what a middling value means. Reverted to the * original behaviour on the team's instruction. * * If the bands should ever be colour-coded properly, that is a product decision covering all * three at once, not a one-line CSS fix. */ .color-yellow { color: var(--jw-accent-ink); } /* The tab strip. .active-tab already keys off --primary, which is a correct accent use — an active state — so only the resting and hover states are restyled here. */ .tab-chart-wrap .tab-chart-nav .tab { color: var(--jw-text-muted); font-weight: 600; border-bottom: 2px solid transparent; transition: color .12s ease, border-color .12s ease; } .tab-chart-wrap .tab-chart-nav .tab:hover { color: var(--jw-text-primary); } .tab-chart-wrap .tab-chart-nav .tab.disabled { opacity: .45; } /* --- .box, the other card container ---------------------------------------- * Same four-layer rgba shadow and `border: 0px solid` as .alt-box. Used by Admin, ContactList, * CallerId, PromptSettings, BlockNumber, CSAT, Home and Report. * --------------------------------------------------------------------------- */ .box, .boxForDiffs { background-color: var(--jw-surface-raised); color: var(--jw-text-primary); border: 1px solid var(--jw-border-subtle); border-radius: var(--jw-radius-lg); box-shadow: var(--jw-shadow-1); } /* --- tables ------------------------------------------------------------------ * One treatment for the whole family. These evolved separately and drifted: * .show_table (Admin), .settings_table (8 views), .settingsTable, .table_blue, .popup_table. * Header contrast, cell rhythm and row separation are now identical everywhere. * table-layout:fixed is deliberately NOT touched — several pages size columns by it. * --------------------------------------------------------------------------- */ .show_table thead, .settings_table thead, .settingsTable thead, .table_blue thead, .popup_table thead { background-color: var(--jw-surface-inset); color: var(--jw-text-secondary); } .show_table thead th, .settings_table thead th, .settingsTable thead th, .table_blue thead th, .popup_table thead th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; color: var(--jw-text-secondary); padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--jw-border-default); } .show_table tbody td, .settings_table tbody td, .settingsTable tbody td, .table_blue tbody td, .popup_table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--jw-border-subtle); color: var(--jw-text-primary); } /* Zebra striping was done with --secondary, which is now a surface token. */ .show_table tbody tr:nth-child(2n) td, .settings_table tbody tr:nth-child(2n) td, .settingsTable tbody tr:nth-child(2n) td { background-color: var(--jw-surface-inset); } .show_table tbody tr:hover td, .settings_table tbody tr:hover td, .settingsTable tbody tr:hover td, .table_blue tbody tr:hover td { background-color: var(--jw-accent-wash); } .table_noHover tbody tr:hover td { background-color: revert; } /* --- modals ------------------------------------------------------------------ * Two systems exist: this CSS one (.popup_window / .popup_box, 4 views) and SweetAlert2 * (310 Swal.fire calls). Both are skinned so a dialog looks the same whichever it came from. * --------------------------------------------------------------------------- */ .popup_window { background-color: rgba(8, 12, 16, .55); backdrop-filter: blur(2px); } .popup_box { background-color: var(--jw-surface-raised); color: var(--jw-text-primary); border: 1px solid var(--jw-border-default); border-radius: var(--jw-radius-lg); box-shadow: var(--jw-shadow-3); } .popup_header { background-color: var(--jw-surface-inset); color: var(--jw-text-primary); border-bottom: 1px solid var(--jw-border-subtle); } /* SweetAlert2 11.10.0, CDN-pinned in _Layout. Skinning the classes rather than passing customClass to 310 call sites. Keep the version pinned — a bump can rename these. */ .swal2-popup { background: var(--jw-surface-raised); color: var(--jw-text-primary); border: 1px solid var(--jw-border-subtle); border-radius: var(--jw-radius-lg); box-shadow: var(--jw-shadow-3); font-family: var(--jw-font-ui); } .swal2-title { color: var(--jw-text-primary); font-size: 19px; font-weight: 600; letter-spacing: -.015em; } .swal2-html-container { color: var(--jw-text-secondary); font-size: 14px; } /* The three background-colours below are !important on purpose. SweetAlert2 writes confirmButtonColor / denyButtonColor / cancelButtonColor as an INLINE style (t.style.backgroundColor = ...), which beats any stylesheet rule without it. Nineteen call sites across the app still pass those options - LightSeaGreen in Report/Task, #3085d6 and #d33 throughout Calendar.js, #DD6B55 in the CSAT views and layout_script - and every one of them would otherwise punch a stray colour through the skin. Only background-color is set inline, so nothing else here needs the flag. Drop the flags once those nineteen options are gone from the call sites. */ .swal2-popup .swal2-styled.swal2-confirm { background-color: var(--jw-accent) !important; color: var(--jw-on-accent); border-radius: var(--jw-radius-sm); font-weight: 600; } .swal2-popup .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px var(--jw-accent-wash); } .swal2-popup .swal2-styled.swal2-cancel { background-color: var(--jw-surface-raised) !important; color: var(--jw-text-primary); border: 1px solid var(--jw-border-default); border-radius: var(--jw-radius-sm); font-weight: 600; } .swal2-popup .swal2-styled.swal2-deny { background-color: var(--jw-data-lost) !important; border-radius: var(--jw-radius-sm); font-weight: 600; } .swal2-popup .swal2-input, .swal2-popup .swal2-select, .swal2-popup .swal2-textarea { background: var(--jw-surface-raised); color: var(--jw-text-primary); border: 1px solid var(--jw-border-default); border-radius: var(--jw-radius-sm); box-shadow: none; } /* --- DataTables 2.3.2 (Report/Task) ----------------------------------------- */ .dataTables_wrapper, div.dt-container { color: var(--jw-text-primary); font-size: 13px; } table.dataTable thead th, table.dataTable thead td { background-color: var(--jw-surface-inset); color: var(--jw-text-secondary); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--jw-border-default); } table.dataTable tbody td { border-top: 1px solid var(--jw-border-subtle); color: var(--jw-text-primary); } table.dataTable tbody tr { background-color: transparent; } table.dataTable tbody tr:hover td { background-color: var(--jw-accent-wash); } div.dt-container .dt-paging .dt-paging-button, .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--jw-text-secondary) !important; border-radius: var(--jw-radius-sm); border: 1px solid transparent; } div.dt-container .dt-paging .dt-paging-button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--jw-accent-wash) !important; border-color: var(--jw-accent) !important; color: var(--jw-text-primary) !important; } div.dt-container .dt-search input, div.dt-container .dt-length select, .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background: var(--jw-surface-raised); color: var(--jw-text-primary); border: 1px solid var(--jw-border-default); border-radius: var(--jw-radius-sm); padding: 5px 9px; min-height: 30px; } /* style.css:1787 paints every in-page

with --primary, which is the single biggest source of ambient orange in the app. Headings are structure, not signal, so they take normal text colour; orange stays on actions and state. */ .jw-main > content h2 { color: var(--jw-text-primary); } /* .companyName is absolutely positioned and full-width, centred for the old 50px header (style.css:357). Inside the new topbar it would overlap everything, so it is reset to a normal flex child here. */ .jw-topbar .companyName { position: static; width: auto; display: block; line-height: normal; justify-content: flex-start; } /* .header-options pushes itself right with margin-left:auto and a 25px gutter; the topbar already has its own spacer. */ .jw-topbar .header-options { margin-left: 0; margin-right: 0; gap: 6px; } /* ============================================================================ * 4c. SIGN-IN SCREENS * * loginStyle.less carries its own LESS @@variable palette (@@orange, @@databg1, @@background …) * that predates the tokens and never shared a value with them. It is authored with real LESS * variables, so unlike the other sheets it cannot be regenerated here — these overrides bring * it onto the token system from outside instead. _loginLayout pins data-theme="dark", so the * tokens below resolve to the dark set. * ========================================================================= */ body:has(.loginbox), body:has(.login-button), body:has(.auth) { background-color: var(--jw-surface-base); font-family: var(--jw-font-ui); color: var(--jw-text-primary); } .txt { background: var(--jw-surface-inset); color: var(--jw-text-primary); font-family: var(--jw-font-ui); font-size: 14px; height: 46px; border: 1px solid var(--jw-border-default); border-right: 0; border-radius: 0 var(--jw-radius-sm) var(--jw-radius-sm) 0; } .txt:focus { outline: 2px solid var(--jw-focus); outline-offset: -1px; } .txt::placeholder { color: var(--jw-text-muted); } .icon { background: var(--jw-surface-sunken); color: var(--jw-text-secondary); height: 46px; line-height: 46px; min-width: 46px; border: 1px solid var(--jw-border-default); border-right: 0; border-radius: var(--jw-radius-sm) 0 0 var(--jw-radius-sm); } /* The sign-in button was white on #F7921E — 2.31:1, well under the 4.5:1 minimum, on the one control every user has to find. Near-black on the same orange measures 8.02:1. The two-stop gradient went with it; it existed only to animate a hover wipe. .login-button-div is a second, near-identical orange button used on the other auth screens (loginStyle.less:299) and carries the same defect. */ .login-button, .login-button-div { background: var(--jw-accent); background-image: none; color: var(--jw-on-accent); text-transform: none; font-weight: 600; font-size: 14px; border-radius: var(--jw-radius-sm); box-shadow: none; padding: 0 18px; min-height: 40px; align-items: center; justify-content: center; } .login-button:hover, .login-button-div:hover { background: var(--jw-accent-hover); color: var(--jw-on-accent); } .login-button:focus-visible, .login-button-div:focus-visible { outline: 2px solid var(--jw-focus); outline-offset: 2px; } /* `.symmetry` is a spacer that pairs with the trailing icon so the label sits centred under justify-content:space-between. It has no width of its own, so it needs to match the icon. */ .login-button .symmetry { min-width: 16px; } /* loginStyle.css:10 declares a bare `div { color: white }` — every
on an auth page, at specificity (0,0,1). The sign-in label lives in a
inside the button, so it took white DIRECTLY and never inherited the button's colour: recolouring .login-button alone left the visible text at 2.31:1. (0,1,1) here is enough to win. Same class of trap as the bare `nav`/`header` selectors in style.less — worth knowing before adding any new markup to these screens. */ .login-button div, .login-button span, .login-button p, .login-button-div div, .login-button-div span { color: inherit; } .error_box, .error { color: var(--jw-data-lost); } .success { color: var(--jw-data-answered); } /* ============================================================================ * 4f. SAVE BAR (wwwroot/js/jw-settings.js) * * One Save for a page of settings. Sticky rather than fixed, so it tracks the content column and * needs no knowledge of the rail width or whether the rail is collapsed. * ========================================================================= */ .jw-savebar { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 12px 16px; background: var(--jw-surface-raised); border: 1px solid var(--jw-border-default); border-radius: var(--jw-radius-lg); box-shadow: var(--jw-shadow-2); /* Out of the way, but still in the layout, so appearing does not shift the page under the pointer while someone is still editing. */ opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .jw-savebar.is-open { opacity: 1; transform: none; pointer-events: auto; } .jw-savebar.is-busy { /* Feedback that the request is in flight; the button is disabled separately. */ opacity: .72; } .jw-savebar__msg { font-size: 13.5px; font-weight: 600; color: var(--jw-text-secondary); } .jw-savebar__msg b { color: var(--jw-text-primary); font-variant-numeric: tabular-nums; } .jw-savebar__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* Per-section outcomes. Three states, because "the write ran and matched no row" is neither a success worth a tick nor a failure worth an alarm. */ .jw-savebar__results { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; width: 100%; order: 3; } .jw-savebar__result { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid transparent; } .jw-savebar__result.is-saved { color: var(--jw-data-answered); background: color-mix(in srgb, var(--jw-data-answered) 12%, transparent); border-color: color-mix(in srgb, var(--jw-data-answered) 30%, transparent); } .jw-savebar__result.is-failed { color: var(--jw-data-lost); background: color-mix(in srgb, var(--jw-data-lost) 12%, transparent); border-color: color-mix(in srgb, var(--jw-data-lost) 32%, transparent); } .jw-savebar__result.is-unchanged, .jw-savebar__result.is-pending { color: var(--jw-text-secondary); background: var(--jw-surface-sunken); border-color: var(--jw-border-default); } /* * NO marker is painted on the section itself, deliberately. * * This was an `inset 3px 0 0 var(--jw-accent)` rail on the dirty section. It was a bad idea twice * over: an unexplained orange bar appearing beside a checkbox the moment you tick it reads as a * rendering fault rather than a feature, and it barely worked anyway — these sections contain *
    lists whose
  • backgrounds paint straight over the parent's inset shadow, * so it showed only in the gaps. * * Which groups are unsaved is now said in words, in the save bar, where the count already is. * See renderPending() in wwwroot/js/jw-settings.js. */ @media (prefers-reduced-motion: reduce) { .jw-savebar { transition: none; } } /* ============================================================================ * 4d. CHARTS * * Companion to wwwroot/js/jw-charts.js. That file resolves tokens to hex for everything * ApexCharts draws INSIDE the SVG (it writes literal hex and ignores var()). What is left here * is the chrome Apex renders as real DOM — tooltip, legend, toolbar, no-data — which CSS can * still reach, plus the two-panel layout the wait-time split needs. * ========================================================================= */ /* Wait time gets its own panel under a shared x-axis rather than a second y-axis on the same plot. Two scales in one frame invite a comparison between seconds and call counts that is not meaningful. The panel is short on purpose: it is context, not a headline. */ .jw-chart-stack { display: block; width: 100%; } .jw-chart-stack .jw-chart-main { width: 100%; } .jw-chart-stack .jw-chart-sub { width: 100%; margin-top: -6px; border-top: 1px solid var(--jw-border-subtle); padding-top: 6px; } .jw-chart-sub-label { font-size: 12px; font-weight: 600; color: var(--jw-text-muted); letter-spacing: .02em; margin: 8px 0 0 25px; } /* Apex renders the tooltip as DOM, so it keeps its own light/dark theme classes. Both are re-pointed at the tokens; otherwise `theme: 'dark'` paints a near-black card on a light page. */ .apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-dark { background: var(--jw-surface-raised); border: 1px solid var(--jw-border-default); border-radius: var(--jw-radius-md); box-shadow: var(--jw-shadow-2); color: var(--jw-text-primary); } .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title, .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { background: var(--jw-surface-inset); border-bottom: 1px solid var(--jw-border-subtle); color: var(--jw-text-secondary); font-weight: 600; } .apexcharts-tooltip-series-group.apexcharts-active { color: var(--jw-text-primary); } /* chart.group replays the tooltip onto the sibling panel; the group also needs the sibling's tooltip ENABLED or Apex throws on mousemove (seriesHover dereferences its tooltip DOM). So the replayed tooltip is hidden here instead: visible only in the panel the pointer is actually over. opacity, not display — Apex measures the tooltip box on every mousemove. */ .jw-chart-stack .jw-chart-main:not(:hover) .apexcharts-tooltip, .jw-chart-stack .jw-chart-sub:not(:hover) .apexcharts-tooltip { opacity: 0; } /* Synced crosshair: one thin theme-coloured line instead of Apex's grey #B1B9C4 band. */ .jw-chart-stack .apexcharts-xcrosshairs { fill: var(--jw-border-default); } .apexcharts-xaxistooltip, .apexcharts-yaxistooltip { background: var(--jw-surface-inverse); color: var(--jw-text-inverse); border: 0; } .apexcharts-xaxistooltip:after, .apexcharts-xaxistooltip:before { border-bottom-color: var(--jw-surface-inverse); } .apexcharts-legend-text { color: var(--jw-text-secondary) !important; font-family: var(--jw-font-ui) !important; } /* Apex paints its dark-theme canvas #424242 (rule ships in apexcharts.css AND is re-injected as an inline