improve UI
This commit is contained in:
parent
b32c609a3b
commit
f3eb1622eb
9 changed files with 320 additions and 231 deletions
|
|
@ -1,165 +1,182 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@layer base {
|
||||
|
||||
:root {
|
||||
/* Catppuccin Latte */
|
||||
--color-background: #eff1f5;
|
||||
--color-foreground: #4c4f69;
|
||||
--color-card: #e6e9ef;
|
||||
--color-card-foreground: #4c4f69;
|
||||
--color-popover: #e6e9ef;
|
||||
--color-popover-foreground: #4c4f69;
|
||||
--color-primary: #1e66f5;
|
||||
--color-primary-foreground: #eff1f5;
|
||||
--color-secondary: #ccd0da;
|
||||
--color-secondary-foreground: #4c4f69;
|
||||
--color-muted: #ccd0da;
|
||||
--color-muted-foreground: #6c6f85;
|
||||
--color-accent: #dc8a78;
|
||||
--color-accent-foreground: #eff1f5;
|
||||
--color-destructive: #d20f39;
|
||||
--color-destructive-foreground: #eff1f5;
|
||||
--color-border: #bcc0cc;
|
||||
--color-input: #bcc0cc;
|
||||
--color-ring: #1e66f5;
|
||||
--radius: 0.5rem;
|
||||
--popover: 220 23% 95%;
|
||||
--background: 227 92% 95%;
|
||||
--foreground: 234 16% 35%;
|
||||
|
||||
--card: 225 23% 92%;
|
||||
--card-foreground: 234 16% 35%;
|
||||
|
||||
--popover: 225 23% 92%;
|
||||
--popover-foreground: 234 16% 35%;
|
||||
/* Fallback colors for older browsers */
|
||||
--fallback-background: #ffffff;
|
||||
--fallback-popover: #f5f5f5;
|
||||
|
||||
--primary: 220 91% 54%;
|
||||
--primary-foreground: 227 92% 95%;
|
||||
|
||||
--secondary: 227 23% 83%;
|
||||
--secondary-foreground: 234 16% 35%;
|
||||
|
||||
--muted: 227 23% 83%;
|
||||
--muted-foreground: 231 11% 47%;
|
||||
|
||||
--accent: 11 83% 67%;
|
||||
--accent-foreground: 227 92% 95%;
|
||||
|
||||
--destructive: 347 87% 44%;
|
||||
--destructive-foreground: 227 92% 95%;
|
||||
|
||||
--border: 228 17% 77%;
|
||||
--input: 228 17% 77%;
|
||||
--ring: 220 91% 54%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Catppuccin Macchiato - we'll use the same colors for dark mode */
|
||||
--color-background: #24273a;
|
||||
--color-foreground: #cad3f5;
|
||||
--color-card: #1e2030;
|
||||
--color-card-foreground: #cad3f5;
|
||||
--color-popover: #1e2030;
|
||||
--color-popover-foreground: #cad3f5;
|
||||
--color-primary: #8aadf4;
|
||||
--color-primary-foreground: #24273a;
|
||||
--color-secondary: #363a4f;
|
||||
--color-secondary-foreground: #cad3f5;
|
||||
--color-muted: #363a4f;
|
||||
--color-muted-foreground: #a5adcb;
|
||||
--color-accent: #f4dbd6;
|
||||
--color-accent-foreground: #24273a;
|
||||
--color-destructive: #ed8796;
|
||||
--color-destructive-foreground: #24273a;
|
||||
--color-border: #363a4f;
|
||||
--color-input: #363a4f;
|
||||
--color-ring: #8aadf4;
|
||||
--popover: 240 21% 15%;
|
||||
--popover-foreground: 226 64% 88%;
|
||||
/* Fallback colors for older browsers */
|
||||
--fallback-background: #1e1e2e;
|
||||
--fallback-popover: #313244;
|
||||
}
|
||||
--background: 233 31% 18%;
|
||||
--foreground: 227 68% 88%;
|
||||
|
||||
--card: 234 32% 15%;
|
||||
--card-foreground: 227 68% 88%;
|
||||
|
||||
--popover: 234 32% 15%;
|
||||
--popover-foreground: 227 68% 88%;
|
||||
|
||||
--primary: 220 83% 76%;
|
||||
--primary-foreground: 233 31% 18%;
|
||||
|
||||
--secondary: 233 25% 26%;
|
||||
--secondary-foreground: 227 68% 88%;
|
||||
|
||||
--muted: 233 25% 26%;
|
||||
--muted-foreground: 225 27% 72%;
|
||||
|
||||
--accent: 11 77% 90%;
|
||||
--accent-foreground: 233 31% 18%;
|
||||
|
||||
--destructive: 351 74% 76%;
|
||||
--destructive-foreground: 233 31% 18%;
|
||||
|
||||
--border: 233 25% 26%;
|
||||
--input: 233 25% 26%;
|
||||
--ring: 220 83% 76%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply box-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
}
|
||||
|
||||
@utility bg-background {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
@layer utilities {
|
||||
.bg-background {
|
||||
background-color: hsl(var(--background));
|
||||
}
|
||||
.bg-foreground {
|
||||
background-color: hsl(var(--foreground));
|
||||
}
|
||||
.bg-card {
|
||||
background-color: hsl(var(--card));
|
||||
}
|
||||
.bg-card-foreground {
|
||||
background-color: hsl(var(--card-foreground));
|
||||
}
|
||||
.bg-popover {
|
||||
background-color: hsl(var(--popover));
|
||||
}
|
||||
.bg-popover-foreground {
|
||||
background-color: hsl(var(--popover-foreground));
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: hsl(var(--primary));
|
||||
}
|
||||
.bg-primary-foreground {
|
||||
background-color: hsl(var(--primary-foreground));
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: hsl(var(--secondary));
|
||||
}
|
||||
.bg-secondary-foreground {
|
||||
background-color: hsl(var(--secondary-foreground));
|
||||
}
|
||||
.bg-muted {
|
||||
background-color: hsl(var(--muted));
|
||||
}
|
||||
.bg-muted-foreground {
|
||||
background-color: hsl(var(--muted-foreground));
|
||||
}
|
||||
.bg-accent {
|
||||
background-color: hsl(var(--accent));
|
||||
}
|
||||
.bg-accent-foreground {
|
||||
background-color: hsl(var(--accent-foreground));
|
||||
}
|
||||
.bg-destructive {
|
||||
background-color: hsl(var(--destructive));
|
||||
}
|
||||
.bg-destructive-foreground {
|
||||
background-color: hsl(var(--destructive-foreground));
|
||||
}
|
||||
|
||||
@utility text-foreground {
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
.text-background {
|
||||
color: hsl(var(--background));
|
||||
}
|
||||
.text-foreground {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
.text-card {
|
||||
color: hsl(var(--card));
|
||||
}
|
||||
.text-card-foreground {
|
||||
color: hsl(var(--card-foreground));
|
||||
}
|
||||
.text-popover {
|
||||
color: hsl(var(--popover));
|
||||
}
|
||||
.text-popover-foreground {
|
||||
color: hsl(var(--popover-foreground));
|
||||
}
|
||||
.text-primary {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
.text-primary-foreground {
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
.text-secondary {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
.text-secondary-foreground {
|
||||
color: hsl(var(--secondary-foreground));
|
||||
}
|
||||
.text-muted {
|
||||
color: hsl(var(--muted));
|
||||
}
|
||||
.text-muted-foreground {
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
.text-accent {
|
||||
color: hsl(var(--accent));
|
||||
}
|
||||
.text-accent-foreground {
|
||||
color: hsl(var(--accent-foreground));
|
||||
}
|
||||
.text-destructive {
|
||||
color: hsl(var(--destructive));
|
||||
}
|
||||
.text-destructive-foreground {
|
||||
color: hsl(var(--destructive-foreground));
|
||||
}
|
||||
|
||||
/* Add other utility classes for colors */
|
||||
@utility bg-card {
|
||||
background-color: var(--color-card);
|
||||
}
|
||||
|
||||
@utility text-card-foreground {
|
||||
color: var(--color-card-foreground);
|
||||
}
|
||||
|
||||
@utility bg-primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@utility text-primary-foreground {
|
||||
color: var(--color-primary-foreground);
|
||||
}
|
||||
|
||||
/* ... add other utility classes as needed ... */
|
||||
/* :root { */
|
||||
/* /* gruvbox light theme */ */
|
||||
/* --color-background: hsl(32 92% 87%); /* bg0 */ */
|
||||
/* --color-foreground: hsl(40 13% 23%); /* fg */ */
|
||||
/**/
|
||||
/* --color-card: hsl(39 59% 88%); /* bg1 */ */
|
||||
/* --color-card-foreground: hsl(40 13% 23%); /* fg */ */
|
||||
/**/
|
||||
/* --color-popover: hsl(39 59% 88%); /* bg1 */ */
|
||||
/* --color-popover-foreground: hsl(40 13% 23%); /* fg */ */
|
||||
/**/
|
||||
/* --color-primary: hsl(0 100% 31%); /* red */ */
|
||||
/* --color-primary-foreground: hsl(40 92% 88%); /* bg */ */
|
||||
/**/
|
||||
/* --color-secondary: hsl(39 46% 81%); /* bg2 */ */
|
||||
/* --color-secondary-foreground: hsl(40 13% 23%); /* fg */ */
|
||||
/**/
|
||||
/* --color-muted: hsl(37 29% 73%); /* bg3 */ */
|
||||
/* --color-muted-foreground: hsl(40 4% 36%); /* gray */ */
|
||||
/**/
|
||||
/* --color-accent: hsl(40 71% 49%); /* yellow */ */
|
||||
/* --color-accent-foreground: hsl(0 0% 16%); */
|
||||
/**/
|
||||
/* --color-destructive: hsl(0 76% 46%); /* bright_red */ */
|
||||
/* --color-destructive-foreground: hsl(40 92% 88%); /* bg */ */
|
||||
/**/
|
||||
/* --color-border: hsl(33 14% 59%); /* fg4 */ */
|
||||
/* --color-input: hsl(33 14% 59%); /* fg4 */ */
|
||||
/* --color-ring: hsl(0 100% 31%); /* red */ */
|
||||
/**/
|
||||
/* --radius: 0.5rem; */
|
||||
/* } */
|
||||
|
||||
/* .dark { */
|
||||
/* /* gruvbox dark theme */ */
|
||||
/* --color-background: hsl(0 0% 16%); /* bg0 */ */
|
||||
/* --color-foreground: hsl(40 92% 88%); /* fg */ */
|
||||
/**/
|
||||
/* --color-card: hsl(0 7% 23%); /* bg1 */ */
|
||||
/* --color-card-foreground: hsl(40 92% 88%); /* fg */ */
|
||||
/**/
|
||||
/* --color-popover: hsl(0 7% 23%); /* bg1 */ */
|
||||
/* --color-popover-foreground: hsl(40 92% 88%); /* fg */ */
|
||||
/**/
|
||||
/* --color-primary: hsl(6 93% 59%); /* red */ */
|
||||
/* --color-primary-foreground: hsl(0 0% 16%); /* bg */ */
|
||||
/**/
|
||||
/* --color-secondary: hsl(0 5% 29%); /* bg2 */ */
|
||||
/* --color-secondary-foreground: hsl(40 92% 88%); /* fg */ */
|
||||
/**/
|
||||
/* --color-muted: hsl(20 6% 36%); /* bg3 */ */
|
||||
/* --color-muted-foreground: hsl(33 14% 59%); /* gray */ */
|
||||
/**/
|
||||
/* --color-accent: hsl(42 95% 58%); /* yellow */ */
|
||||
/* --color-accent-foreground: hsl(0 0% 16%); */
|
||||
/**/
|
||||
/* --color-destructive: hsl(6 93% 59%); /* bright_red */ */
|
||||
/* --color-destructive-foreground: hsl(40 92% 88%); /* bg */ */
|
||||
/**/
|
||||
/* --color-border: hsl(24 10% 51%); /* fg4 */ */
|
||||
/* --color-input: hsl(24 10% 51%); /* fg4 */ */
|
||||
/* --color-ring: hsl(6 93% 59%); /* red */ */
|
||||
/* } */
|
||||
|
||||
@supports not (backdrop-filter: blur(1px)) {
|
||||
.select-content {
|
||||
background-color: var(--fallback-background) !important;
|
||||
@supports not (backdrop-filter: blur(1px)) {
|
||||
.select-content {
|
||||
background-color: hsl(var(--background));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue