mirror of
https://github.com/Noooste/garage-ui.git
synced 2026-07-26 15:58:13 +00:00
Noooste
105 lines
2.4 KiB
CSS
105 lines
2.4 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Light Theme Colors */
|
|
--background: #ffffff;
|
|
--foreground: #0a0a0f;
|
|
--card: #ffffff;
|
|
--card-foreground: #0a0a0f;
|
|
--popover: #fafafa;
|
|
--popover-foreground: #0a0a0f;
|
|
--primary: #ff9447;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #f4f4f5;
|
|
--secondary-foreground: #18181b;
|
|
--muted: #f4f4f5;
|
|
--muted-foreground: #71717a;
|
|
--accent: #f4f4f5;
|
|
--accent-foreground: #18181b;
|
|
--destructive: #ef4444;
|
|
--destructive-foreground: #fafafa;
|
|
--border: #e4e4e7;
|
|
--input: #e4e4e7;
|
|
--ring: #ff9447;
|
|
--radius: 0.5rem;
|
|
|
|
/* Grafana Chart Colors */
|
|
--chart-blue: #1f77b4;
|
|
--chart-orange: #ff7f0e;
|
|
--chart-green: #2ca02c;
|
|
--chart-red: #d62728;
|
|
--chart-purple: #9467bd;
|
|
--chart-brown: #8c564b;
|
|
--chart-pink: #e377c2;
|
|
--chart-gray: #7f7f7f;
|
|
--chart-olive: #bcbd22;
|
|
--chart-cyan: #17becf;
|
|
}
|
|
|
|
.dark {
|
|
/* Dark Theme Colors - VS Code Inspired */
|
|
--background: #1a1d29;
|
|
--foreground: #e8eaed;
|
|
--card: #252834;
|
|
--card-foreground: #e8eaed;
|
|
--popover: #2d3142;
|
|
--popover-foreground: #e8eaed;
|
|
--primary: #ff9447;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #3a3f52;
|
|
--secondary-foreground: #e8eaed;
|
|
--muted: #4a5064;
|
|
--muted-foreground: #a0a4b8;
|
|
--accent: #3a3f52;
|
|
--accent-foreground: #e8eaed;
|
|
--destructive: #ef5350;
|
|
--destructive-foreground: #e8eaed;
|
|
--border: #3a3f52;
|
|
--input: #3a3f52;
|
|
--ring: #ff9447;
|
|
|
|
/* Grafana Chart Colors */
|
|
--chart-blue: #3eb0ff;
|
|
--chart-orange: #ff9830;
|
|
--chart-green: #73bf69;
|
|
--chart-red: #f2495c;
|
|
--chart-purple: #b581d8;
|
|
--chart-brown: #c4a2e0;
|
|
--chart-pink: #ff9d96;
|
|
--chart-gray: #9ba3af;
|
|
--chart-olive: #fac858;
|
|
--chart-cyan: #37b7c3;
|
|
}
|
|
|
|
* {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-feature-settings: 'rlig' 1, 'calt' 1;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--muted-foreground) 20%, transparent);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background: color-mix(in srgb, var(--muted-foreground) 30%, transparent);
|
|
}
|
|
}
|