a05787a091
All checks were successful
Build Frontend / build (push) Successful in 1m11s
Enhanced the AnalyticsDashboard layout with a premium glassmorphism UI, improved toolbar, and reorganized tabs for better clarity. MetricsCard now features dynamic color coding and trend badges. PredictionsChart received scenario simulation UI upgrades, disabled future ranges based on available history, and improved chart tooltips and visuals. ProfitAnalyticsChart added error handling for product images and minor UI refinements. Updated globals.css with new premium utility classes and improved dark mode color variables.
543 lines
12 KiB
CSS
543 lines
12 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* Shimmer animation for loading indicators */
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
/* Accessibility improvements */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* Better focus states for keyboard navigation */
|
|
.focus-visible:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Improved touch targets for mobile/Chromebook */
|
|
.touch-target {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* Better contrast for Chromebook displays */
|
|
@media (prefers-contrast: high) {
|
|
.border-input {
|
|
border-color: hsl(var(--foreground));
|
|
}
|
|
}
|
|
|
|
/* Chromebook and touch device optimizations */
|
|
@media (pointer: coarse) {
|
|
.touch-target {
|
|
min-height: 48px;
|
|
min-width: 48px;
|
|
}
|
|
|
|
/* Larger touch targets for interactive elements */
|
|
button,
|
|
input,
|
|
textarea,
|
|
[role="button"] {
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
/* Better focus indicators for keyboard navigation */
|
|
.focus-visible:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
|
|
}
|
|
|
|
/* Improved scrolling for touch devices */
|
|
.overflow-y-auto {
|
|
-webkit-overflow-scrolling: touch;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Enhanced contrast for better visibility */
|
|
.text-muted-foreground {
|
|
color: hsl(var(--muted-foreground) / 0.8);
|
|
}
|
|
|
|
/* Better button contrast */
|
|
button:not(:disabled):hover {
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
/* Improved focus visibility */
|
|
input:focus,
|
|
textarea:focus,
|
|
button:focus {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Better message bubble contrast */
|
|
.bg-primary {
|
|
background-color: hsl(var(--primary) / 0.9);
|
|
}
|
|
|
|
/* Chromebook-specific optimizations */
|
|
@media screen and (max-width: 1366px) and (min-resolution: 1.5dppx) {
|
|
|
|
/* Chromebook display optimizations */
|
|
.text-sm {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
|
|
.text-base {
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
/* Better touch targets for Chromebooks */
|
|
button,
|
|
input,
|
|
textarea,
|
|
[role="button"],
|
|
[role="tab"] {
|
|
min-height: 48px;
|
|
min-width: 48px;
|
|
}
|
|
|
|
/* Improved spacing for Chromebook screens */
|
|
.space-y-2>*+* {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.space-y-4>*+* {
|
|
margin-top: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* Chromebook touch screen optimizations */
|
|
@media (pointer: coarse) and (hover: none) {
|
|
|
|
/* Larger touch targets */
|
|
.touch-target {
|
|
min-height: 52px;
|
|
min-width: 52px;
|
|
}
|
|
|
|
/* Better spacing for touch interactions */
|
|
.space-y-2>*+* {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Improved button padding */
|
|
button {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
/* Better input field sizing */
|
|
input,
|
|
textarea {
|
|
padding: 0.875rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Enhanced focus states for touch */
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 3px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
/* Chromebook keyboard navigation improvements */
|
|
@media (hover: hover) and (pointer: fine) {
|
|
|
|
/* Better hover states for mouse/trackpad */
|
|
button:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Improved focus indicators */
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px hsl(var(--ring) / 0.2);
|
|
}
|
|
}
|
|
|
|
/* Chromebook display scaling fixes */
|
|
@media screen and (min-resolution: 1.5dppx) {
|
|
|
|
/* Prevent text from being too small on high-DPI displays */
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
/* Better font rendering */
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|
|
|
|
/* Chromebook scrolling improvements */
|
|
.overflow-y-auto {
|
|
-webkit-overflow-scrolling: touch;
|
|
scroll-behavior: smooth;
|
|
/* Better momentum scrolling for Chromebooks */
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
/* Chromebook chat interface optimizations */
|
|
.chat-message {
|
|
/* Better message bubble sizing for touch */
|
|
min-height: 44px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
/* Chromebook form optimizations */
|
|
.form-input {
|
|
/* Better input field sizing for Chromebooks */
|
|
min-height: 48px;
|
|
font-size: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
/* Chromebook button optimizations */
|
|
.btn-chromebook {
|
|
min-height: 48px;
|
|
min-width: 48px;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 1rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
/* Enhanced keyboard focus indicators for Chromebooks */
|
|
.keyboard-focus {
|
|
outline: 3px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px hsl(var(--ring) / 0.3);
|
|
}
|
|
|
|
/* Better focus management for Chromebook keyboard navigation */
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
[role="button"]:focus-visible,
|
|
[role="tab"]:focus-visible {
|
|
outline: 3px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px hsl(var(--ring) / 0.3);
|
|
}
|
|
|
|
/* Chromebook-specific focus ring */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.keyboard-focus {
|
|
transition: outline 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
}
|
|
|
|
.bg-muted {
|
|
background-color: hsl(var(--muted) / 0.8);
|
|
}
|
|
|
|
/* Christmas-themed animations */
|
|
@keyframes twinkle {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.3;
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes snowflake {
|
|
0% {
|
|
transform: translateY(-100vh) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(100vh) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes sparkle {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0) rotate(0deg);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1) rotate(180deg);
|
|
}
|
|
}
|
|
|
|
@keyframes glow {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 5px hsl(var(--christmas-red)), 0 0 10px hsl(var(--christmas-red)), 0 0 15px hsl(var(--christmas-red));
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 10px hsl(var(--christmas-green)), 0 0 20px hsl(var(--christmas-green)), 0 0 30px hsl(var(--christmas-green));
|
|
}
|
|
}
|
|
|
|
/* Christmas decorative elements */
|
|
.christmas-twinkle {
|
|
animation: twinkle 2s ease-in-out infinite;
|
|
}
|
|
|
|
.christmas-snowflake {
|
|
position: absolute;
|
|
color: white;
|
|
font-size: 1rem;
|
|
animation: snowflake 10s linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.christmas-sparkle {
|
|
animation: sparkle 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.christmas-glow {
|
|
animation: glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Subtle Christmas gradient backgrounds */
|
|
.christmas-gradient {
|
|
background: linear-gradient(135deg,
|
|
hsl(var(--christmas-red) / 0.1) 0%,
|
|
hsl(var(--christmas-green) / 0.1) 50%,
|
|
hsl(var(--christmas-gold) / 0.1) 100%);
|
|
}
|
|
|
|
/* Christmas-themed borders */
|
|
.christmas-border {
|
|
border: 2px solid;
|
|
border-image: linear-gradient(45deg,
|
|
hsl(var(--christmas-red)),
|
|
hsl(var(--christmas-green)),
|
|
hsl(var(--christmas-gold))) 1;
|
|
}
|
|
|
|
/* Christmas-themed styles - only active in December */
|
|
.christmas-theme {
|
|
/* Subtle Christmas pattern overlay */
|
|
--christmas-pattern: radial-gradient(circle at 20% 50%, hsl(var(--christmas-red) / 0.03) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 80%, hsl(var(--christmas-green) / 0.03) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 20%, hsl(var(--christmas-gold) / 0.03) 0%, transparent 50%);
|
|
}
|
|
|
|
.christmas-theme body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
radial-gradient(circle at 20% 50%, hsl(var(--christmas-red) / 0.03) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 80%, hsl(var(--christmas-green) / 0.03) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 20%, hsl(var(--christmas-gold) / 0.03) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Christmas-themed card hover effects */
|
|
.christmas-theme .card:hover {
|
|
border-color: hsl(var(--christmas-red) / 0.3);
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
/* Christmas-themed button hover effects */
|
|
/* Using more specific selector to avoid Turbopack CSS parsing issues */
|
|
.christmas-theme button[class*="bg-primary"]:hover,
|
|
.christmas-theme [class*="bg-primary"]:hover {
|
|
background: linear-gradient(135deg,
|
|
hsl(var(--christmas-red)),
|
|
hsl(var(--christmas-green)));
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
/* Christmas-themed link colors */
|
|
.christmas-theme a:hover {
|
|
color: hsl(var(--christmas-red));
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
/* Subtle Christmas border on focus */
|
|
.christmas-theme *:focus-visible {
|
|
outline-color: hsl(var(--christmas-red));
|
|
}
|
|
|
|
/* Premium UI Utilities */
|
|
.glass-morphism {
|
|
@apply bg-background/60 backdrop-blur-md border border-border/50;
|
|
}
|
|
|
|
.dark .glass-morphism {
|
|
@apply bg-black/40 backdrop-blur-xl border-white/5;
|
|
}
|
|
|
|
.premium-card {
|
|
@apply transition-all duration-300;
|
|
}
|
|
|
|
.premium-card:hover {
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
|
border-color: hsl(var(--primary) / 0.2);
|
|
}
|
|
|
|
.dark .premium-card {
|
|
@apply bg-card;
|
|
}
|
|
|
|
.dark .premium-card:hover {
|
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
|
|
border-color: hsl(var(--primary) / 0.2);
|
|
}
|
|
|
|
.text-gradient {
|
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60;
|
|
}
|
|
|
|
.bg-gradient-premium {
|
|
background: radial-gradient(circle at top left, hsl(var(--primary) / 0.05), transparent),
|
|
radial-gradient(circle at bottom right, hsl(var(--primary) / 0.02), transparent);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 3.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 3.9%;
|
|
--primary: 0 0% 9%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 0 0% 96.1%;
|
|
--secondary-foreground: 0 0% 9%;
|
|
--muted: 0 0% 96.1%;
|
|
--muted-foreground: 0 0% 45.1%;
|
|
--accent: 0 0% 96.1%;
|
|
--accent-foreground: 0 0% 9%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 0 0% 89.8%;
|
|
--input: 0 0% 89.8%;
|
|
--ring: 0 0% 3.9%;
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--radius: 0.5rem;
|
|
/* Christmas colors */
|
|
--christmas-red: 0 84% 50%;
|
|
--christmas-green: 142 76% 36%;
|
|
--christmas-gold: 43 96% 56%;
|
|
}
|
|
|
|
.dark {
|
|
--background: 240 10% 2%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 240 10% 3%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 240 10% 2%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 0 0% 9%;
|
|
--secondary: 240 4% 10%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 240 4% 10%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 240 4% 10%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 4% 12%;
|
|
--input: 240 4% 12%;
|
|
--ring: 240 5% 83.1%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
/* Christmas colors */
|
|
--christmas-red: 0 84% 50%;
|
|
--christmas-green: 142 76% 36%;
|
|
--christmas-gold: 43 96% 56%;
|
|
}
|
|
|
|
/* Apply Christmas colors only in December */
|
|
html.christmas-theme.dark,
|
|
html.christmas-theme .dark {
|
|
--primary: 0 84% 50%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 142 76% 36%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--accent: 142 76% 36%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--border: 142 76% 20%;
|
|
--ring: 0 84% 50%;
|
|
--chart-1: 0 84% 50%;
|
|
--chart-2: 142 76% 36%;
|
|
--chart-3: 43 96% 56%;
|
|
--chart-4: 0 84% 50%;
|
|
--chart-5: 142 76% 36%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
} |