ثم ينسخها custom.js إلى ويحذف الحاوية — أي أنها لا تظهر إلا بعد تنفيذ السكربت. الفجوة كانت موجودة دائمًا لكنها كانت غير مرئية حين كانت القائمة بيضاء على صفحة بيضاء؛ بعد تسويدها صارت ومضة واضحة عند كل انتقال. الحل: شريط أسود ثابت يشغل مكان القائمة منذ أول رسم للصفحة، فتظهر القائمة فوقه لاحقًا دون أن يلاحظ المستخدم شيئًا. لا يظهر إلا على الشاشات التي تُعرض فيها القائمة أصلًا (navbar-expand-xl ⇐ 1200px فأكثر). */ @media (min-width: 1200px) { body::before { content: ""; position: fixed; top: 0; bottom: 0; /* inset-inline-start يطابق .navbar-vertical-fixed في القالب: يمين الشاشة بالعربية ويسارها بالإنجليزية */ inset-inline-start: 0; width: 16.25rem; background-color: var(--tayf-nav-bg); z-index: 0; pointer-events: none; } /* الوضعان المطويّ والمضغوط: يضبطهما سكربت في قبل الرسم، فيتطابق عرض الشريط مع عرض القائمة فورًا */ body.navbar-vertical-aside-mini-mode::before { width: 5.25rem; } body.navbar-vertical-aside-compact-mode::before { width: 9rem; } /* المحتوى فوق الشريط الأسود حتى لا يغطّيه أثناء الفجوة. position:relative وحده يكفي: العنصر المموضَع يُرسم فوق إخوته الساكنة دون z-index. ولا يجوز إضافة z-index هنا — أي قيمة تصنع سياق تكديس يحبس بداخله كل نوافذ Bootstrap (‏z-index 1111‏)، بينما تُلحق الخلفية ‏.modal-backdrop‏ بـ بقيمة 102، فتُرسم فوق السياق كلّه وتغطّي النافذة فيتعذّر النقر على حقولها. ولا يجوز إدراج #header هنا — القالب يعطيه position:fixed مع z-index:99، وإسناد position:relative له (بأولوية المعرّف) كان يُفقده التثبيت ويضعه تحت المحتوى. */ .main { position: relative; z-index: auto; } /* إزاحة المحتوى مسبقًا بنفس عرض القائمة. القالب يطبّقها عبر `.navbar-vertical-aside-show .main`، وفئة navbar-vertical-aside-show يضيفها جافاسكربت بعد تحميل الصفحة — فكان المحتوى يُرسم بعرض الشاشة كاملًا وينزلق تحت الشريط ثم يقفز لمكانه. نطبّق الإزاحة الافتراضية هنا بأولوية أدنى (0,1,0) فيتغلّب عليها القالب (0,2,0) متى أضاف السكربت فئته، ولا يقع تعارض. */ .main { padding-inline-start: 16.25rem; } body.navbar-vertical-aside-mini-mode .main { padding-inline-start: 5.25rem; } body.navbar-vertical-aside-compact-mode .main { padding-inline-start: 9rem; } } /* ============================ القائمة الجانبية ============================ */ /* إزالة البرتقالي (#FF7500) من القائمة نهائيًا. البرتقالي ليس مكتوبًا في أي قاعدة، بل هو القيمة الافتراضية لـ --app-primary-color التي يحقنها القالب في :root من إعدادات المتجر، وعشرات قواعد القالب داخل القائمة تقرأ منها (العنصر النشط، مؤشّر العنصر الفرعي، الشارات، مربّعات الاختيار، شريط التمرير...). بدل تجاوز كل قاعدة على حدة، نعيد تعريف المتغيّر *داخل القائمة فقط*. متغيّرات CSS تُورَّث، و var() تُحلّ عند العنصر المستهدف، فكل قاعدة تقرأ المتغيّر داخل القائمة ستحصل على الذهبي تلقائيًا — بينما تبقى قيمة :root كما هي لبقية اللوحة (الأزرار، التبويبات، الرسوم البيانية). */ .navbar-vertical-aside { --app-primary-color: var(--tayf-nav-active); --app-primary-color-rgb: 248, 203, 37; --c1: var(--tayf-nav-active); --c1-rgb: 248, 203, 37; } .navbar-vertical-aside, .navbar-vertical-aside .navbar-vertical-container, .navbar-vertical-aside .navbar-vertical-footer { background-color: var(--tayf-nav-bg) !important; } .navbar-vertical-aside, .navbar-vertical-aside .navbar-vertical-footer { border-color: var(--tayf-nav-border) !important; } /* روابط القائمة وأيقوناتها */ .navbar-vertical-aside .nav-link, .navbar-vertical-aside .nav-link .nav-icon, .navbar-vertical-aside .nav-link .text-truncate, .navbar-vertical-aside .navbar-vertical-footer .nav-link, .navbar-vertical-aside .js-navbar-vertical-aside-toggle-invoker, .navbar-vertical-aside .js-navbar-vertical-aside-toggle-invoker i { color: var(--tayf-nav-text) !important; } .navbar-vertical-aside .nav-link:hover, .navbar-vertical-aside .nav-link:hover .nav-icon, .navbar-vertical-aside .nav-link:hover .text-truncate { color: var(--tayf-nav-text-strong) !important; } .navbar-vertical-aside .nav-link:hover { background-color: var(--tayf-nav-hover-bg) !important; } /* ---------------------- الشعار واسم المتجر ---------------------- style.css كان يثبّت الشعار على 26px. نكبّره هنا ونضع اسم المتجر تحته. */ /* الشعار واسم المتجر جنبًا إلى جنب: الشعار أولًا (يمينًا بالعربية) والاسم بعده */ .navbar-vertical-aside .navbar-brand { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; } .navbar-vertical-aside .navbar-brand-logo, #header .navbar-brand-logo { height: 52px !important; max-width: 100% !important; width: auto; flex: none; object-fit: contain; } .navbar-vertical-aside .navbar-brand-logo-mini, #header .navbar-brand-logo-mini { width: 2.4rem !important; height: auto; } .tayf-brand-name { color: var(--tayf-nav-text-strong); font-size: 1rem; font-weight: 800; line-height: 1.3; min-width: 0; /* الاسم الطويل يلتفّ على سطرين كحدّ أقصى بدل أن يدفع الشعار خارج المساحة */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* في الوضع المطويّ يخفي القالب هذه الفئة، ونعيد الشعار لحجم الأيقونة */ .navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-brand { align-items: center; } /* صندوق البحث داخل القائمة — كان أبيض على أبيض بعد تسويد الخلفية */ .navbar-vertical-aside #search-bar-input, .navbar-vertical-aside .js-form-search { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--tayf-nav-border) !important; color: var(--tayf-nav-text-strong) !important; } .navbar-vertical-aside #search-bar-input::placeholder { color: rgba(255, 255, 255, 0.4) !important; } .navbar-vertical-aside #search-bar-input:focus { border-color: var(--tayf-nav-active) !important; box-shadow: none !important; } .navbar-vertical-aside .input-group-prepend .btn, .navbar-vertical-aside .input-group-prepend .btn i, .navbar-vertical-aside .input-group-append .btn, .navbar-vertical-aside .input-group-append .btn i { color: rgba(255, 255, 255, 0.45) !important; background-color: transparent !important; border-color: var(--tayf-nav-border) !important; } /* عناوين المجموعات ("الطلبات"، "المنتجات"، ...) */ .navbar-vertical-aside .nav-subtitle, .navbar-vertical-aside .nav-subtitle-replacer { color: rgba(255, 255, 255, 0.38) !important; } /* الفواصل */ .navbar-vertical-aside hr, .navbar-vertical-aside .dropdown-divider { border-color: var(--tayf-nav-border) !important; } /* العناوين الرئيسية (روابط المستوى الأول) عريضة، لتتميّز عن بنودها الفرعية. `> .nav-link` مباشرة حتى لا يرث العرض روابطُ القوائم الفرعية بداخلها. */ .navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link, .navbar-vertical-aside .navbar-nav > .nav-item > .nav-link { font-weight: 700 !important; } /* القوائم الفرعية — أغمق قليلًا لتُقرأ كطبقة داخلية */ .navbar-vertical-aside .nav-sub { background-color: rgba(0, 0, 0, 0.25) !important; } .navbar-vertical-aside .nav-sub .nav-link { color: rgba(255, 255, 255, 0.6) !important; } .navbar-vertical-aside .nav-sub .nav-link:hover, .navbar-vertical-aside .nav-sub .nav-link.active { color: var(--tayf-nav-text-strong) !important; } /* نقطة مؤشّر العنصر الفرعي */ .navbar-vertical-aside .nav-indicator-icon { color: rgba(255, 255, 255, 0.35) !important; } /* ---------------------- العنصر النشط: أزرق ---------------------- القالب يلوّن العنصر النشط بـ --app-primary-color القادمة من إعدادات المتجر (البرتقالي حاليًا). نتجاوزها هنا **داخل القائمة الجانبية فقط** فلا يتأثر لون الإعدادات في بقية اللوحة (الأزرار، التبويبات، الرسوم البيانية...). */ .navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link, .navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link.active, .navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link, .navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link-toggle, .navbar-vertical-aside .nav-sub .nav-item.active > .nav-link, .navbar-vertical-aside .nav-sub .nav-link.active { background-color: var(--tayf-nav-active-bg) !important; color: var(--tayf-nav-active) !important; } .navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link .nav-icon, .navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link.active .nav-icon, .navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link .nav-icon, .navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link-toggle .nav-icon, .navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link .text-truncate, .navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link.active .text-truncate, .navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link .text-truncate, .navbar-vertical-aside .nav-sub .nav-item.active > .nav-link .text-truncate, .navbar-vertical-aside .nav-sub .nav-link.active .text-truncate, .navbar-vertical-aside .nav-sub .nav-item.active .nav-indicator-icon, .navbar-vertical-aside .nav-sub .nav-link.active .nav-indicator-icon { color: var(--tayf-nav-active) !important; } /* ---------------------- زر "قُمرة القيادة" ---------------------- ذهبي ممتلئ دائمًا: لا يتغيّر بالتحويم ولا عند فتح شاشة اللوحة. الفئة .navbar-vertical-aside مكرّرة عمدًا (وليست معرّفًا): custom.js ينسخ القائمة من #sidebarMain إلى مباشرة ثم يحذف #sidebarMain، فأي محدّد يعتمد على ذلك المعرّف لا يجد هدفًا وقت التشغيل. تكرار الفئة يرفع الأولوية بنفس القدر ويبقى صالحًا. والسبب في الحاجة لرفعها: القالب يحقن في قاعدة `.navbar-vertical-aside .navbar-vertical-aside-has-menu.show>.nav-link .text-truncate` بلون --app-primary-color و !important، وأولويتها (0,5,0) كانت تتغلّب على قواعدنا فيصير نص الزر برتقاليًا على ذهبي = يختفي عند فتح اللوحة. المعرّف يرفع الأولوية إلى (1,x,0) فيحسم الأمر نهائيًا. */ .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta, .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta:hover, .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta:focus, .navbar-vertical-aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link.tayf-nav-cta, .navbar-vertical-aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link.tayf-nav-cta, .navbar-vertical-aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link.tayf-nav-cta:hover { background-color: var(--tayf-nav-active) !important; color: var(--tayf-nav-active-ink) !important; border-radius: 12px; margin: 10px 12px; padding: 13px 16px; font-weight: 700; box-shadow: none !important; } /* كل حالات النص والأيقونة داخل الزر — بما فيها .show التي كانت تُخفي الكلام */ .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta .nav-icon, .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta .text-truncate, .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta:hover .nav-icon, .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta:hover .text-truncate, .navbar-vertical-aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link.tayf-nav-cta .nav-icon, .navbar-vertical-aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link.tayf-nav-cta .text-truncate, .navbar-vertical-aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link.tayf-nav-cta .nav-icon, .navbar-vertical-aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.show > .nav-link.tayf-nav-cta .text-truncate { color: var(--tayf-nav-active-ink) !important; opacity: 1 !important; } /* ترتيب المحتوى داخل الزر: الأيقونة أولًا (يمينًا بالعربية) ثم النص على يسارها. order صريح بدل الاعتماد على ترتيب الـ DOM وحده، ليبقى الترتيب مقصودًا وواضحًا لمن يعدّل لاحقًا. */ .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta { display: flex !important; align-items: center; justify-content: flex-start; gap: 10px; } .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta .nav-icon { order: 1; margin: 0 !important; font-size: 1.15rem; } .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta .text-truncate { order: 2; margin: 0 !important; font-size: 0.95rem; } /* أيقونة SVG داخل الزر — أبعاد صريحة لأن .nav-icon مصمّمة لخط أيقونات لا لـ SVG */ .navbar-vertical-aside.navbar-vertical-aside .nav-link.tayf-nav-cta .tayf-cta-icon { width: 20px; height: 20px; flex: none; display: block; } /* شريط تمرير القائمة */ .navbar-vertical-aside .navbar-vertical-content::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.18); } /* ================================ الهيدر ================================ */ #header.navbar, .navbar-container.navbar-bordered { background-color: var(--tayf-nav-bg) !important; border-color: var(--tayf-nav-border) !important; } /* منطقة الشعار داخل الهيدر والقائمة */ .navbar-brand-wrapper { background-color: var(--tayf-nav-bg) !important; border-color: var(--tayf-nav-border) !important; } /* ---------------- أزرار الهيدر: دوائر داكنة + زر حساب ذهبي ---------------- الأيقونات تصبح أزرارًا دائرية بخلفية داكنة فاتحة قليلًا عن الشريط، وبطاقة الحساب تصبح حبّة ذهبية مميّزة، مطابقةً للتصميم المعتمد. */ #header .navbar-nav-wrap-content-right .btn-icon, #header .navbar-nav-wrap-content-right .btn-ghost-secondary { width: 42px; height: 42px; border-radius: 50% !important; background-color: rgba(255, 255, 255, 0.07) !important; border: none !important; display: inline-flex !important; align-items: center; justify-content: center; transition: background-color 0.18s ease; } #header .navbar-nav-wrap-content-right .btn-icon:hover, #header .navbar-nav-wrap-content-right .btn-ghost-secondary:hover { background-color: rgba(255, 255, 255, 0.14) !important; } /* أيقونات الهيدر بيضاء صريحة — القالب يلوّنها بلون داكن مناسب للخلفية البيضاء الأصلية، فتصير غير مقروءة على الشريط الأسود */ #header .navbar-nav-wrap-content-right .btn-icon, #header .navbar-nav-wrap-content-right .btn-icon i, #header .navbar-nav-wrap-content-right .btn-ghost-secondary, #header .navbar-nav-wrap-content-right .btn-ghost-secondary i, #header .navbar-nav-wrap-content-right .nav-link, #header .navbar-nav-wrap-content-right .nav-link i { color: #ffffff !important; } /* أيقونتا اللغة والخروج تحملان الفئة nav-icon التي يعطيها القالب opacity: .7 — فتبدوان رماديتين رغم أن اللون أبيض. نعيد الشفافية للكامل. */ #header .navbar-nav-wrap-content-right .nav-icon, #header .navbar-nav-wrap-content-right i { opacity: 1 !important; } #header .navbar-nav-wrap-content-right .btn-icon i, #header .navbar-nav-wrap-content-right .btn-ghost-secondary i { font-size: 1.15rem; } /* قائمة البروفايل فوق كل شيء — ضمانة إضافية لو أنشأ عنصرٌ سياق تكديس جديدًا */ #header .hs-unfold-content, #header .dropdown-menu, #header .navbar-dropdown-menu { z-index: 1001 !important; } /* نقطة التنبيه الحمراء فوق الأيقونة */ #header .btn-status, #header .btn-status-danger { background-color: #e11a2c !important; border-color: var(--tayf-nav-bg) !important; color: #ffffff !important; } /* ---------------- زر "حسابي" ---------------- حبّة ذهبية بنص وأيقونة سوداء، تنقل مباشرة لشاشة إعدادات الحساب. */ #header .tayf-account-btn { display: inline-flex !important; align-items: center; gap: 8px; background-color: var(--tayf-nav-active) !important; color: var(--tayf-nav-active-ink) !important; border-radius: 999px; padding: 10px 20px; font-weight: 800; font-size: 0.92rem; line-height: 1; white-space: nowrap; text-decoration: none !important; transition: filter 0.18s ease, transform 0.18s ease; } #header .tayf-account-btn:hover { filter: brightness(0.95); transform: translateY(-1px); color: var(--tayf-nav-active-ink) !important; } #header .tayf-account-btn--static { cursor: default; } #header .tayf-account-btn--static:hover { filter: none; transform: none; } #header .tayf-account-btn-text { color: var(--tayf-nav-active-ink) !important; } #header .tayf-account-btn-icon { width: 18px; height: 18px; flex: none; color: var(--tayf-nav-active-ink); } /* بطاقة الحساب القديمة (إن بقيت في قوالب أخرى) — حبّة ذهبية عريضة بنص أسود */ #header .navbar-dropdown-account-wrapper { background-color: var(--tayf-nav-active) !important; border-radius: 999px !important; padding: 7px 10px 7px 20px !important; gap: 12px !important; min-width: 200px; } #header .navbar-dropdown-account-wrapper .media-body { display: block !important; min-width: 0; } #header .navbar-dropdown-account-wrapper:hover { filter: brightness(0.96); } /* كل نصوص البطاقة سوداء — بما فيها سطر الدور الصغير الذي كان فاتحًا فيختفي على الخلفية الذهبية */ #header .navbar-dropdown-account-wrapper, #header .navbar-dropdown-account-wrapper .profile-name, #header .navbar-dropdown-account-wrapper .media-body h5, #header .navbar-dropdown-account-wrapper .media-body span, #header .navbar-dropdown-account-wrapper .media-body span.fs-12, #header .navbar-dropdown-account-wrapper::after { color: var(--tayf-nav-active-ink) !important; } #header .navbar-dropdown-account-wrapper .profile-name, #header .navbar-dropdown-account-wrapper .media-body h5 { font-weight: 800 !important; } #header .navbar-dropdown-account-wrapper .avatar-img { border: 2px solid rgba(14, 14, 20, 0.15); } /* أيقونات الهيدر (الرسائل، الطلبات، اللغة) وزر طيّ القائمة */ #header .btn-ghost-secondary, #header .btn-ghost-secondary i, #header .nav-icon, #header .js-navbar-vertical-aside-toggle-invoker, #header .js-navbar-vertical-aside-toggle-invoker i { color: var(--tayf-nav-text) !important; } #header .btn-ghost-secondary:hover, #header .btn-ghost-secondary:hover i { color: var(--tayf-nav-text-strong) !important; background-color: var(--tayf-nav-hover-bg) !important; } /* اسم المستخدم ودوره بجوار الصورة */ #header .profile-name, #header .navbar-dropdown-account-wrapper .media-body h5, #header .navbar-dropdown-account-wrapper .media-body span { color: var(--tayf-nav-text-strong) !important; } #header .navbar-dropdown-account-wrapper .media-body span.fs-12 { color: var(--tayf-nav-text) !important; } #header .dropdown-toggle::after { color: var(--tayf-nav-text) !important; } /* القوائم المنسدلة تبقى فاتحة — هي طبقة فوق الصفحة لا جزء من الشريط الأسود، وقلبها للأسود يجعل عناصرها غير مقروءة مع بقية تنسيقات القالب. */ #header .dropdown-menu, #header .navbar-dropdown-menu { background-color: #ffffff !important; } #header .dropdown-menu .dropdown-item, #header .navbar-dropdown-menu .dropdown-item, #header .dropdown-item-text .card-title, #header .dropdown-item-text .card-text { color: #1e2029 !important; } /* ============================================================================ رمز الدرهم الإماراتي ============================================================================ مضبوط على دليل هوية الرمز الرسمي: • الارتفاع يساوي ارتفاع النص -> 1em لا قياس ثابت بالبكسل • مسافة كافية بين الرمز والرقم -> .28em (نحو ثلث عرض الرمز) • الحفاظ على النِّسب والشكل -> viewBox ثابت وبلا تمديد • تباين لوني كافٍ -> fill="currentColor" يرث لون النص • اتجاه الرمز يطابق اتجاه النص -> الكتلة LTR والرمز يسار الرقم دائمًا ============================================================================ */ .currency-symbol { width: 0.82em; height: 0.82em; display: inline-block; vertical-align: -0.06em; flex: none; } .currency-amount { display: inline-flex; align-items: baseline; gap: 0.28em; direction: ltr; unicode-bidi: isolate; white-space: nowrap; } .currency-amount .currency-symbol { align-self: center; } .currency-value { font-variant-numeric: tabular-nums; } /* ------------------------- مفاتيح التبديل في RTL ------------------------- */ /* * الثيم يضع المؤشّر بـ inset-inline-start (‏منطقي‏) ثم يزيحه عند * التحديد بـ translate3d(+X) (‏فيزيائي‏). في العربية يبدأ المؤشّر من * اليمين وتدفعه الإزاحة الموجبة يمينًا أكثر — فيخرج من إطار المفتاح. * نعكس اتجاه الإزاحة وحدها ليطابق اتجاه القراءة. */ [dir="rtl"] .toggle-switch-input:checked + .toggle-switch-label .toggle-switch-indicator { -webkit-transform: translate3d(-1.025rem, 50%, 0); transform: translate3d(-1.025rem, 50%, 0); } [dir="rtl"] .toggle-switch-sm .toggle-switch-input:checked + .toggle-switch-label .toggle-switch-indicator { -webkit-transform: translate3d(-.81094rem, 50%, 0); transform: translate3d(-.81094rem, 50%, 0); } /* عنوان قسم سلعة: شعار لا نصّ. الشفافية أعلى من بقيّة العناوين — الشعار شكل لا كلمة، وخفوته يجعله يختفي بدل أن يُقرأ. */ .navbar-vertical-aside .nav-subtitle--logo { display: block; padding-block: 2px; opacity: .72; } .navbar-vertical-aside .nav-subtitle--logo img { height: 18px; width: auto; display: block; } /* ========================================================================== طيّ مجموعات القائمة الجانبية ========================================================================== البنود إخوةٌ لعنوان المجموعة لا أبناءٌ له، فيُطوى كلّ بندٍ بصنفٍ عليه هو. وقاعدةُ إخوةٍ (`~`) كانت تبتلع المجموعة التالية بعنوانها معه. */ .navbar-vertical-content:not(.tayf-searching) li.tayf-collapsed { display: none !important; } /* في الوضع المضغوط تبقى الأيقونات ظاهرة: العناوين تصير نقاطًا لا تُقرأ، فطيُّ ما تحتها يترك القائمة نقاطًا بلا أبواب. */ body.navbar-vertical-aside-mini-mode .navbar-vertical-content li.tayf-collapsed { display: block !important; } .tayf-group-head { cursor: pointer; user-select: none; } .tayf-group-head .nav-subtitle { display: flex !important; align-items: center; justify-content: space-between; gap: .4rem; transition: color .15s ease; } .tayf-group-caret { font-size: .7rem; opacity: .55; transition: transform .2s ease, opacity .15s ease; } .tayf-group-head.is-open .tayf-group-caret { transform: rotate(180deg); opacity: .9; } .tayf-group-head:hover .nav-subtitle, .tayf-group-head:focus-visible .nav-subtitle { color: var(--tayf-nav-text-strong) !important; } /* **التركيز على الفعّالة**: المجموعة التي فيها الصفحة المفتوحة تُعلَّم بلون الإبراز وشريطٍ في طرفها، فتُعرف بلمحة لا بقراءة العناوين كلّها. */ /* البند المفتوح: شريطٌ في طرفه وخلفيةٌ خفيفة — «أنت هنا» بلمحة */ .tayf-current-item > .nav-link { background: rgba(255, 255, 255, .06); font-weight: 700; position: relative; } .tayf-current-item > .nav-link::before { content: ''; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tayf-accent, #ffc107); } .tayf-group-head.is-current .nav-subtitle { color: var(--tayf-nav-active) !important; font-weight: 700; } .tayf-group-head.is-current { position: relative; background-color: var(--tayf-nav-active-bg); border-radius: .35rem; } .tayf-group-head.is-current::before { content: ""; position: absolute; inset-block: .35rem; inset-inline-start: 0; width: 3px; border-radius: 2px; background-color: var(--tayf-nav-active); } /* النقاط البديلة للعنوان في الوضع المضغوط لا تُضغط ولا تُلوّن */ body.navbar-vertical-aside-mini-mode .tayf-group-head { cursor: default; background-color: transparent; } body.navbar-vertical-aside-mini-mode .tayf-group-caret { display: none; }