/* ============================================================================ VRYNO STATUS BADGES — legible ink on the soft tints ============================================================================ The .badge-soft-* classes are how state is communicated in every list view in the product: Approved, Pending, Overdue, Paid, At risk. Measured in the browser against the tint each one actually renders on, four of them do not reach the 4.5:1 that normal-size text needs, and two are not close: badge-soft-warning #f9b801 on #fef8e6 1.66:1 badge-soft-success #1ABE17 on #e8f9e8 2.27:1 badge-soft-info #2F80ED on #eaf2fd 3.43:1 badge-soft-danger #EF1E1E on #fce0e0 3.46:1 badge-soft-pink #f20b9c on #ffeef7 3.55:1 1.66:1 is yellow-on-cream: on a laptop screen in daylight the word inside a Pending badge is close to invisible, and it is the word that carries the meaning -- the tint alone cannot distinguish Pending from Over limit. ONLY THE LIGHTNESS MOVES. Each replacement keeps the hue and the saturation of the colour it replaces and walks the lightness down until it measures 4.5:1 on that badge's own tint, so a Pending badge is the same yellow, dark enough to read. The tints are untouched, the geometry is untouched, and .badge-soft-primary at 7.18:1 was already fine and is left alone. Dark mode already passed -- the tints there are dark and the inks light -- so nothing is redefined for it. Applied in a stylesheet of its own rather than by editing style.css, so the change is one file to read and one file to revert. ============================================================================ */ /* WHY EVERY SELECTOR BELOW STARTS WITH `html` vp_bootstrap appends these stylesheets to from inside theme-script.js, which is tagged at line 20 of every page -- and style.css is linked at line 48. So this file's lands BEFORE style.css in document order, and on equal specificity style.css wins. Measured: the bare class selectors changed nothing at all. One type selector plus one class outranks style.css's bare class, and is still outranked by dark-theme-fixes.css's [data-bs-theme="dark"] plus a class -- an attribute beats a type -- so dark mode keeps its own inks with no dark rules in this file at all. Specificity does the ordering that load order cannot. */ html .badge-soft-warning { /* #936c01: same hue and saturation as #f9b801, lightness moved. 4.51:1 */ color: #936c01; } html .badge-soft-success { /* from #1ABE17. 4.53:1 */ color: #128210; } html .badge-soft-info { /* from #2F80ED. 4.54:1 */ color: #1369de; } html .badge-soft-danger { /* from #EF1E1E. 4.53:1 */ color: #cf0f0f; } html .badge-soft-pink { /* from #f20b9c. 4.77:1 Fitted against #fdedf8 -- the tint as the browser actually renders it on hrms/holidays.html -- rather than against the #ffeef7 style.css declares. The first attempt used the declared value, measured 4.47:1 in the page and failed. Given a little headroom for the same reason. */ color: #cb0983; } /* An icon inside the badge is a graphical object beside its own label, so it inherits the same ink rather than keeping the brighter one -- two shades of the same hue in one 20px chip reads as a rendering fault. */ html .badge-soft-warning i, html .badge-soft-success i, html .badge-soft-info i, html .badge-soft-danger i, html .badge-soft-pink i { color: inherit; } /* NOTHING IS DECLARED FOR DARK MODE, deliberately. dark-theme-fixes.css already sets these under [data-bs-theme="dark"] -- for instance .badge-soft-warning to #e9b64a -- and an attribute-plus-class selector outranks the bare class selectors above, so the dark inks keep winning in dark mode however late this file is injected. Measured there: every one of these already passes, so there is nothing to correct. */