giorgio/read.markets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css: split cassandra.css into per-section files

Browse source 
Splits the 2571-line cassandra.css into ten focused stylesheets:
tokens (palette + fonts), layout (chrome), panels, dashboard,
portfolio, log-chat, auth, settings, news, public. base.html and
public_base.html load only what they need; auth pages (login,
verify, unsubscribe confirm) load tokens + layout + auth.

Brand drift-detection test repointed at tokens.css (where the
palette now lives). 291 tests still pass.
This commit is contained in:
Giorgio Gilestro 2026-05-28 12:31:29 +02:00
parent 78ce8c8b0d
commit 355593c4f7
19 changed files with 2556 additions and 2585 deletions
Download patch file Download diff file Expand all files Collapse all files

92
app/static/css/panels.css Normal file
View file

@ -0,0 +1,92 @@
/* Cassandra — panel chrome, tables, status LEDs, utility colour classes. */
/* --- Panels ----------------------------------------------------------- */
.panel {
background: var(--surface);
border: 1px solid var(--border);
position: relative;
}
.panel-header {
border-bottom: 1px solid var(--border);
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
font-size: 11px;
background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.panel-header .title { color: var(--text); font-weight: 700; }
.panel-header .title::before { content: "■ "; color: var(--accent); }
.panel-header .meta { color: var(--dim); }
.panel-body { padding: 6px 0; }
.panel-body--scroll { max-height: 70vh; overflow-y: auto; }
/* --- Tables ----------------------------------------------------------- */
table.dense {
width: 100%;
border-collapse: collapse;
}
table.dense th, table.dense td {
padding: 4px 12px;
font-size: 12px;
border-bottom: 1px solid var(--surface-2);
white-space: nowrap;
}
table.dense th {
text-align: left;
color: var(--muted);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 10px;
background: var(--surface-2);
}
table.dense th.num,
table.dense td.num { text-align: right; }
table.dense td.label { color: var(--text); }
table.dense td.label.has-tip,
table.dense td[title] {
cursor: help;
border-bottom: 1px dotted color-mix(in srgb, var(--accent) 40%, transparent);
border-bottom-width: 1px;
}
.pf-name.has-tip {
cursor: help;
border-bottom: 1px dotted color-mix(in srgb, var(--accent) 50%, transparent);
}
table.dense tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pos { color: var(--positive); }
.neg { color: var(--negative); }
.neu { color: var(--muted); }
/* --- Status LEDs ------------------------------------------------------ */
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.led.ok { background: var(--positive); box-shadow: 0 0 6px var(--positive); }
.led.warn { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.led.err { background: var(--negative); box-shadow: 0 0 6px var(--negative); }
.led.idle { background: var(--dim); }
/* --- Empty / loading state ------------------------------------------- */
.empty {
padding: 24px;
text-align: center;
color: var(--muted);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.htmx-indicator {
display: inline-block;
color: var(--dim);
opacity: 0;
transition: opacity 0.2s;
}
.htmx-request .htmx-indicator { opacity: 1; }