تخطَّ إلى المحتوى الرئيسي
تصفّح التوثيق

CSS مخصص

منفذ الطوارئ: أعِد تصميم أي سطح في الأداة باستخدام CSS خام عندما لا تكفي عناصر التحكم في الرموز في الاستوديو.

تغطي عناصر التحكم في الرموز في Widget Design Studio معظم احتياجات العلامة التجارية — فهي تبقى آمنة وفق AA وتصمد أمام تحديثات الأداة. وعندما لا تكفي، يحمل كل تصميم حقل CSS مخصص (خطوة «عام»): CSS خام يُحقن في Shadow DOM الخاص بالأداة، ويستهدف المحدِّدات الثابتة وخصائص --syncanix-* المخصصة الموثقة في هذه الصفحة.

كيف يُطبَّق

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

سلسلة CSS واحدة لكل تصميم: تنطبق على كل أحجام الأداة وعلى كلا نظامي الألوان (قيِّد قواعد الوضع الداكن بالمحدِّد أدناه)، وقواعد السمات لكل صفحة لا تحمل أبدًا CSS مخصصًا خاصًا بها.

CSS الخاص بك يكسب التسلسل

تحقن الأداة CSS الخاص بك بوصفه آخر ورقة أنماط في Shadow DOM، بعد جميع الأنماط المدمجة. لذا تتغلب قاعدة بالتحديد نفسه على قاعدة الأداة — دون الحاجة إلى !important لإعادة التصميم العادية.

/* Does NOT work — tokens are applied inline on the host element,
   which beats any :host rule: */
:host { --syncanix-primary: #0f766e; }

/* Works — re-declare the variable on a descendant instead: */
.syncanix-panel { --syncanix-primary: #0f766e; }

محدِّدات ثابتة

هذه المحدِّدات عقد موثق وثابت — مثبَّت بالاختبارات، فلا يمكن لإصدار من الأداة إعادة تسميتها بصمت.

/* Launcher (the closed floating button — an attribute, not a class) */
[data-syncanix='launcher']
.syncanix-launcher-avatar
.syncanix-launcher-brand

/* Panel chrome */
.syncanix-panel
.syncanix-panel-header

/* Messages */
.syncanix-panel-item-user
.syncanix-panel-item-assistant
.syncanix-msg-body

/* Composer */
.syncanix-panel-composer
.syncanix-panel-composer-form
.syncanix-panel-composer-input
.syncanix-panel-composer-submit
.syncanix-panel-composer-stop
.syncanix-panel-composer-limit

/* Rich primitives — each renders with its type on the root */
.syncanix-card
.syncanix-confirm-card
[data-syncanix-primitive='list' | 'table' | 'card' | 'markdown' | 'button'
  | 'detail' | 'form' | 'status' | 'empty-state' | 'confirm-card' | 'navigate'
  | 'component' | 'iframe' | 'action-plan' | 'action-in-progress'
  | 'action-result' | 'chart' | 'embed' | 'metric' | 'funnel' | 'flow'
  | 'sign-in-card' | 'onboarding-checklist']

الخصائص المخصصة

كل سطح في الأداة يُرسم من خصائص --syncanix-* المخصصة ذات مساحة الأسماء، لذا فإن إعادة تعريف إحداها على شجرة فرعية تعيد تصميم تلك الشجرة الفرعية فقط. وتقبل سمة التضمين data-theme أسماء الرموز نفسها — راجع تخصيص سمة الأداة لمعرفة كيفية تركيب طبقات السمة.

/* Colour */
--syncanix-primary            --syncanix-primary-foreground
--syncanix-background         --syncanix-foreground
--syncanix-muted              --syncanix-muted-foreground
--syncanix-border             --syncanix-ring
--syncanix-destructive        --syncanix-destructive-foreground
--syncanix-link

/* Typography */
--syncanix-font-family        --syncanix-font-family-heading
--syncanix-line-height-base   --syncanix-letter-spacing-base
--syncanix-measure

/* Shape */
--syncanix-radius             --syncanix-radius-sm
--syncanix-radius-md          --syncanix-radius-lg
--syncanix-radius-full        --syncanix-avatar-radius

/* Elevation, spacing, motion, icons */
--syncanix-shadow-lg          --syncanix-shadow-xl
--syncanix-spacing            --syncanix-spacing-sm
--syncanix-motion-duration    --syncanix-motion-easing
--syncanix-icon-stroke-width

/* Per-element studio overrides (set on a descendant to override locally) */
--syncanix-launcher-bg        --syncanix-launcher-fg
--syncanix-header-bg          --syncanix-header-fg
--syncanix-user-bubble-bg     --syncanix-user-bubble-fg
--syncanix-assistant-bubble-bg  --syncanix-assistant-bubble-fg
--syncanix-composer-bg        --syncanix-pane-bg
--syncanix-ai-font-family     --syncanix-user-font-family

الفاتح والداكن

يُختم نظام الألوان المحسوم على مضيف الأداة بوصفه data-color-scheme. ينطبق CSS الخاص بك في كلا النظامين — قيِّد قواعد الوضع الداكن فقط بـ :host([data-color-scheme='dark']).

.syncanix-panel-header { background: #f8fafc; }

:host([data-color-scheme='dark']) .syncanix-panel-header {
  background: #1e293b;
}

ما هو محظور

يُتحقق من CSS المخصص في المحرر وعند الحفظ ثم مجددًا في الأداة قبل الحقن. يرفض المدقق:

  • @import — جلب CSS خارجي أو تسريب البيانات.
  • expression()‎ وعناوين javascript:‎ وdata:text/html وbehavior:‎ و-moz-binding — نواقل قديمة لحقن السكربتات.
  • مراجع url()‎ الخارجية — ناقل إشارة شبكة / تسريب بيانات. ضمِّن الموارد (بما فيها ملفات الخطوط) كعناوين data: URI بدلًا من ذلك.
  • وسم إغلاق ‎</style> — هروب من Shadow DOM.
  • إخفاء إشعار «صُنع بالذكاء الاصطناعي» أو إعادة تصميمه (محدِّدات syncanix-ai-* / syncanix-first-message-*) — سطح تنظيمي مقفل.
  • أكثر من 64 كيلوبايت من CSS لكل تصميم.

أمثلة

/* A gradient panel header with a hairline divider */
.syncanix-panel-header {
  background: linear-gradient(135deg, #0f766e, #134e4a);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}
إعادة تصميم رأس اللوحة
/* Round only the cards, and give tables a tighter radius */
[data-syncanix-primitive='card'] { --syncanix-radius: 1rem; }
[data-syncanix-primitive='table'] { --syncanix-radius: 0.25rem; }
تجاوز رمز لعنصر أولي واحد فقط
/* Slow the widget's motion down, and switch it off for
   reduced-motion visitors */
.syncanix-panel { --syncanix-motion-duration: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .syncanix-panel { --syncanix-motion-duration: 0ms; }
}
ضبط الحركة مع احترام reduced-motion

الخطوات التالية

تخصيص سمة الأداةالاكتشاف التلقائي والرموز وكيفية تركيب طبقات السمة.التصميم وWidget Design Studioحيث تُنشأ التصاميم وتُفعَّل — بما فيها CSS المخصص.