Bejelentkezés

Az AI-Kit formázása WordPressben CSS-változókkal

Az AI‑Kit kezelőfelületi komponensei (AI‑Kit Feature és Chatbot) CSS tervezési tokeneket biztosítanak, amelyeket témájából vagy egyéni CSS-ből felülírhat.

A legtöbb változó az alábbi gyökérelemeken van meghatározva:

  • #ai-kit-inline-root — beágyazott Feature felületek és a Chatbot
  • #ai-kit-portal-root — modális Feature felületek

Ha nem biztos benne, melyik gyökérelemet használja az oldal, biztonságosan felülírhatja a tokeneket mindkettőn.

Gyors kezdés​

Adja a következőket a téma CSS-éhez vagy a Megjelenés → Testreszabás → További CSS részhez:

/* Global tweaks */
#ai-kit-inline-root,
#ai-kit-portal-root {
  --ai-kit-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ai-kit-radius: 8px;                 /* Feature panel corners */
  --ai-kit-chat-border-radius: 12px;    /* Chat window corners */
  --ai-kit-chat-width: 520px;
}

/* Make the launcher match your brand */
#ai-kit-portal-root {
  --ai-kit-launcher-bg: #0ea5e9;
  --ai-kit-launcher-bg-hover: #0284c7;
  --ai-kit-user-bubble-bg: #0ea5e9;
}

Tokenreferencia​

Az alábbiakban az elérhető tokenek gyakorlati áttekintése olvasható.

Tipográfia​

  • --ai-kit-font-family
  • --ai-kit-font-size
  • --ai-kit-font-size-sm
  • --ai-kit-font-size-xs
  • --ai-kit-font-size-title
  • --ai-kit-line-height

Térköz​

  • --ai-kit-space-1 … --ai-kit-space-5
  • --ai-kit-spacing-sm / --ai-kit-spacing-md / --ai-kit-spacing-lg (visszafelé kompatibilis álnevek)

Lekerekítés​

  • --ai-kit-radius — a Feature felületek alapértelmezett lekerekítése; alapértéke szögletes sarok
  • --ai-kit-radius-sm — másodlagos felületek gyakori értéke
  • --ai-kit-radius-pill
  • --ai-kit-radius-round
  • --ai-kit-launcher-radius — az indító/gomb lekerekítése, a --ai-kit-radius értékétől független is lehet

Szemantikus színek​

Ezek az AI‑Kit belső, jelentéssel bíró színei; ha vannak Mantine-változók, sok alapérték azokra támaszkodik:

  • --ai-kit-color-text
  • --ai-kit-color-text-muted
  • --ai-kit-color-border
  • --ai-kit-color-border-muted
  • --ai-kit-color-surface / --ai-kit-color-surface-2 / --ai-kit-color-surface-3
  • --ai-kit-color-danger / --ai-kit-color-warning / --ai-kit-color-success
  • --ai-kit-color-primary
  • --ai-kit-color-primary-hover
  • --ai-kit-color-primary-contrast

Árnyékok​

  • --ai-kit-shadow-sm
  • --ai-kit-shadow-sm-hover

Feature keretanimáció​

Az animált Feature keret használja, ha engedélyezett a felületi összeállításban:

  • --ai-kit-border-width
  • --ai-kit-border-color
  • --ai-kit-border-thickness
  • --ai-kit-border-speed
  • --ai-kit-border-angle
  • --ai-kit-border-gradient

Helyzet, méret és rétegezés​

  • --ai-kit-position-z-index
  • --ai-kit-open-button-offset-x
  • --ai-kit-open-button-offset-y
  • --ai-kit-chat-launcher-size
  • --ai-kit-chat-width
  • --ai-kit-chat-height-min
  • --ai-kit-chat-height-max
  • --ai-kit-chat-height-cap

Indító és csevegési felület​

  • --ai-kit-launcher-bg

  • --ai-kit-launcher-color

  • --ai-kit-launcher-bg-hover

  • --ai-kit-launcher-shadow

  • --ai-kit-launcher-shadow-hover

  • --ai-kit-chat-surface

  • --ai-kit-chat-surface-subtle

  • --ai-kit-chat-border-color

  • --ai-kit-chat-border-radius

  • --ai-kit-chat-icon-color

Csevegési állapot, buborékok és Markdown​

  • --ai-kit-chat-status-bg

  • --ai-kit-chat-status-fg

  • --ai-kit-user-bubble-bg

  • --ai-kit-user-bubble-color

  • --ai-kit-assistant-bubble-bg

  • --ai-kit-assistant-bubble-color

  • --ai-kit-chat-code-bg

  • --ai-kit-chat-pre-bg

Csevegésgombok és visszajelzés​

  • --ai-kit-chat-close-bg

  • --ai-kit-chat-close-bg-hover

  • --ai-kit-chat-typing-dot-color

  • --ai-kit-chat-feedback-bg

  • --ai-kit-chat-feedback-border

  • --ai-kit-chat-feedback-active-bg