171 lines
3.2 KiB
CSS
171 lines
3.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html,
|
|
body {
|
|
@apply bg-white dark:bg-gray-950;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
/* RTL Support */
|
|
[dir="rtl"] {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
[dir="ltr"] {
|
|
direction: ltr;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Arabic Text Rendering */
|
|
.arabic-text {
|
|
font-feature-settings: "liga" 1, "kern" 1;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* RTL-specific utilities */
|
|
@layer utilities {
|
|
.rtl-flip {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.rtl-space-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-x-reverse: 1;
|
|
}
|
|
|
|
.rtl-divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-x-reverse: 1;
|
|
}
|
|
}
|
|
|
|
/* Responsive breakpoints for RTL */
|
|
@layer components {
|
|
.container-rtl {
|
|
@apply container mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.grid-rtl {
|
|
@apply grid gap-4 sm:gap-6 lg:gap-8;
|
|
}
|
|
|
|
.flex-rtl {
|
|
@apply flex items-center;
|
|
}
|
|
|
|
.flex-rtl-reverse {
|
|
@apply flex items-center flex-row-reverse;
|
|
}
|
|
}
|
|
|
|
/* Form elements RTL support */
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
input[type="tel"],
|
|
textarea,
|
|
select {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="tel"]:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
@apply ring-2 ring-blue-500 ring-opacity-50;
|
|
}
|
|
|
|
/* Button and interactive elements */
|
|
button,
|
|
.btn {
|
|
@apply transition-all duration-200 ease-in-out;
|
|
}
|
|
|
|
/* Navigation and layout components */
|
|
.sidebar-transition {
|
|
@apply transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
/* Sidebar hover effects */
|
|
.sidebar-item {
|
|
@apply transition-colors duration-150 ease-in-out;
|
|
}
|
|
|
|
.sidebar-item:hover {
|
|
@apply bg-gray-50 text-gray-900;
|
|
}
|
|
|
|
.sidebar-item.active {
|
|
@apply bg-blue-100 text-blue-900 border-r-2 border-blue-600;
|
|
}
|
|
|
|
/* Mobile menu overlay */
|
|
.mobile-overlay {
|
|
@apply fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300;
|
|
}
|
|
|
|
/* Smooth transitions for layout changes */
|
|
.layout-transition {
|
|
@apply transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
/* Focus styles for accessibility */
|
|
.focus-ring {
|
|
@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
|
|
}
|
|
|
|
/* Custom scrollbar for sidebar */
|
|
.sidebar-scroll {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
|
|
}
|
|
|
|
.sidebar-scroll::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.sidebar-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.sidebar-scroll::-webkit-scrollbar-thumb {
|
|
background-color: rgba(156, 163, 175, 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(156, 163, 175, 0.7);
|
|
}
|
|
|
|
/* RTL Layout fixes */
|
|
[dir="rtl"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-x-reverse: 1;
|
|
}
|
|
|
|
/* Ensure proper RTL text alignment */
|
|
[dir="rtl"] {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Fix specific margin issues for RTL */
|
|
[dir="rtl"] .ml-1 {
|
|
margin-right: 0.25rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
[dir="rtl"] .ml-3 {
|
|
margin-right: 0.75rem;
|
|
margin-left: 0;
|
|
}
|