Benutzerdefiniertes CSS
Die Notlösung: Gestalten Sie jede Widget-Oberfläche mit reinem CSS um, wenn die Token-Steuerungen des Studios nicht ausreichen.
Die Token-Steuerungen des Widget Design Studios decken die meisten Branding-Bedürfnisse ab — sie bleiben AA-sicher und überstehen Widget-Updates. Wo sie nicht ausreichen, trägt jedes Design ein Feld für benutzerdefiniertes CSS (Schritt „Allgemein“): reines CSS, in das Shadow DOM des Widgets injiziert, gerichtet auf die stabilen Selektoren und --syncanix-*-Custom-Properties dieser Seite.
So wird es angewendet
Das CSS wird beim Tippen validiert und beim Speichern serverseitig erneut geprüft. Es wird wirksam, wenn Sie das Design speichern; ist dieses Design im Einsatz, übernehmen eingebettete Widgets die Änderung beim nächsten Konfigurationsabruf — innerhalb weniger Minuten.
Ein CSS-String pro Design: Er gilt für jede Widget-Größe und beide Farbschemata (dunkle Regeln mit dem unten stehenden Selektor eingrenzen), und Seitenregel-Themes tragen nie eigenes benutzerdefiniertes CSS.
Ihr CSS gewinnt die Kaskade
Das Widget injiziert Ihr CSS als letztes Stylesheet in sein Shadow DOM, nach allen eingebauten Styles. Eine Regel gleicher Spezifität überschreibt daher die des Widgets — kein !important nötig für gewöhnliches Umgestalten.
/* 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; }Stabile Selektoren
Diese Selektoren sind ein dokumentierter, stabiler Vertrag — durch Tests fixiert, sodass ein Widget-Release sie nicht stillschweigend umbenennen kann.
/* 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']Custom Properties
Jede Widget-Oberfläche zeichnet aus den namensraumgebundenen --syncanix-*-Custom-Properties; eine davon auf einem Teilbaum neu zu deklarieren, gestaltet nur diesen Teilbaum um. Dieselben Token-Namen akzeptiert das Einbettungsattribut data-theme — siehe Das Widget thematisieren für die Komposition der Theme-Schichten.
/* 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-familyHell & dunkel
Das aufgelöste Farbschema wird als data-color-scheme auf den Widget-Host gestempelt. Ihr CSS gilt in beiden Schemata — grenzen Sie Nur-dunkel-Regeln mit :host([data-color-scheme='dark']) ein.
.syncanix-panel-header { background: #f8fafc; }
:host([data-color-scheme='dark']) .syncanix-panel-header {
background: #1e293b;
}Was blockiert ist
Benutzerdefiniertes CSS wird im Editor, beim Speichern und erneut im Widget vor der Injektion validiert. Der Validator lehnt ab:
- @import — externes CSS abrufen / Datenabfluss.
- expression(), javascript:- und data:text/html-URLs, behavior:, -moz-binding — veraltete Skript-Injektionsvektoren.
- Externe url()-Verweise — ein Netzwerk-Beacon-/Datenabfluss-Vektor. Betten Sie Ressourcen (auch Schriftdateien) als data:-URIs ein.
- Ein schließendes </style>-Tag — ein Shadow-DOM-Ausbruch.
- Das Ausblenden oder Umgestalten des Hinweises „mit KI erstellt“ (Selektoren syncanix-ai-* / syncanix-first-message-*) — eine gesperrte regulatorische Oberfläche.
- Mehr als 64 KB CSS pro Design.
Beispiele
/* 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; }
}