---
title: "Stilius"
description: "Tinkinkite ThunderPhone balso valdiklio išvaizdą naudodami CSS"
---

Valdiklis pateikiamas kaip stiklo efektą turinti juosta su integruotomis šviesia ir tamsia temomis. Jį galima tinkinti trimis lygiais: naudojant rekvizitus bendroms parinktims, CSS pasirinktines ypatybes temoms ir CSS klasių perrašymus visiškai kontrolei.

<Note>
  Šios stiliaus parinktys taikomos iš anksto sukurtam valdikliui, pateikiamam naudojant `ThunderPhoneWidget` React komponentą ir `ThunderPhone.mount()` CDN metodą. Jei reikia visiškai pasirinktinės vartotojo sąsajos, naudokite [be sąsajos kablį](/lt/widget/headless-hook).
</Note>

---

## Temos

Rekvizitas `theme` valdo valdiklio spalvų schemą. Jis pritaiko `tp--light` arba `tp--dark` klasę valdiklio šakniniam elementui:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>
```

| Tema | Klasė | Aprašymas |
|-------|-------|-------------|
| `'light'` | `tp--light` | Šviesus fonas su tamsiu tekstu. Numatytoji. |
| `'dark'` | `tp--dark` | Tamsus fonas su šviesiu tekstu. |

Abi temos naudoja stiklo efektą turinčios juostos dizainą su fono suliejimu ir subtiliu skaidrumu.

---

## CSS pasirinktinės savybės

Valdiklis pateikia CSS pasirinktines savybes (kintamuosius), kurias galite perrašyti, kad pakeistumėte spalvas nekeisdami atskirų klasių. Jos apibrėžiamos temos klasės (`.tp--light` arba `.tp--dark`), pritaikytos `.tp-widget` šakniniam elementui:

| Savybė | Numatytoji (šviesi) | Numatytoji (tamsi) | Aprašymas |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Akcento spalva: pradžios mygtukas, bangos formos juostos, jungimosi taškas, prisijungimo būsenos tekstas. Nustatoma **įterptuoju stiliumi** iš `primaryColor` parametro. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Juostos fonas (pusiau skaidrus; suliejamas naudojant `--tp-glass`). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Nutildymo mygtuko fonas. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Nutildymo mygtuko fonas užvedus žymeklį. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Juostos ir mygtuko rėmeliai. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Rėmelio spalva užvedus žymeklį. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Pagrindinis tekstas (pavadinimas, agento vardas). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Antrinis tekstas (paaiškinimas, būsenos eilutė, skambučio laikmatis). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter`, sukuriantis stiklo efektą juostoje. |
| `--tp-shadow` | trijų sluoksnių šešėlių rinkinys | trijų sluoksnių šešėlių rinkinys | Juostos `box-shadow` (žiedo + artimo + tolimo sluoksniai). |
| `--tp-shadow-hover` | trijų sluoksnių šešėlių rinkinys | trijų sluoksnių šešėlių rinkinys | Apibrėžta pakėlimui užvedus žymeklį; šiuo metu netaikoma jokia taisykle. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Vidinis viršutinis paryškinimas, pridedamas prie juostos šešėlio. |
| `--tp-connected` | `#059669` | `#34d399` | Prisijungusios būsenos indikatoriaus spalva (būsenos taškas). |
| `--tp-error` | `#dc2626` | `#fb7185` | Klaidos būsenos teksto spalva. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Skambučio pabaigos mygtuko fonas. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Skambučio pabaigos mygtuko piktogramos spalva. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Skambučio pabaigos mygtuko rėmelis. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Skambučio pabaigos mygtuko fonas užvedus žymeklį. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Apibrėžta neveikos būsenos pritemdymui; šiuo metu netaikoma jokia taisykle. |

### Pasirinktinių savybių perrašymas

