128 lines
3.1 KiB
CSS
128 lines
3.1 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn-svelte/tailwind.css";
|
|
|
|
@import "./claddcn.css";
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
--ff-brand: oklch(0.57 0.105 240);
|
|
--ff-brand-deep: oklch(0.5 0.1 240);
|
|
--ff-on-brand: oklch(0.99 0.01 240);
|
|
--ff-income: oklch(0.5 0.12 145);
|
|
--ff-expense: oklch(0.52 0.15 28);
|
|
--ff-transfer: oklch(0.5 0.085 225);
|
|
--ff-warn: oklch(0.62 0.14 70);
|
|
--ff-row-hover: oklch(0.96 0.012 240);
|
|
--ff-row-cursor: oklch(0.93 0.03 240);
|
|
--ff-row-selected: oklch(0.9 0.05 240);
|
|
--ff-series-1: #1777b8;
|
|
--ff-series-2: #cb6620;
|
|
--ff-series-3: #008f7d;
|
|
--ff-series-4: #b08000;
|
|
--ff-series-5: #bc4b87;
|
|
--ff-series-6: #3f842e;
|
|
--ff-series-7: #6b4cae;
|
|
--ff-series-8: #b63132;
|
|
}
|
|
|
|
:root:not(.dark) {
|
|
--cladd-bg: oklch(0.955 0.007 240);
|
|
--cladd-surface: oklch(1 0 0);
|
|
--cladd-surface-cut: oklch(0.955 0.005 240);
|
|
--cladd-bg-outline: oklch(0.88 0.008 240);
|
|
--cladd-outline: oklch(0.9 0.008 240);
|
|
}
|
|
|
|
.cladd-color-brand {
|
|
--cladd-theme: #3c8dbc;
|
|
}
|
|
|
|
.dark {
|
|
--ff-brand: oklch(0.42 0.085 240);
|
|
--ff-brand-deep: oklch(0.36 0.075 240);
|
|
--ff-on-brand: oklch(0.97 0.01 240);
|
|
--ff-income: oklch(0.78 0.15 140);
|
|
--ff-expense: oklch(0.76 0.1 35);
|
|
--ff-transfer: oklch(0.76 0.08 220);
|
|
--ff-warn: oklch(0.8 0.13 80);
|
|
--ff-row-hover: oklch(0.25 0.012 240);
|
|
--ff-row-cursor: oklch(0.29 0.03 240);
|
|
--ff-row-selected: oklch(0.33 0.06 240);
|
|
--ff-series-1: #348dcf;
|
|
--ff-series-2: #d5753a;
|
|
--ff-series-3: #0f9b89;
|
|
--ff-series-4: #b68b16;
|
|
--ff-series-5: #cd6199;
|
|
--ff-series-6: #4e943e;
|
|
--ff-series-7: #876cca;
|
|
--ff-series-8: #c44844;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-brand: var(--ff-brand);
|
|
--color-brand-deep: var(--ff-brand-deep);
|
|
--color-on-brand: var(--ff-on-brand);
|
|
--color-income: var(--ff-income);
|
|
--color-expense: var(--ff-expense);
|
|
--color-transfer: var(--ff-transfer);
|
|
--color-warn: var(--ff-warn);
|
|
--color-row-hover: var(--ff-row-hover);
|
|
--color-row-cursor: var(--ff-row-cursor);
|
|
--color-row-selected: var(--ff-row-selected);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
html {
|
|
scrollbar-color: var(--cladd-fg-softest) transparent;
|
|
}
|
|
body {
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
@apply bg-background text-foreground;
|
|
}
|
|
::selection {
|
|
background: color-mix(in oklch, var(--ff-brand) 28%, transparent);
|
|
}
|
|
:focus-visible {
|
|
outline: 1.5px solid var(--ff-brand);
|
|
outline-offset: 1px;
|
|
}
|
|
.dark :focus-visible {
|
|
outline-color: var(--ff-series-1);
|
|
}
|
|
a {
|
|
text-underline-offset: 3px;
|
|
}
|
|
}
|
|
|
|
@utility num {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -0.01em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@utility kbd {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 1.35rem;
|
|
height: 1.25rem;
|
|
padding: 0 0.3rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
line-height: 1;
|
|
color: var(--cladd-fg-soft);
|
|
background: var(--cladd-surface-cut);
|
|
border-radius: 4px;
|
|
box-shadow: inset 0 -1px 0 var(--cladd-outline);
|
|
}
|
|
|
|
.dark .text-brand {
|
|
color: var(--ff-series-1);
|
|
}
|