491 lines
12 KiB
CSS
491 lines
12 KiB
CSS
/* ============================================================
|
||
Bill Tracker — Material Design theme via shadcn/studio
|
||
:root is the default Material Design light theme.
|
||
============================================================ */
|
||
|
||
/* ── Georgia for digits only ─────────────────────────────── */
|
||
|
||
@import 'tailwindcss';
|
||
|
||
@plugin 'tailwindcss-animate';
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
@utility container {
|
||
margin-inline: auto;
|
||
padding-inline: 2rem;
|
||
@media (width >= --theme(--breakpoint-sm)) {
|
||
max-width: none;
|
||
}
|
||
@media (width >= 1400px) {
|
||
max-width: 1400px;
|
||
}
|
||
}
|
||
|
||
@theme {
|
||
--color-border: oklch(var(--border));
|
||
--color-input: oklch(var(--input));
|
||
--color-ring: oklch(var(--ring));
|
||
--color-background: oklch(var(--background));
|
||
--color-foreground: oklch(var(--foreground));
|
||
|
||
--color-primary: oklch(var(--primary));
|
||
--color-primary-foreground: oklch(var(--primary-foreground));
|
||
|
||
--color-secondary: oklch(var(--secondary));
|
||
--color-secondary-foreground: oklch(var(--secondary-foreground));
|
||
|
||
--color-destructive: oklch(var(--destructive));
|
||
--color-destructive-foreground: oklch(var(--destructive-foreground));
|
||
|
||
--color-muted: oklch(var(--muted));
|
||
--color-muted-foreground: oklch(var(--muted-foreground));
|
||
|
||
--color-accent: oklch(var(--accent));
|
||
--color-accent-foreground: oklch(var(--accent-foreground));
|
||
|
||
--color-popover: oklch(var(--popover));
|
||
--color-popover-foreground: oklch(var(--popover-foreground));
|
||
|
||
--color-card: oklch(var(--card));
|
||
--color-card-foreground: oklch(var(--card-foreground));
|
||
|
||
--color-sidebar: oklch(var(--sidebar));
|
||
--color-sidebar-foreground: oklch(var(--sidebar-foreground));
|
||
--color-sidebar-primary: oklch(var(--sidebar-primary));
|
||
--color-sidebar-accent: oklch(var(--sidebar-accent));
|
||
--color-sidebar-border: oklch(var(--sidebar-border));
|
||
--color-sidebar-ring: oklch(var(--sidebar-ring));
|
||
|
||
--font-sans:
|
||
Inter, Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||
sans-serif;
|
||
--font-serif: var(--font-serif), ui-serif, serif;
|
||
--font-mono: var(--font-mono), ui-monospace, SFMono-Regular, monospace;
|
||
|
||
--radius-lg: var(--radius);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
|
||
--animate-accordion-down: accordion-down 0.2s ease-out;
|
||
--animate-accordion-up: accordion-up 0.2s ease-out;
|
||
--animate-collapsible-down: collapsible-down 0.2s ease-out;
|
||
--animate-collapsible-up: collapsible-up 0.2s ease-out;
|
||
|
||
@keyframes accordion-down {
|
||
from {
|
||
height: 0;
|
||
}
|
||
to {
|
||
height: var(--radix-accordion-content-height);
|
||
}
|
||
}
|
||
@keyframes accordion-up {
|
||
from {
|
||
height: var(--radix-accordion-content-height);
|
||
}
|
||
to {
|
||
height: 0;
|
||
}
|
||
}
|
||
@keyframes collapsible-down {
|
||
from {
|
||
height: 0;
|
||
}
|
||
to {
|
||
height: var(--radix-collapsible-content-height);
|
||
}
|
||
}
|
||
@keyframes collapsible-up {
|
||
from {
|
||
height: var(--radix-collapsible-content-height);
|
||
}
|
||
to {
|
||
height: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/*
|
||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||
so we've added these compatibility styles to make sure everything still
|
||
looks the same as it did with Tailwind CSS v3.
|
||
|
||
If we ever want to remove these styles, we need to add an explicit border
|
||
color utility to any element that depends on these defaults.
|
||
*/
|
||
@layer base {
|
||
*,
|
||
::after,
|
||
::before,
|
||
::backdrop,
|
||
::file-selector-button {
|
||
border-color: var(--color-gray-200, currentcolor);
|
||
}
|
||
}
|
||
|
||
/* ── Utilities ───────────────────────────────────────────── */
|
||
|
||
@utility surface {
|
||
/* Generic surface */
|
||
@apply rounded-xl border border-border/75 bg-card/95 shadow-xs shadow-black/10;
|
||
}
|
||
|
||
@utility surface-elevated {
|
||
/* Elevated surface */
|
||
@apply surface backdrop-blur-xs;
|
||
box-shadow:
|
||
0 1px 2px rgb(0 0 0 / 0.05),
|
||
0 10px 30px rgb(15 23 42 / 0.07);
|
||
|
||
.dark & {
|
||
box-shadow:
|
||
0 0 0 1px oklch(var(--border) / 0.7),
|
||
0 14px 34px rgb(0 0 0 / 0.42);
|
||
}
|
||
}
|
||
|
||
@utility dark {
|
||
& .surface-elevated {
|
||
box-shadow:
|
||
0 0 0 1px oklch(var(--border) / 0.7),
|
||
0 14px 34px rgb(0 0 0 / 0.42);
|
||
}
|
||
|
||
& .surface-premium {
|
||
box-shadow:
|
||
0 0 0 1px oklch(var(--border) / 0.55),
|
||
0 12px 30px rgb(0 0 0 / 0.34);
|
||
}
|
||
|
||
/* Faded muted-text variants: keep them readable in dark mode — Tailwind's
|
||
raw /40–/70 alphas dissolve into the background. */
|
||
& .text-muted-foreground\/40 {
|
||
color: oklch(var(--muted-foreground) / 0.8);
|
||
}
|
||
|
||
& .text-muted-foreground\/50 {
|
||
color: oklch(var(--muted-foreground) / 0.85);
|
||
}
|
||
|
||
& .text-muted-foreground\/60 {
|
||
color: oklch(var(--muted-foreground) / 0.9);
|
||
}
|
||
|
||
& .text-muted-foreground\/70 {
|
||
color: oklch(var(--muted-foreground) / 0.95);
|
||
}
|
||
}
|
||
|
||
@utility surface-premium {
|
||
@apply rounded-xl border border-border/75 bg-card/95 shadow-xs shadow-black/10 backdrop-blur-xs;
|
||
|
||
.dark & {
|
||
box-shadow:
|
||
0 0 0 1px oklch(var(--border) / 0.55),
|
||
0 12px 30px rgb(0 0 0 / 0.34);
|
||
}
|
||
}
|
||
|
||
@utility metric-card {
|
||
@apply relative min-h-31 overflow-hidden rounded-xl border border-border/75 bg-card/95 px-4 py-4 shadow-xs shadow-black/10 sm:px-5;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0 0 auto;
|
||
height: 2px;
|
||
background: currentColor;
|
||
opacity: 0.24;
|
||
}
|
||
}
|
||
|
||
@utility stat-card {
|
||
/* Stat cards */
|
||
@apply surface-elevated p-6;
|
||
}
|
||
|
||
@utility table-surface {
|
||
/* Table */
|
||
@apply surface-premium overflow-hidden;
|
||
}
|
||
|
||
@utility 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;
|
||
}
|
||
|
||
@utility metric-value {
|
||
@apply tracker-number font-bold tracking-tight text-foreground;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
@utility text-muted-foreground/40 {
|
||
/* Faded muted-text variants: keep them readable in dark mode — Tailwind's
|
||
raw /40–/70 alphas dissolve into the background. */
|
||
.dark & {
|
||
color: oklch(var(--muted-foreground) / 0.8);
|
||
}
|
||
}
|
||
|
||
@utility text-muted-foreground/50 {
|
||
.dark & {
|
||
color: oklch(var(--muted-foreground) / 0.85);
|
||
}
|
||
}
|
||
|
||
@utility text-muted-foreground/60 {
|
||
.dark & {
|
||
color: oklch(var(--muted-foreground) / 0.9);
|
||
}
|
||
}
|
||
|
||
@utility text-muted-foreground/70 {
|
||
.dark & {
|
||
color: oklch(var(--muted-foreground) / 0.95);
|
||
}
|
||
}
|
||
|
||
@utility scrollbar-thin {
|
||
/* Custom Scrollbar */
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
@utility scrollbar-thumb-muted {
|
||
scrollbar-color: oklch(var(--muted) / 0.3) transparent;
|
||
&::-webkit-scrollbar-thumb {
|
||
background-color: oklch(var(--muted) / 0.3);
|
||
border-radius: 8px;
|
||
}
|
||
&::-webkit-scrollbar-thumb:hover {
|
||
background-color: oklch(var(--muted) / 0.5);
|
||
}
|
||
}
|
||
|
||
@utility scrollbar-track-transparent {
|
||
scrollbar-color: oklch(var(--muted) / 0.3) transparent;
|
||
&::-webkit-scrollbar-track {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
@layer base {
|
||
@font-face {
|
||
font-family: 'GeorgiaDigits';
|
||
src: local('Georgia');
|
||
unicode-range:
|
||
U+0030-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 ───────────────────────────────────────── */
|
||
|
||
@layer base {
|
||
:root {
|
||
--background: 0.985 0.006 235;
|
||
--foreground: 0.185 0.018 238;
|
||
--card: 0.998 0.003 238;
|
||
--card-foreground: 0.185 0.018 238;
|
||
--popover: 1 0 0;
|
||
--popover-foreground: 0.185 0.018 238;
|
||
--primary: 0.64 0.17 154;
|
||
--primary-foreground: 0.985 0.006 154;
|
||
--secondary: 0.94 0.01 235;
|
||
--secondary-foreground: 0.245 0.018 238;
|
||
--muted: 0.945 0.009 235;
|
||
--muted-foreground: 0.44 0.016 238;
|
||
--accent: 0.925 0.02 184;
|
||
--accent-foreground: 0.205 0.02 190;
|
||
--destructive: 0.58 0.21 22;
|
||
--destructive-foreground: 0.99 0.003 250;
|
||
--border: 0.875 0.01 235;
|
||
--input: 0.875 0.01 235;
|
||
--ring: 0.64 0.15 154;
|
||
--chart-1: 0.62 0.17 154;
|
||
--chart-2: 0.58 0.13 195;
|
||
--chart-3: 0.64 0.16 65;
|
||
--chart-4: 0.62 0.17 335;
|
||
--chart-5: 0.55 0.11 250;
|
||
--sidebar: 0.965 0.008 235;
|
||
--sidebar-foreground: 0.22 0.018 238;
|
||
--sidebar-primary: 0.64 0.17 154;
|
||
--sidebar-primary-foreground: 0.985 0.006 154;
|
||
--sidebar-accent: 0.925 0.02 184;
|
||
--sidebar-accent-foreground: 0.205 0.02 190;
|
||
--sidebar-border: 0.875 0.01 235;
|
||
--sidebar-ring: 0.64 0.15 154;
|
||
--font-sans:
|
||
Inter, Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||
sans-serif;
|
||
--font-serif: Merriweather, ui-serif, serif;
|
||
--font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
--radius: 1rem;
|
||
}
|
||
|
||
.dark {
|
||
--background: 0.145 0.018 238;
|
||
--foreground: 0.962 0.008 235;
|
||
--card: 0.205 0.02 238;
|
||
--card-foreground: 0.962 0.008 235;
|
||
--popover: 0.235 0.022 238;
|
||
--popover-foreground: 0.962 0.008 235;
|
||
--primary: 0.72 0.15 154;
|
||
--primary-foreground: 0.145 0.02 154;
|
||
--secondary: 0.275 0.02 238;
|
||
--secondary-foreground: 0.94 0.008 235;
|
||
--muted: 0.275 0.018 238;
|
||
/* Secondary text. Raised 0.76 → 0.85 — at 0.76 labels and hints sat too
|
||
close to the card background (L 0.235) and strained the eyes. */
|
||
--muted-foreground: 0.85 0.012 245;
|
||
--accent: 0.33 0.05 184;
|
||
--accent-foreground: 0.965 0.008 235;
|
||
--destructive: 0.66 0.18 26;
|
||
--destructive-foreground: 0.98 0.004 245;
|
||
--border: 0.37 0.02 238;
|
||
--input: 0.37 0.02 238;
|
||
--ring: 0.72 0.14 154;
|
||
--chart-1: 0.72 0.15 154;
|
||
--chart-2: 0.7 0.12 195;
|
||
--chart-3: 0.75 0.15 68;
|
||
--chart-4: 0.7 0.16 340;
|
||
--chart-5: 0.68 0.1 250;
|
||
--sidebar: 0.165 0.018 238;
|
||
--sidebar-foreground: 0.95 0.008 235;
|
||
--sidebar-primary: 0.72 0.15 154;
|
||
--sidebar-primary-foreground: 0.145 0.02 154;
|
||
--sidebar-accent: 0.3 0.045 184;
|
||
--sidebar-accent-foreground: 0.95 0.008 235;
|
||
--sidebar-border: 0.34 0.02 238;
|
||
--sidebar-ring: 0.72 0.14 154;
|
||
}
|
||
|
||
* {
|
||
@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;
|
||
}
|
||
}
|
||
|
||
@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,
|
||
.tracker-print-hide {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Tracker printout: don't split a bill row across a page boundary. */
|
||
[data-tracker-row] {
|
||
break-inside: avoid;
|
||
}
|
||
|
||
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;
|
||
}
|
||
}
|