← back to Commercialrealestate
condos: rework colors for legibility + add day/night toggle
1cb56bed1cae68be0b00841d8f5dff64cce93e51 · 2026-08-07 15:23:58 -0700 · Steve
The LA Condos warrantability view was too dark/low-contrast (faint --mut #8b949e
text, a harsh white 2px table border). Rebuilt the palette as proper light/dark
token sets (brighter --mut, clearer --line, zebra striping + row hover), swapped
all hardcoded darks (#0b0e13, rgba(14,17,22), white border) to themeable vars, and
added a persistent Day/Night toggle in the header (localStorage crcp-theme, no-flash
pre-apply in <head>). Default stays dark, now much more readable.
Files touched
Diff
commit 1cb56bed1cae68be0b00841d8f5dff64cce93e51
Author: Steve <steve@designerwallcoverings.com>
Date: Fri Aug 7 15:23:58 2026 -0700
condos: rework colors for legibility + add day/night toggle
The LA Condos warrantability view was too dark/low-contrast (faint --mut #8b949e
text, a harsh white 2px table border). Rebuilt the palette as proper light/dark
token sets (brighter --mut, clearer --line, zebra striping + row hover), swapped
all hardcoded darks (#0b0e13, rgba(14,17,22), white border) to themeable vars, and
added a persistent Day/Night toggle in the header (localStorage crcp-theme, no-flash
pre-apply in <head>). Default stays dark, now much more readable.
---
public/condos.html | 59 +++++++++++++++++++++++++++++++++++++++++++++---------
1 file changed, 49 insertions(+), 10 deletions(-)
diff --git a/public/condos.html b/public/condos.html
index df4bf4b..ae78101 100644
--- a/public/condos.html
+++ b/public/condos.html
@@ -1,15 +1,29 @@
<!doctype html>
<html lang="en">
<head>
+<script>(function(){try{var t=localStorage.getItem('crcp-theme');document.documentElement.setAttribute('data-theme',t==='light'?'light':'dark');}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%230e1116'/%3E%3Ctext x='8' y='12' font-size='10' text-anchor='middle' fill='%233fb950'%3E%F0%9F%8F%A2%3C/text%3E%3C/svg%3E">
<title>LA Condos — Warrantability (FHA-approval proxy)</title>
<style>
- :root{ --bg:#0e1116; --card:#161b22; --line:#2a313c; --ink:#e6edf3; --mut:#8b949e; --acc:#3fb950; --blue:#58a6ff; --gold:#d29922; --red:#f85149; --purp:#bc8cff; }
+ /* ── Theme tokens (dark = default, higher contrast than the old palette;
+ light = a real day mode). Toggle sets html[data-theme]. ── */
+ :root, :root[data-theme="dark"]{
+ --bg:#0d1117; --bg2:#171d26; --card:#1c232e; --line:#33404f; --line2:#3f4c5c;
+ --ink:#f2f6fb; --mut:#b3c0cf; --headbg:rgba(13,17,23,.98); --stripe:rgba(255,255,255,.025);
+ --hover:rgba(88,166,255,.10);
+ --acc:#4bd268; --blue:#79b8ff; --gold:#e3b341; --red:#ff7b72; --purp:#c8a2ff;
+ }
+ :root[data-theme="light"]{
+ --bg:#f4f6f9; --bg2:#ffffff; --card:#ffffff; --line:#d5dbe2; --line2:#c2cad4;
+ --ink:#12171e; --mut:#525f6e; --headbg:rgba(255,255,255,.98); --stripe:rgba(20,30,45,.028);
+ --hover:rgba(9,105,218,.08);
+ --acc:#1a7f37; --blue:#0969da; --gold:#9a6700; --red:#cf222e; --purp:#8250df;
+ }
*{box-sizing:border-box;} html,body{margin:0;}
body{background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
- header{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(14,17,22,.98);backdrop-filter:blur(8px);z-index:30;}
+ header{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--headbg);backdrop-filter:blur(8px);z-index:30;}
header h1{font-size:18px;margin:0;} header a{color:var(--blue);text-decoration:none;font-size:13px;}
header .nav{margin-left:auto;display:flex;gap:18px;}
.banner{font-size:12px;color:var(--gold);padding:9px 22px;background:rgba(210,153,34,.08);border-bottom:1px solid rgba(210,153,34,.25);}
@@ -18,7 +32,7 @@
.count{font-size:12px;color:var(--mut);margin-left:auto;} .count b{color:var(--ink);}
/* ---- Amazon-style left rail ---- */
.shell{display:flex;align-items:flex-start;}
- .rail{flex:0 0 262px;background:#0b0e13;border-right:1px solid var(--line);align-self:stretch;position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto;padding:0 0 40px;}
+ .rail{flex:0 0 262px;background:var(--bg2);border-right:1px solid var(--line);align-self:stretch;position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto;padding:0 0 40px;}
.rail .rsec{padding:13px 16px;border-bottom:1px solid var(--line);}
.rail h4{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
@@ -32,7 +46,7 @@
.ftog{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);cursor:pointer;padding:3px 4px;border-radius:6px;} .ftog:hover{background:rgba(88,166,255,.06);} .ftog input{accent-color:var(--blue);}
.minibtn{background:var(--card);color:var(--mut);border:1px solid var(--line);border-radius:7px;padding:4px 9px;font-size:11px;cursor:pointer;margin-right:5px;} .minibtn:hover{border-color:var(--blue);color:var(--ink);}
main{flex:1 1 auto;min-width:0;padding:0 0 40px;}
- .topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;border-bottom:1px solid var(--line);position:sticky;top:53px;background:rgba(14,17,22,.95);backdrop-filter:blur(6px);z-index:20;}
+ .topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;border-bottom:1px solid var(--line);position:sticky;top:53px;background:var(--headbg);backdrop-filter:blur(6px);z-index:20;}
.topbar input[type=text]{min-width:260px;}
.topbar .dens{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:7px;}
.viewseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
@@ -43,7 +57,7 @@
.drill{color:var(--blue,#4aa3ff);cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px;}
.drill:hover{text-decoration:underline;}
.grid.listhost{display:block;}
- .condo{background:var(--card);border:2px solid #fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:6px;}
+ .condo{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:6px;}
.condo .name{font-weight:600;font-size:14px;}
.condo .addr{font-size:12px;color:var(--mut);}
.row{display:flex;justify-content:space-between;font-size:12px;gap:10px;}
@@ -56,14 +70,22 @@
.src{font-size:11px;color:var(--mut);border-top:1px solid var(--line);padding-top:7px;margin-top:2px;}
.broker{font-size:11px;color:var(--purp);} .broker a{color:var(--blue);text-decoration:none;} .broker a:hover{text-decoration:underline;}
.notewrap{margin-top:8px;position:relative;}
- .notebox{width:100%;box-sizing:border-box;background:#0b0e13;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12px;font-family:inherit;resize:vertical;min-height:34px;}
+ .notebox{width:100%;box-sizing:border-box;background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12px;font-family:inherit;resize:vertical;min-height:34px;}
.notebox:focus{outline:none;border-color:var(--gold);}
.notestatus{position:absolute;right:8px;bottom:6px;font-size:10px;color:var(--acc);pointer-events:none;}
.empty{padding:50px;text-align:center;color:var(--mut);}
- .listwrap{overflow-x:auto;border:2px solid #fff;border-radius:12px;}
+ .listwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;}
+ /* readability: zebra striping + clearer separators + row hover (both themes) */
+ .listtbl tbody tr:nth-child(even) td{background:var(--stripe);}
+ .listtbl tbody tr:hover td{background:var(--hover);}
+ .listtbl td.stick,.listtbl tbody tr:nth-child(even) td.stick,.listtbl tbody tr:hover td.stick{background:var(--card);}
+ .listtbl .lc{color:var(--mut);}
+ /* day/night toggle button */
+ #themeToggle{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
+ #themeToggle:hover{border-color:var(--blue);}
.listtbl{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap;}
.listtbl th,.listtbl td{text-align:right;padding:9px 13px;border-top:1px solid var(--line);}
- .listtbl th{position:sticky;top:0;background:#0b0e13;color:var(--mut);font-size:10px;text-transform:uppercase;letter-spacing:.5px;border-top:0;cursor:pointer;user-select:none;}
+ .listtbl th{position:sticky;top:0;background:var(--bg2);color:var(--mut);font-size:10px;text-transform:uppercase;letter-spacing:.5px;border-top:0;cursor:pointer;user-select:none;}
.listtbl th:hover{color:var(--ink);}
.listtbl th.asc::after{content:' ▲';color:var(--gold);} .listtbl th.desc::after{content:' ▼';color:var(--gold);}
/* draggable column reorder (Steve rule 2026-07-31: move columns around) */
@@ -72,7 +94,7 @@
.listtbl th.dropL{box-shadow:inset 3px 0 0 var(--gold);}
.listtbl th.dropR{box-shadow:inset -3px 0 0 var(--gold);}
.listtbl td.stick,.listtbl th.stick{text-align:left;position:sticky;left:0;background:var(--card);}
- .listtbl th.stick{background:#0b0e13;}
+ .listtbl th.stick{background:var(--bg2);}
.listtbl tr:hover td{background:rgba(88,166,255,.06);}
.listtbl tbody tr{cursor:pointer;}
.listtbl .la{font-weight:600;color:var(--ink);} .listtbl .lc{color:var(--mut);font-size:11px;}
@@ -108,8 +130,25 @@
<body>
<header>
<h1>🏢 LA Condos — Warrantability</h1>
- <div class="nav"><a href="/">← properties</a><a href="/mls.html">Listings</a><a href="/graphics.html">graphics</a><a href="/fha-loans.html">FHA loans</a></div>
+ <div class="nav"><a href="/">← properties</a><a href="/mls.html">Listings</a><a href="/graphics.html">graphics</a><a href="/fha-loans.html">FHA loans</a>
+ <button id="themeToggle" title="Toggle day / night" aria-label="Toggle day / night theme"><span id="themeIcon">☀️</span> <span id="themeLbl">Day</span></button></div>
</header>
+<script>
+// Day/Night toggle — pre-applied before first paint (see head snippet); persists to localStorage.
+(function(){
+ var root=document.documentElement;
+ function apply(t){ root.setAttribute('data-theme',t);
+ var ic=document.getElementById('themeIcon'), lb=document.getElementById('themeLbl');
+ if(ic) ic.textContent = t==='light'?'🌙':'☀️';
+ if(lb) lb.textContent = t==='light'?'Night':'Day';
+ try{ localStorage.setItem('crcp-theme',t); }catch(e){}
+ }
+ var cur; try{ cur=localStorage.getItem('crcp-theme'); }catch(e){}
+ apply(cur==='light'?'light':'dark');
+ var btn=document.getElementById('themeToggle');
+ if(btn) btn.addEventListener('click',function(){ apply(root.getAttribute('data-theme')==='light'?'dark':'light'); });
+})();
+</script>
<div class="banner" id="banner">⚖️ Loading warrantability label…</div>
<div class="shell">
← 4a7febc afternoon CRE update 2026-08-07
·
back to Commercialrealestate
·
CRCP: fleet-wide day/night toggle + legibility pass across a c992532 →