156 lines
5.5 KiB
CSS
156 lines
5.5 KiB
CSS
@import "../src/styles/tokens.css";
|
||
@import "tailwindcss";
|
||
|
||
/* ── Base resets ────────────────────────────────────── */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
font-size: 14px;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════
|
||
SIDEBAR VISIBILITY
|
||
⚠️ مفيش display في أي inline style على الـ sidebar elements
|
||
⚠️ !important عشان يغلب أي حاجة تانية
|
||
════════════════════════════════════════════════════ */
|
||
|
||
/* default: كل العناصر مخفية */
|
||
#sb-full,
|
||
#sb-compact,
|
||
#sb-drawer,
|
||
#topbar-menu-btn {
|
||
display: none !important;
|
||
}
|
||
|
||
/* lg+ (≥1024px): full sidebar */
|
||
@media (min-width: 1024px) {
|
||
#sb-full { display: flex !important; }
|
||
#sb-compact { display: none !important; }
|
||
#sb-drawer { display: none !important; }
|
||
#topbar-menu-btn { display: none !important; }
|
||
}
|
||
|
||
/* md (768px–1023px): compact rail */
|
||
@media (min-width: 768px) and (max-width: 1023px) {
|
||
#sb-full { display: none !important; }
|
||
#sb-compact { display: flex !important; }
|
||
#sb-drawer { display: none !important; }
|
||
#topbar-menu-btn { display: none !important; }
|
||
}
|
||
|
||
/* sm (<768px): drawer + topbar button */
|
||
@media (max-width: 767px) {
|
||
#sb-full { display: none !important; }
|
||
#sb-compact { display: none !important; }
|
||
#sb-drawer { display: flex !important; }
|
||
#topbar-menu-btn { display: flex !important; }
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════
|
||
DASH CONTENT PADDING
|
||
class selector بيغلب على inline style في CSS
|
||
بيحجز مكان الـ compact rail الـ fixed على md
|
||
════════════════════════════════════════════════════ */
|
||
|
||
/* sm + lg: مفيش padding إضافي */
|
||
.dash-content-wrapper {
|
||
padding-inline-end: 0;
|
||
}
|
||
|
||
/* md فقط: حجز 72px لمكان الـ compact rail */
|
||
@media (min-width: 768px) and (max-width: 1023px) {
|
||
.dash-content-wrapper {
|
||
padding-inline-end: var(--sidebar-width-compact);
|
||
}
|
||
}
|
||
|
||
/* ── Tailwind theme bridge ──────────────────────────── */
|
||
@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 ─────────────────────────────────────── */
|
||
.focus-ring {
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px var(--color-brand-600);
|
||
}
|
||
|
||
/* ── RTL icon mirroring ─────────────────────────────── */
|
||
[dir="rtl"] .icon-flip-rtl {
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
/* ── LTR embed for codes/paths ──────────────────────── */
|
||
.ltr-embed {
|
||
direction: ltr;
|
||
unicode-bidi: isolate;
|
||
display: inline-block;
|
||
} |