db64b79fe3
2-update driver pages [fixed image display and notyfi] 3-update car pages [fixed image] 4-build tripe pages crud 5-build some role pages 6-build audit page 7-update ui compounants 8-update saidebar and topbar 9-cheange view to be ar view 10-cheange stractcher to be app,src 11-add validation layer by yup 12-add api image-proxy to broke image corse bloken
105 lines
3.8 KiB
CSS
105 lines
3.8 KiB
CSS
@import "../src/styles/tokens.css";
|
|
@import "tailwindcss";
|
|
|
|
|
|
/* ── Base resets ────────────────────────────────────── */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
font-size: 14px;
|
|
/* `dir` is now set on <html> in app/layout.tsx (lang="ar" dir="rtl").
|
|
Tailwind v4 ships native `rtl:` / `ltr:` variants that key off this
|
|
attribute, so utility classes like `rtl:flex-row-reverse` work
|
|
without a plugin. Route groups no longer need to set `dir`
|
|
individually — see report Section 1. */
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background-color: var(--color-surface-sunken);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* ── Tailwind theme bridge ──────────────────────────── */
|
|
/* Expose CSS variables as Tailwind color utilities. */
|
|
@theme inline {
|
|
--color-primary-*: initial;
|
|
--color-sand-*: initial;
|
|
--color-gold-*: initial;
|
|
--color-slate-*: initial;
|
|
|
|
--color-primary-50: var(--color-primary-50);
|
|
--color-primary-100: var(--color-primary-100);
|
|
--color-primary-200: var(--color-primary-200);
|
|
--color-primary-300: var(--color-primary-300);
|
|
--color-primary-400: var(--color-primary-400);
|
|
--color-primary-500: var(--color-primary-500);
|
|
--color-primary-600: var(--color-primary-600);
|
|
--color-primary-700: var(--color-primary-700);
|
|
--color-primary-800: var(--color-primary-800);
|
|
--color-primary-900: var(--color-primary-900);
|
|
|
|
--color-sand-50: var(--color-sand-50);
|
|
--color-sand-100: var(--color-sand-100);
|
|
--color-sand-200: var(--color-sand-200);
|
|
--color-sand-300: var(--color-sand-300);
|
|
--color-sand-400: var(--color-sand-400);
|
|
--color-sand-500: var(--color-sand-500);
|
|
--color-sand-600: var(--color-sand-600);
|
|
--color-sand-700: var(--color-sand-700);
|
|
--color-sand-800: var(--color-sand-800);
|
|
--color-sand-900: var(--color-sand-900);
|
|
|
|
--color-gold-50: var(--color-gold-50);
|
|
--color-gold-100: var(--color-gold-100);
|
|
--color-gold-200: var(--color-gold-200);
|
|
--color-gold-300: var(--color-gold-300);
|
|
--color-gold-400: var(--color-gold-400);
|
|
--color-gold-500: var(--color-gold-500);
|
|
--color-gold-600: var(--color-gold-600);
|
|
--color-gold-700: var(--color-gold-700);
|
|
--color-gold-800: var(--color-gold-800);
|
|
--color-gold-900: var(--color-gold-900);
|
|
|
|
--color-slate-50: var(--color-slate-50);
|
|
--color-slate-100: var(--color-slate-100);
|
|
--color-slate-200: var(--color-slate-200);
|
|
--color-slate-300: var(--color-slate-300);
|
|
--color-slate-400: var(--color-slate-400);
|
|
--color-slate-500: var(--color-slate-500);
|
|
--color-slate-600: var(--color-slate-600);
|
|
--color-slate-700: var(--color-slate-700);
|
|
--color-slate-800: var(--color-slate-800);
|
|
--color-slate-900: var(--color-slate-900);
|
|
|
|
--color-background: var(--color-sand-50);
|
|
--color-foreground: var(--color-slate-900);
|
|
--color-brand: var(--color-primary-500);
|
|
--font-sans: var(--font-sans);
|
|
--font-mono: var(--font-mono);
|
|
}
|
|
|
|
/* ── Focus ring utility ─────────────────────────────── */
|
|
/* Unchanged: box-shadow rings are direction-neutral. */
|
|
.focus-ring {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--color-brand-600);
|
|
}
|
|
|
|
/* ── RTL icon mirroring ─────────────────────────────────
|
|
Directional glyphs (chevrons, arrows, "back") need to visually
|
|
point the opposite way in RTL even though the underlying icon
|
|
font glyph doesn't change. Apply .icon-flip-rtl to any <i>/<svg>
|
|
whose meaning is "forward"/"back" rather than purely decorative. */
|
|
[dir="rtl"] .icon-flip-rtl {
|
|
transform: scaleX(-1);
|
|
} |