/* ══════════════════════════════════════════════════════════════════════ SSSDERP — Theme System (Phase 1) ------------------------------------------------------------------ الألوان الديناميكية معرَّفة كـ CSS Custom Properties، ويتم التبديل بين الثيمات عبر خاصية [data-theme] على . القيم الافتراضية = ثيم «الهادئ» (نيفي). ثيم «الدافئ» = لون تراكوتّا/برتقالي + بنّي دافئ للسايدبار. Tokens مقسّمة: 1. Primary (تتغيّر مع الثيم) 2. Surface / Neutrals (تتغيّر قليلاً) 3. Semantic (Success/Warning/Danger/Info — ثابتة) 4. Sidebar (ثابتة هيكلياً لكنها تستخدم Primary) 5. Typography (نوع الخط قابل للتبديل) ══════════════════════════════════════════════════════════════════════ */ /* ── Import خطوط عربية ───────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Cairo:wght@400;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); /* ══════════════════════════════════════════════════════════════════════ (1) الثيم الافتراضي — Navy ══════════════════════════════════════════════════════════════════════ */ :root { /* ── Primary ─────────────────────────────────────────────── */ --c-primary: #1a2340; --c-primary-hover: #2d3a5a; --c-primary-accent: #3a4a6e; --c-primary-soft: #eef4ff; --c-primary-soft-2: #e9edf7; --c-primary-border: #d9e2f6; --c-primary-border-2: #dfe6fa; --c-primary-on: #ffffff; --c-primary-rgb: 26, 35, 64; /* ── Text ────────────────────────────────────────────────── */ --c-text-1: #2b3553; --c-text-2: #4b5576; --c-text-3: #5d6687; --c-text-4: #6e7591; --c-text-5: #7a85a6; --c-text-6: #8993ae; --c-text-7: #b6bed1; /* ── Surfaces / Borders ──────────────────────────────────── */ --c-bg: #ffffff; --c-bg-subtle: #f7fbff; --c-bg-subtle-2: #fafbfe; --c-bg-subtle-3: #f7faff; --c-bg-subtle-4: #f6f8fc; --c-body-bg: #f0f2f5; --c-border: #eef1f7; --c-border-soft: #f1f3f9; --c-border-strong: #e5e9f3; /* ── Semantic (ثابتة عبر الثيمات) ───────────────────────── */ --c-success: #2e8b57; --c-success-soft: #e8f7ee; --c-success-border: #cdebd8; --c-warning: #b9832c; --c-warning-soft: #fff4e0; --c-danger: #c17957; --c-danger-soft: #fdf3f0; --c-danger-border: #f3dfd3; --c-info: #3367a3; --c-info-soft: #e5f1ff; --c-info-border: #cfe1f7; /* ── Sidebar ─────────────────────────────────────────────── */ --c-sidebar-bg: var(--c-primary); --c-sidebar-active-bg: var(--c-primary-hover); --c-sidebar-text: #b0bec5; --c-sidebar-text-on: #ffffff; --c-sidebar-brand: #7eb3ff; --c-sidebar-border: var(--c-primary-hover); /* ── Gradients & Shadows ─────────────────────────────────── */ --grad-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%); --grad-primary-soft: linear-gradient(135deg, var(--c-primary-soft) 0%, var(--c-primary-soft-2) 100%); --grad-shell: linear-gradient(135deg, var(--c-bg-subtle-3) 0%, var(--c-bg-subtle-4) 100%); --shadow-primary: 0 2px 10px rgba(var(--c-primary-rgb), .25); --shadow-primary-soft: 0 2px 8px rgba(var(--c-primary-rgb), .12); --shadow-soft: 0 2px 10px rgba(60, 80, 130, .05); --shadow-card: 0 1px 4px rgba(60, 80, 130, .04); --shadow-card-hover: 0 6px 20px rgba(90, 110, 180, .09); /* ── Typography ──────────────────────────────────────────── */ --font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ── Bootstrap overrides ─────────────────────────────────── */ --bs-primary: var(--c-primary); --bs-primary-rgb: var(--c-primary-rgb); --bs-link-color: var(--c-primary); --bs-link-hover-color: var(--c-primary-hover); } /* ══════════════════════════════════════════════════════════════════════ (2) الثيم الدافئ — Claude / Anthropic Palette ───────────────────────────────────────────────────────────────────── مستوحى من موقع Claude: خلفيّة paper cream + لون primary تراكوتّا coral، مع سايدبار داكن دافئ يُبرز الأورنجي كلون accent للعناصر النشطة. ══════════════════════════════════════════════════════════════════════ */ [data-theme="warm"] { /* ── Primary (Claude's signature terracotta coral) ──────── */ --c-primary: #cc785c; --c-primary-hover: #b86448; --c-primary-accent: #e09378; --c-primary-soft: #fbf0ea; --c-primary-soft-2: #f7e3d7; --c-primary-border: #f0d1c0; --c-primary-border-2: #f4dccd; --c-primary-on: #ffffff; --c-primary-rgb: 204, 120, 92; /* ── Text (warm near-black — مثل Claude) ───────────────── */ --c-text-1: #1f1e1d; --c-text-2: #2d2a27; --c-text-3: #4a4643; --c-text-4: #6b6762; --c-text-5: #8a857f; --c-text-6: #a8a29a; --c-text-7: #d4cec5; /* ── Surfaces (Anthropic "paper" cream) ─────────────────── */ --c-bg: #ffffff; --c-bg-subtle: #faf9f5; --c-bg-subtle-2: #f7f5ef; --c-bg-subtle-3: #f4f1e9; --c-bg-subtle-4: #f0ede4; --c-body-bg: #faf9f5; --c-border: #ebe8df; --c-border-soft: #f0ede5; --c-border-strong: #ded9cb; /* ── Sidebar (تراكوتّا أساسي + بنّي شوكولاتي للـ active) ── */ --c-sidebar-bg: linear-gradient(180deg, #cc785c 0%, #a85a3e 100%); --c-sidebar-active-bg: #2d241c; --c-sidebar-text: #fff0e5; --c-sidebar-text-on: #ffffff; --c-sidebar-brand: #fff5ec; --c-sidebar-border: rgba(255, 235, 220, .18); /* ── Shadows (warm tones) ───────────────────────────────── */ --shadow-soft: 0 2px 10px rgba(60, 40, 25, .05); --shadow-card: 0 1px 4px rgba(60, 40, 25, .04); --shadow-card-hover: 0 6px 20px rgba(204, 120, 92, .10); } /* ══════════════════════════════════════════════════════════════════════ (2b) الثيم الداكن — Dark Mode ───────────────────────────────────────────────────────────────────── لوحة مستوحاة من GitHub Dark مع لمسة سماويّة هادئة كلون Primary. مخصَّصة للقراءة الليليّة والشاشات عالية التباين. ══════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { color-scheme: dark; /* ── Primary (سماوي فاتح يُقرأ بوضوح على خلفيّة داكنة) ─── */ --c-primary: #6fa8ff; --c-primary-hover: #8cbaff; --c-primary-accent: #4d8be0; --c-primary-soft: #1a2742; --c-primary-soft-2: #1f2d4a; --c-primary-border: #2a3a5c; --c-primary-border-2: #32436a; --c-primary-on: #0d1117; --c-primary-rgb: 111, 168, 255; /* ── Text ────────────────────────────────────────────────── */ --c-text-1: #e6edf3; --c-text-2: #c9d1d9; --c-text-3: #b1bac4; --c-text-4: #8b949e; --c-text-5: #6e7681; --c-text-6: #545d68; --c-text-7: #3a424c; /* ── Surfaces / Borders ──────────────────────────────────── */ --c-bg: #161b22; --c-bg-subtle: #1c2128; --c-bg-subtle-2: #1a1f26; --c-bg-subtle-3: #171c23; --c-bg-subtle-4: #141a21; --c-body-bg: #0d1117; --c-border: #30363d; --c-border-soft: #252b33; --c-border-strong: #3d444d; /* ── Semantic (soft = tinted-dark لا أبيض) ──────────────── */ --c-success: #56d364; --c-success-soft: #0f2a18; --c-success-border: #1a4529; --c-warning: #e3b341; --c-warning-soft: #2b2410; --c-danger: #ff7b72; --c-danger-soft: #2d1512; --c-danger-border: #4a1f1a; --c-info: #79c0ff; --c-info-soft: #0f1f33; --c-info-border: #1c3454; /* ── Sidebar (أدكن من الخلفيّة العامّة) ─────────────────── */ --c-sidebar-bg: #090d13; --c-sidebar-active-bg: rgba(111, 168, 255, .14); --c-sidebar-text: #8b949e; --c-sidebar-text-on: #e6edf3; --c-sidebar-brand: #6fa8ff; --c-sidebar-border: rgba(255, 255, 255, .06); /* ── Shadows (أعمق للإحساس بالعمق على خلفيّة داكنة) ─────── */ --shadow-primary: 0 2px 10px rgba(var(--c-primary-rgb), .25); --shadow-primary-soft: 0 2px 8px rgba(var(--c-primary-rgb), .15); --shadow-soft: 0 2px 10px rgba(0, 0, 0, .35); --shadow-card: 0 1px 4px rgba(0, 0, 0, .30); --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, .45); } /* ══════════════════════════════════════════════════════════════════════ (2b.1) Dark Mode — Component Overrides ───────────────────────────────────────────────────────────────────── نعلو فوق ألوان Bootstrap الافتراضيّة + الألوان الثابتة المكتوبة يدويًّا في بعض الصفحات. الهدف: عدم ترك أيّ خلفيّة بيضاء في الوضع الداكن. ══════════════════════════════════════════════════════════════════════ */ /* ── 1. Utility class للخلفيّة السطحيّة (تُستخدم في _Layout) ─── */ .bg-body-surface { background-color: var(--c-bg); } /* ── 2. Bootstrap bg / text helpers ─────────────────────────── */ [data-theme="dark"] body { background-color: var(--c-body-bg); color: var(--c-text-2); } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-body, [data-theme="dark"] .bg-body-surface, [data-theme="dark"] .bg-body-tertiary { background-color: var(--c-bg) !important; color: var(--c-text-1); } [data-theme="dark"] .bg-body-secondary { background-color: var(--c-bg-subtle) !important; color: var(--c-text-1); } [data-theme="dark"] .text-dark, [data-theme="dark"] .text-black, [data-theme="dark"] .text-body { color: var(--c-text-1) !important; } [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--c-text-4) !important; } [data-theme="dark"] .text-body-secondary, [data-theme="dark"] .text-body-tertiary { color: var(--c-text-3) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--c-border) !important; } [data-theme="dark"] hr { border-color: var(--c-border); } /* ── 3. Cards / Modals / Dropdowns / List-group ─────────────── */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .list-group-item, [data-theme="dark"] .popover, [data-theme="dark"] .offcanvas { background-color: var(--c-bg); color: var(--c-text-1); border-color: var(--c-border); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer, [data-theme="dark"] .offcanvas-header, [data-theme="dark"] .list-group-item-action { background-color: var(--c-bg); color: var(--c-text-1); border-color: var(--c-border); } [data-theme="dark"] .list-group-item.active { background-color: var(--c-primary-soft); color: var(--c-primary); border-color: var(--c-primary-border); } [data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background-color: var(--c-bg-subtle); color: var(--c-text-1); } [data-theme="dark"] .dropdown-item { color: var(--c-text-2); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--c-bg-subtle); color: var(--c-text-1); } [data-theme="dark"] .dropdown-divider { border-color: var(--c-border); } /* ── 4. Tables ──────────────────────────────────────────────── */ [data-theme="dark"] .table { --bs-table-bg: var(--c-bg); --bs-table-color: var(--c-text-1); --bs-table-border-color: var(--c-border); --bs-table-striped-bg: var(--c-bg-subtle); --bs-table-striped-color: var(--c-text-1); --bs-table-hover-bg: var(--c-bg-subtle-2); --bs-table-hover-color: var(--c-text-1); --bs-table-active-bg: var(--c-primary-soft); --bs-table-active-color: var(--c-text-1); } [data-theme="dark"] .table thead th, [data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--c-border); } /* ── 5. Forms ───────────────────────────────────────────────── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] textarea.form-control { background-color: var(--c-bg-subtle); border-color: var(--c-border); color: var(--c-text-1); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly], [data-theme="dark"] .form-select:disabled { background-color: var(--c-bg-subtle-3); color: var(--c-text-4); } [data-theme="dark"] .form-control::placeholder { color: var(--c-text-5); } [data-theme="dark"] .input-group-text { background-color: var(--c-bg-subtle-2); border-color: var(--c-border); color: var(--c-text-2); } [data-theme="dark"] .form-label, [data-theme="dark"] .form-check-label, [data-theme="dark"] label { color: var(--c-text-2); } [data-theme="dark"] .form-text { color: var(--c-text-4); } /* ── 6. Buttons — Outline/Secondary/Light adjustments ───────── */ [data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--c-text-2); --bs-btn-border-color: var(--c-border); --bs-btn-hover-color: var(--c-text-1); --bs-btn-hover-bg: var(--c-bg-subtle); --bs-btn-hover-border-color: var(--c-border-strong); --bs-btn-active-color: var(--c-text-1); --bs-btn-active-bg: var(--c-bg-subtle-2); --bs-btn-active-border-color: var(--c-border-strong); --bs-btn-disabled-color: var(--c-text-5); --bs-btn-disabled-border-color: var(--c-border); } [data-theme="dark"] .btn-light, [data-theme="dark"] .btn-secondary { --bs-btn-color: var(--c-text-1); --bs-btn-bg: var(--c-bg-subtle); --bs-btn-border-color: var(--c-border); --bs-btn-hover-color: var(--c-text-1); --bs-btn-hover-bg: var(--c-bg-subtle-2); --bs-btn-hover-border-color: var(--c-border-strong); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ── 7. Nav / Tabs / Pills / Pagination / Accordion ─────────── */ [data-theme="dark"] .nav-tabs { border-color: var(--c-border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--c-text-3); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--c-border) var(--c-border) transparent; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--c-bg); color: var(--c-primary); border-color: var(--c-border) var(--c-border) var(--c-bg); } [data-theme="dark"] .accordion { --bs-accordion-bg: var(--c-bg); --bs-accordion-color: var(--c-text-1); --bs-accordion-border-color: var(--c-border); --bs-accordion-btn-color: var(--c-text-1); --bs-accordion-btn-bg: var(--c-bg); --bs-accordion-active-color: var(--c-primary); --bs-accordion-active-bg: var(--c-primary-soft); --bs-accordion-btn-focus-border-color: var(--c-primary); } [data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(150%); } [data-theme="dark"] .page-link { background-color: var(--c-bg); border-color: var(--c-border); color: var(--c-text-2); } [data-theme="dark"] .page-link:hover { background-color: var(--c-bg-subtle); color: var(--c-text-1); } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--c-bg); color: var(--c-text-6); } [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item.active { color: var(--c-text-3); } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--c-text-5); } /* ── 8. Alerts ──────────────────────────────────────────────── */ [data-theme="dark"] .alert-success { background-color: var(--c-success-soft); color: var(--c-success); border-color: var(--c-success-border); } [data-theme="dark"] .alert-warning { background-color: var(--c-warning-soft); color: var(--c-warning); border-color: rgba(227, 179, 65, .25); } [data-theme="dark"] .alert-danger { background-color: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger-border); } [data-theme="dark"] .alert-info { background-color: var(--c-info-soft); color: var(--c-info); border-color: var(--c-info-border); } [data-theme="dark"] .alert-primary { background-color: var(--c-primary-soft); color: var(--c-primary); border-color: var(--c-primary-border); } [data-theme="dark"] .alert-secondary, [data-theme="dark"] .alert-light { background-color: var(--c-bg-subtle); color: var(--c-text-2); border-color: var(--c-border); } /* ── 9. Select2 (النسخة المبنية على Bootstrap 5) ─────────────── */ [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color: var(--c-bg-subtle); border-color: var(--c-border); color: var(--c-text-1); } [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered, [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder { color: var(--c-text-1); } [data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { background-color: var(--c-bg); border-color: var(--c-border); } [data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option { color: var(--c-text-2); } [data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: var(--c-primary-soft) !important; color: var(--c-primary) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-search__field { background-color: var(--c-bg-subtle); border-color: var(--c-border); color: var(--c-text-1); } /* ── 10. SweetAlert2 الداكن ─────────────────────────────────── */ [data-theme="dark"] .swal2-popup { background-color: var(--c-bg); color: var(--c-text-1); } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--c-text-1); } /* ── 11. Inline hardcoded light backgrounds: catch by attribute — يغطّي جُلّ ما كُتب يدويًّا في الـ cshtml مثل style="background:#fff" */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#FFF"], [data-theme="dark"] [style*="background: #FFF"], [data-theme="dark"] [style*="background:#ffffff"], [data-theme="dark"] [style*="background: #ffffff"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background-color:#fff"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background-color:#ffffff"], [data-theme="dark"] [style*="background-color: #ffffff"], [data-theme="dark"] [style*="background-color:white"], [data-theme="dark"] [style*="background-color: white"] { background-color: var(--c-bg) !important; color: var(--c-text-1); } [data-theme="dark"] [style*="background:#f8f9fa"], [data-theme="dark"] [style*="background: #f8f9fa"], [data-theme="dark"] [style*="background-color:#f8f9fa"], [data-theme="dark"] [style*="background-color: #f8f9fa"], [data-theme="dark"] [style*="background:#f5"], [data-theme="dark"] [style*="background: #f5"], [data-theme="dark"] [style*="background:#f6"], [data-theme="dark"] [style*="background: #f6"], [data-theme="dark"] [style*="background:#f7"], [data-theme="dark"] [style*="background: #f7"], [data-theme="dark"] [style*="background:#fa"], [data-theme="dark"] [style*="background: #fa"] { background-color: var(--c-bg-subtle) !important; color: var(--c-text-1); } [data-theme="dark"] [style*="color:#000"], [data-theme="dark"] [style*="color: #000"], [data-theme="dark"] [style*="color:black"], [data-theme="dark"] [style*="color: black"], [data-theme="dark"] [style*="color:#333"], [data-theme="dark"] [style*="color: #333"], [data-theme="dark"] [style*="color:#222"], [data-theme="dark"] [style*="color: #222"] { color: var(--c-text-1) !important; } /* ── 12. معاينات الثيم في صفحة /Theme: أعد للخلفيّات البيضاء حقّها كي تظهر البطاقات كما صُمّمت حتى في الوضع الداكن. */ [data-theme="dark"] .theme-card .preview, [data-theme="dark"] .theme-card .preview * { /* نلغي إعادة الكتابة السابقة لأنّ الـ preview هو معاينة دقيقة للألوان. */ background-color: revert !important; color: revert !important; } /* ── 13. Inputs autofill في Chrome ────────────────────────── */ [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] input:-webkit-autofill:hover, [data-theme="dark"] input:-webkit-autofill:focus, [data-theme="dark"] textarea:-webkit-autofill, [data-theme="dark"] select:-webkit-autofill { -webkit-text-fill-color: var(--c-text-1); -webkit-box-shadow: 0 0 0 1000px var(--c-bg-subtle) inset; caret-color: var(--c-text-1); } /* ── 14. Scrollbar ───────────────────────────────────────────── */ [data-theme="dark"] { scrollbar-color: var(--c-border-strong) var(--c-body-bg); } [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--c-body-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 5px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--c-text-6); } /* ══════════════════════════════════════════════════════════════════════ (3) خطوط اختيارية (تُحدَّد عبر data-font) ══════════════════════════════════════════════════════════════════════ */ [data-font="cairo"] { --font-family: 'Cairo', system-ui, sans-serif; } [data-font="plex"] { --font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; } [data-font="system"] { --font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ══════════════════════════════════════════════════════════════════════ (4) تطبيق الخط على كامل المستند ══════════════════════════════════════════════════════════════════════ */ html, body { font-family: var(--font-family); } /* ══════════════════════════════════════════════════════════════════════ (5) Theme-aware Buttons ───────────────────────────────────────────────────────────────────── نربط أزرار Bootstrap 5.3 بمتغيرات الثيم عبر Bootstrap CSS Variables. هذا يجعل كل `.btn-primary` (أزرار الحفظ/التقديم عادة) تتلوّن تلقائياً مع الثيم: نيفي في الثيم الهادئ، تراكوتّا في الثيم الدافئ. المفاتيح التي يعتمدها Bootstrap داخلياً: --bs-btn-(bg|border-color|color|hover-bg|hover-border-color|hover-color| active-bg|active-border-color|active-color|focus-shadow-rgb| disabled-bg|disabled-border-color|disabled-color) ══════════════════════════════════════════════════════════════════════ */ /* ── Solid: .btn-primary (submit/save) ─────────────────────────────── */ .btn-primary { --bs-btn-color: var(--c-primary-on); --bs-btn-bg: var(--c-primary); --bs-btn-border-color: var(--c-primary); --bs-btn-hover-color: var(--c-primary-on); --bs-btn-hover-bg: var(--c-primary-hover); --bs-btn-hover-border-color: var(--c-primary-hover); --bs-btn-focus-shadow-rgb: var(--c-primary-rgb); --bs-btn-active-color: var(--c-primary-on); --bs-btn-active-bg: var(--c-primary-hover); --bs-btn-active-border-color: var(--c-primary-hover); --bs-btn-disabled-color: var(--c-primary-on); --bs-btn-disabled-bg: var(--c-primary); --bs-btn-disabled-border-color: var(--c-primary); } /* ── Outline: .btn-outline-primary ─────────────────────────────────── */ .btn-outline-primary { --bs-btn-color: var(--c-primary); --bs-btn-border-color: var(--c-primary); --bs-btn-hover-color: var(--c-primary-on); --bs-btn-hover-bg: var(--c-primary); --bs-btn-hover-border-color: var(--c-primary); --bs-btn-focus-shadow-rgb: var(--c-primary-rgb); --bs-btn-active-color: var(--c-primary-on); --bs-btn-active-bg: var(--c-primary); --bs-btn-active-border-color: var(--c-primary); --bs-btn-disabled-color: var(--c-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--c-primary); } /* ── Link / Text: .btn-link ────────────────────────────────────────── */ .btn-link { --bs-btn-color: var(--c-primary); --bs-btn-hover-color: var(--c-primary-hover); --bs-btn-active-color: var(--c-primary-hover); --bs-btn-focus-shadow-rgb: var(--c-primary-rgb); } /* ── Badges / Pagination / Form-check (roles that use --bs-primary) ── */ /* نستخدم صيغة rgba() حتى تعمل أدوات Bootstrap المرتبطة بالشفافية بشكل صحيح: - bg-opacity-10/25/50/75/100 (يتحكّم بـ --bs-bg-opacity) - text-opacity-25/50/75/100 (يتحكّم بـ --bs-text-opacity) بدون هذا كانت .bg-primary تفرض لوناً صلباً بـ !important ويُعطّل bg-opacity، فتصبح الـ badges التي تستخدم bg-primary bg-opacity-10 text-primary غير مقروءة. */ .bg-primary { background-color: rgba(var(--c-primary-rgb), var(--bs-bg-opacity, 1)) !important; /* لون نص افتراضي للاستعمال المنفرد
…
؛ بدون !important حتى تتمكّن أيّ طبقة text-* من تجاوزه داخل badges. */ color: var(--c-primary-on); } .text-bg-primary { background-color: var(--c-primary) !important; color: var(--c-primary-on) !important; } .text-primary { color: rgba(var(--c-primary-rgb), var(--bs-text-opacity, 1)) !important; } .border-primary { border-color: var(--c-primary) !important; } .page-item.active .page-link { background-color: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-on); } .page-link { color: var(--c-primary); } .page-link:hover { color: var(--c-primary-hover); } .form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); } .form-check-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 0.25rem rgba(var(--c-primary-rgb), .25); } /* ── Form-control focus ring (override hardcoded blue in site.css) ─── */ .form-control:focus, .form-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 0.25rem rgba(var(--c-primary-rgb), .15); }