130ecac208
Implemented comprehensive Chromebook-specific fixes including viewport adjustments, enhanced touch and keyboard detection, improved scrolling and keyboard navigation hooks, and extensive CSS optimizations for better usability. Updated chat and dashboard interfaces for larger touch targets, better focus management, and responsive layouts. Added documentation in docs/CHROMEBOOK-FIXES.md and new hooks for Chromebook scroll and keyboard handling.
310 lines
7.2 KiB
CSS
310 lines
7.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|