Improve app performance and font rendering for Arabic language users
Implements Arabic font optimization, performance tracking, and server-side performance monitoring using performanceOptimization service. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c5f0c281-8dd8-4846-b452-4a07bcd21062 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/aafbff93-ed78-4896-8b12-66a9ce417e74.jpg
This commit is contained in:
ghaddaditw
+126
-282
@@ -1,309 +1,153 @@
|
||||
/* Arabic font optimization */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222 84% 5%;
|
||||
--muted: 210 40% 98%;
|
||||
--muted-foreground: 215 16% 47%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 84% 5%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 84% 5%;
|
||||
--border: 214 32% 91%;
|
||||
--input: 214 32% 91%;
|
||||
--primary: 207 90% 54%;
|
||||
--primary-foreground: 211 100% 99%;
|
||||
--secondary: 273 69% 66%;
|
||||
--secondary-foreground: 273 100% 99%;
|
||||
--accent: 142 76% 36%;
|
||||
--accent-foreground: 142 100% 99%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--ring: 222 84% 5%;
|
||||
--radius: 0.5rem;
|
||||
--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%;
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5% 26%;
|
||||
--sidebar-primary: 207 90% 54%;
|
||||
--sidebar-primary-foreground: 211 100% 99%;
|
||||
--sidebar-accent: 210 40% 98%;
|
||||
--sidebar-accent-foreground: 222 84% 5%;
|
||||
--sidebar-border: 214 32% 91%;
|
||||
--sidebar-ring: 222 84% 5%;
|
||||
}
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96%;
|
||||
--secondary-foreground: 222.2 84% 4.9%;
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96%;
|
||||
--accent-foreground: 222.2 84% 4.9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
--radius: 0.75rem;
|
||||
--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%;
|
||||
|
||||
/* Arabic RTL Support */
|
||||
[dir="rtl"] {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
/* Arabic performance optimizations */
|
||||
--font-arabic: 'Noto Sans Arabic', 'Amiri', 'Arabic UI Text', 'Tahoma', sans-serif;
|
||||
--font-arabic-display: 'Noto Sans Arabic', 'Amiri', 'Arabic UI Display', sans-serif;
|
||||
}
|
||||
|
||||
[dir="rtl"] .text-left {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .text-right {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ml-auto {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mr-auto {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .pl-4 {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .pr-4 {
|
||||
padding-right: 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/* Arabic font optimization */
|
||||
.arabic-text {
|
||||
font-family: 'Noto Sans Arabic', 'Arial', sans-serif;
|
||||
font-feature-settings: "liga" 1, "calt" 1;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* Adaptive theme CSS variables for dynamic colors */
|
||||
.adaptive-theme-vars {
|
||||
--adaptive-primary: var(--primary);
|
||||
--adaptive-secondary: var(--secondary);
|
||||
--adaptive-accent: var(--accent);
|
||||
--adaptive-background: var(--background);
|
||||
--adaptive-foreground: var(--foreground);
|
||||
--adaptive-muted: var(--muted);
|
||||
--adaptive-muted-foreground: var(--muted-foreground);
|
||||
--adaptive-border: var(--border);
|
||||
--adaptive-card: var(--card);
|
||||
--adaptive-card-foreground: var(--card-foreground);
|
||||
}
|
||||
|
||||
/* Performance optimizations */
|
||||
.scroll-smooth {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.gpu-accelerated {
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.no-select {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222 84% 5%;
|
||||
--foreground: 210 40% 98%;
|
||||
--muted: 217 32% 17%;
|
||||
--muted-foreground: 215 20% 65%;
|
||||
--popover: 222 84% 5%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--card: 222 84% 5%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--border: 217 32% 17%;
|
||||
--input: 217 32% 17%;
|
||||
--primary: 207 90% 54%;
|
||||
--primary-foreground: 211 100% 99%;
|
||||
--secondary: 273 69% 66%;
|
||||
--secondary-foreground: 273 100% 99%;
|
||||
--accent: 142 76% 36%;
|
||||
--accent-foreground: 142 100% 99%;
|
||||
--destructive: 0 63% 31%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--ring: 215 20% 65%;
|
||||
--sidebar-background: 222 84% 5%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 207 90% 54%;
|
||||
--sidebar-primary-foreground: 211 100% 99%;
|
||||
--sidebar-accent: 217 32% 17%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217 32% 17%;
|
||||
--sidebar-ring: 215 20% 65%;
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 222.2 84% 4.9%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 224.3 76.3% 94.0%;
|
||||
--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 font-sans antialiased bg-background text-foreground;
|
||||
}
|
||||
|
||||
/* Voice processing animations */
|
||||
.voice-pulse {
|
||||
animation: voice-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.voice-recording {
|
||||
animation: voice-recording 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes voice-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes voice-recording {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Onboarding Tour Styles */
|
||||
.tour-highlight {
|
||||
position: relative;
|
||||
z-index: 60;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.tour-pulse {
|
||||
animation: tour-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes tour-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-muted;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-border rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-ring;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
.focus-ring {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
|
||||
}
|
||||
|
||||
/* Voice visualizer gradient */
|
||||
.voice-gradient {
|
||||
background: linear-gradient(45deg, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
}
|
||||
|
||||
/* Task priority indicators */
|
||||
.priority-high {
|
||||
@apply border-l-4 border-red-500;
|
||||
}
|
||||
|
||||
.priority-medium {
|
||||
@apply border-l-4 border-yellow-500;
|
||||
}
|
||||
|
||||
.priority-low {
|
||||
@apply border-l-4 border-green-500;
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Component-specific styles */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 256px 1fr;
|
||||
min-height: calc(100vh - 73px);
|
||||
/* Arabic text optimizations */
|
||||
.arabic-text {
|
||||
font-family: var(--font-arabic);
|
||||
font-display: swap;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-variant-ligatures: common-ligatures contextual;
|
||||
font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
/* RTL-specific optimizations */
|
||||
[dir="rtl"] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .sidebar {
|
||||
border-left: 1px solid hsl(var(--border));
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .sidebar {
|
||||
border-right: 1px solid hsl(var(--border));
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
/* Performance optimizations for Arabic rendering */
|
||||
.arabic-text * {
|
||||
will-change: auto;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
/* Focus indicators for accessibility */
|
||||
.focus\:ring-arabic:focus {
|
||||
outline: 2px solid hsl(var(--ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Animation optimizations */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Voice status indicator */
|
||||
.voice-status-indicator {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 50;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.voice-status-indicator.visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* AI chat animations */
|
||||
.ai-message {
|
||||
animation: slideInFromBottom 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInFromBottom {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 0%;
|
||||
--border: 0 0% 50%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 0%;
|
||||
--foreground: 0 0% 100%;
|
||||
--border: 0 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.skeleton {
|
||||
@apply animate-pulse bg-muted rounded;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
/* Print styles */
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
|
||||
body {
|
||||
font-size: 12pt;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.arabic-text {
|
||||
font-family: 'Noto Sans Arabic', serif;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user