تنسيقات CSS مخصصة

يُضاف حقل Custom CSS بعد أنماط Minaya الخاصة، لذا تتغلب قواعدك دون الحاجة إلى !important. يُعرض الودجت داخل shadow root، لذا لا يتسرب أي شيء هنا إلى صفحتك — ولا يمكن لتنسيقات CSS الخاصة بصفحتك أن تعيد تنسيق الودجت عن طريق الخطأ.

المسافة من الحافة

يُتحكم في الموضع عبر خاصيتين مخصصتين. عيّنهما على .aicb-root ليتبعهما كل من زر الإطلاق واللوحة:

.aicb-root {
  --aicb-offset-side: 40px;
  --aicb-offset-bottom: 32px;
}

القيم الافتراضية هي 20px لكل منهما. تُطبَّق هذه على سطح المكتب فقط — تُعيّن نقاط الفصل الخاصة بالجوال قيمها الأضيق الخاصة بها، لذا لا يمكن لإزاحة كبيرة على سطح المكتب أن تدفع الودجت خارج شاشة الهاتف.

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

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

/* Override just the two you care about. */
.aicb-root {
  --aicb-bot-bubble: #EEF2FF;
  --aicb-bot-text: #1E1B4B;
}

أي لون يُعيَّن هنا يتجاوز قيمة لوحة التحكم لأي نظام ألوان معروض حاليًا. في معظم الحالات لا تحتاج إلى ذلك — اضبط الألوان في مظهر الودجت وستختار Minaya نظام الألوان المناسب لك. الجأ إلى CSS عندما تريد شيئًا لا تغطيه المنتقيات، مثل تدرج لوني:

.aicb-header {
  background: linear-gradient(135deg, #14B8A6, #0EA5E9);
}

تحسم Minaya الوضع الفاتح أو الداكن في JavaScript بدلًا من تركه لاستعلام وسائط، لتتمكن من متابعة مبدّل السمة الخاص بموقعك وليس فقط نظام التشغيل. هذا يعني أن كتلة @media (prefers-color-scheme: dark) في تنسيقات CSS المخصصة الخاصة بك لن تتابع مبدّل موقعك — اجعل نطاق تجاوزات الوضع الداكن محصورًا في محدد خاص بك، أو اضبط الألوان لكل نظام ألوان في لوحة التحكم. راجع مطابقة سمة الصفحة.

مرجع الأصناف (Classes)

أمثلة

لوحة مربعة ومسطحة

.aicb-panel {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #d4d4d8;
}

لوحة أكبر على سطح المكتب

@media (min-width: 900px) {
  .aicb-panel { width: 400px; height: 560px; }
}

زر إطلاق مربع

.aicb-launcher {
  border-radius: 12px;
  width: 52px;
  height: 52px;
}

إعادة تنسيق الروابط في الردود

.aicb-link {
  color: #7c3aed;
  text-decoration-thickness: 2px;
}

إخفاء أزرار الملاحظات

.aicb-feedback { display: none; }

دقة المعاينة

تعكس معاينة لوحة التحكم العناصر الرئيسية — اللوحة والرأس والرسائل والفقاعات والتذييل وحقل الإدخال والإرسال، إضافة إلى زر الإطلاق وفقاعة الترحيب ونموذج ما قبل المحادثة — باستخدام نفس أسماء الأصناف، لذا تظهر معظم القواعد هناك.

إنها تقريب وليست الودجت الفعلي: فهي DOM عادي وليست shadow root، وتستثني مؤشر الكتابة وأزرار الملاحظات. كذلك لن تُظهر إزاحات الموضع أي تحرك مرئي، لأن المعاينة تقع داخل صندوق ثابت وليس نافذة عرض — وللسبب نفسه يُرسم زر الإطلاق في الجهة المقابلة للوحة بدلًا من أسفلها.

اختبر تغييرات الموضع على صفحة حقيقية. راجع تثبيت الودجت.

تنبيه

تُطبَّق تنسيقات CSS المخصصة كما هي دون التحقق منها. قاعدة غير صحيحة يمكن أن تكسر تخطيط الودجت لكل زائر، لذا أجرِ تغييرًا واحدًا في كل مرة وتحقق من النتيجة على صفحة حقيقية.