471 lines
12 KiB
CSS
471 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));
|
|
}
|
|
}
|
|
|
|
@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: 0 0% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 0 0% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 0 0% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 0 0% 9%;
|
|
--secondary: 0 0% 14.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 0 0% 14.9%;
|
|
--muted-foreground: 0 0% 63.9%;
|
|
--accent: 0 0% 14.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 0 0% 14.9%;
|
|
--input: 0 0% 14.9%;
|
|
--ring: 0 0% 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;
|
|
}
|
|
}
|