`public/three-view.css`

38 lines
/* three-view.css — styles for the additive 3-view helper (TK-10526). Namespaced
 * .tv-* so it never collides with a host page. Colors read the host page's own CSS
 * vars with safe fallbacks, so the compact list inherits each page's theme
 * (condos dark, fha-loans liquid-glass, broker/mls) automatically. */

/* segmented Grid/List/Table toggle — reuses whatever wrapper the page gives; the
 * buttons themselves are styled so pages that had only a 2-view toggle look right. */
[data-tvseg] , .tv-seg { display:inline-flex; border:1px solid var(--tv-line,var(--line,var(--glassb,#2a313c))); border-radius:8px; overflow:hidden; }
[data-tvseg] button, .tv-seg button {
  background:var(--tv-card,var(--card,var(--glass,rgba(255,255,255,.05))));
  color:var(--tv-mut,var(--mut,var(--muted,#8b949e)));
  border:0; border-right:1px solid var(--tv-line,var(--line,var(--glassb,#2a313c)));
  padding:7px 12px; font-size:12px; cursor:pointer; }
[data-tvseg] button:last-child, .tv-seg button:last-child { border-right:0; }
[data-tvseg] button.active, .tv-seg button.active { background:var(--tv-acc,var(--blue,#1f6feb)); color:#fff; }

/* compact list — one scannable row per record, inline key/value pairs */
.tv-rows { display:flex; flex-direction:column; }
.tv-lrow {
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--tv-line,var(--line,var(--glassb,rgba(255,255,255,.07))));
  cursor:pointer; }
.tv-lrow:hover { background:var(--tv-hover,var(--hover,rgba(120,160,255,.06))); }
.tv-lmain { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:210px; flex:0 0 auto; }
.tv-la { font-weight:600; color:var(--tv-ink,var(--ink,#e6edf3)); }
.tv-la a { color:inherit; text-decoration:none; }
.tv-la a:hover { text-decoration:underline; }
.tv-lsub { font-size:11.5px; color:var(--tv-mut,var(--mut,var(--muted,#8b949e))); }
.tv-lmeta { display:flex; flex-wrap:wrap; gap:6px 16px; flex:1 1 320px; min-width:0; }
.tv-lm { font-size:12.5px; color:var(--tv-ink,var(--ink,#e6edf3)); white-space:nowrap; }
.tv-lmk { color:var(--tv-mut,var(--mut,var(--muted,#8b949e))); font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-right:5px; }
.tv-lm a { color:var(--tv-acc,var(--blue,#58a6ff)); text-decoration:none; }
.tv-lm a:hover { text-decoration:underline; }
.tv-empty { padding:50px; text-align:center; color:var(--tv-mut,var(--mut,var(--muted,#8b949e))); }

/* density: the page's existing --cols / --tsz slider also tightens the list rows */
@media (max-width:820px){ .tv-lmain{ min-width:100%; } }