/* ========================================================================== dga-fixes.css تصحيحات ملاحظات الهيئة — التنسيقات مركز الأمير سلطان للدراسات والبحوث الدفاعية ========================================================================== المسار: web/themes/custom/sass_theme_msd/css/dga-fixes.css الملف المرافق: dga-fixes.js المرجع المعتمد: كود المنصات (Storybook) — هيئة الحكومة الرقمية ⚠️ قبل أي تعديل: 1) ترتيب الأقسام مقصود ولا يُغيَّر. عند تساوي أولوية قاعدتين تغلب الأخيرة في الملف، وبعض الأقسام المتأخرة تعتمد على ذلك. 2) بعض العناصر منسّقة في أكثر من قسم، والقيمة الفعلية هي التي تغلب. هذه المواضع موسومة بعبارة "تنبيه تداخل" — ابحث عنها أولًا. الفهرس (بترتيب ظهورها في الملف): 1. ملاحظات الهيئة 1–8 (القوائم، الإحصائيات، الأزرار، الفوتر) 2. بلوك "اتصل بنا" — روابط الهاتف والبريد (ملاحظة 11) 3. حقل البحث ونافذة التقييم — حالات التفاعل 4. أيقونة الرابط الخارجي — متغير مشترك 5. رابط "مسجّل لدى هيئة الحكومة الرقمية" 6. البطاقات (الأخبار، المركز الإعلامي، الأرقام، مجالات العمل) 7. قسم التقييم الرقمي — النجوم والرسائل 8. الفوتر — الحاوية وصف الحقوق والشعارات 9. الأكورديون الحكومي (gov-accordion) 10. الأزرار — تكملة المطابقة مع كود المنصات (المعيار 12) 11. لوحة تقييم الصفحة (page feedback) 12. نموذج "انضم إلينا" (التقديم على التدريب) ========================================================================== */ /* ========================================================================== 1. ملاحظات الهيئة 1 إلى 8 ========================================================================== */ /* 1.1 — ملاحظة 1: المسافة بين عنوان "المركز في أرقام" والبطاقات. تنبيه تداخل: هذه القيمة تُستبدل في 1.2 ثم في 6.7، والفعّالة الآن هي 0 (والمسافة صارت تأتي من الهامش السفلي للعنوان في 6.7). */ .statistic-main-wrapper .statistic-body_wrapper { margin-top: 48px !important; } /* 1.2 — ملاحظة 3: القيمة الثانية للمسافة نفسها (40px). تُلغى هي أيضًا في 6.7. */ .statistic-main-wrapper .statistic-body_wrapper { margin-top: 40px !important; } /* 1.3 — ملاحظة 2: دلالة التمرير على عناصر القوائم المنسدلة في الهيدر (أخضر فاتح #54c08a + تسطير). تشمل القائمتين: شريط القائمة والهيدر. */ .header_wrapper .region--menubar #block-sass-theme-msd-mainnavigation .sf-menu > li > ul li a:hover, .header_wrapper .region--menubar #block-sass-theme-msd-mainnavigation .sf-menu > li > ul li a:focus, .header_wrapper .region--header #block-sass-theme-msd-mainnavigation-2 .sf-menu > li > ul li a:hover, .header_wrapper .region--header #block-sass-theme-msd-mainnavigation-2 .sf-menu > li > ul li a:focus { color: #54c08a !important; text-decoration: underline !important; text-underline-offset: 3px; cursor: pointer; } /* 1.4 — ملاحظة 4: دلالة التمرير على زري "اقرأ المزيد" و"عرض الكل" */ /* "اقرأ المزيد" — زر أساسي أخضر: يغمق عند التمرير (#166a45 = primary-700). الشكل الكامل للزر في 6.4. */ .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .media-center-body .read-more_btn a:hover, .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .media-center-body .read-more_btn a:focus, .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay .read-more_btn a:hover, .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay .read-more_btn a:focus { background-color: #166a45 !important; cursor: pointer; } /* "عرض الكل" — زر ثانوي بإطار: خلفية رمادية فاتحة عند التمرير */ .media-wrapper header .view-header a:hover, .media-wrapper header .view-header a:focus { background-color: #f3f4f6 !important; cursor: pointer; } /* 1.5 — ملاحظة 6: دلالة التمرير على زر "قيّم تجربتك الرقمية" (انظر أيضًا 3.7 و10.1) */ .digital-rating-paragraph .widget-summary .rating-actions button:hover, .digital-rating-paragraph .widget-summary .rating-actions button:focus { background: #166a45 !important; cursor: pointer; } /* 1.6 — ملاحظة 7: أيقونة "رابط خارجي" بجانب روابط الفوتر التي تخرج من الموقع (أي رابط لا يحتوي psdsarc)، ما عدا أيقونات التواصل الاجتماعي. الأيقونة مرسومة كقناع (mask) فتأخذ لون النص تلقائيًا. */ .site-footer .footer-main-wrapper ul:not(.social-media-links--platforms) li a[href^="http"]:not([href*="psdsarc"])::after{content:"";display:inline-block;width:1em;height:1em;margin-inline-start:6px;vertical-align:-0.125em;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.104 2.01c.55 0 1 .45 1 1s-.45 1-1 1c-1.84 0-3.15.03-4.14.19-.96.16-1.52.42-1.93.83-.44.44-.72 1.06-.87 2.17-.15 1.14-.16 2.65-.16 4.8s0 3.66.16 4.8c.15 1.11.43 1.73.87 2.17s1.06.72 2.17.87c1.14.15 2.65.16 4.8.16s3.66 0 4.8-.16c1.11-.15 1.73-.43 2.17-.87.41-.41.68-.97.83-1.93.16-.99.19-2.3.19-4.14 0-.55.45-1 1-1s1 .45 1 1c0 1.81-.02 3.28-.22 4.46-.2 1.21-.58 2.22-1.39 3.03-.88.88-1.98 1.26-3.32 1.44-1.29.17-2.94.17-5 .17h-.15c-2.06 0-3.71 0-5-.17-1.34-.18-2.44-.56-3.32-1.44s-1.26-1.98-1.44-3.32c-.15-1.29-.15-2.93-.15-4.99v-.15c0-2.06 0-3.7.17-5 .18-1.34.56-2.44 1.44-3.32.81-.81 1.82-1.2 3.03-1.39 1.18-.19 2.65-.21 4.46-.22z'/%3E%3Cpath d='M16.634 2.06c.88-.05 2.63-.13 3.67.06.43.08.8.28 1.08.58.25.27.42.61.49.99.19 1.05.11 2.8.06 3.67-.07 1.16-1.46 1.63-2.24.85l-1.23-1.23-2.74 2.71c-.4.39-1.04.39-1.44 0-.4-.4-.39-1.04 0-1.44l2.73-2.71-1.25-1.25c-.79-.78-.31-2.17.85-2.24z'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.104 2.01c.55 0 1 .45 1 1s-.45 1-1 1c-1.84 0-3.15.03-4.14.19-.96.16-1.52.42-1.93.83-.44.44-.72 1.06-.87 2.17-.15 1.14-.16 2.65-.16 4.8s0 3.66.16 4.8c.15 1.11.43 1.73.87 2.17s1.06.72 2.17.87c1.14.15 2.65.16 4.8.16s3.66 0 4.8-.16c1.11-.15 1.73-.43 2.17-.87.41-.41.68-.97.83-1.93.16-.99.19-2.3.19-4.14 0-.55.45-1 1-1s1 .45 1 1c0 1.81-.02 3.28-.22 4.46-.2 1.21-.58 2.22-1.39 3.03-.88.88-1.98 1.26-3.32 1.44-1.29.17-2.94.17-5 .17h-.15c-2.06 0-3.71 0-5-.17-1.34-.18-2.44-.56-3.32-1.44s-1.26-1.98-1.44-3.32c-.15-1.29-.15-2.93-.15-4.99v-.15c0-2.06 0-3.7.17-5 .18-1.34.56-2.44 1.44-3.32.81-.81 1.82-1.2 3.03-1.39 1.18-.19 2.65-.21 4.46-.22z'/%3E%3Cpath d='M16.634 2.06c.88-.05 2.63-.13 3.67.06.43.08.8.28 1.08.58.25.27.42.61.49.99.19 1.05.11 2.8.06 3.67-.07 1.16-1.46 1.63-2.24.85l-1.23-1.23-2.74 2.71c-.4.39-1.04.39-1.44 0-.4-.4-.39-1.04 0-1.44l2.73-2.71-1.25-1.25c-.79-.78-.31-2.17.85-2.24z'/%3E%3C/svg%3E");mask-repeat:no-repeat;mask-size:contain} /* 1.7 — ملاحظة 8: دلالة التمرير على روابط الفوتر (رمادي + تسطير) */ .site-footer .footer-main-wrapper ul li a:hover, .site-footer .footer-main-wrapper ul li a:focus { color: #6c727e !important; text-decoration: underline !important; text-underline-offset: 3px; cursor: pointer; } /* 1.8 — ملاحظة 5: لون نص عدد المقيّمين تحت نجوم التقييم */ .digital-rating-reviews { color: #6C737F; } /* ========================================================================== 2. بلوك "اتصل بنا" — روابط الهاتف والبريد (ملاحظة 11) -------------------------------------------------------------------------- المطلوب: دلالة تمرير على الهاتف والبريد، واستبدال اللون الأزرق #007BFF. المرجع: مكوّن Link بنمط Primary في كود المنصات (المعيار 14). الألوان في المتغيرات أدناه، وبجانب كل متغير اسم التوكن الأصلي. الحالات: افتراضي (بدون تسطير) ← تمت زيارته ← تمرير ← ضغط ← تركيز. ========================================================================== */ #block-infoblock { --l-default: #1b8354; /* link-primary */ --l-hovered: #54c08a; /* link-primary-hovered */ --l-pressed: #88d8ad; /* link-primary-pressed */ --l-visited: #14573a; /* link-primary-visited */ --l-gap: 4px; /* link-md-gap */ } /* افتراضي — بدون تسطير */ #block-infoblock p a { color: var(--l-default); text-decoration: none; cursor: pointer; border-radius: 4px; /* radius-sm */ transition: color .15s ease; } #block-infoblock p a:visited { color: var(--l-visited); } /* إلغاء الحشوة الزائدة داخل الرابط حتى لا يمتد التسطير */ #block-infoblock p a > span { padding-left: 0; display: inline; } /* التمرير — التسطير على النص نفسه لا على الرابط كاملاً */ #block-infoblock p a:hover, #block-infoblock p a:visited:hover { color: var(--l-hovered); } #block-infoblock p a:hover > span, #block-infoblock p a:visited:hover > span { text-decoration: underline; text-underline-offset: 3px; } /* الضغط */ #block-infoblock p a:active { color: var(--l-pressed); } #block-infoblock p a:active > span { text-decoration: underline; text-underline-offset: 3px; } /* التركيز بلوحة المفاتيح */ #block-infoblock p a:focus-visible { outline: 2px solid #161616; outline-offset: 2px; } /* أيقونة النسخ — استبدال الأزرق */ #block-infoblock p .copy-btn { margin-inline-start: var(--l-gap); } #block-infoblock p .copy-btn:hover { color: var(--l-hovered); } #block-infoblock p .copy-btn:active { color: var(--l-pressed); } /* ========================================================================== 3. حقل البحث ونافذة التقييم — حالات التفاعل -------------------------------------------------------------------------- كان ملفًا مستقلًا (dga-search-rating.css — الإصدار 2) ثم دُمج هنا. السلوك نفس حقول "تواصل معنا" (dga-form-states.css) لكن بنطاق مختلف: كل محدِّد هنا مقيّد بنموذج البحث أو بكلاسات التقييم بالاسم، فلا يمس نموذج "تواصل معنا" إطلاقًا. النطاق محدود عمدًا: ألوان الإطار وحالات التفاعل فقط. الأحجام والحشو وحجم الخط لم تُمس، لأنها مضبوطة لسياق كل عنصر (البحث في شريط ضيق، والتقييم في نافذة منبثقة). المحتوى: 3.1–3.4 حقل البحث: افتراضي ← تركيز ← ضغط ← تمرير 3.5 زر البحث 3.6 منطقة الملاحظات في نافذة التقييم 3.7 الأزرار الخضراء في نافذة التقييم 3.8 زر إغلاق نافذة التقييم للتراجع: احذف هذا القسم كاملًا. ========================================================================== */ /* متغيرات الألوان — محصورة داخل نموذج البحث */ #views-exposed-form-search-content-page-1 { --dga-border-default: #9da4ae; /* form-field-border-default */ --dga-border-hovered: #384250; /* form-field-border-hovered */ --dga-bar: #0c111b; /* form-field-border-pressed */ --dga-bg-default: #ffffff; --dga-bg-pressed: #f3f4f6; --dga-text-default: #161616; --dga-text-focused: #384250; --dga-shadow-md: 0 2px 4px -2px rgba(16, 24, 40, .06), 0 4px 8px -2px rgba(16, 24, 40, .1); } /* 3.1 — حقل البحث: الحالة الافتراضية background-image تحمل طبقتين بالترتيب: (1) الشريط السفلي كتدرّج، (2) أيقونة العدسة. لو كتبنا التدرّج وحده لاختفت العدسة، ولذلك كل خصائص الخلفية هنا فيها قيمتان مفصولتان بفاصلة. مسار الأيقونة نسبي من مجلد css/ حتى لا يرتبط باسم النطاق. */ #views-exposed-form-search-content-page-1 input.form-text { border-color: var(--dga-border-default) !important; background-color: var(--dga-bg-default) !important; color: var(--dga-text-default); background-image: linear-gradient(var(--dga-bar), var(--dga-bar)), url("../icons/search-icon.svg") !important; background-repeat: no-repeat, no-repeat !important; background-position: bottom center, 12px 50% !important; background-size: 0 2px, auto; box-shadow: none !important; transition: background-size .2s ease-in-out, border-color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out; } @media (prefers-reduced-motion: reduce) { #views-exposed-form-search-content-page-1 input.form-text { transition: none; } } /* 3.2 — حقل البحث: التركيز (الشريط يمتد + ظل) */ #views-exposed-form-search-content-page-1 input.form-text:focus { background-color: var(--dga-bg-default) !important; background-size: 100% 2px, auto !important; color: var(--dga-text-focused); box-shadow: var(--dga-shadow-md) !important; outline: none !important; } /* لون الإطار عند التركيز يبقى الافتراضي، إلا إذا كان الماوس فوق الحقل */ #views-exposed-form-search-content-page-1 input.form-text:focus:not(:hover) { border-color: var(--dga-border-default) !important; } /* 3.3 — حقل البحث: الضغط (الخلفية تغمق) */ #views-exposed-form-search-content-page-1 input.form-text:active { background-color: var(--dga-bg-pressed) !important; } /* 3.4 — حقل البحث: التمرير (الإطار يغمق). يأتي أخيرًا حتى يغلب التركيز في لون الإطار. */ #views-exposed-form-search-content-page-1 input.form-text:hover { border-color: var(--dga-border-hovered) !important; color: var(--dga-text-default); } /* 3.5 — زر البحث: دلالة التمرير والتركيز #166a45 = primary-700 (button-background-primary-hovered). مقاس الزر نفسه في 10.5. */ #views-exposed-form-search-content-page-1 .form-actions input.form-submit:hover, #views-exposed-form-search-content-page-1 .form-actions input.form-submit:focus { background-color: #166a45 !important; cursor: pointer; } /* -------------------------------------------------------------------------- 3.6 — نافذة التقييم: منطقة الملاحظات (textarea.rating-feedback) كلاسات التقييم (rating-feedback / rating-open-btn / rating-submit-btn / rating-close-btn) خاصة بالتقييم وحده، فلا تمس أي عنصر آخر. مخالفتان صُحّحتا هنا: - الزوايا كانت 6px، والمعيار يحدد 4px لجميع الحقول - لون الإطار كان #6c727e، والمعتمد #9da4ae -------------------------------------------------------------------------- */ .rating-feedback { --dga-border-default: #9da4ae; --dga-border-hovered: #384250; --dga-bar: #0c111b; --dga-bg-default: #ffffff; --dga-bg-pressed: #f3f4f6; --dga-text-default: #161616; --dga-text-focused: #384250; --dga-shadow-md: 0 2px 4px -2px rgba(16, 24, 40, .06), 0 4px 8px -2px rgba(16, 24, 40, .1); } /* منطقة الملاحظات — الحالة الافتراضية */ textarea.rating-feedback { border: 1px solid var(--dga-border-default) !important; border-radius: 4px !important; background-color: var(--dga-bg-default) !important; color: var(--dga-text-default); background-image: linear-gradient(var(--dga-bar), var(--dga-bar)) !important; background-repeat: no-repeat !important; background-origin: border-box !important; background-clip: border-box !important; background-position: bottom center !important; background-size: 0 2px; box-shadow: none !important; display: block; vertical-align: top; transition: background-size .2s ease-in-out, border-color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out; } @media (prefers-reduced-motion: reduce) { textarea.rating-feedback { transition: none; } } /* التركيز */ textarea.rating-feedback:focus { background-color: var(--dga-bg-default) !important; background-size: 100% 2px !important; color: var(--dga-text-focused); box-shadow: var(--dga-shadow-md) !important; outline: none !important; } textarea.rating-feedback:focus:not(:hover) { border-color: var(--dga-border-default) !important; } /* الضغط */ textarea.rating-feedback:active { background-color: var(--dga-bg-pressed) !important; } /* التمرير — أخيرًا ليغلب التركيز في لون الإطار */ textarea.rating-feedback:hover { border-color: var(--dga-border-hovered) !important; color: var(--dga-text-default); } /* 3.7 — الأزرار الخضراء ("قيّم تجربتك" و"إرسال التقييم"): التمرير والتركيز #166a45 = primary-700. حالة الضغط والتركيز بلوحة المفاتيح في 10.1. */ button.rating-open-btn:hover, button.rating-open-btn:focus, button.rating-submit-btn:hover, button.rating-submit-btn:focus { background-color: #166a45 !important; cursor: pointer; } /* 3.8 — زر إغلاق نافذة التقييم: التمرير والتركيز زر بخلفية شفافة، فدلالته تغميق خفيف للخلفية وليس الأخضر. #f3f4f6 = neutral-100 (button-background-neutral-hovered). تنبيه تداخل: الشكل الكامل لهذا الزر في 10.2 (زوايا 6px). هذه القاعدة أعلى أولوية منه، فأثناء التمرير والتركيز تصبح الزوايا 4px، والخلفية الرمادية عند التركيز تأتي من هنا. لا تحذفها قبل اختبار الشكل. */ button.rating-close-btn:hover, button.rating-close-btn:focus { background-color: #f3f4f6 !important; border-radius: 4px; cursor: pointer; } /* ========================================================================== 4. أيقونة الرابط الخارجي — متغير مشترك -------------------------------------------------------------------------- المتغير --ext-link-icon يحمل رسم الأيقونة ويستخدمه القسم 5. (ملاحظة 1.6 في الفوتر تستخدم نسخة مكتوبة داخلها مباشرة.) ========================================================================== */ :root { --ext-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.104 2.01c.55 0 1 .45 1 1s-.45 1-1 1c-1.84 0-3.15.03-4.14.19-.96.16-1.52.42-1.93.83-.44.44-.72 1.06-.87 2.17-.15 1.14-.16 2.65-.16 4.8s0 3.66.16 4.8c.15 1.11.43 1.73.87 2.17s1.06.72 2.17.87c1.14.15 2.65.16 4.8.16s3.66 0 4.8-.16c1.11-.15 1.73-.43 2.17-.87.41-.41.68-.97.83-1.93.16-.99.19-2.3.19-4.14 0-.55.45-1 1-1s1 .45 1 1c0 1.81-.02 3.28-.22 4.46-.2 1.21-.58 2.22-1.39 3.03-.88.88-1.98 1.26-3.32 1.44-1.29.17-2.94.17-5 .17h-.15c-2.06 0-3.71 0-5-.17-1.34-.18-2.44-.56-3.32-1.44s-1.26-1.98-1.44-3.32c-.15-1.29-.15-2.93-.15-4.99v-.15c0-2.06 0-3.7.17-5 .18-1.34.56-2.44 1.44-3.32.81-.81 1.82-1.2 3.03-1.39 1.18-.19 2.65-.21 4.46-.22z'/%3E%3Cpath d='M16.634 2.06c.88-.05 2.63-.13 3.67.06.43.08.8.28 1.08.58.25.27.42.61.49.99.19 1.05.11 2.8.06 3.67-.07 1.16-1.46 1.63-2.24.85l-1.23-1.23-2.74 2.71c-.4.39-1.04.39-1.44 0-.4-.4-.39-1.04 0-1.44l2.73-2.71-1.25-1.25c-.79-.78-.31-2.17.85-2.24z'/%3E%3C/svg%3E"); } /* ========================================================================== 5. رابط "مسجّل لدى هيئة الحكومة الرقمية" (رقم التسجيل) -------------------------------------------------------------------------- يظهر داخل الأكورديون الحكومي (القسم 9). الشكل مطابق لموقع gadd.gov.sa المرجعي: رابط أخضر مسطّر + أيقونة رابط خارجي، مع حالات التمرير والضغط والتركيز. ========================================================================== */ a:has(> .reg-no) { color: #1b8354; /* link-primary */ font-weight: 500; font-size: 14px; /* مكبّر من 12px */ text-decoration: underline; transition: color .3s ease-in-out; } /* إلغاء تسطير وسماكة القاعدة الأصلية في style.css */ .gov-accordion .accordion-content .reg-wrapper .reg a:has(> .reg-no) .reg-no { color: inherit; font-weight: inherit; font-size: inherit; text-decoration: none; } /* أيقونة الرابط الخارجي */ a:has(> .reg-no)::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-inline-start: 8px; vertical-align: -0.125em; text-decoration: none; background-color: currentColor; -webkit-mask-image: var(--ext-link-icon); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-image: var(--ext-link-icon); mask-repeat: no-repeat; mask-size: contain; } /* التمرير */ a:has(> .reg-no):hover { color: #54c08a; } /* link-primary-hovered */ /* الضغط */ a:has(> .reg-no):active { color: #88d8ad; } /* link-primary-pressed */ /* التركيز بلوحة المفاتيح فقط */ a:has(> .reg-no):focus-visible { outline: 2px solid #161616; outline-offset: 2px; } a:has(> .reg-no):focus:not(:focus-visible) { outline: none; box-shadow: none; } /* ========================================================================== 6. البطاقات -------------------------------------------------------------------------- المرجع: كود المنصات (Storybook) + بطاقة .news-card-home آخر تحديث: 2026-09-12 المحتوى: 6.1 الأساس الموحّد لكل البطاقات 6.2 بطاقات الأخبار — الصفحة الرئيسية 6.3 بطاقات صفحة المركز الإعلامي 6.4 زر "اقرأ المزيد" 6.5 بطاقات "المركز في أرقام" 6.6 بطاقات "مجالات عمل المركز" 6.7 عناوين الأقسام 6.8 إخفاء فلتر نوع المركز الإعلامي ========================================================================== */ /* ---------- 6.1 الأساس الموحّد لكل البطاقات ---------- الحد والزوايا والظل والخلفية — مأخوذة من بطاقة .news-card-home. أي تعديل على شكل البطاقات عمومًا يكون هنا فقط. */ .media-wrapper .block-listing-wrapper .block-listing .media-card, .media-wrapper .media-center_page .media-center_child, .fields-and-technology .technology-main-wrapper .technology-wrapper, .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic .statistic-body { border: 1px solid #d2d6db; border-radius: 16px; box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06); background-color: #f9fafb; } /* استثناء: بطاقات الأرقام تبقى بيضاء، لأن خلفية قسمها #f9fafb، ولو أخذت اللون نفسه لاختفى تمييزها */ .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic .statistic-body { background-color: #ffffff; } /* ---------- 6.2 بطاقات الأخبار — الصفحة الرئيسية ---------- */ .media-wrapper .block-listing-wrapper .block-listing { display: flex; } .media-wrapper .block-listing-wrapper .block-listing .media-card { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow: hidden; } /* الصورة: إزالة الفراغ الصغير أسفلها (سببه أن الصورة عنصر سطري) */ .media-wrapper .block-listing-wrapper .block-listing .media-card .media-center-image { height: auto; } .media-wrapper .block-listing-wrapper .block-listing .media-card .media-center-image img { display: block; } /* منطقة المحتوى تملأ البطاقة، فينزل الزر لأسفلها */ .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 0; } /* الوصف: خط 16px بارتفاع سطر 24px. font-size: 0 على الحاوية يخفي علامة الحذف (…) اليتيمة خارج الفقرات. */ .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay .media-center-body { font-size: 0; } .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay .media-center-body > * { padding-block: 0; font-size: 16px; line-height: 24px; font-weight: 400; } /* ---------- 6.3 بطاقات صفحة المركز الإعلامي ---------- */ .media-wrapper .media-center_page .media-center_child { display: flex; flex-direction: column; padding: 16px; overflow: hidden; } .media-wrapper .media-center_page .media-center_child .media-card { flex: 1; display: flex; flex-direction: column; gap: 16px; } .media-wrapper .media-center_page .media-center_child .media-card .media-center-image { height: auto; } .media-wrapper .media-center_page .media-center_child .media-card .media-center-image img { display: block; } .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 0; } .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .media-center-body { flex: 1; display: flex; flex-direction: column; gap: 8px; } /* العنوان: يُقص عند 3 أسطر حتى تتساوى ارتفاعات البطاقات في كل صف */ .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .media-center-title h6 { font-size: 18px; line-height: 28px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(28px * 3); } .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .media-center-body h6 { padding-block: 0; font-size: 16px; line-height: 24px; font-weight: 400 !important; } /* ---------- 6.4 زر "اقرأ المزيد" (الرئيسية + المركز الإعلامي) ---------- مقاس lg من كود المنصات، مع حالات التمرير والضغط والتركيز. color عليه !important لأن ملف faq-fix.css يفرض color:inherit!important. */ .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay .read-more_btn, .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .read-more_btn { margin-top: auto; } .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay .read-more_btn a, .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .read-more_btn a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 0 16px; border-radius: 4px; font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: none; background-color: #1b8354; color: #ffffff !important; transition: background-color .15s ease; } .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay .read-more_btn a:hover, .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .read-more_btn a:hover { background-color: #166a45; } .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay .read-more_btn a:active, .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .read-more_btn a:active { background-color: #104631; } .media-wrapper .block-listing-wrapper .block-listing .media-card .media-card-overlay .read-more_btn a:focus-visible, .media-wrapper .media-center_page .media-center_child .media-card .media-card-overlay .read-more_btn a:focus-visible { outline: 2px solid #161616; outline-offset: 2px; } /* ---------- 6.5 بطاقات "المركز في أرقام" ---------- */ /* كل البطاقات بعرض متساوٍ مهما اختلف طول الوصف */ .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic { flex: 1 1 0 !important; min-width: 0; } .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic .statistic-body { height: 100%; gap: 12px; padding: 16px; } /* دائرة الأيقونة 48×48 (مكوّن Featured Icon) والأيقونة داخلها 24×24 */ .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic .statistic-body .icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 9999px; flex-shrink: 0; } .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic .statistic-body .icon img { display: block; width: 24px; height: 24px; object-fit: contain; } /* الرقم */ .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic .statistic-body .number-with-suffix { padding: 0; gap: 2px; } .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic .statistic-body .number-with-suffix .number, .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic .statistic-body .number-with-suffix .suffix { font-size: 30px; line-height: 38px; font-weight: 600; } /* الوصف: مساحة سطرين محجوزة دائمًا حتى يثبت الشكل لو طال النص */ .statistic-main-wrapper .statistic-body_wrapper .paragraph--type--statistic .statistic-body .description { width: 100%; font-size: 14px; line-height: 20px; text-align: center; min-height: calc(20px * 2); } /* ---------- 6.6 بطاقات "مجالات عمل المركز" (سلايدر) ---------- */ /* تساوي ارتفاعات البطاقات داخل السلايدر. المحددات طويلة عمدًا: ملف slick.css يُحمَّل بعد ملفنا ويفرض display:block، والمحدد الأطول أعلى أولوية فيغلبه. */ .fields-and-technology .slick-track { display: flex; align-items: stretch; } .fields-and-technology .slick-list .slick-track .slick-slide { height: auto; display: flex; } .fields-and-technology .slick-list .slick-track .slick-slide > .technology-main-wrapper { display: flex; flex: 1; min-width: 0; } /* البطاقة: المحتوى (العنوان + النص) موسّط عموديًا كمجموعة واحدة */ .fields-and-technology .technology-main-wrapper .technology-wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px; margin-inline: 12px; } .fields-and-technology .technology-main-wrapper .technology-wrapper .title { font-size: 18px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; } /* النص بالبكسل بدل rem، لأن حجم الخط الجذري في الموقع 60px فتصير rem غير موثوقة */ .fields-and-technology .technology-main-wrapper .technology-wrapper .body, .fields-and-technology .technology-main-wrapper .technology-wrapper .body p, .fields-and-technology .technology-main-wrapper .technology-wrapper .body li { font-size: 16px; line-height: 24px; font-weight: 400; } /* القائمة النقطية: النقاط خارج النص، والأسطر الملتفّة تبدأ تحت أول حرف */ .fields-and-technology .technology-main-wrapper .technology-wrapper .body ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-inline-start: 20px; list-style-position: outside; } .fields-and-technology .technology-main-wrapper .technology-wrapper .body li { text-align: start; padding-inline-start: 2px; overflow-wrap: anywhere; } .fields-and-technology .technology-main-wrapper .technology-wrapper .body li::marker { color: #1b8354; } /* حاوية السلايدر: ارتفاع تلقائي + مساحة داخلية حتى لا يُقص ظل البطاقات */ .fields-and-technology .slick-list { height: auto !important; padding-block: 12px; margin-block: -12px; } .fields-and-technology { padding-inline: 0; } /* ---------- 6.7 عناوين الأقسام ("مجالات العمل" و"المركز في أرقام") ---------- المسافة تحت العنوان صارت 40px من هامشه السفلي. تنبيه تداخل: القاعدة الثانية هنا (margin-top: 0) تلغي 1.1 و1.2. */ .fields-and-technology h4, .statistic-main-wrapper .statistic-wrapper h4 { font-size: 30px; line-height: 38px; font-weight: 700; margin: 0 0 40px; } .statistic-main-wrapper .statistic-body_wrapper { margin-top: 0 !important; } /* ---------- 6.8 إخفاء فلتر نوع المركز الإعلامي ---------- السبب: تبويبا "الأخبار / الفعاليات" يظهران بشكل معطوب — التبويب المحدد خلفيته سوداء ونصه أسود (غير مقروء)، وتبويب "الفعاليات" مقاسه 0×0 فلا يمكن الضغط عليه. الفلتر ما زال موجودًا في العرض news_listing ولم يُحذف. تنبيه: مع الإخفاء لا يوجد طريق لصفحة الفعاليات من هنا. للتراجع: احذف القاعدة أدناه. */ #edit-media-center-type { display: none; } /* ========================================================================== 7. قسم التقييم الرقمي — النجوم والرسائل -------------------------------------------------------------------------- يظهر أسفل صفحات الخدمات. الجزء البرمجي في dga-fixes.js (الجزء 3). الألوان تستخدم متغيرات كود المنصات مع قيمة احتياطية: var(--اسم-المتغير, #القيمة) — إذا كان المتغير معرّفًا في الموقع يُستخدم، وإلا تُستخدم القيمة الاحتياطية دون أن ينكسر شيء. --text-error #b42318 أحمر رسالة الخطأ --text-default #161616 النص الأساسي --icon-primary #1B8354 أخضر النجوم والأيقونة --icon-default-500 #6c727e رمادي غامق (نصف النجمة) --colors-neutral-200 #E5E7EB رمادي فاتح (النجمة الفارغة) المحتوى: 7.1 رسالة الخطأ (لم يُختر أي نجمة) 7.2 رسالة نجاح التقييم 7.3 نجوم رسالة النجاح (تعبئة جزئية دقيقة) 7.4 شكل نجوم نموذج التقييم (شكل فقط، دون تغيير الوظيفة) 7.5 نصف النجمة 7.6 نجوم الشريط الخارجي (متوسط التقييم) ========================================================================== */ /* ---------- 7.1 رسالة الخطأ (لم يُختر أي نجمة) ---------- تنبيه تداخل: 10.6 يعيد تعريف هذه القاعدة بلون ثابت #b42318، وهو الذي يغلب (القيمة نفسها، لكن المتغير --text-error لا يُستخدم فعليًا). */ .rating-error-message { color: var(--text-error, #b42318) !important; font-family: "IBM Plex Sans Arabic", inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; margin: 8px 0 0 0 !important; } /* ---------- 7.2 رسالة نجاح التقييم ---------- مخفية افتراضيًا، والجافاسكربت يضيف is-visible لإظهارها. تنبيه تداخل: 10.7 (أقدم ولكنه أسفل الملف) يغلب بعض القيم هنا. الشكل الفعلي الآن: - المسافات داخل .rating-success-info و.rating-success-value = 8px (لا 24px) - لون الأيقونة #067647 وصندوقها 20×20 (الحدود تبقى ملغاة من هنا) - نص "تم إرسال ردك بنجاح!" = 14px بوزن 500 (لا 16px/400) لا تحذف أيًّا من القسمين دون مقارنة الشكل قبل وبعد. */ .rating-success-message { display: none; } .rating-success-message.is-visible { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; width: 100%; box-sizing: border-box; padding: 16px 12px; font-family: "IBM Plex Sans Arabic", sans-serif; } .rating-success-value { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .rating-success-text-value { color: var(--text-default, #161616); font-size: 16px; font-weight: 400; } .rating-success-text-value b { font-weight: 700; } .rating-success-info { display: flex; align-items: center; gap: 24px; width: fit-content; } .rating-success-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--icon-primary, #1B8354); /* أيقونة الصح في الـ SVG لونها currentColor، فهذه الخاصية تحدد لونها */ border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } .rating-success-icon::before, .rating-success-icon::after { content: none !important; display: none !important; } .rating-success-icon svg { display: block; width: 24px !important; height: 24px !important; border: none !important; outline: none !important; box-shadow: none !important; } .rating-success-text { color: var(--text-default, #161616); font-size: 16px; font-weight: 400; white-space: nowrap; } /* ---------- 7.3 نجوم رسالة النجاح (تعبئة جزئية دقيقة) ---------- كل نجمة = نجمة رمادية في الخلف + نجمة خضراء فوقها داخل غلاف عرضه --fill (يحسبه الجافاسكربت من 0% إلى 100%). */ .dga-star-row { display: inline-flex; align-items: center; gap: 2px; direction: ltr; vertical-align: middle; } .dga-star { position: relative; display: inline-block; width: 28px; height: 27px; flex-shrink: 0; } .dga-star-bg, .dga-star-fg { position: absolute; top: 0; left: 0; width: 28px; height: 27px; display: block; } .dga-star-bg { color: var(--colors-neutral-200, #E5E7EB); } .dga-star-fg { color: var(--icon-primary, #1B8354); } .dga-star-fg-wrap { position: absolute; top: 0; left: 0; height: 27px; width: var(--fill, 0%); overflow: hidden; } /* ---------- 7.4 شكل نجوم نموذج التقييم (شكل فقط، دون تغيير الوظيفة) ---------- نخفي رمز النجمة الأصلي (font-size: 0) ونرسم مكانه النجمة الرسمية كقناع (mask) يأخذ لون الكلاس الحالي. */ .rating-form .rating-star { font-size: 0 !important; position: relative; display: inline-block; width: 28px; height: 27px; vertical-align: middle; } .rating-form .rating-star::before { content: ""; position: absolute; inset: 0; background-color: currentColor; /* يأخذ لون كلاس الموقع الحالي (star-filled / star-empty) تلقائيًا */ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } /* ---------- 7.5 نصف النجمة (star-half) ---------- النجمة كاملة بالرمادي، وفوقها نصفها الأيمن بالأخضر (clip-path). */ .rating-form .rating-star.star-half { color: var(--icon-default-500, #6c727e) !important; } .rating-form .rating-star.star-half::after { content: ""; position: absolute; inset: 0; background-color: var(--icon-primary, #1B8354); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; clip-path: inset(0 0 0 50%); /* لعكس النصف الملوّن استخدم: inset(0 50% 0 0) */ } /* ---------- 7.6 نجوم الشريط الخارجي (متوسط التقييم) ---------- نفس طريقة 7.4: النجمة الرسمية كقناع بلون الكلاس الحالي. */ .widget-summary .rating-star-display { font-size: 0 !important; position: relative; display: inline-block; width: 28px; height: 27px; vertical-align: middle; } .widget-summary .rating-star-display::before { content: ""; position: absolute; inset: 0; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } /* ========================================================================== 8. الفوتر — الحاوية وصف الحقوق والشعارات -------------------------------------------------------------------------- المرجع: "تخطيط وتباعد" في كود المنصات container-max-width-desktop = 1280px container-padding-desktop = 32px | container-padding-mobile = 16px المحتوى: 8.1 حاوية الفوتر 8.2 صف الحقوق والشعارات في سطر واحد 8.3 تصفير هوامش دروبال داخل عمود الحقوق 8.4 حصر صف الحقوق والشعارات داخل 1280px + توحيد ارتفاع الشعارات ========================================================================== */ /* ---------- 8.1 حاوية الفوتر ---------- السبب: min-width:100% كان يلغي مفعول max-width فيمتد الفوتر بعرض الشاشة. */ .site-footer .footer-main-wrapper { min-width: 0 !important; max-width: 1280px !important; padding-inline: 32px !important; margin-inline: auto !important; } /* قسم الحقوق والشعارات كان خارج الحاوية فيمتد لطرفي الشاشة */ .site-footer .date-with-logo { max-width: 1280px; padding-inline: 32px; margin-inline: auto; } /* الفراغ السفلي كان 25px (خارج سلّم المسافات المعتمد) — الأقرب spacing-3xl = 24px */ .site-footer { padding-block: 40px 24px; } /* الجوال (0–599px): الحشو الجانبي 16px */ @media (max-width: 599px) { .site-footer .footer-main-wrapper, .site-footer .date-with-logo { padding-inline: 16px !important; } } /* ---------- 8.2 صف الحقوق والشعارات في سطر واحد (كما في المرجع) ---------- السبب: القسمان كانا فوق بعض، والصور عليها float من كلاس align-right. */ .site-footer .date-with-logo { display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-block-start: 32px; } .site-footer .date-with-logo > .region { margin: 0 !important; padding: 0 !important; } /* عمود النص: الحقوق في الأعلى وتاريخ التعديل تحته بمسافة 8px */ .site-footer .region--footer-fourth { display: flex; flex-direction: column; gap: 8px; } .site-footer .region--footer-fourth p { margin: 0 !important; } .site-footer .region--footer-fourth p.para { display: none !important; } /* فقرة فارغة */ /* الشعارات بجانب بعض بمسافة 16px بدل float */ .site-footer .logo-icon-wrapper { display: flex !important; align-items: center; gap: 16px; } .site-footer .logo-icon-wrapper p, .site-footer .logo-icon-wrapper .footer-logo, .site-footer .logo-icon-wrapper a { margin: 0 !important; padding: 0 !important; display: inline-flex; } .site-footer .logo-icon-wrapper img, .site-footer .logo-icon-wrapper img.align-right { float: none !important; margin: 0 !important; display: block; } /* الجوال: العمودان فوق بعض */ @media (max-width: 599px) { .site-footer .date-with-logo { flex-direction: column; align-items: flex-start; } } /* ---------- 8.3 تصفير هوامش دروبال داخل عمود الحقوق ---------- الفراغ الزائد كان من هوامش الكتل الداخلية، وليس من gap. */ .site-footer .region--footer-fourth, .site-footer .region--footer-fourth * { margin-block: 0 !important; } .site-footer .region--footer-fourth > div { padding: 0 !important; } .site-footer .region--footer-fourth .views-element-container, .site-footer .region--footer-fourth .views-row, .site-footer .region--footer-fourth .views-field { margin: 0 !important; padding: 0 !important; } /* توسيط العمودين عموديًا (مثبّت بـ !important) */ .site-footer .date-with-logo { align-items: center !important; } /* ---------- 8.4 حصر صف الحقوق والشعارات داخل حاوية 1280px ---------- min-width كان يلغي max-width — نفس سبب مشكلة 8.1. تنبيه تداخل: هذه القاعدة بعد قاعدة الجوال في 8.1 وبنفس الأولوية، لذلك يبقى الحشو الجانبي لصف الحقوق 32px حتى على الجوال (قاعدة الجوال تؤثر فعليًا على .footer-main-wrapper فقط). */ .site-footer .date-with-logo { box-sizing: border-box !important; min-width: 0 !important; /* ← المفتاح: بدونه max-width بلا أثر */ width: 100% !important; max-width: 1280px !important; padding-inline: 32px !important; margin-inline: auto !important; } /* توحيد ارتفاع الشعارات: شعار رؤية 2030 بارتفاع 52px */ .site-footer .logo-icon-wrapper img[alt="رؤية السعودية 2030"] { height: 52px !important; width: auto !important; } /* ========================================================================== 9. الأكورديون الحكومي (gov-accordion) -------------------------------------------------------------------------- الشريط العلوي الذي يعرض بيانات التسجيل لدى الهيئة ورابط "كيف تتحقق". مطابق لشكل الأكورديون في المرجع: عنوان داكن، رابط أخضر، سهم أخضر يدور 180° عند الفتح. ========================================================================== */ /* السطر العلوي (الأيقونة + الرأس) */ .gov-accordion > p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; } /* الأيقونة في بداية السطر */ .gov-accordion > p > img { flex: 0 0 auto; margin: 0; padding: 0; } /* رأس الأكورديون — كامل المنطقة قابلة للنقر */ .gov-accordion .accordion-header { display: flex; align-items: center; width: 100%; min-width: 0; margin: 0; padding: 16px 2px 16px 16px; border: 0; background: transparent; cursor: pointer; } /* العنوان الرئيسي — مطابق للمواصفات المستخرجة من المرجع */ .gov-accordion .accordion-header .title { display: block; margin: 0 0 0 10px; padding: 0; font-family: "boldFont"; font-size: 14px; font-weight: 500; line-height: 1.2; color: #161616; } /* رابط "كيف تتحقق" — أخضر، ويتحول لأخضر فاتح مسطّر عند التمرير */ .gov-accordion .accordion-header .toggle { display: block; margin: 0 !important; padding: 0 !important; color: #1B8354; font-family: "regularFont"; font-size: 14px; font-weight: 400 !important; line-height: 21px; text-decoration: none; cursor: pointer; } /* التمرير */ .gov-accordion .accordion-header:hover .toggle { color: #54C08A; text-decoration: underline; text-decoration-color: #54C08A; } /* السهم — نفس رسم السهم الأصلي، لكن بالأخضر عبر القناع (mask) */ .gov-accordion .accordion-header .arrow { display: block; width: 13px !important; height: 8px !important; margin: 0 3px 0 0 !important; padding: 0 !important; flex: 0 0 auto; /* إلغاء السهم الأسود */ background-image: none !important; /* نفس شكل السهم الحالي ولكن باللون الأخضر */ background-color: #1B8354 !important; -webkit-mask-image: url("../icons/menu-arrow.svg"); mask-image: url("../icons/menu-arrow.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; cursor: pointer; transition: transform 0.3s ease; } /* السهم: الأكورديون مغلق */ .gov-accordion .accordion-header:not(.active) .arrow { transform: rotate(0deg); } /* السهم: الأكورديون مفتوح (يدور 180°) */ .gov-accordion .accordion-header.active .arrow { transform: rotate(180deg); } /* ========================================================================== 10. الأزرار — تكملة المطابقة مع كود المنصات (المعيار 12) -------------------------------------------------------------------------- المرجع: مقاسات md وlg من Storybook (التفاصيل في claude/مواصفة-الزر-كود-المنصات.md وclaude/button-audit.md) هذا القسم يكمل ما ينقص فقط، ولا يكرر ما صُحّح في الأقسام 1 و3 و6. القواعد مكتوبة بصيغة button.class لتساوي أولوية قواعد القسم 3، وبما أنها بعدها في الملف فهي التي تغلب. زر "Apply" في فلتر الأخبار مستبعد عمدًا. المتغيرات أدناه مشتركة لهذا القسم (مقاسات md وlg والألوان). المحتوى: 10.1 "قيّم تجربتك الرقمية" + "إرسال التقييم" 10.2 زر إغلاق نافذة التقييم 10.3 تقييم الصفحة (نعم / لا) 10.4 زر "تقديم" في نموذج طلب التصريح 10.5 زر البحث 10.6 رسالة خطأ التقييم (تكرار — انظر 7.1) 10.7 رسالة نجاح التقييم (تكرار أقدم — انظر 7.2) ========================================================================== */ :root { --dga-btn-primary-default: #1b8354; --dga-btn-primary-hover: #166a45; --dga-btn-primary-pressed: #104631; --dga-btn-radius: 4px; --dga-btn-gap: 4px; --dga-btn-font-weight: 500; --dga-btn-md-height: 32px; --dga-btn-md-padding-x: 12px; --dga-btn-md-font-size: 14px; --dga-btn-md-line-height: 20px; --dga-btn-lg-height: 40px; --dga-btn-lg-padding-x: 16px; --dga-btn-lg-font-size: 16px; --dga-btn-lg-line-height: 24px; } /* ---------- 10.1 "قيّم تجربتك الرقمية" + "إرسال التقييم" ---------- التمرير موجود مسبقًا في 3.7. هنا فقط الناقص: حجم الخط ووزنه (md = 14px / 500) + حالة الضغط + التركيز بلوحة المفاتيح. */ .rating-open-btn, .rating-submit-btn { font-size: var(--dga-btn-md-font-size) !important; font-weight: var(--dga-btn-font-weight) !important; } /* صيغة button.class تساوي أولوية قاعدة التمرير في 3.7، وموقعها المتأخر يجعل لون الضغط يظهر حتى أثناء التمرير */ button.rating-open-btn:active, button.rating-submit-btn:active { background-color: var(--dga-btn-primary-pressed) !important; } button.rating-open-btn:focus-visible, button.rating-submit-btn:focus-visible { outline: 2px solid #0c111b; outline-offset: 2px; } /* ---------- 10.2 زر إغلاق نافذة التقييم ---------- القيم منقولة من كود HTML/CSS الموقع المرجعي (كود المنصات): - الزوايا 6px — الخط 16px بوزن 400 - التمرير #F3F4F6 — الضغط #E5E7EB (بدون حد إضافي) - التركيز: إطار #161616 بسماكة 2px - المقاس: ارتفاع 36px، والعرض حسب المحتوى الأيقونة: الزر يحتوي أيقونته الأصلية من الموقع، وهذا القسم لا يضيف أي أيقونة. لتعديل مقاسها لاحقًا يجب أولًا معرفة كلاسها بالفحص. تنبيه تداخل: القاعدة 3.8 ما زالت فعّالة — أثناء التمرير والتركيز تصبح الزوايا 4px بدل 6px. */ button.rating-close-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: none; border-radius: 6px; background-color: transparent; color: #161616; font-size: 16px; font-weight: 400; cursor: pointer; } button.rating-close-btn:hover { background-color: #F3F4F6 !important; } button.rating-close-btn:active { background-color: #E5E7EB !important; } button.rating-close-btn:focus-visible { outline: 2px solid #161616; outline-offset: 2px; } /* ---------- 10.3 تقييم الصفحة (نعم / لا) — page-feedback-btn ---------- زر أساسي أخضر كامل بمقاس md، مع كل الحالات. */ .page-feedback-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--dga-btn-gap); height: var(--dga-btn-md-height); padding: 0 var(--dga-btn-md-padding-x) !important; border-radius: var(--dga-btn-radius) !important; border: none !important; background-color: var(--dga-btn-primary-default) !important; color: #ffffff !important; font-size: var(--dga-btn-md-font-size) !important; font-weight: var(--dga-btn-font-weight) !important; line-height: var(--dga-btn-md-line-height); cursor: pointer !important; } .page-feedback-btn:hover { background-color: var(--dga-btn-primary-hover) !important; } .page-feedback-btn:active { background-color: var(--dga-btn-primary-pressed) !important; } .page-feedback-btn:focus-visible { outline: 2px solid #0c111b; outline-offset: 2px; } /* ---------- 10.4 زر "تقديم" في نموذج طلب التصريح — webform-button--submit ---------- الأخطاء الأصلية (من تنسيق موديول الويبفورم في دروبال): اللون #067647 بدل #1b8354، والوزن 600 بدل 500. التصحيح: اللون الرسمي، الوزن 500، ومقاس lg (ارتفاع 40px / حشو 16px). */ .webform-button--submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--dga-btn-gap); height: var(--dga-btn-lg-height) !important; padding: 0 var(--dga-btn-lg-padding-x) !important; border-radius: var(--dga-btn-radius) !important; border: none !important; background-color: var(--dga-btn-primary-default) !important; /* يصحح #067647 */ color: #ffffff !important; font-size: var(--dga-btn-lg-font-size) !important; font-weight: var(--dga-btn-font-weight) !important; /* يصحح 600 -> 500 */ line-height: var(--dga-btn-lg-line-height); cursor: pointer !important; } .webform-button--submit:hover { background-color: var(--dga-btn-primary-hover) !important; } .webform-button--submit:active { background-color: var(--dga-btn-primary-pressed) !important; } .webform-button--submit:focus-visible { outline: 2px solid #0c111b; outline-offset: 2px; } /* ---------- 10.5 زر البحث — مقاس lg ---------- القيم الأصلية المقاسة (getComputedStyle على الزر edit-submit-search-content): خط 12px/18px — حشو ~8px 16px — ارتفاع ~34px المطلوب مقاس lg: خط 16px/24px — ارتفاع 40px — حشو أفقي 16px. اللون (#1b8354) والوزن (500) كانا صحيحين فلم يُمسّا. المحدد مقيّد بنموذج البحث حتى لا يؤثر على أزرار أخرى تحمل الكلاسات العامة نفسها. دلالة التمرير في 3.5. */ #views-exposed-form-search-content-page-1 .form-actions input.form-submit { display: inline-flex; align-items: center; justify-content: center; height: var(--dga-btn-lg-height) !important; padding: 0 var(--dga-btn-lg-padding-x) !important; font-size: var(--dga-btn-lg-font-size) !important; line-height: var(--dga-btn-lg-line-height) !important; } /* ---------- 10.6 رسالة خطأ التقييم ---------- تكرار لـ 7.1 بلون ثابت، وهذه النسخة هي التي تغلب. */ .rating-error-message { color: #b42318 !important; font-family: "IBM Plex Sans Arabic", inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; margin: 8px 0 0 0 !important; } /* ---------- 10.7 رسالة نجاح التقييم (نسخة أقدم) ---------- كُتبت قبل 7.2، لكنها أسفل الملف فتغلب بعض قيمه (التفصيل في 7.2). .rating-success-score غير مستخدم حاليًا في الجافاسكربت. */ .rating-success-message { display: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 12px; font-family: "IBM Plex Sans Arabic", sans-serif; } .rating-success-info { display: flex; align-items: center; gap: 8px; } .rating-success-icon { color: #067647; border: 2px solid #067647; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; font-weight: 700; flex-shrink: 0; } .rating-success-text { color: #161616; font-size: 14px; font-weight: 500; } .rating-success-value { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; } .rating-success-score { color: #161616; font-weight: 700; font-size: 14px; } /* ========================================================================== 11. لوحة تقييم الصفحة (page feedback) — الأسباب والتعليق -------------------------------------------------------------------------- اللوحة التي تظهر بعد الضغط على "نعم / لا": قائمة الأسباب، مربع التعليق، الجنس، والتذييل. لا تمس أزرار نعم/لا نفسها (.page-feedback-btn) — تلك في 10.3. ========================================================================== */ .page-feedback-block { font-family: "IBM Plex Sans Arabic", sans-serif; display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; } /* ---------- الصف العلوي: السؤال والأزرار وزر الإغلاق ---------- */ .page-feedback-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; width: 100%; } .page-feedback-main { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .page-feedback-success-icon { display: inline-flex; align-items: center; flex-shrink: 0; } /* أي عنصر عليه الخاصية hidden يُخفى فعليًا */ .page-feedback-success-icon[hidden], .page-feedback-success-text[hidden], .page-feedback-close[hidden], .page-feedback-panel[hidden], .page-feedback-reason-list[hidden], .page-feedback-question[hidden], .page-feedback-buttons[hidden], .page-feedback-text[hidden] { display: none !important; } .page-feedback-question, .page-feedback-success-text { color: #161616; font-size: 16px; font-weight: 400; } .page-feedback-buttons { display: flex; gap: 16px; } .page-feedback-aside { display: flex; align-items: center; } .page-feedback-text { color: #161616; font-size: 14px; font-weight: 400; } /* زر الإغلاق — نمط subtle من كود المنصات */ .page-feedback-close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: none; border-radius: 4px; background-color: transparent; color: #161616; font-family: inherit; font-size: 16px; font-weight: 400; cursor: pointer; } .page-feedback-close:hover { background-color: #f3f4f6; } .page-feedback-close:active { background-color: #e5e7eb; } .page-feedback-close:focus-visible { outline: 2px solid #161616; outline-offset: 2px; } /* ---------- اللوحة: الأسباب والتعليق ---------- */ .page-feedback-panel { display: flex; flex-direction: column; gap: 32px; width: 100%; } .page-feedback-panel-row { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; } /* الأسباب */ .page-feedback-reasons { flex: 1 1 320px; } .page-feedback-reasons-title { color: #161616; font-size: 16px; font-weight: 600; margin: 0 0 16px 0; } .page-feedback-hint { color: #6c737f; font-size: 14px; font-weight: 400; } .page-feedback-reason-list { display: flex; flex-direction: column; gap: 16px; } .page-feedback-check, .page-feedback-radio { display: inline-flex; align-items: center; gap: 8px; color: #161616; font-size: 16px; font-weight: 400; cursor: pointer; margin: 0; } .page-feedback-check input[type="checkbox"], .page-feedback-radio input[type="radio"] { width: 20px; height: 20px; accent-color: #1b8354; margin: 0; cursor: pointer; flex-shrink: 0; } /* التعليق — مقاسات المعيار 24 (منطقة النص): زوايا 4px، حشو 16px، مسافة العنوان 8px */ .page-feedback-comment { display: flex; flex-direction: column; gap: 8px; flex: 1 1 360px; max-width: 480px; } .page-feedback-label { color: #161616; font-size: 14px; font-weight: 400; } .page-feedback-textarea { width: 100%; min-height: 96px; box-sizing: border-box; padding: 16px; border: 1px solid #d2d6db; border-radius: 4px; background-color: #ffffff; color: #161616; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 24px; resize: vertical; } .page-feedback-textarea::placeholder { color: #6c737f; } .page-feedback-textarea:hover { border-color: #9da4ae; } .page-feedback-textarea:focus { outline: none; border-color: #161616; box-shadow: 0 0 0 2px rgba(22, 22, 22, 0.12); } /* اختيار الجنس */ .page-feedback-gender { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .page-feedback-gender-title { color: #161616; font-size: 16px; font-weight: 600; margin: 0; } /* التذييل */ .page-feedback-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-feedback-footer-text { color: #161616; font-size: 16px; font-weight: 400; margin: 0; } .page-feedback-footer-text a { color: #1b8354; text-decoration: underline; } .page-feedback-footer-text a:hover { color: #166a45; } /* ---------- الجوال (حتى 767px): العناصر فوق بعض ---------- */ @media (max-width: 767px) { .page-feedback-top, .page-feedback-main, .page-feedback-footer { flex-direction: column; align-items: flex-start; } .page-feedback-comment { max-width: 100%; } } /* ========================================================================== 12. نموذج "انضم إلينا" (التقديم على التدريب) -------------------------------------------------------------------------- كان ملفًا مستقلًا (dga-career-form.css — الإصدار 4) ثم دُمج هنا. الجزء البرمجي في dga-fixes.js (الجزء 4). النطاق: كلاس .dga-career-form يضيفه الجافاسكربت على النموذج الذي يحتوي حقل "التخصص"، فلا يمس هذا القسم أي نموذج آخر. يغطي: - المعيار 34 (المدخلات) : الحقول النصية - المعيار 13 (القائمة المنسدلة) : حقول الاختيار - المعيار 20 (رفع الملفات) : الشكل والحالات ورسائل الفشل - رسائل الخطأ العربية أسفل كل حقل القيم من Storybook مباشرة: - القائمة المنسدلة: إطار 1px #9da4ae، زوايا 4px، حشو أفقي 16px، خط 16px/24px، أيقونة 20px بلون #161616 - رفع الملفات : زوايا 4px، خلفية #f3f4f6، حشو 24px، أيقونة 24px، نص التعليمات 16px/500/24px، نص الصيغ 12px/400/18px المحتوى: 12.1 الحقول النصية 12.2 القائمة المنسدلة الأصلية (احتياطية) 12.3 رفع الملفات 12.4 حالة الخطأ 12.5 رسالة الخطأ أسفل الحقل 12.6 زر "إرسال الطلب" 12.7 إضافات لاحقة: خطأ حقل الملف + خيارات القائمة الأصلية 12.8 القائمة المنسدلة المخصصة (المستخدمة فعليًا) 12.9 تثبيت مقاسات الأيقونات ⚠️ ترتيب الحالات مقصود: الأساس ← التركيز ← الضغط ← التمرير ← الخطأ. ========================================================================== */ /* متغيرات الألوان — محصورة داخل نموذج "انضم إلينا" */ form.dga-career-form { --dga-border-default: #9da4ae; /* form-field-border-default */ --dga-border-hovered: #384250; /* form-field-border-hovered */ --dga-border-error: #b42318; /* form-field-border-error */ --dga-border-subtle: #d2d6db; /* إطار لوحة الخيارات في ستوري بوك */ --dga-bar: #0c111b; /* form-field-border-pressed */ --dga-bg-default: #ffffff; /* form-field-background-default */ --dga-bg-pressed: #f3f4f6; /* form-field-background-pressed */ --dga-bg-surface: #f3f4f6; /* خلفية منطقة رفع الملفات */ --dga-text-default: #161616; --dga-text-focused: #384250; --dga-text-muted: #6c727e; /* لون النص التلميحي */ --dga-text-help: #384250; /* لون النص المساعد */ --dga-text-error: #b42318; --dga-font: "IBM Plex Sans Arabic", sans-serif; --dga-shadow-md: 0 2px 4px -2px rgba(16, 24, 40, .06), 0 4px 8px -2px rgba(16, 24, 40, .1); } /* -------------------------------------------------------------------------- 12.1 الحقول النصية (المعيار 34) نفس طريقة نموذج "تواصل معنا" مع تغيير النطاق فقط. الشريط السفلي مرسوم كخلفية متدرّجة على الحقل نفسه، لأن غلاف الحقل يحتوي رسالة الخطأ أيضًا فلا يصلح لتثبيت ::after في أسفله. -------------------------------------------------------------------------- */ form.dga-career-form .js-form-item input.form-text, form.dga-career-form .js-form-item input.form-email, form.dga-career-form .js-form-item input.form-tel, form.dga-career-form .js-form-item input.form-number, form.dga-career-form .js-form-item .iti input, form.dga-career-form .js-form-item textarea.form-textarea { border-color: var(--dga-border-default) !important; background-color: var(--dga-bg-default) !important; color: var(--dga-text-default); background-image: linear-gradient(var(--dga-bar), var(--dga-bar)) !important; background-repeat: no-repeat !important; background-origin: border-box !important; background-clip: border-box !important; background-position: bottom center !important; background-size: 0 2px; box-shadow: none !important; transition: background-size .2s ease-in-out, border-color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out; } /* منطقة النص: إزالة الفراغ الصغير أسفلها */ form.dga-career-form .js-form-item textarea.form-textarea { display: block; vertical-align: top; } /* التركيز — الشريط يمتد بالكامل مع ظل shadow-md */ form.dga-career-form .js-form-item input.form-text:focus, form.dga-career-form .js-form-item input.form-email:focus, form.dga-career-form .js-form-item input.form-tel:focus, form.dga-career-form .js-form-item input.form-number:focus, form.dga-career-form .js-form-item .iti input:focus, form.dga-career-form .js-form-item textarea.form-textarea:focus { background-color: var(--dga-bg-default) !important; background-size: 100% 2px !important; color: var(--dga-text-focused); box-shadow: var(--dga-shadow-md) !important; outline: none !important; } /* لون الإطار عند التركيز يبقى الافتراضي — ما لم يكن الماوس فوقه، حتى لا يُلغى تغميق الإطار في حالة التمرير */ form.dga-career-form .js-form-item input.form-text:focus:not(:hover), form.dga-career-form .js-form-item input.form-email:focus:not(:hover), form.dga-career-form .js-form-item input.form-tel:focus:not(:hover), form.dga-career-form .js-form-item input.form-number:focus:not(:hover), form.dga-career-form .js-form-item .iti input:focus:not(:hover), form.dga-career-form .js-form-item textarea.form-textarea:focus:not(:hover) { border-color: var(--dga-border-default) !important; } /* الضغط — الخلفية وحدها تغمق */ form.dga-career-form .js-form-item input.form-text:active, form.dga-career-form .js-form-item input.form-email:active, form.dga-career-form .js-form-item input.form-tel:active, form.dga-career-form .js-form-item input.form-number:active, form.dga-career-form .js-form-item .iti input:active, form.dga-career-form .js-form-item textarea.form-textarea:active, form.dga-career-form .js-form-item input.dga-pressed, form.dga-career-form .js-form-item textarea.dga-pressed { background-color: var(--dga-bg-pressed) !important; } /* التمرير — أخيرًا ليغلب التركيز والضغط في لون الإطار */ form.dga-career-form .js-form-item input.form-text:hover, form.dga-career-form .js-form-item input.form-email:hover, form.dga-career-form .js-form-item input.form-tel:hover, form.dga-career-form .js-form-item input.form-number:hover, form.dga-career-form .js-form-item .iti input:hover, form.dga-career-form .js-form-item textarea.form-textarea:hover { border-color: var(--dga-border-hovered) !important; color: var(--dga-text-default); } /* -------------------------------------------------------------------------- 12.2 القائمة المنسدلة الأصلية — تنسيق احتياطي (المعيار 13) ملاحظة: في الوضع الطبيعي يُخفى عنصر select الأصلي وتظهر القائمة المخصصة (12.8). هذا التنسيق يظهر فقط إذا تعطّل الجافاسكربت. appearance:none يلغي سهم المتصفح، ونرسم بدله سهم كود المنصات (20px، #161616) كطبقة خلفية أولى، والشريط السفلي كطبقة ثانية. ترتيب القيم في كل خصائص الخلفية يجب أن يتطابق. السهم على اليسار لأن الصفحة عربية (RTL)، وآخر القسم قاعدة تنقله لليمين في الصفحة الإنجليزية. -------------------------------------------------------------------------- */ form.dga-career-form .js-form-item select.form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; width: 100%; border: 1px solid var(--dga-border-default) !important; border-radius: 4px !important; background-color: var(--dga-bg-default) !important; color: var(--dga-text-default); font-family: var(--dga-font); font-size: 16px; line-height: 24px; font-weight: 400; padding-inline-start: 16px; padding-inline-end: 44px; /* 16 حافة + 20 أيقونة + 8 فجوة */ cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(var(--dga-bar), var(--dga-bar)) !important; background-repeat: no-repeat, no-repeat !important; background-origin: border-box, border-box !important; background-clip: border-box, border-box !important; background-position: left 16px center, bottom center !important; background-size: 20px 20px, 0 2px; box-shadow: none !important; transition: background-size .2s ease-in-out, border-color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out; } /* النص التلميحي "- اختر -" بلون أفتح. ملاحظة: كلاس dga-select-empty لا يضيفه الجافاسكربت الحالي، فهذه القاعدة بلا أثر حاليًا (القائمة المخصصة تستخدم is-placeholder في 12.8). */ form.dga-career-form .js-form-item select.form-select.dga-select-empty { color: var(--dga-text-muted); } /* التركيز */ form.dga-career-form .js-form-item select.form-select:focus { background-color: var(--dga-bg-default) !important; background-size: 20px 20px, 100% 2px !important; box-shadow: var(--dga-shadow-md) !important; outline: none !important; } form.dga-career-form .js-form-item select.form-select:focus:not(:hover) { border-color: var(--dga-border-default) !important; } /* الضغط */ form.dga-career-form .js-form-item select.form-select:active, form.dga-career-form .js-form-item select.form-select.dga-pressed { background-color: var(--dga-bg-pressed) !important; } /* التمرير */ form.dga-career-form .js-form-item select.form-select:hover { border-color: var(--dga-border-hovered) !important; } /* معطّل */ form.dga-career-form .js-form-item select.form-select:disabled { background-color: var(--dga-bg-pressed) !important; border-color: var(--dga-border-subtle) !important; color: var(--dga-text-muted); cursor: not-allowed; opacity: 1; } /* لوحة الخيارات الأصلية: المتصفح لا يسمح بتنسيقها كاملة، لكن هذه الخصائص تُحترم في أغلب المتصفحات */ form.dga-career-form .js-form-item select.form-select option { font-family: var(--dga-font); font-size: 16px; color: var(--dga-text-default); background-color: var(--dga-bg-default); padding: 8px; } /* الصفحة الإنجليزية (LTR): السهم ينتقل لليمين */ [dir="ltr"] form.dga-career-form .js-form-item select.form-select { background-position: right 16px center, bottom center !important; } /* -------------------------------------------------------------------------- 12.3 رفع الملفات (المعيار 20) دروبال يرسم مع زر رفع مخفي يعمل بـ AJAX. لا نلمس هذه الآلية إطلاقًا — نحسّن الشكل فقط، فأسوأ احتمال أن يبقى الشكل كما هو دون أن يتأثر الرفع. -------------------------------------------------------------------------- */ form.dga-career-form .js-form-managed-file input.form-file { box-sizing: border-box; width: 100%; border: 1px solid var(--dga-border-default) !important; border-radius: 4px !important; background-color: var(--dga-bg-default) !important; color: var(--dga-text-default); font-family: var(--dga-font); font-size: 14px; line-height: 20px; padding: 10px 16px; cursor: pointer; box-shadow: none !important; transition: border-color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out; } form.dga-career-form .js-form-managed-file input.form-file:hover { border-color: var(--dga-border-hovered) !important; } form.dga-career-form .js-form-managed-file input.form-file:focus { border-color: var(--dga-bar) !important; box-shadow: var(--dga-shadow-md) !important; outline: none !important; } form.dga-career-form .js-form-managed-file input.form-file.dga-pressed { background-color: var(--dga-bg-pressed) !important; } /* زر "تصفح الملفات" داخل الحقل — مكتوب مرتين (صيغة عامة + صيغة webkit) لأن المتصفحات تختلف. لا يصح دمجهما في قاعدة واحدة، لأن المتصفح يتجاهل القاعدة كلها إذا لم يفهم أحد المحددين. */ form.dga-career-form .js-form-managed-file input.form-file::file-selector-button { font-family: var(--dga-font); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--dga-bar); background-color: var(--dga-bg-surface); border: 1px solid var(--dga-border-subtle); border-radius: 4px; padding: 6px 16px; margin-inline-end: 16px; cursor: pointer; transition: background-color .2s ease-in-out; } form.dga-career-form .js-form-managed-file input.form-file::-webkit-file-upload-button { font-family: var(--dga-font); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--dga-bar); background-color: var(--dga-bg-surface); border: 1px solid var(--dga-border-subtle); border-radius: 4px; padding: 6px 16px; margin-inline-end: 16px; cursor: pointer; transition: background-color .2s ease-in-out; } form.dga-career-form .js-form-managed-file input.form-file:hover::file-selector-button { background-color: #e5e7eb; } form.dga-career-form .js-form-managed-file input.form-file:hover::-webkit-file-upload-button { background-color: #e5e7eb; } /* النص المساعد تحت حقل الملف (الحجم الأقصى والصيغ) — يضيفه الجافاسكربت. شرط نقطة التحقق 1 في المعيار 20. */ form.dga-career-form .dga-file-help { margin: 8px 0 0; color: var(--dga-text-help); font: 400 12px/18px var(--dga-font); } /* حالة الخطأ على حقل الملف */ form.dga-career-form .js-form-managed-file input.form-file.error, form.dga-career-form .js-form-managed-file input.form-file.error:hover, form.dga-career-form .js-form-managed-file input.form-file.error:focus { border-color: var(--dga-border-error) !important; } /* -------------------------------------------------------------------------- 12.4 حالة الخطأ آخر قواعد الحالات حتى تغلب ما قبلها. السلوك نفس الحالة العادية لكن بالأحمر: إطار أحمر دائمًا، شريط أحمر يمتد عند التركيز، وخلفية تغمق عند الضغط. لماذا القائمة طويلة؟ قاعدة التركيز في 12.1 تستخدم :focus:not(:hover)، و:hover داخل :not يُحتسب في الأولوية، فنكرر الصيغة نفسها هنا لتتساوى الأولوية وتغلب قاعدة الخطأ بموقعها الأخير. -------------------------------------------------------------------------- */ form.dga-career-form .js-form-item input.error, form.dga-career-form .js-form-item textarea.error, form.dga-career-form .js-form-item .iti input.error, form.dga-career-form .js-form-item input.error:hover, form.dga-career-form .js-form-item textarea.error:hover, form.dga-career-form .js-form-item .iti input.error:hover, form.dga-career-form .js-form-item input.error:focus, form.dga-career-form .js-form-item textarea.error:focus, form.dga-career-form .js-form-item .iti input.error:focus, form.dga-career-form .js-form-item input.error:focus:not(:hover), form.dga-career-form .js-form-item textarea.error:focus:not(:hover), form.dga-career-form .js-form-item .iti input.error:focus:not(:hover), form.dga-career-form .js-form-item input.error:active, form.dga-career-form .js-form-item textarea.error:active, form.dga-career-form .js-form-item .error.dga-pressed { border-color: var(--dga-border-error) !important; background-image: linear-gradient(var(--dga-border-error), var(--dga-border-error)) !important; } /* خطأ + تركيز: الشريط الأحمر يمتد بالكامل */ form.dga-career-form .js-form-item input.error:focus, form.dga-career-form .js-form-item textarea.error:focus, form.dga-career-form .js-form-item .iti input.error:focus { background-size: 100% 2px !important; } /* القائمة الأصلية في حالة الخطأ: السهم يبقى، والشريط يصير أحمر */ form.dga-career-form .js-form-item select.form-select.error, form.dga-career-form .js-form-item select.form-select.error:hover, form.dga-career-form .js-form-item select.form-select.error:focus, form.dga-career-form .js-form-item select.form-select.error:focus:not(:hover), form.dga-career-form .js-form-item select.form-select.error:active { border-color: var(--dga-border-error) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(var(--dga-border-error), var(--dga-border-error)) !important; } form.dga-career-form .js-form-item select.form-select.error:focus { background-size: 20px 20px, 100% 2px !important; } /* خطأ + ضغط: الخلفية تغمق كالمعتاد */ form.dga-career-form .js-form-item input.error:active, form.dga-career-form .js-form-item textarea.error:active, form.dga-career-form .js-form-item select.form-select.error:active, form.dga-career-form .js-form-item .error.dga-pressed { background-color: var(--dga-bg-pressed) !important; } /* -------------------------------------------------------------------------- 12.5 رسالة الخطأ أسفل الحقل (ينشئها الجافاسكربت) -------------------------------------------------------------------------- */ form.dga-career-form .dga-error-message { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--dga-text-error); font: 400 14px/20px var(--dga-font); } form.dga-career-form .dga-error-message svg { flex: 0 0 auto; width: 16px; height: 16px; } /* رسالة دروبال الأصلية (إنجليزية وغير منسّقة) — نخفيها لأن رسالتنا العربية تحل محلها */ form.dga-career-form .form-item--error-message { display: none !important; } /* -------------------------------------------------------------------------- 12.6 زر "إرسال الطلب" — التمرير والتركيز #166a45 = primary-700 (button-background-primary-hovered). محصور داخل .form-actions حتى لا يمس أي زر آخر في الصفحة. -------------------------------------------------------------------------- */ form.dga-career-form .form-actions input.form-submit:hover, form.dga-career-form .form-actions input.form-submit:focus { background-color: #166a45 !important; cursor: pointer; } /* إيقاف الحركة لمن فعّل خيار "تقليل الحركة" في نظامه */ @media (prefers-reduced-motion: reduce) { form.dga-career-form .js-form-item input, form.dga-career-form .js-form-item select, form.dga-career-form .js-form-item textarea, form.dga-career-form .js-form-managed-file input.form-file { transition: none; } } /* -------------------------------------------------------------------------- 12.7 إضافات لاحقة يجب أن تبقى بعد 12.1–12.6 حتى تغلبها وتغلب تنسيقات الثيم. -------------------------------------------------------------------------- */ /* 12.7-أ — حقل الملف في حالة الخطأ الثيم يلوّن خلفية أي عنصر عليه كلاس error بالأحمر الغامق، فيصير الحقل كتلة حمراء. المعيار يطلب إطارًا أحمر فقط، فنلغي الخلفية صراحة. */ form.dga-career-form .js-form-managed-file input.form-file.error, form.dga-career-form .js-form-managed-file input.form-file.error:hover, form.dga-career-form .js-form-managed-file input.form-file.error:focus, form.dga-career-form .js-form-managed-file input.form-file.error:active { background-color: var(--dga-bg-default) !important; background-image: none !important; color: var(--dga-text-default) !important; border: 1px solid var(--dga-border-error) !important; box-shadow: none !important; } /* زر "تصفح الملفات" يبقى محايدًا ولا يتأثر بحالة الخطأ (صيغتان لنفس سبب 12.3) */ form.dga-career-form .js-form-managed-file input.form-file.error::file-selector-button { background-color: var(--dga-bg-surface); color: var(--dga-bar); border: 1px solid var(--dga-border-subtle); } form.dga-career-form .js-form-managed-file input.form-file.error::-webkit-file-upload-button { background-color: var(--dga-bg-surface); color: var(--dga-bar); border: 1px solid var(--dga-border-subtle); } /* تثبيت لون رسالة الخطأ، لأن الثيم يفرض لونًا آخر على محتوى الخطأ */ form.dga-career-form .dga-error-message, form.dga-career-form .dga-error-message span { color: var(--dga-text-error) !important; } /* 12.7-ب — خيارات القائمة الأصلية (احتياطية مثل 12.2) الخصائص المدعومة على