/* ═══════════════════════════════════════════════════════════════════════
GAIBRA — تطويع مكوّنات MudBlazor لنظام ثيمات GAIBRA
gaibra-mud.css
─────────────────────────────────────────────────────────────────────
الغرض:
جسر بين MudBlazor (الذي يستعمل متغيّرات --mud-*) ونظام ثيمات GAIBRA
(--accent / --bg / --fg … المعرّفة في gaibra-themes.css على ).
بدل تكرار CSS داخل كل صفحة، نطوّع المكوّنات مرّة واحدة هنا.
التحميل (مهمّ — ترتيب صارم):
يجب تحميل هذا الملفّ *بعد* MudBlazor.min.css لتغلب أنماطه على الافتراضيّة.
في App.razor / _Host (داخل ):
← آخر واحد
النطاق:
كل القواعد محصورة بـ .gaibra-skin حتى لا تتسرّب لمكوّنات أخرى.
ضع class="gaibra-skin" على حاوية الصفحة (MudContainer مثلًا)، فيرث
كل ما بداخلها هذا التطويع. الثيم النشط (theme×mode) يُطبَّق تلقائيًّا
لأن المتغيّرات تُقرأ من .
═══════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────
§1 — الأسطح: Paper / Card / Container
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-paper {
background-color: var(--bg-surface, #16161A) !important;
color: var(--fg, #FFFFFF) !important;
border-color: var(--border, #1E1E24) !important;
}
.gaibra-skin .mud-paper-outlined {
border: 1px solid var(--border-strong, #2A2A32) !important;
background-color: var(--bg-alt, #0F0F12) !important;
}
/* ───────────────────────────────────────────────────────────────────────
§2 — النصوص: ألوان وخطوط GAIBRA
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-typography {
font-family: var(--font-body, 'IBM Plex Sans Arabic', sans-serif);
color: var(--fg, #FFFFFF);
}
.gaibra-skin .mud-typography-h4,
.gaibra-skin .mud-typography-h5,
.gaibra-skin .mud-typography-h6,
.gaibra-skin .mud-typography-subtitle1,
.gaibra-skin .mud-typography-subtitle2 {
font-family: var(--font-hd, 'Tajawal', sans-serif);
color: var(--fg, #FFFFFF);
}
/* النصوص الثانويّة (Color="Color.Secondary") + overline + caption */
.gaibra-skin .mud-typography.mud-secondary-text,
.gaibra-skin .mud-text-secondary,
.gaibra-skin .mud-typography-overline,
.gaibra-skin .mud-typography-caption {
color: var(--fg-faint, #8A8A9A) !important;
}
/* labels تقنيّة (overline) بخطّ المونو */
.gaibra-skin .mud-typography-overline {
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
letter-spacing: 2px;
}
/* ───────────────────────────────────────────────────────────────────────
§3 — حقول الإدخال: TextField / Select (outlined)
نفس منطق صفحات الدخول: نفرض الخلفية على كل الطبقات + معالجة autofill.
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-input-control,
.gaibra-skin .mud-input {
font-family: var(--font-body, 'IBM Plex Sans Arabic', sans-serif);
}
.gaibra-skin .mud-input-outlined-border {
border-color: var(--composer-input-border, #2A2A32) !important;
border-radius: 12px !important;
border-width: 1px !important;
}
.gaibra-skin .mud-input-slot,
.gaibra-skin .mud-input.mud-input-outlined,
.gaibra-skin .mud-input.mud-input-outlined .mud-input-slot {
background-color: var(--composer-input-bg, #16161A) !important;
border-radius: 12px !important;
}
.gaibra-skin .mud-input input,
.gaibra-skin .mud-input textarea,
.gaibra-skin input.mud-input-slot {
background-color: transparent !important;
color: var(--fg, #FFFFFF) !important;
caret-color: var(--accent, #3B82F6);
}
/* الحقول للقراءة فقط (ReadOnly) — تبقى داكنة لكن باهتة قليلًا */
.gaibra-skin .mud-input.mud-input-readonly input {
color: var(--fg-dim, #CDCDD6) !important;
}
/* autofill المتصفّح (يفرض خلفية بيضاء افتراضيًّا) */
.gaibra-skin .mud-input input:-webkit-autofill,
.gaibra-skin .mud-input input:-webkit-autofill:hover,
.gaibra-skin .mud-input input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--fg, #FFFFFF) !important;
-webkit-box-shadow: 0 0 0 1000px var(--composer-input-bg, #16161A) inset !important;
transition: background-color 9999s ease-in-out 0s;
}
.gaibra-skin .mud-input-label,
.gaibra-skin .mud-input-root,
.gaibra-skin label.mud-input-label-inputcontrol {
color: var(--fg-dim, #CDCDD6) !important;
}
.gaibra-skin .mud-input.mud-focused .mud-input-outlined-border {
border-color: var(--accent, #3B82F6) !important;
}
/* أيقونة القائمة المنسدلة في Select */
.gaibra-skin .mud-select .mud-input-adornment-icon {
color: var(--fg-faint, #8A8A9A) !important;
}
/* قائمة Select المنبثقة */
.gaibra-skin-popover.mud-popover,
.mud-popover.gaibra-skin-popover {
background-color: var(--bg-surface, #16161A) !important;
border: 1px solid var(--border-strong, #2A2A32) !important;
}
/* ───────────────────────────────────────────────────────────────────────
§4 — الأزرار
─────────────────────────────────────────────────────────────────────── */
/* Filled + Primary → accent الثيم */
.gaibra-skin .mud-button-filled.mud-button-filled-primary {
background-color: var(--accent, #3B82F6) !important;
color: var(--accent-fg, #FFFFFF) !important;
font-family: var(--font-hd, 'Tajawal', sans-serif) !important;
font-weight: 700 !important;
box-shadow: none !important;
text-transform: none !important;
}
.gaibra-skin .mud-button-filled.mud-button-filled-primary:hover {
filter: brightness(1.08);
}
/* Outlined → حدّ هادئ */
.gaibra-skin .mud-button-outlined {
border-color: var(--border-strong, #2A2A32) !important;
color: var(--fg-dim, #CDCDD6) !important;
text-transform: none !important;
}
.gaibra-skin .mud-button-outlined:hover {
background-color: var(--bg-hover, #1C1C21) !important;
}
/* Text buttons */
.gaibra-skin .mud-button-text {
text-transform: none !important;
}
.gaibra-skin .mud-button-text.mud-button-text-primary {
color: var(--accent, #3B82F6) !important;
}
.gaibra-skin .mud-button-text.mud-button-text-secondary {
color: var(--fg-faint, #8A8A9A) !important;
}
/* أيقونة-زرّ */
.gaibra-skin .mud-icon-button {
color: var(--fg-dim, #CDCDD6);
}
.gaibra-skin .mud-icon-button.mud-icon-button-color-primary {
color: var(--accent, #3B82F6);
}
.gaibra-skin .mud-icon-button.mud-icon-button-color-error {
color: var(--error, #FF3D1F);
}
/* ───────────────────────────────────────────────────────────────────────
§5 — التبويبات (Tabs)
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-tabs-toolbar {
background-color: var(--bg-alt, #0F0F12) !important;
border-bottom: 1px solid var(--border, #1E1E24);
}
.gaibra-skin .mud-tab {
color: var(--fg-faint, #8A8A9A) !important;
font-family: var(--font-body, sans-serif) !important;
text-transform: none !important;
}
.gaibra-skin .mud-tab.mud-tab-active {
color: var(--fg, #FFFFFF) !important;
}
.gaibra-skin .mud-tab-slider {
background-color: var(--accent, #3B82F6) !important;
}
/* ───────────────────────────────────────────────────────────────────────
§6 — المفاتيح (Switch) وصناديق الاختيار (CheckBox)
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-switch .mud-switch-track {
background-color: var(--border-strong, #2A2A32) !important;
}
.gaibra-skin .mud-switch.mud-checked .mud-switch-track {
background-color: var(--accent, #3B82F6) !important;
opacity: 0.45;
}
.gaibra-skin .mud-switch.mud-checked .mud-switch-thumb {
color: var(--accent, #3B82F6) !important;
}
.gaibra-skin .mud-switch .mud-switch-label,
.gaibra-skin .mud-checkbox .mud-checkbox-label {
font-family: var(--font-body, sans-serif);
color: var(--fg-dim, #CDCDD6);
}
.gaibra-skin .mud-checkbox.mud-checked .mud-icon-root {
color: var(--accent, #3B82F6) !important;
}
/* ───────────────────────────────────────────────────────────────────────
§7 — الجداول (Table)
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-table {
background-color: var(--bg-surface, #16161A) !important;
color: var(--fg, #FFFFFF) !important;
}
.gaibra-skin .mud-table-head .mud-table-cell {
color: var(--fg-faint, #8A8A9A) !important;
font-family: var(--font-mono, monospace);
font-size: 11px;
letter-spacing: 0.5px;
border-bottom-color: var(--border-strong, #2A2A32) !important;
}
.gaibra-skin .mud-table-row:hover {
background-color: var(--bg-hover, #1C1C21) !important;
}
.gaibra-skin .mud-table-cell {
border-bottom-color: var(--border, #1E1E24) !important;
color: var(--fg-dim, #CDCDD6);
}
/* ───────────────────────────────────────────────────────────────────────
§8 — أشرطة التقدّم (Progress)
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-progress-linear .mud-progress-linear-bar {
/* اللون يأتي من Color (Primary/Success/Warning/Error) لكن الخلفيّة تبقى داكنة */
}
.gaibra-skin .mud-progress-linear-background {
background-color: var(--border, #1E1E24) !important;
}
/* ───────────────────────────────────────────────────────────────────────
§9 — التنبيهات (Alert) — Variant=Text/Outlined
نبقي ألوان الحالة (info/success/warning/error) لكن نطوّع الخلفيّة.
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-alert-text,
.gaibra-skin .mud-alert-outlined {
background-color: var(--bg-alt, #0F0F12) !important;
}
/* ───────────────────────────────────────────────────────────────────────
§10 — Divider
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-divider {
border-color: var(--border, #1E1E24) !important;
}
/* ───────────────────────────────────────────────────────────────────────
§11 — الرقائق (Chip)
─────────────────────────────────────────────────────────────────────── */
.gaibra-skin .mud-chip {
font-family: var(--font-mono, monospace);
}