124 lines
2.1 KiB
CSS
124 lines
2.1 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;
|
|
}
|
|
|
|
|
|
|
|
/* Prevent iOS Safari from auto-zooming on input focus (triggered when font-size < 16px) */
|
|
@supports (-webkit-touch-callout: none) {
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-size: max(16px, 1em);
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Fix flex alignment for RTL */
|
|
[dir='rtl'] .flex {
|
|
direction: rtl;
|
|
}
|
|
|
|
/* Ensure cards and containers align properly in RTL */
|
|
[dir='rtl'] .MuiCard-root,
|
|
[dir='rtl'] .MuiBox-root,
|
|
[dir='rtl'] .MuiStack-root {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Fix list item alignment in RTL */
|
|
[dir='rtl'] .MuiListItem-root,
|
|
[dir='rtl'] .MuiListItemButton-root {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
/* Fix gap alignment in RTL */
|
|
[dir='rtl'] .gap-1,
|
|
[dir='rtl'] .gap-2,
|
|
[dir='rtl'] .gap-3,
|
|
[dir='rtl'] .gap-4 {
|
|
direction: rtl;
|
|
}
|