298 lines
7.6 KiB
CSS
298 lines
7.6 KiB
CSS
/* ============================================================
|
||
Bill Tracker — Material Design theme via shadcn/studio
|
||
:root is the default Material Design light theme.
|
||
============================================================ */
|
||
|
||
/* ── Georgia for digits only ─────────────────────────────── */
|
||
|
||
@font-face {
|
||
font-family: 'GeorgiaDigits';
|
||
src: local('Georgia');
|
||
unicode-range:
|
||
U+0030-U+0039, /* 0–9 */
|
||
U+002C, /* , thousands separator */
|
||
U+002E, /* . decimal point */
|
||
U+002D, /* - minus / hyphen */
|
||
U+002B, /* + plus */
|
||
U+0025, /* % percent */
|
||
U+0024, /* $ dollar */
|
||
U+00A2, /* ¢ cent */
|
||
U+00A3, /* £ pound */
|
||
U+00A5, /* ¥ yen */
|
||
U+20AC; /* € euro */
|
||
}
|
||
|
||
/* ── Tailwind base ───────────────────────────────────────── */
|
||
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
@layer base {
|
||
:root {
|
||
--background: 0.97 0.005 250;
|
||
--foreground: 0.15 0.008 250;
|
||
--card: 0.995 0.004 250;
|
||
--card-foreground: 0.15 0.008 250;
|
||
--popover: 1.00 0 0;
|
||
--popover-foreground: 0.15 0.008 250;
|
||
--primary: 0.55 0.20 276;
|
||
--primary-foreground: 0.99 0.003 250;
|
||
--secondary: 0.93 0.008 250;
|
||
--secondary-foreground: 0.20 0.010 250;
|
||
--muted: 0.94 0.006 250;
|
||
--muted-foreground: 0.38 0.010 250;
|
||
--accent: 0.92 0.012 265;
|
||
--accent-foreground: 0.20 0.010 250;
|
||
--destructive: 0.55 0.22 25;
|
||
--destructive-foreground: 0.99 0.003 250;
|
||
--border: 0.88 0.008 250;
|
||
--input: 0.88 0.008 250;
|
||
--ring: 0.55 0.16 276;
|
||
--chart-1: 0.55 0.22 270;
|
||
--chart-2: 0.55 0.14 150;
|
||
--chart-3: 0.60 0.18 310;
|
||
--chart-4: 0.58 0.16 130;
|
||
--chart-5: 0.55 0.18 255;
|
||
--sidebar: 0.94 0.007 250;
|
||
--sidebar-foreground: 0.20 0.008 250;
|
||
--sidebar-primary: 0.55 0.20 276;
|
||
--sidebar-primary-foreground: 0.99 0.003 250;
|
||
--sidebar-accent: 0.90 0.009 250;
|
||
--sidebar-accent-foreground: 0.20 0.008 250;
|
||
--sidebar-border: 0.88 0.008 250;
|
||
--sidebar-ring: 0.55 0.20 276;
|
||
--font-sans: 'GeorgiaDigits', Inter, Roboto, ui-sans-serif, system-ui, sans-serif;
|
||
--font-serif: Merriweather, ui-serif, serif;
|
||
--font-mono: 'GeorgiaDigits', "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
--radius: 1rem;
|
||
}
|
||
|
||
.dark {
|
||
--background: 0.155 0.014 245;
|
||
--foreground: 0.965 0.006 245;
|
||
--card: 0.235 0.016 245;
|
||
--card-foreground: 0.965 0.006 245;
|
||
--popover: 0.26 0.018 245;
|
||
--popover-foreground: 0.965 0.006 245;
|
||
--primary: 0.72 0.17 150;
|
||
--primary-foreground: 0.14 0.018 150;
|
||
--secondary: 0.275 0.018 245;
|
||
--secondary-foreground: 0.94 0.007 245;
|
||
--muted: 0.275 0.016 245;
|
||
--muted-foreground: 0.76 0.012 245;
|
||
--accent: 0.32 0.045 158;
|
||
--accent-foreground: 0.965 0.006 245;
|
||
--destructive: 0.66 0.18 26;
|
||
--destructive-foreground: 0.98 0.004 245;
|
||
--border: 0.40 0.018 245;
|
||
--input: 0.40 0.018 245;
|
||
--ring: 0.72 0.16 150;
|
||
--chart-1: 0.55 0.22 270;
|
||
--chart-2: 0.62 0.14 150;
|
||
--chart-3: 0.65 0.18 310;
|
||
--chart-4: 0.62 0.16 130;
|
||
--chart-5: 0.58 0.18 255;
|
||
--sidebar: 0.175 0.014 245;
|
||
--sidebar-foreground: 0.95 0.006 245;
|
||
--sidebar-primary: 0.72 0.17 150;
|
||
--sidebar-primary-foreground: 0.14 0.018 150;
|
||
--sidebar-accent: 0.30 0.038 158;
|
||
--sidebar-accent-foreground: 0.95 0.006 245;
|
||
--sidebar-border: 0.36 0.018 245;
|
||
--sidebar-ring: 0.72 0.16 150;
|
||
}
|
||
|
||
* {
|
||
@apply border-border;
|
||
}
|
||
|
||
html {
|
||
@apply scroll-smooth;
|
||
}
|
||
|
||
body {
|
||
@apply bg-background font-sans text-foreground antialiased;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
::selection {
|
||
color: oklch(var(--primary-foreground));
|
||
background: oklch(var(--primary) / 0.75);
|
||
}
|
||
|
||
strong {
|
||
@apply font-semibold text-foreground;
|
||
}
|
||
}
|
||
|
||
/* ── Utilities ───────────────────────────────────────────── */
|
||
|
||
@layer utilities {
|
||
|
||
/* Generic surface */
|
||
.surface {
|
||
@apply rounded-2xl border border-border/80 bg-card shadow-sm shadow-black/10;
|
||
}
|
||
|
||
/* Elevated surface */
|
||
.surface-elevated {
|
||
@apply surface;
|
||
box-shadow:
|
||
0 1px 2px rgb(0 0 0 / 0.05),
|
||
0 6px 18px rgb(0 0 0 / 0.06);
|
||
}
|
||
|
||
.dark .surface-elevated {
|
||
box-shadow:
|
||
0 0 0 1px oklch(var(--border) / 0.78),
|
||
0 10px 24px rgb(0 0 0 / 0.48);
|
||
}
|
||
|
||
/* Stat cards */
|
||
.stat-card {
|
||
@apply surface-elevated p-6;
|
||
}
|
||
|
||
/* Table */
|
||
.table-surface {
|
||
@apply surface overflow-hidden shadow-sm shadow-black/10;
|
||
}
|
||
|
||
.tracker-number {
|
||
font-family: 'GeorgiaDigits', Inter, Roboto, ui-sans-serif, system-ui, sans-serif;
|
||
font-variant-numeric: tabular-nums lining-nums;
|
||
font-feature-settings: "tnum" 1, "lnum" 1;
|
||
-webkit-font-smoothing: auto;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
.metric-value {
|
||
@apply tracker-number font-bold tracking-tight text-foreground;
|
||
}
|
||
|
||
|
||
.dark .text-muted-foreground\/40 {
|
||
color: oklch(var(--muted-foreground) / 0.72);
|
||
}
|
||
|
||
.dark .text-muted-foreground\/50 {
|
||
color: oklch(var(--muted-foreground) / 0.78);
|
||
}
|
||
|
||
.dark .text-muted-foreground\/60 {
|
||
color: oklch(var(--muted-foreground) / 0.84);
|
||
}
|
||
|
||
.dark .text-muted-foreground\/70 {
|
||
color: oklch(var(--muted-foreground) / 0.9);
|
||
}
|
||
|
||
/* Custom Scrollbar */
|
||
.scrollbar-thin {
|
||
scrollbar-width: thin;
|
||
}
|
||
.scrollbar-thumb-muted {
|
||
scrollbar-color: oklch(var(--muted) / 0.3) transparent;
|
||
}
|
||
.scrollbar-track-transparent {
|
||
scrollbar-color: oklch(var(--muted) / 0.3) transparent;
|
||
}
|
||
.scrollbar-thumb-muted::-webkit-scrollbar-thumb {
|
||
background-color: oklch(var(--muted) / 0.3);
|
||
border-radius: 8px;
|
||
}
|
||
.scrollbar-track-transparent::-webkit-scrollbar-track {
|
||
background-color: transparent;
|
||
}
|
||
.scrollbar-thumb-muted::-webkit-scrollbar-thumb:hover {
|
||
background-color: oklch(var(--muted) / 0.5);
|
||
}
|
||
}
|
||
|
||
@media print {
|
||
body {
|
||
background: white !important;
|
||
color: #111827 !important;
|
||
}
|
||
|
||
header,
|
||
.analytics-screen-header,
|
||
.analytics-controls,
|
||
.analytics-actions,
|
||
.summary-screen-header,
|
||
.summary-controls,
|
||
.summary-actions,
|
||
.summary-reorder-controls,
|
||
.summary-edit-actions,
|
||
.summary-income-form {
|
||
display: none !important;
|
||
}
|
||
|
||
main,
|
||
main > div {
|
||
max-width: none !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.analytics-page,
|
||
.summary-page {
|
||
color: #111827 !important;
|
||
}
|
||
|
||
.analytics-report-meta,
|
||
.analytics-print-footer,
|
||
.summary-print-meta,
|
||
.summary-print-footer {
|
||
display: block !important;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.analytics-report-meta h1,
|
||
.summary-print-meta h1 {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.analytics-report-meta p,
|
||
.analytics-print-footer,
|
||
.summary-print-meta p,
|
||
.summary-print-footer {
|
||
color: #4b5563 !important;
|
||
font-size: 12px;
|
||
margin: 0.125rem 0;
|
||
}
|
||
|
||
.analytics-range {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.summary-page input {
|
||
border: 0 !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
color: #111827 !important;
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
.summary-expense-row {
|
||
grid-template-columns: minmax(0, 1fr) 7.5rem 5.5rem !important;
|
||
}
|
||
|
||
.analytics-chart-grid {
|
||
display: block !important;
|
||
}
|
||
|
||
.analytics-chart,
|
||
.summary-card,
|
||
.summary-chart-card {
|
||
break-inside: avoid;
|
||
page-break-inside: avoid;
|
||
margin-bottom: 1rem;
|
||
border: 1px solid #d1d5db !important;
|
||
box-shadow: none !important;
|
||
background: white !important;
|
||
}
|
||
}
|