kjanat/livedash-node
1
0
Fork 0
mirror of https://github.com/kjanat/livedash-node.git synced 2026-01-16 13:52:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve dark mode compatibility and chart visibility

Browse Source 
- Fix TopQuestionsChart with proper dark mode colors using CSS variables and shadcn/ui components
- Enhance ResponseTimeDistribution with thicker bars (maxBarSize: 60)
- Replace GeographicMap with dark/light mode compatible CartoDB tiles
- Add custom text selection background color with primary theme color
- Update all loading states to use proper CSS variables instead of hardcoded colors
- Fix dashboard layout background to use bg-background instead of bg-gray-100
This commit is contained in:
Kaj Kowalski
2025-06-28 04:19:39 +02:00
parent e027dc9565
commit 2a033fe639
38 changed files with 2597 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/globals.css
View File

@ -39,7 +39,58 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
--animate-shine: shine var(--duration) infinite linear;
@keyframes shine {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
to {
background-position: 0% 0%;
}
}
--animate-meteor: meteor 5s linear infinite
;
@keyframes meteor {
0% {
transform: rotate(var(--angle)) translateX(0);
opacity: 1;}
70% {
opacity: 1;}
100% {
transform: rotate(var(--angle)) translateX(-500px);
opacity: 0;}}
--animate-background-position-spin: background-position-spin 3000ms infinite alternate;
@keyframes background-position-spin {
0% {
background-position: top center;}
100% {
background-position: bottom center;}}
--animate-aurora: aurora 8s ease-in-out infinite alternate;
@keyframes aurora {
0% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);}
25% {
background-position: 50% 100%;
transform: rotate(5deg) scale(1.1);}
50% {
background-position: 100% 50%;
transform: rotate(-3deg) scale(0.95);}
75% {
background-position: 50% 0%;
transform: rotate(3deg) scale(1.05);}
100% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);}}
--animate-shiny-text: shiny-text 8s infinite;
@keyframes shiny-text {
0%, 90%, 100% {
background-position: calc(-100% - var(--shiny-width)) 0;}
30%, 60% {
background-position: calc(100% + var(--shiny-width)) 0;}}}
:root {
--radius: 0.625rem;
@ -49,8 +100,8 @@
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--primary: oklch(0.5 0.2 240);
--primary-foreground: oklch(0.98 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
@ -83,17 +134,17 @@
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--primary: oklch(0.7 0.2 240);
--primary-foreground: oklch(0.15 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--muted-foreground: oklch(0.65 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--border: oklch(1 0 0 / 15%);
--input: oklch(1 0 0 / 20%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
@ -117,4 +168,15 @@
body {
@apply bg-background text-foreground;
}
}
/* Custom text selection colors */
::selection {
background-color: hsl(var(--primary) / 0.2);
color: hsl(var(--foreground));
}
::-moz-selection {
background-color: hsl(var(--primary) / 0.2);
color: hsl(var(--foreground));
}
}