Nustatykite akcento spalvą naudodami `primaryColor` parametrą:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>
```

<Warning>
  `--tp-accent` nustatoma kaip **įterptasis stilius** iš `primaryColor` parametro, todėl `--tp-accent` perrašymai stilių lentelėje neturi poveikio. Pakeiskite akcentą naudodami parametrą. Visas kitas pasirinktines savybes galite perrašyti CSS.
</Warning>

Kitas pasirinktines savybes perrašykite naudodami CSS. Naudokite dviejų klasių parinkiklį (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), kad jūsų taisyklė turėtų pirmenybę prieš numatytąsias reikšmes apibrėžiančią temos klasę, neatsižvelgiant į stilių lentelės eiliškumą:

```css
.tp-widget.tp--light {
  --tp-bg: rgba(0, 0, 0, 0.9);
  --tp-text: rgba(255, 255, 255, 0.95);
  --tp-text-2: rgba(255, 255, 255, 0.55);
  --tp-border: rgba(255, 255, 255, 0.15);
}
```

---

## CSS klasės

Visų valdiklio klasių pradžioje naudojamas `tp-`, kad nebūtų konfliktų su esamais stiliais.

| Klasė | Elementas | Aprašymas |
|-------|---------|-------------|
| `.tp-widget` | Šakninis apvalkalas | Fiksuotos padėties konteineris (`position: fixed`, kampas nustatomas naudojant `position` rekvizitą, `z-index: 9999`). Turi temos klasę ir pagrindinius šrifto nustatymus; pats neturi vizualaus apipavidalinimo. |
| `.tp--light` / `.tp--dark` | Temos modifikatoriai | Taikomi `.tp-widget` kartu su tema; apibrėžia visas `--tp-*` pasirinktines savybes. |
| `.tp-bar` | Juosta | Pati stiklo efekto kapsulė: fonas, fono suliejimas, kraštinė, `99px` spindulys, šešėlis. `300px` pločio. |
| `.tp-meta` | Teksto blokas | Viso teksto konteineris -- pavadinimo ir paantraštės laukimo būsenoje, agento vardo ir būsenos skambučio metu. |
| `.tp-name` | Pagrindinė etiketė | Laukimo būsenoje rodo `title` rekvizitą, o skambučio metu -- prijungto agento vardą (jei jo nėra, naudojamas `title`). |
| `.tp-sub` | Paantraštė | Eilutė „Dabar pasiekiamas“, rodoma laukimo būsenoje. |
| `.tp-start` | Laukimo būsenos skambinimo mygtukas | Apvalus paryškintos spalvos pradžios mygtukas (42px). Fonui naudoja `--tp-accent`. |
| `.tp-dot` | Prisijungimo taškas | Pulsuojantis paryškintos spalvos taškas, rodomas kairėje juostos pusėje prisijungiant. |
| `.tp-wave` / `.tp-wave--idle` | Bangos forma | Penkių juostų bangos forma. `--idle` prideda lėtą pulsavimo animaciją; skambučio metu juostos reaguoja į garsą. |
| `.tp-button` | Skambučio metu rodomi mygtukai | Pagrindinis skambučio metu naudojamų valdiklių stilius (42px, užapvalinti 12px kampai). |
| `.tp-button-group` | Mygtukų eilutė | Skambučio metu apgaubia nutildymo ir skambučio pabaigos mygtukus. |
| `.tp-button--start` | Prisijungimo mygtuko variantas | Paryškintos spalvos variantas, rodomas pradedant skambutį. |
| `.tp-button--mute` | Nutildymo jungiklis | Skambučio metu nutildo arba įjungia mikrofoną. Naudoja `--tp-surface`. |
| `.tp-button--end` | Skambučio pabaigos mygtukas | Baigia skambutį. Naudoja `--tp-end-*` paletę. |
| `.tp-button--loading` | Įkėlimo modifikatorius | Prisijungiant pritemdo mygtuką. |
| `.tp-icon` / `.tp-spin` | Piktogramos | Mygtukų piktogramų dydis; `tp-spin` animuoja prisijungimo suktuką. |
| `.tp-status` | Skambučio būsenos blokas | Apgaubia būsenos eilutę prisijungimo, prisijungusios ir klaidos būsenose. |
| `.tp-status__text` | Būsenos eilutė | Prisijungimo būsenos tekstas (pvz., „Jungiama...“) arba skambučio laikmatis. Atsižvelgiant į būseną, gauna `.tp-status--connected` (paryškinta spalva) arba `.tp-status--error` (klaidos spalva). |
| `.tp-status__name` | Agento vardo vieta | Būsenos bloko dalis, tačiau dabartiniame juostos išdėstyme nerodoma -- agento vardas rodomas `.tp-name`. |
| `.tp-status__dot` | Būsenos taškas | Pulsuojančio prisijungusios būsenos taško stilius (naudoja `--tp-connected`). |

---

## Pavyzdžiai

### Pasirinktinė akcentinė spalva per komponento savybes

Paprasčiausias būdas pritaikyti valdiklį savo prekės ženklui:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="light"
  primaryColor="#059669"
  title="Talk to support"
/>
```

