`public/kv-list.css`

36 lines
/* kv-list.css — compact key/value record list. Namespaced .kv-* so it never
 * collides with a host page. Colors read the host page's own CSS vars with safe
 * fallbacks, so the list inherits each page's theme (dark / liquid-glass / light)
 * automatically. Override any --kv-* var to force specific colors.
 * Standalone extraction of three-view.css's compact-list mode. */

.kv-rows { display:flex; flex-direction:column; }

.kv-lrow {
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:10px 16px;
  border-bottom:1px solid var(--kv-line,var(--line,var(--glassb,rgba(255,255,255,.07))));
  cursor:default; }
.kv-lrow.kv-click { cursor:pointer; }
.kv-lrow:hover { background:var(--kv-hover,var(--hover,rgba(120,160,255,.06))); }

/* fixed identity block, left */
.kv-lmain { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:210px; flex:0 0 auto; }
.kv-la { font-weight:600; color:var(--kv-ink,var(--ink,#e6edf3)); }
.kv-la a { color:inherit; text-decoration:none; }
.kv-la a:hover { text-decoration:underline; }
.kv-lsub { font-size:11.5px; color:var(--kv-mut,var(--mut,var(--muted,#8b949e))); }

/* flowing field chips, right */
/* full-width tight columns (left edge → right edge), not left-packed chips */
.kv-lmeta { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:6px 16px; flex:1 1 320px; min-width:0; align-content:start; }
.kv-lm { font-size:12.5px; color:var(--kv-ink,var(--ink,#e6edf3)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kv-lmk { color:var(--kv-mut,var(--mut,var(--muted,#8b949e))); font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-right:5px; }
.kv-lm a { color:var(--kv-acc,var(--blue,#58a6ff)); text-decoration:none; }
.kv-lm a:hover { text-decoration:underline; }

.kv-badge { font-size:11px; }
.kv-empty { padding:50px; text-align:center; color:var(--kv-mut,var(--mut,var(--muted,#8b949e))); }

@media (max-width:820px){ .kv-lmain{ min-width:100%; } }