/* LeanFin color themes. The original LeanFin look lives in app.css and is not touched: a user on "LeanFin (original)" has no data-theme attribute at all, so nothing in this file applies to them. Nine more themes follow, each chosen under Settings and kept per user. Every one is built on a 5 : 4 : 1 split: 5 the page itself (--bg and the white/black working surfaces on it) 4 the frame around the work: menu bar, side navigation, table headings, section bands (--surface2) 1 the accent: the primary button, the active tab and row, links (--accent) Legibility rules, checked by tests/test_themes.py against this file: - body text on every background it sits on is at least 7 : 1 - secondary text, the accent, and status colors are at least 5.4 : 1 on their backgrounds - data-entry fields are white with black letters (black with white letters in Dark) in every theme except Classic (green lettering on silver) and Retro (green phosphor on black), which still clear 7 : 1 */ /* Light: true white page, black text (text 18.5:1, secondary text 7.6:1, fields 21.0:1) */ :root[data-theme="light"]{color-scheme:light;--bg:#ffffff;--surface:#ffffff;--surface2:#eef0f2;--ink:#111418;--muted:#4a5560;--line:#c9ced3;--line-strong:#7c858d;--accent:#0f6e66;--accent-soft:#dcefec;--on-accent:#ffffff;--good:#1f6b3a;--good-soft:#e3f1e7;--warn:#7d4e06;--warn-soft:#f7ecd9;--bad:#a32a1e;--bad-soft:#f7e3e0;--sel:#d6ebe8;--edit:#fff6c9;--field:#ffffff;--field-ink:#000000;--mat30:#fff3b0;--mat30-strong:#f2c200} /* Dark: true dark page, white text (text 17.7:1, secondary text 9.7:1, fields 21.0:1) */ :root[data-theme="dark"]{color-scheme:dark;--bg:#0b0d0f;--surface:#14181b;--surface2:#1f262b;--ink:#f2f5f4;--muted:#aeb9be;--line:#313b41;--line-strong:#62717a;--accent:#5cc7bb;--accent-soft:#12332f;--on-accent:#041a17;--good:#6fd08f;--good-soft:#173022;--warn:#f0b860;--warn-soft:#342a17;--bad:#ff8a78;--bad-soft:#3a1d19;--sel:#1f4a45;--edit:#3d3410;--field:#000000;--field-ink:#ffffff;--mat30:#4a3f08;--mat30-strong:#e2b800} /* Pink (text 15.2:1, secondary text 8.9:1, fields 21.0:1) */ :root[data-theme="pink"]{color-scheme:light;--bg:#fdf2f6;--surface:#ffffff;--surface2:#fadbe6;--ink:#3d0a20;--muted:#7a2247;--line:#eeb9cc;--line-strong:#bd6688;--accent:#a80f55;--accent-soft:#fbd5e3;--on-accent:#ffffff;--good:#1f6b3a;--good-soft:#e0f0e4;--warn:#7d4e06;--warn-soft:#f7ecd9;--bad:#a32a1e;--bad-soft:#f9dfdb;--sel:#f8c6da;--edit:#fff6c9;--field:#ffffff;--field-ink:#000000;--mat30:#fff3b0;--mat30-strong:#f2c200} /* Blue (text 14.0:1, secondary text 8.3:1, fields 21.0:1) */ :root[data-theme="blue"]{color-scheme:light;--bg:#f0f5fc;--surface:#ffffff;--surface2:#d9e6f7;--ink:#0b2545;--muted:#2f4a6d;--line:#b5cbe6;--line-strong:#6688b8;--accent:#1257a8;--accent-soft:#d3e3f8;--on-accent:#ffffff;--good:#1f6b3a;--good-soft:#e0f0e4;--warn:#7d4e06;--warn-soft:#f7ecd9;--bad:#a32a1e;--bad-soft:#f9dfdb;--sel:#c2d8f4;--edit:#fff6c9;--field:#ffffff;--field-ink:#000000;--mat30:#fff3b0;--mat30-strong:#f2c200} /* Teal (text 13.1:1, secondary text 7.7:1, fields 21.0:1) */ :root[data-theme="teal"]{color-scheme:light;--bg:#ecf7f5;--surface:#ffffff;--surface2:#cfece8;--ink:#06302c;--muted:#1f5651;--line:#a5d4ce;--line-strong:#43887f;--accent:#0a655d;--accent-soft:#c3e7e2;--on-accent:#ffffff;--good:#1f6b3a;--good-soft:#e0f0e4;--warn:#7d4e06;--warn-soft:#f7ecd9;--bad:#a32a1e;--bad-soft:#f9dfdb;--sel:#b2dfd9;--edit:#fff6c9;--field:#ffffff;--field-ink:#000000;--mat30:#fff3b0;--mat30-strong:#f2c200} /* Green (text 13.4:1, secondary text 7.8:1, fields 21.0:1) */ :root[data-theme="green"]{color-scheme:light;--bg:#eff7ee;--surface:#ffffff;--surface2:#d7ebd4;--ink:#0e2f12;--muted:#2c5530;--line:#b1d4ae;--line-strong:#56905a;--accent:#1c6627;--accent-soft:#cde7ca;--on-accent:#ffffff;--good:#1c6627;--good-soft:#dcefd9;--warn:#7d4e06;--warn-soft:#f7ecd9;--bad:#a32a1e;--bad-soft:#f9dfdb;--sel:#bbdfb7;--edit:#fff6c9;--field:#ffffff;--field-ink:#000000;--mat30:#fff3b0;--mat30-strong:#f2c200} /* Classic: silver-grey with green lettering (text 8.6:1, secondary text 6.5:1, fields 11.9:1) */ :root[data-theme="classic"]{color-scheme:light;--bg:#c8cdd0;--surface:#dfe3e5;--surface2:#b9c0c4;--ink:#06350f;--muted:#0f4a1a;--line:#8d979c;--line-strong:#667178;--accent:#064d13;--accent-soft:#a9c4ad;--on-accent:#eaffea;--good:#064d13;--good-soft:#b9d2bb;--warn:#5c3900;--warn-soft:#dccfae;--bad:#7a1408;--bad-soft:#dcbcb7;--sel:#a9c4ad;--edit:#eef2c4;--field:#eceff0;--field-ink:#06350f;--mat30:#e6dc8f;--mat30-strong:#a88a00} /* Turquoise: bluer than Teal, greener than Blue (text 12.9:1, secondary text 7.7:1, fields 21.0:1) */ :root[data-theme="turquoise"]{color-scheme:light;--bg:#eaf7f9;--surface:#ffffff;--surface2:#c9eaf0;--ink:#05303a;--muted:#1c5461;--line:#9fd2db;--line-strong:#3d8798;--accent:#086878;--accent-soft:#bfe6ed;--on-accent:#ffffff;--good:#1f6b3a;--good-soft:#e0f0e4;--warn:#7d4e06;--warn-soft:#f7ecd9;--bad:#a32a1e;--bad-soft:#f9dfdb;--sel:#abdee7;--edit:#fff6c9;--field:#ffffff;--field-ink:#000000;--mat30:#fff3b0;--mat30-strong:#f2c200} /* Retro: green phosphor letters on a black screen (text 15.5:1, secondary text 9.0:1, fields 15.5:1) */ :root[data-theme="retro"]{color-scheme:dark;--bg:#000000;--surface:#040a04;--surface2:#0b1a0b;--ink:#33ff33;--muted:#25c425;--line:#145214;--line-strong:#1f8f1f;--accent:#33ff33;--accent-soft:#0f2e0f;--on-accent:#001a00;--good:#33ff33;--good-soft:#0f2e0f;--warn:#ffcc33;--warn-soft:#332600;--bad:#ff6b5c;--bad-soft:#3d0f0c;--sel:#134413;--edit:#1a3300;--field:#000000;--field-ink:#33ff33;--mat30:#332b00;--mat30-strong:#e2b800} /* ---- applied only when a theme is chosen */ :root[data-theme] #menubar,:root[data-theme] #nav,:root[data-theme] .cpnav{background:var(--surface2)} :root[data-theme] #menubar{border-bottom-color:var(--line-strong)} :root[data-theme] #nav{border-right-color:var(--line-strong)} :root[data-theme] #nav button:hover,:root[data-theme] .cpnav button:hover{background:var(--surface)} :root[data-theme] #nav button.active,:root[data-theme] .cpnav button.active{background:var(--surface);color:var(--ink)} :root[data-theme] #menubar .who,:root[data-theme] #nav .group{color:var(--ink)} :root[data-theme] input,:root[data-theme] select,:root[data-theme] textarea{background:var(--field);color:var(--field-ink);border-color:var(--line-strong)} :root[data-theme] input::placeholder,:root[data-theme] textarea::placeholder{color:var(--muted);opacity:1} :root[data-theme] input.pref,:root[data-theme] select.pref{background:var(--field);color:var(--field-ink)} :root[data-theme] table.grid td.editing{background:var(--field)} :root[data-theme] table.grid td.editing input,:root[data-theme] table.grid th .colhead input{background:transparent;color:var(--field-ink)} :root[data-theme] table.grid th .colhead select{background:var(--field);color:var(--field-ink)} :root[data-theme] table.grid th .colhead input{color:var(--ink)} :root[data-theme] button{color:var(--ink)} :root[data-theme] button.primary,:root[data-theme] .seg button.on{color:var(--on-accent)} :root[data-theme] button.danger{color:var(--bad)} :root[data-theme] .tab{color:var(--muted)} :root[data-theme] .tab.on{color:var(--ink);border-color:var(--line-strong)} :root[data-theme] .chip{color:var(--ink)} :root[data-theme] .chip.good{color:var(--good)}:root[data-theme] .chip.warn{color:var(--warn)}:root[data-theme] .chip.bad{color:var(--bad)}:root[data-theme] .chip.muted{color:var(--muted)} :root[data-theme] .step .dot{background:var(--line-strong)} :root[data-theme] .step .dot.good{background:var(--good)}:root[data-theme] .step .dot.bad{background:var(--bad)}:root[data-theme] .step .dot.warn{background:var(--warn)} :root[data-theme] .bucket.attention{border-left-color:var(--bad)} :root[data-theme] img.crop,:root[data-theme] .review .rv-right iframe{background:#fff} :root[data-theme] #toast{background:var(--ink);color:var(--bg)} :root[data-theme="dark"] .modal-back,:root[data-theme="retro"] .modal-back{background:rgba(0,0,0,.7)} :root[data-theme="retro"] body{font-family:"IBM Plex Mono","Cascadia Mono",ui-monospace,Consolas,"Courier New",monospace;font-size:13px;text-shadow:0 0 5px rgba(51,255,51,.35)} :root[data-theme="retro"] button,:root[data-theme="retro"] .card,:root[data-theme="retro"] input,:root[data-theme="retro"] select,:root[data-theme="retro"] textarea,:root[data-theme="retro"] .tab,:root[data-theme="retro"] .chip,:root[data-theme="retro"] .bucket,:root[data-theme="retro"] .modal{border-radius:0} :root[data-theme="retro"] button{background:#000;border-color:var(--line-strong)} :root[data-theme="retro"] button:hover{background:var(--accent-soft)} :root[data-theme="retro"] button.primary,:root[data-theme="retro"] .seg button.on{background:var(--accent);color:var(--on-accent);text-shadow:none;font-weight:700} :root[data-theme="retro"] #nav button,:root[data-theme="retro"] .menu>button,:root[data-theme="retro"] .cpnav button,:root[data-theme="retro"] .tab{background:none} :root[data-theme="retro"] #nav button.active,:root[data-theme="retro"] .cpnav button.active{background:var(--accent-soft)} :root[data-theme="retro"] input,:root[data-theme="retro"] select,:root[data-theme="retro"] textarea{caret-color:var(--accent)} :root[data-theme="retro"] .bad,:root[data-theme="retro"] .error,:root[data-theme="retro"] .chip.bad{text-shadow:0 0 5px rgba(255,107,92,.4)} :root[data-theme="retro"] .warn,:root[data-theme="retro"] .chip.warn{text-shadow:0 0 5px rgba(255,204,51,.35)} :root[data-theme="retro"] #toast{text-shadow:none} :root[data-theme="classic"] body{font-family:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace;font-size:13px} :root[data-theme="classic"] button,:root[data-theme="classic"] .card,:root[data-theme="classic"] input,:root[data-theme="classic"] select,:root[data-theme="classic"] textarea,:root[data-theme="classic"] .tab{border-radius:0} :root[data-theme="classic"] button{background:var(--surface);border-color:var(--line-strong);box-shadow:inset -1px -1px 0 var(--line-strong),inset 1px 1px 0 #f4f6f6} :root[data-theme="classic"] button.primary,:root[data-theme="classic"] .seg button.on{background:var(--accent);color:var(--on-accent);box-shadow:none} :root[data-theme="classic"] #nav button,:root[data-theme="classic"] .menu>button,:root[data-theme="classic"] .menu .drop button,:root[data-theme="classic"] .cpnav button,:root[data-theme="classic"] .tab,:root[data-theme="classic"] .step,:root[data-theme="classic"] .theme-card,:root[data-theme="classic"] .bucket{box-shadow:none} :root[data-theme="classic"] #nav button,:root[data-theme="classic"] .menu>button,:root[data-theme="classic"] .cpnav button{background:none} :root[data-theme="classic"] #nav button.active,:root[data-theme="classic"] .cpnav button.active{background:var(--surface)} /* larger text, for anyone who wants it */ :root[data-density="roomy"] body{font-size:15px} :root[data-density="roomy"]{--row:28px} /* ---- pieces added with the themes (they use the same variables, so they follow the original look too) */ html{scrollbar-gutter:stable} #menubar .brand img{height:22px;max-width:130px;object-fit:contain;vertical-align:middle;margin-right:6px;background:#fff;border-radius:3px;padding:1px 3px} #login .logo{max-height:64px;max-width:240px;object-fit:contain;align-self:flex-start;background:#fff;border-radius:4px;padding:2px 4px} .theme-card .chip{white-space:nowrap} .themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .theme-card{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:left;padding:8px;border:2px solid var(--line-strong);border-radius:6px;background:var(--surface);cursor:pointer} .theme-card.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} .theme-card .name{font-weight:700;display:flex;justify-content:space-between;gap:6px;align-items:center} .swatch{display:grid;grid-template-columns:5fr 4fr 1fr;height:64px;border:1px solid #777;border-radius:3px;overflow:hidden;font-size:11px;line-height:1.25} .swatch>span{display:flex;flex-direction:column;justify-content:center;padding:0 6px;overflow:hidden;white-space:nowrap} .swatch .fld{display:inline-block;border:1px solid;padding:0 4px;margin-top:3px;font-family:var(--mono)} .logo-slot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)} .logo-slot:first-of-type{border-top:0} .logo-preview{width:240px;height:90px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--line-strong);background:#fff;border-radius:4px} .logo-preview img{max-width:220px;max-height:76px;object-fit:contain} .logo-preview.dark{background:#14181b} .chip.link{background:var(--accent-soft);color:var(--ink);border-radius:4px;font-weight:600;margin-top:3px} .chip.nowrap{white-space:nowrap} table.list tr.linked td{background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))} .linkpick{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:4px} .linkpick label{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-bottom:1px solid var(--line);cursor:pointer} .linkpick label:last-child{border-bottom:0} .loading{color:var(--muted);padding:14px 2px} /* a thin bar across the top while LeanFin is waiting on the server, so a click is seen to have landed */ #busy{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;opacity:0;transition:opacity .15s} #busy::after{content:"";display:block;height:100%;width:35%;background:var(--accent);animation:busy 1.1s ease-in-out infinite} body.busy #busy{opacity:1} @keyframes busy{0%{margin-left:-35%}100%{margin-left:100%}} @media (prefers-reduced-motion:reduce){#busy::after{animation:none;width:100%}} /* Past due: a solid red pill with white lettering that says so in words. Fixed values on purpose - the same in all ten themes (white on this red is 6.3 : 1), with a white edge so it holds its shape on dark and on red-tinted rows. */ .pastdue{display:inline-block;background:#b1372a;color:#fff;font:700 11px/1.5 var(--sans);letter-spacing:.04em;padding:0 7px;border-radius:99px;white-space:nowrap;vertical-align:1px;box-shadow:0 0 0 1px #fff;text-shadow:none} @media print{.pastdue{-webkit-print-color-adjust:exact;print-color-adjust:exact}} /* ---- Color-blind assist (Settings, per user). Nothing here changes a color: wherever green / amber / red carries meaning, a mark or a word is added so the meaning survives without it. good ✓ watch ◆ problem ✕ Red is also set bold, so red and amber differ in weight as well as in mark. */ :root[data-assist] .good:not(.dot):not(ul):not(tr)::before{content:"\2713\00a0";font-weight:800} :root[data-assist] .warn:not(.dot):not(ul):not(tr)::before{content:"\25C6\00a0";font-size:.8em;vertical-align:.1em} :root[data-assist] .bad:not(.dot):not(ul):not(tr)::before{content:"\2715\00a0";font-weight:800} :root[data-assist] .bad:not(.dot):not(.chip):not(.alert){font-weight:700} :root[data-assist] .error::before{content:"\2715\00a0";font-weight:800} :root[data-assist] .error:empty::before{content:none} /* the past-due rows already say so on the red pill; no second mark on their date and amount */ :root[data-assist] table.portfolio td.bad::before{content:none} /* the dots along the top of a loan file (and in the key on Settings) become shapes */ :root[data-assist] .step .dot,:root[data-assist] .steps-key .dot{width:auto;height:auto;background:none!important;border-radius:0;font-style:normal;font-weight:800;font-size:13px;line-height:1;margin-bottom:0;display:inline-block;min-width:12px} :root[data-assist] .dot.good::before{content:"\2713";color:var(--good)} :root[data-assist] .dot.warn::before{content:"";display:inline-block;width:11px;height:11px;border:1.5px solid var(--warn);border-radius:50%;background:linear-gradient(90deg,var(--warn) 50%,transparent 50%);vertical-align:-1px} :root[data-assist] .dot.bad::before{content:"!";color:var(--bad);display:inline-block;width:13px;height:13px;line-height:13px;text-align:center;border:1.5px solid var(--bad);border-radius:50%;font-size:10px} :root[data-assist] .dot.muted::before{content:"\25CB";color:var(--muted)} /* ticklers: the yellow rows get a word (the red ones already carry "Needed for closing") */ :root[data-assist] table.tickler-list tr.tickler-warn td:nth-child(2)::after{content:"Due soon";margin-left:6px;font:700 11px/1.5 var(--sans);padding:0 7px;border-radius:99px;border:1px solid var(--warn);color:var(--warn);white-space:nowrap} /* days late: the 90-day tier says so */ :root[data-assist] .late-days .chip.bad::after{content:"\00a0\00b7\00a0 90+"} /* document review grid: amber edge = look at this line, green edge = filled automatically */ :root[data-assist] table.grid.rv tr.low td.rowhead::before{content:"\25C6\00a0 check \00b7\00a0";color:var(--warn);font-weight:700} :root[data-assist] table.grid.rv tr.auto td.rowhead::before{content:"\2713\00a0 auto \00b7\00a0";color:var(--good);font-weight:700} /* required items still missing on a repository bucket, and maturing-soon rows, already carry words */ .assist-key{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface)} .assist-key .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--line-strong);margin-left:8px} .assist-key .dot:first-child{margin-left:0} .assist-key .dot.good{background:var(--good)}.assist-key .dot.warn{background:var(--warn)}.assist-key .dot.bad{background:var(--bad)} :root[data-assist] .assist-key .dot{background:none} /* in a table the past-due pill sits at the right edge of its cell, so the pills line up down the column */ td .pastdue{float:right;margin:1px 0 0 8px} /* Portfolio rows that need attention, made to stand out more (every theme, the original included; colors unchanged). Maturing within 30 days: the bright yellow from the key at the top is drawn as a line above and below the row and as a thicker bar at its right end. Past due: the full red tint instead of the half-strength one, a red line above and below, and a wider red bar on the left. A row that is both is drawn as past due - red wins - and keeps the yellow bar on the right. Lines are inset shadows, so no row changes size. */ table.list.portfolio tr.mat30 td{box-shadow:inset 0 1px 0 var(--mat30-strong),inset 0 -1px 0 var(--mat30-strong)} table.list.portfolio tr.mat30 td:last-child{border-right:6px solid var(--mat30-strong)} table.list.portfolio tr.late td{background:var(--bad-soft);box-shadow:inset 0 1px 0 var(--bad),inset 0 -1px 0 var(--bad)} table.list.portfolio tr.late td:first-child{border-left:7px solid var(--bad)} table.list.portfolio tr.late:hover td{background:color-mix(in srgb,var(--bad-soft) 85%,var(--bad))} table.list.portfolio tr.mat30.late td{background:var(--bad-soft);box-shadow:inset 0 1px 0 var(--bad),inset 0 -1px 0 var(--bad)} table.list.portfolio tr.late td.bad{font-weight:700} /* The panel that opens under a flagged Portfolio row belongs visibly to that row: a faint wash of the row's color, the row's bar carried down the side, a closing line, and the figures behind the flag marked. Red wins when a note is both past due and maturing; the yellow bar stays on the right. */ table.list.portfolio tr.detail.d-mat td,table.list.portfolio tr.detail.d-mat:hover td{background:color-mix(in srgb,var(--mat30) 30%,var(--surface));border-right:6px solid var(--mat30-strong);box-shadow:inset 0 -1px 0 var(--mat30-strong)} table.list.portfolio tr.detail.d-late td,table.list.portfolio tr.detail.d-late:hover td{background:color-mix(in srgb,var(--bad-soft) 40%,var(--surface));border-left:7px solid var(--bad);box-shadow:inset 0 -1px 0 var(--bad)} .pfgrid .grp div.flag-late{background:var(--bad-soft);box-shadow:inset 3px 0 0 var(--bad);padding-left:7px;padding-right:4px;font-weight:700} .pfgrid .grp div.flag-late .l{color:var(--ink)} .pfgrid .grp div.flag-mat{background:var(--mat30);box-shadow:inset 3px 0 0 var(--mat30-strong);padding-left:7px;padding-right:4px;font-weight:700} .pfgrid .grp div.flag-mat .l{color:var(--ink)} /* Administration > Permissions: a cell that differs from the position's default */ table.pm td.pm-changed,.pm-changed{background:var(--warn-soft);box-shadow:inset 0 0 0 2px var(--warn)} table.pm thead th{position:sticky;top:0;z-index:2} table.pm tr.divider td{background:var(--surface2);color:var(--ink)} /* Permissions: big boxes, the whole cell clickable, and fixed cells plainly marked as fixed */ table.pm input[type=checkbox]{width:18px;height:18px;margin:0;padding:0;cursor:pointer;vertical-align:middle;accent-color:var(--accent)} table.pm td.pm-open{cursor:pointer} table.pm td.pm-open:hover{box-shadow:inset 0 0 0 2px var(--accent)} table.pm td.pm-fixed{cursor:not-allowed;background:repeating-linear-gradient(135deg,var(--surface2) 0 6px,var(--surface) 6px 12px)} table.pm td.pm-fixed input{opacity:.45;cursor:not-allowed} /* Side menu stays in view (Settings > Side menu). The top bar is 30px and already stays put. On a window shorter than the menu, the menu scrolls on its own. Not applied to the narrow one-column layout, where the menu is a strip. */ @media (min-width:761px){ :root[data-pin="on"] #nav{position:sticky;top:30px;align-self:start;height:calc(100vh - 30px);overflow-y:auto;box-sizing:border-box} }