/* ========================================================================== qaw-qawla-box.css — بوكس القَولة الموحَّد المرجع = لوحة القَولة في browse.html (قرار المالك 2026-07-30: «خليه بالضبط مثل المتصفح»). هذا الملفّ يفعل شيئين لا أكثر: ① الإطار الجديد للصفحتين — عرض واحد قابل للسحب (--qawla-box-w)، وجه ورقيّ، حدّ ذهبيّ على الجهة الملاصقة للمحتوى، استدارة وهوامش متطابقة. ② نسخة أمينة من تنسيق لوحة المتصفّح مُطبَّقة على صفحة البحث وحدها (§4 أدناه) — مولَّدة آليًّا من قواعد `browse.html` بتحويل أسماء الأصناف `.popup-* → .wp-*`، مع الحفاظ على ترتيبها فتُعاد نفس النتيجة البصريّة. 🔴 لا تُكتب هنا قواعد تُغيّر شكل لوحة المتصفّح: المتصفّح هو المرجع، والبحث يتبعه. إن أردت تغيير الشكل، غيّره في `browse.html` ثمّ أعِد توليد §4. 🔴 النطاق: سطح المكتب فقط (‏≥1024px). أوراق الجوّال السفليّة مضبوطة يدويًّا داخل كلّ صفحة (‏58dvh في المتصفّح خاصّة) ولا يمسّها هذا الملفّ. يُحمَّل قبل `` في الصفحتين ليفوز في الترتيب على طبقات !important. ========================================================================== */ /* 🔴 توكناتُ `--bt-*` لصفحة البحث — §4 المولَّد يرجعها وهي معرَّفةٌ في `browse.html` داخل نطاق `.browse-test-page` وحده، فكانت تسقط إلى احتياطيّاتٍ **نهاريّةٍ ثابتة** على صفحة البحث: نصٌّ داكنٌ فوق رقاقةٍ داكنة ليلًا (تباين ١٫١٧ — أمسكه الحارسُ الليليّ). القيمُ منقولةٌ حرفيًّا من `browse.html` فلا تنحرف اللوحتان. */ body.qawlat-search-page{ --bt-panel: #ffffff; --bt-panel-soft: #e9ede9; --bt-ink: #173a2f; --bt-ink-strong: #102a20; --bt-line: rgba(23,58,47,.14); --bt-line-strong: rgba(23,58,47,.22); --bt-helper: #7e8b83; } body.dark.qawlat-search-page{ --bt-panel: #141f1a; --bt-panel-soft: #1d2a23; --bt-ink: #d8eadf; --bt-ink-strong: #f4ecd7; --bt-line: rgba(216,234,223,.14); --bt-line-strong: rgba(216,234,223,.22); --bt-helper: #9fb0a6; } :root{ /* العرض الحيّ — يكتبه qaw-qawla-box.js على عند السحب/الاسترجاع */ --qawla-box-w: clamp(320px, 26vw, 460px); --qawla-box-min: 300px; --qawla-box-max: 760px; --qawla-box-radius: 14px; --qawla-box-grip: 14px; /* عرض مقبض السحب */ --qawla-box-gutter: 22px; /* حشوة محجوزة للمقبض على الحدّ الملاصق للمحتوى */ /* اسم قديم مستخدَم داخل الصفحتين — يبقى مطابقًا حتّى لا نكسر قواعدهما */ --word-panel-w: var(--qawla-box-w); --qawla-box-face: linear-gradient(180deg, rgba(255,253,247,.98), rgba(247,242,232,.96)); --qawla-box-line: rgba(151,116,45,.26); --qawla-box-edge: rgba(197,148,45,.85); --qawla-box-shadow: 0 18px 42px rgba(42,31,11,.16); } body.dark{ --qawla-box-face: linear-gradient(180deg, rgba(17,27,22,.98), rgba(13,21,17,.96)); --qawla-box-line: rgba(212,175,55,.20); --qawla-box-edge: rgba(212,175,55,.68); --qawla-box-shadow: 0 18px 42px rgba(0,0,0,.38); } @media (min-width: 1024px){ /* ── ① الإطار: نفس الوجه والحدّ والاستدارة والظلّ في الصفحتين ───────── */ html body .wp-box, html body.browse-test-page .bt-word-rail{ position: relative; background: var(--qawla-box-face) !important; border: 1px solid var(--qawla-box-line) !important; /* الحدّ الذهبيّ على الجهة الملاصقة للمحتوى (يمين في RTL) — وهو نفسه المقبض */ border-inline-start: 4px solid var(--qawla-box-edge) !important; border-radius: var(--qawla-box-radius) !important; box-shadow: var(--qawla-box-shadow) !important; overflow: hidden !important; } /* search: لوحة fixed تُثبَّت يسارًا (10px علوًا/سفلًا · 12px يسارًا) 🔴 position:fixed هنا إلزاميّ رغم أنّ §1 يفرض position:relative على كلا البوكسين (لازمة لسياق مقبض السحب في المتصفّح) — بلا !important هنا يفوز .wp-box الأعمّ في §1 (نفس الخاصّية، تعادل تخصيص) فيسقط البوكس داخل تدفّق الصفحة العاديّ بدل أن يطفو (عَرَض 2026-07-30: ظهر أعلى يمين الصفحة بلا تموضع، لا يسارًا كما في المتصفّح). */ html body .wp-box{ position: fixed !important; top: calc(var(--qawlat-top-chrome-height, var(--qawlat-header-height, 0px)) + 10px) !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; left: 12px !important; right: auto !important; width: var(--qawla-box-w) !important; max-width: calc(100vw - 24px) !important; max-height: none !important; display: flex !important; flex-direction: column !important; } html body .wp-overlay:not(.open) .wp-box{ transform: translateX(calc(-100% - 22px)) !important; } html body .wp-overlay.open .wp-box{ transform: translateX(0) !important; opacity: 1 !important; } /* الطبقة الشفّافة كانت تغطّي الشاشة كلّها فتحجب النقر على النتائج بينما اللوحة مفتوحة (وهي غير حاجزة أصلًا: aria-modal=false). صارت شفّافة للنقر كما في browse.html، واللوحة وحدها تستقبله. الإغلاق على المكتب بـEscape — والنقر على الخلفيّة يبقى فاعلًا على الجوّال حيث اللوحة ورقة سفليّة. */ html body .wp-overlay{ pointer-events: none !important; } html body .wp-overlay .wp-box{ pointer-events: auto !important; } /* search: النتائج تنكمش بدل أن تُغطّى — نفس الفرجة (8px) بين اللوحة والمحتوى */ html body.wp-panel-open #mainContent{ padding-left: calc(var(--qawla-box-w) + 20px) !important; } html body.qawlat-search-page.wp-panel-open .search-container, html body.qawlat-search-page.wp-panel-open .category-tabs, html body.qawlat-search-page.wp-panel-open #liveCount, html body.qawlat-search-page.wp-panel-open .stats-bar, html body.qawlat-search-page.wp-panel-open .chips-area, html body.qawlat-search-page.wp-panel-open .root-filter-bar, html body.qawlat-search-page.wp-panel-open .sort-bar, html body.qawlat-search-page.wp-panel-open .font-bar, html body.qawlat-search-page.wp-panel-open .stats-chart, html body.qawlat-search-page.wp-panel-open .share-bar, html body.qawlat-search-page.wp-panel-open .toolbar, html body.qawlat-search-page.wp-panel-open .sidebar-toggle-row, html body.qawlat-search-page.wp-panel-open .main-with-sidebar{ width: min(1160px, calc(100% - 32px)) !important; } html body.qawlat-search-page.wp-panel-open:not(.sidebar-collapsed) .main-with-sidebar{ grid-template-columns: minmax(0,1fr) !important; } html body.qawlat-search-page.wp-panel-open:not(.sidebar-collapsed) #sidebarCol{ display: none !important; } /* browse: الريل داخل الفليكس — نفس الهوامش تمامًا فيبدو صندوقًا لا شريطًا ملتصقًا */ html body.browse-test-page .bt-word-rail{ flex: 0 0 var(--qawla-box-w) !important; width: var(--qawla-box-w) !important; min-width: 0 !important; max-width: none !important; height: auto !important; align-self: stretch !important; margin-block: 10px !important; margin-inline: 8px 12px !important; } /* ── ② الجسم يمرّر داخليًّا (سياق فليكس محدود الارتفاع) ─────────────── */ html body .wp-box .wp-contextbar{ flex: 0 0 auto !important; } html body .wp-box .wp-body{ flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; } /* ── ④ تنسيق لوحة المتصفّح مُطبَّقًا على صفحة البحث ───────────────────── 🔴 مولَّد آليًّا — لا تحرّره يدويًّا: python3 scripts/seo/gen_qawla_box_css.py (توليد) python3 scripts/seo/gen_qawla_box_css.py --check (بوّابة تقادم) المصدر = قواعد