6d6185dc5e
- Add multi-language support with i18next and react-i18next - Implement user-selectable date format preferences (5 formats) - Add time format preferences (12-hour/24-hour) - Implement RTL (right-to-left) support for Arabic, Hebrew, Persian, Urdu - Add first day of week preference - Create LocalizationContext for managing i18n settings - Add LocalizationSettings component to Settings page - Include sample translations: English, Spanish, Arabic - Configure 10 languages: en, es, fr, de, ar, he, zh, ja, pt, ru - Add translation management documentation and Crowdin config - Create date formatting utilities that respect user preferences - Add RTL CSS styles for proper layout mirroring - Update Settings and ThemeToggle components to use translations - Add comprehensive documentation (implementation guide, quick reference, translation guide) All user preferences are persisted to localStorage and apply throughout the app.
89 lines
1.4 KiB
CSS
89 lines
1.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Global animations for smooth interactions */
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Smooth scrolling for better UX */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
/* Global focus styles for better accessibility */
|
|
*:focus-visible {
|
|
outline: 2px solid #0ea5e9;
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
|
|
/* Ensure smooth transitions for dynamic content */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Optimize animations for performance */
|
|
.animate-optimized {
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.animate-optimized.animation-complete {
|
|
will-change: auto;
|
|
}
|
|
|
|
/* RTL Support */
|
|
[dir='rtl'] {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
[dir='rtl'] .rtl-mirror {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* Handle margins and paddings for RTL */
|
|
[dir='rtl'] .ml-auto {
|
|
margin-left: 0;
|
|
margin-right: auto;
|
|
}
|
|
|
|
[dir='rtl'] .mr-auto {
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Flip icons and arrows in RTL */
|
|
[dir='rtl'] .rtl-flip {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* Ensure proper text alignment in RTL */
|
|
[dir='rtl'] input,
|
|
[dir='rtl'] textarea {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Handle border radius for RTL */
|
|
[dir='rtl'] .rounded-l-none {
|
|
border-radius: 0 0.375rem 0.375rem 0;
|
|
}
|
|
|
|
[dir='rtl'] .rounded-r-none {
|
|
border-radius: 0.375rem 0 0 0.375rem;
|
|
}
|