نسّق الأداة بـ CSS

تُعرَض الأداة في جذر ظلّ مفتوح وتعطيك طريقتين لتنسيقها من صفحتك: أجزاء الظلّ (استهدف عنصرًا بـ ::part()) وخصائص CSS المخصّصة (تجاوز لونًا بـ --cpt-skin-*). للألوان والصياغة، آثِر تبييض العلامة (مبنيّ لذلك ويسافر مع كل تضمين)؛ وامتدّ إلى سطح CSS هنا حين تريد ضبطًا محلّيًّا للصفحة أو شيئًا لا يغطّيه تبييض العلامة.

هذا غلاف الأداة فقط. اللعبة تعمل في إطار معزول منفصل لا تستطيع تنسيقه من الصفحة.

استهداف جزء

اختر جزءًا على العنصر بـ ::part(name):

caputchin-widget::part(simple-checkbox) {
  border-radius: 1rem;
}

caputchin-game::part(game-frame) {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

بضع ملاحظات عملية:

جذر الظلّ مفتوح، فـ ::part() من صفحتك يعمل في كل متصفّح حديث.
بعض الأجزاء البنيوية (حاوية خانة الاختيار، إطار اللعبة) تحمل أنماط تخطيط أساسية مطبَّقة مضمَّنةً على العنصر. لتجاوز إحدى تلك الخصائص قد تحتاج !important، لأن نمطًا مضمَّنًا يتفوّق على قاعدة ::part() عادية. أجزاء النصّ والعلامة تُنسَّق بنظافة دونه.
الأجزاء هي سطح التنسيق؛ لا تكشف الأداة أسماء أصنافها الداخلية، وقد تتغيّر. نسّق بالجزء، لا بالحفر في شجرة الظلّ.

أجزاء على أداة خانة الاختيار

تظهر هذه على <caputchin-widget> (وعلى تراكب ما-قبل-اللعبة لـ <caputchin-game>، الذي يعيد استخدام كتلة العلامة نفسها).

الجزء	ما هو
`simple-checkbox`	حاوية خانة الاختيار الخارجية (حدّ، وخلفية، وحشو).
`simple-shield-box`	مؤشّر الدرع الذي يعرض حالة التحقّق.
`simple-shield-spinner`	قوس الدوّار داخل الدرع أثناء التحقّق.
`simple-checkbox-label`	نصّ الحالة (Verify، وVerifying، وVerified، وFailed).
`simple-brand`	كتلة العلامة (الشعار، والاسم، والوسم معًا).
`simple-brand-home`	الرابط الذي يلفّ الشعار والاسم، مشيرًا إلى رابط الرئيسية.
`simple-brand-logo`	صورة شعار العلامة.
`simple-brand-name`	نصّ علامة العلامة الكلامية.
`simple-brand-tag`	سطر وسم العلامة، رابط مشير إلى الرابط القانوني.

أجزاء على أداة اللعبة

تظهر هذه على <caputchin-game>، حول إطار اللعبة المعزول.

الجزء	ما هو
`game-frame`	إطار الهيكل حول اللعبة.
`game-iframe-slot`	الخانة التي تحمل إطار iframe المعزول للّعبة.
`game-slot`	حاوية العرض التي تُعرَض اللعبة فيها.
`game-badge-slot`	شارة العلامة المعروضة أسفل اللعبة.
`game-overlay-host`	مضيف تراكب ما-قبل-اللعبة (المعروض قبل بدء اللعبة).
`game-overlay-checkbox`	خانة الاختيار في ذلك التراكب.
`game-overlay-dialog`	حوار التراكب، في تخطيطي modal وfullscreen.
`game-overlay-close`	زرّ إغلاق التراكب، في تخطيطي modal وfullscreen فقط.

متغيّرات الألوان

تكتب الأداة ألوان غلافها المحلولة على العنصر المضيف كخصائص CSS مخصّصة مسمّاة --cpt-skin-<token>، وأنماطها الخاصة تقرؤها. تستطيع تجاوز لون واحد من نسق تنسيقك بضبط الخاصية على العنصر:

caputchin-widget {
  --cpt-skin-primary: #7c3aed !important;
  --cpt-skin-surface_bg: #faf5ff !important;
}

الـ !important يهمّ: تضبط الأداة هذه الخصائص مضمَّنةً على المضيف أثناء حلّها للمظهر، ونمط مضمَّن يتفوّق على قاعدة نسق تنسيق عادية، فيُتجاهَل تجاوز عاديّ. هذه ألوان الغلاف فقط؛ لا تبلغ اللعبة داخل الإطار.

هذا مخرج النجاة المحلّيّ للصفحة. لتغيير الألوان عبر كل تضمين، اضبط مظهرًا في تبييض العلامة بدلًا؛ يستخدم أسماء الرموز نفسها.

المتغيّر	ما الذي يلوّنه
`--cpt-skin-primary`	لون الإجراء الأساسي: الدرع النشط، وحلقة التركيز، وحالة التحقّق.
`--cpt-skin-primary_hover`	متغيّر التحويم للون الأساسي.
`--cpt-skin-surface_bg`	خلفية الأداة.
`--cpt-skin-text_primary`	النصّ الرئيسي.
`--cpt-skin-text_label`	نصّ وسم الحالة (Verify، وVerifying، وهكذا).
`--cpt-skin-text_muted`	النصّ الثانوي، بما فيه وسم العلامة.
`--cpt-skin-text_passive`	حدّ الدرع أثناء انتظار الأداة.
`--cpt-skin-separator`	الفاصل بين قطع العلامة في التخطيط المدمج.
`--cpt-skin-border`	حدّ الأداة.
`--cpt-skin-glyph`	رمز الصحّ أو التنبيه المرسوم داخل الدرع.
`--cpt-skin-error`	لون حالة الخطأ.
`--cpt-skin-shadow`	ظلّ الأداة المسقَط.
`--cpt-skin-modal_backdrop`	الخلفية وراء تراكب لعبة تخطيط modal.
`--cpt-skin-fullscreen_backdrop`	الخلفية وراء تراكب لعبة تخطيط fullscreen.
`--cpt-skin-close_btn_bg`	خلفية زرّ إغلاق تراكب fullscreen.
`--cpt-skin-brand_text`	لون نصّ رابط العلامة.
`--cpt-skin-brand_text_hover`	لون رابط العلامة عند التحويم.

شعار العلامة رمز مظهر منفصل (صورة، لا لون)، فيُبدَّل عبر تبييض العلامة، لا CSS. أسماء الرموز نفسها وافتراضياتها الفاتحة والداكنة في مرجع المخطّط.

متغيّرات --cpt-skin-* هذه تحمل مظهر غلاف الأداة فقط. اللعبة تستقبل مظهرها الخاص كقيم مسلَّمة إلى كودها (لا كمتغيّرات CSS، ولا تستطيع تنسيق لعبة من صفحتك)؛ انظر خصّص مظهر لعبة.

انظر أيضًا

بيّض علامة الأداة: غيّر الصياغة والألوان والروابط بالطريقة المدعومة.
كيف تحلّ الأداة لغتها ومظهرها: ما الذي يعرضه الغلاف قبل أن تنسّقه.
فلسفتنا: لماذا سطح التنسيق هذا مفتوح ومجاني على كل باقة.