### Pasirinktinės spalvos per CSS

Pakeiskite pasirinktines savybes, kad galėtumėte visiškai valdyti spalvas. Atminkite, kad akcentinė spalva nustatoma naudojant `primaryColor` komponento savybę, o ne CSS:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>
```

```css
/* Emerald theme for everything else */
.tp-widget.tp--light {
  --tp-bg: rgba(236, 253, 245, 0.85);
  --tp-text: rgba(6, 78, 59, 0.95);
  --tp-text-2: rgba(4, 120, 87, 0.8);
  --tp-border: rgba(5, 150, 105, 0.2);
}
```

### Pasirinktinis dydis

Padidinkite arba sumažinkite valdiklį koreguodami juostos, mygtukų ir teksto matmenis:

```css
/* Wider bar */
.tp-bar {
  width: 340px;
}

/* Larger buttons (42px by default) */
.tp-start,
.tp-button {
  width: 56px;
  height: 56px;
}

/* Larger text */
.tp-name {
  font-size: 16px;
}

.tp-sub,
.tp-status__text {
  font-size: 14px;
}
```

### Slėpkite teksto etiketes

Visas valdiklio tekstas yra `.tp-meta`. Visiškai jį paslėpkite, kad liktų tik bangos forma ir mygtukai:

```css
.tp-meta {
  display: none;
}
```

Arba paslėpkite atskiras dalis:

```css
/* Hide only the idle "Available now" subtitle */
.tp-sub {
  display: none;
}

/* Hide only the in-call status line (connection state / timer) */
.tp-status {
  display: none;
}
```

<Note>
  Neaktyvios būsenos etiketė yra `.tp-name`/`.tp-sub`, o ne `.tp-status` -- paslėpus tik `.tp-status`, pavadinimas vis tiek rodomas, kai valdiklis neaktyvus.
</Note>

### Konkrečiai temai skirti pakeitimai

Nukreipkite pakeitimus į konkrečią temą naudodami temos klasę:

```css
/* Only affect dark theme */
.tp--dark .tp-start {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

/* Only affect light theme */
.tp-widget.tp--light {
  --tp-bg: rgba(255, 255, 255, 0.95);
}
```

---

## Aprėpties nustatymas naudojant className

Naudodami React komponentą, perduokite `className` komponento savybę, kad pakeitimai būtų taikomi konkrečiam valdiklio egzemplioriui:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>
```

Tada CSS nukreipkite į tą klasę:

```css
.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}

.support-widget .tp-name {
  font-weight: 700;
}
```

Taip tame pačiame puslapyje galite turėti kelis skirtingų stilių valdiklio egzempliorius. Kiekvienam egzemplioriui nustatykite atskirą akcentinę spalvą naudodami jo `primaryColor` komponento savybę (CSS negali pakeisti `--tp-accent` -- jis nustatomas įterptuoju stiliumi).

---

## Visiškai pasirinktinė sąsaja

Jei CSS pakeitimų nepakanka, [be sąsajos kabliukas](/lt/widget/headless-hook) suteikia jums visišką valdymą. Jūs pateikiate visą HTML ir stilių, o `useThunderPhone` tvarko balso sesiją. Kabliukas taip pat pateikia `audioLevelRef`, skirtą garsui reaguojančioms vizualizacijoms, pvz., bangos formoms, kurti.

```tsx
import { useThunderPhone } from '@thunderphone/widget'

function MyWidget() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })

  return (
    <div className="my-totally-custom-widget">
      {/* Your own buttons, animations, layouts -- anything */}
      <button onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}>
        {phone.state === 'connected' ? 'Hang up' : 'Call us'}
      </button>
      {phone.audio}
    </div>
  )
}
```

<Tip>
  Be sąsajos kabliukas yra tinkamas pasirinkimas, kai reikia garsui reaguojančių animacijų, pasirinktinių išdėstymų arba integravimo į esamą komponentų biblioteką. CSS pakeitimai ir pasirinktinės savybės labiau tinka greitiems temos pritaikymams.
</Tip>