dc7024d98a
A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
105 lines
3.6 KiB
CSS
105 lines
3.6 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* Enable dark mode via .dark class on html */
|
||
@custom-variant dark (&:where(.dark, .dark *));
|
||
|
||
/* Coolors palette — stays the same in both modes */
|
||
@theme {
|
||
--color-sunny: #EDAE49;
|
||
--color-brick: #D1495B;
|
||
--color-seaweed: #00798C;
|
||
--color-casual: #30638E;
|
||
--color-indigo: #003D5B;
|
||
|
||
/* Part A.4: chart hues — deeper steps of the same brand hues, validated for CVD/contrast.
|
||
Brand palette (#EDAE49/#00798C/#D1495B) does NOT change; these are read only by chart marks. */
|
||
--color-chart-income: #0090A6;
|
||
--color-chart-fixed: #BE851F;
|
||
--color-chart-running: #C13B4D;
|
||
|
||
--color-brand-blue: #30638E;
|
||
--color-brand-orange: #EDAE49;
|
||
--color-brand-red: #D1495B;
|
||
--color-brand-green: #00798C;
|
||
--color-brand-purple: #8B5CF6;
|
||
--color-brand-cyan: #00798C;
|
||
--color-brand-pink: #D1495B;
|
||
--color-brand-yellow: #EDAE49;
|
||
|
||
/* Light theme (default) */
|
||
--color-bg: #f5f7fb;
|
||
--color-surface: #ffffff;
|
||
--color-surface-muted: #f9fafb;
|
||
--color-border: #e5e7eb;
|
||
--color-border-soft: #f3f4f6;
|
||
--color-text: #003D5B;
|
||
--color-text-muted: #6b7280;
|
||
--color-text-soft: #9ca3af;
|
||
--color-row-hover: rgba(0, 0, 0, 0.02);
|
||
|
||
/* "Ink" steps — the light-mode colour for text that borrows a brand hue.
|
||
The base brand palette above is never used as text on a light surface unless
|
||
it clears 4.5:1; these names exist so `text-accent-ink` works in BOTH modes
|
||
and only its value changes. See the .dark block for the dark counterparts. */
|
||
--color-accent-ink: #30638E;
|
||
--color-brick-ink: #D1495B;
|
||
--color-indigo-ink: #003D5B;
|
||
}
|
||
|
||
/* Dark theme overrides */
|
||
.dark {
|
||
--color-bg: #0f151b;
|
||
--color-surface: #1e2732;
|
||
--color-surface-muted: #182029;
|
||
--color-border: #303c48;
|
||
--color-border-soft: #26313c;
|
||
--color-text: #e8eef4;
|
||
--color-text-muted: #adb8c2;
|
||
--color-text-soft: #87919a;
|
||
--color-row-hover: rgba(255, 255, 255, 0.04);
|
||
|
||
/* Dark "ink" steps. The base brand hues are correct as *fills* but fail WCAG AA
|
||
as text on a dark surface (seaweed 3.6:1, casual 2.9:1, brick 3.7:1, indigo 1.6:1).
|
||
These are lighter steps of the same hues, reaching 4.8–7.3:1. Text-only —
|
||
never a fill — so the @theme brand palette stays untouched. */
|
||
--color-accent-ink: #2BB0C4;
|
||
--color-brick-ink: #E86E7E;
|
||
--color-indigo-ink: #7FA8C9;
|
||
|
||
/* Part A.4: dark-mode chart hues */
|
||
--color-chart-income: #00A6BE;
|
||
--color-chart-fixed: #BE851F;
|
||
--color-chart-running: #D94F60;
|
||
}
|
||
|
||
html, body {
|
||
background: var(--color-bg);
|
||
color: var(--color-text);
|
||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
}
|
||
|
||
* { -webkit-font-smoothing: antialiased; }
|
||
|
||
/* Smooth color transition when toggling themes */
|
||
body, .dark body { transition: background-color 0.2s ease, color 0.2s ease; }
|
||
|
||
.recharts-cartesian-axis-tick text { fill: var(--color-text-soft); font-size: 11px; }
|
||
.recharts-cartesian-grid line { stroke: var(--color-border-soft); }
|
||
.recharts-default-tooltip {
|
||
background: rgba(255,255,255,0.98) !important;
|
||
border: 1px solid #e5e7eb !important;
|
||
border-radius: 12px !important;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
|
||
font-size: 12px !important;
|
||
padding: 8px 12px !important;
|
||
}
|
||
.recharts-tooltip-label { color: #003D5B !important; font-weight: 600 !important; margin-bottom: 4px !important; }
|
||
.recharts-legend-item-text { color: #6b7280 !important; font-size: 12px !important; }
|
||
|
||
.dark .recharts-default-tooltip {
|
||
background: rgba(30, 39, 50, 0.98) !important;
|
||
border: 1px solid #303c48 !important;
|
||
color: #e8eef4 !important;
|
||
}
|
||
.dark .recharts-tooltip-label { color: #e8eef4 !important; }
|
||
.dark .recharts-legend-item-text { color: #adb8c2 !important; }
|