Giorgio Gilestro
b6da1983d3
Adds the @media (max-width: 480px) blocks specified in the design: - dashboard.css: indicator table hides the 'mobile-hide'-tagged columns (Label, Ccy, 1y, anchor, as-of), keeping Symbol / Price / 1d / 1m. Cell padding + font shrink. Group-tab buttons get a bigger touch target. - panels.css: header padding tightens, scroll-body max-height drops to 60vh so log/news stay above the fold in the stacked layout. - portfolio.css: overall grid keeps 2 cols (already at 640px) with tighter gap; action buttons wrap; composer input goes full-width. - log-chat.css: chat bubbles edge-to-edge, input row stacks, font- size:14px on form fields to avoid iOS Safari zoom-on-focus. - news.css: row collapses to age | (title / source) — source moves under the title. Tag filter strip wraps. - settings.css: form rows stack (label above input). Import picker becomes single-column. Buttons full-width. - auth.css: card padding tightens to free up vertical space when the iOS keyboard is up. font-size:14px on inputs. - public.css: hero headline clamp() lower bound drops to 22px; CTAs stack full-width; pricing tier-grid stacks. indicators.html: tagged the secondary cells with .mobile-hide rather than relying on positional nth-child — the anchor column is conditional and would have shifted positions. 336 tests still pass.
108 lines
3.2 KiB
CSS
108 lines
3.2 KiB
CSS
/* 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; }
|
|
|
|
|
|
/* --- Mobile (≤480px) -------------------------------------------------- */
|
|
|
|
@media (max-width: 480px) {
|
|
.panel-header {
|
|
padding: 8px 10px;
|
|
gap: 8px;
|
|
}
|
|
.panel-header .title { font-size: 12px; }
|
|
.panel-header .meta { font-size: 10px; }
|
|
.panel-body { padding: 4px 6px; }
|
|
/* Scroll panels lose some vertical room on small screens so the
|
|
stacked layout doesn't push log/news off the fold. */
|
|
.panel-body--scroll { max-height: 60vh; }
|
|
}
|