033d735c3a
Swap the main site dashboard chart from a bar chart to a line chart using 21st.dev's line-charts-6 component with dot grid background, glow shadow, and animated active dots. Add Badge trend indicators on metric cards using Phosphor icons. All existing features preserved (annotations, comparison, export, live indicator, interval controls). New UI primitives: line-charts-6, badge-2, card, button-1, avatar. Added shadcn-compatible CSS variables and Tailwind color mappings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
95 lines
2.0 KiB
CSS
95 lines
2.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* * Semantic colors */
|
|
--color-success: #10B981;
|
|
--color-warning: #F59E0B;
|
|
--color-error: #EF4444;
|
|
|
|
/* * Chart colors */
|
|
--chart-1: #FD5E0F;
|
|
--chart-2: #3b82f6;
|
|
--chart-3: #22c55e;
|
|
--chart-4: #a855f7;
|
|
--chart-5: #f59e0b;
|
|
--chart-grid: #f5f5f5;
|
|
--chart-axis: #a3a3a3;
|
|
|
|
/* * shadcn-compatible semantic tokens (for 21st.dev components) */
|
|
--background: 255 255 255;
|
|
--foreground: 23 23 23;
|
|
--card: 255 255 255;
|
|
--card-foreground: 23 23 23;
|
|
--popover: 255 255 255;
|
|
--popover-foreground: 23 23 23;
|
|
--primary: 253 94 15;
|
|
--primary-foreground: 255 255 255;
|
|
--secondary: 245 245 245;
|
|
--secondary-foreground: 23 23 23;
|
|
--destructive-foreground: 255 255 255;
|
|
}
|
|
|
|
.dark {
|
|
--chart-1: #FD5E0F;
|
|
--chart-2: #60a5fa;
|
|
--chart-3: #4ade80;
|
|
--chart-4: #c084fc;
|
|
--chart-5: #fbbf24;
|
|
--chart-grid: #262626;
|
|
--chart-axis: #737373;
|
|
|
|
/* * shadcn-compatible dark mode overrides */
|
|
--background: 10 10 10;
|
|
--foreground: 250 250 250;
|
|
--card: 23 23 23;
|
|
--card-foreground: 250 250 250;
|
|
--popover: 23 23 23;
|
|
--popover-foreground: 250 250 250;
|
|
--primary: 253 94 15;
|
|
--primary-foreground: 255 255 255;
|
|
--secondary: 38 38 38;
|
|
--secondary-foreground: 250 250 250;
|
|
--destructive-foreground: 255 255 255;
|
|
}
|
|
|
|
body {
|
|
@apply bg-ciphera-gradient bg-fixed;
|
|
}
|
|
|
|
.dark body {
|
|
@apply bg-ciphera-gradient-dark;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* * 3D Transform Utilities - Pulse-specific */
|
|
.perspective-1000 {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.rotate-x-12 {
|
|
transform: rotateX(12deg);
|
|
}
|
|
|
|
.rotate-x-0 {
|
|
transform: rotateX(0deg);
|
|
}
|
|
|
|
.transform-style-3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* * Animations */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
}
|