---
title: "Stiilimine"
description: "Kohanda ThunderPhone'i häälvidina välimust CSS-iga"
---

Vidin kuvatakse sisseehitatud heleda ja tumeda teemaga klaasiefektiga ribana. Kohandamine on võimalik kolmel tasemel: propsid levinud valikute jaoks, CSS-i kohandatud omadused teemastamiseks ja CSS-klassi ülekirjutused täielikuks kontrolliks.

<Note>
  Need stiilivalikud kehtivad eelvalmistatud vidinale, mille kuvavad Reacti komponent `ThunderPhoneWidget` ja CDN-i meetod `ThunderPhone.mount()`. Kui vajad täielikult kohandatud kasutajaliidest, kasuta selle asemel [headless hooki](/et/widget/headless-hook).
</Note>

---

## Teemad

Prop `theme` juhib vidina värviskeemi. See rakendab vidina juurelemendile klassi `tp--light` või `tp--dark`:

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

| Teema | Klass | Kirjeldus |
|-------|-------|-------------|
| `'light'` | `tp--light` | Hele taust tumeda tekstiga. Vaikimisi. |
| `'dark'` | `tp--dark` | Tume taust heleda tekstiga. |

Mõlemad teemad kasutavad klaasiefektiga ribakujundust tausta hägustuse ja peene läbipaistvusega.

---

## CSS-i kohandatud omadused

Vidin pakub CSS-i kohandatud omadusi (muutujaid), mida saad värvide muutmiseks üle kirjutada ilma üksikuid klasse puudutamata. Need määrab teema klass (`.tp--light` või `.tp--dark`), mis on rakendatud `.tp-widget` juurelemendile:

| Omadus | Vaikimisi (hele) | Vaikimisi (tume) | Kirjeldus |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Rõhuvärv: alustamisnupp, lainekuju ribad, ühendamise täpp, ühendatud oleku tekst. Määratakse **reasiseselt** atribuudi `primaryColor` kaudu. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Riba taust (poolläbipaistev; hägustatud väärtusega `--tp-glass`). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Vaigistusnupu taust. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Vaigistusnupu taust hõljutamisel. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Riba ja nuppude äärised. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Äärise värv hõljutamisel. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Esmane tekst (pealkiri, agendi nimi). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Teisene tekst (alampealkiri, olekurida, kõnetaimer). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | Ribal klaasefekti loov `backdrop-filter`. |
| `--tp-shadow` | kolmekihiline varjude virn | kolmekihiline varjude virn | Riba `box-shadow` (rõnga + lähedase + kauge kihi varjud). |
| `--tp-shadow-hover` | kolmekihiline varjude virn | kolmekihiline varjude virn | Deklareeritud hõljutusoleku esiletõstmiseks; seda ei rakenda praegu ükski reegel. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Riba varjule lisatav sisemine ülemine helendus. |
| `--tp-connected` | `#059669` | `#34d399` | Ühendatud oleku indikaatori värv (olekutäpp). |
| `--tp-error` | `#dc2626` | `#fb7185` | Veaoleku olekuteksti värv. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Kõne lõpetamise nupu taust. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Kõne lõpetamise nupu ikooni värv. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Kõne lõpetamise nupu ääris. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Kõne lõpetamise nupu taust hõljutamisel. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Deklareeritud jõudeoleku hämardamiseks; seda ei rakenda praegu ükski reegel. |

### Kohandatud omaduste üle kirjutamine

Määra rõhuvärv atribuudi `primaryColor` kaudu:

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

<Warning>
  `--tp-accent` määratakse atribuudi `primaryColor` kaudu **reasise stiilina**, seega `--tp-accent`i stiililehe-põhised ülekirjutused ei mõju. Muuda rõhuvärvi atribuudiga. Kõiki muid kohandatud omadusi saab CSS-is üle kirjutada.
</Warning>

Kirjuta muud kohandatud omadused CSS-iga üle. Kasuta kahe klassiga selektorit (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), et sinu reegel oleks vaikimisi väärtusi määravast teemaklassist suurema prioriteediga sõltumata stiililehe järjekorrast:

```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-klassid

Kõik vidina klassid algavad eesliitega `tp-`, et vältida konflikte sinu olemasolevate stiilidega.

| Klass | Element | Kirjeldus |
|-------|---------|-------------|
| `.tp-widget` | Juurmähis | Fikseeritud asukohaga konteiner (`position: fixed`, nurk määratakse `position`-propi abil, `z-index: 9999`). Sisaldab teemaklassi ja fondi põhiseadeid; sellel endal puudub visuaalne raamistik. |
| `.tp--light` / `.tp--dark` | Teema modifikaatorid | Rakendatakse koos teemaga elemendile `.tp-widget`; määravad kõik `--tp-*` kohandatud omadused. |
| `.tp-bar` | Riba | Klaasiefektiga kapsel ise: taust, tausta hägustus, ääris, `99px` raadius ja vari. Laius `300px`. |
| `.tp-meta` | Tekstiplokk | Konteiner kogu teksti jaoks -- jõudeolekus pealkiri ja alapealkiri ning kõne ajal agendi nimi ja olek. |
| `.tp-name` | Esmane silt | Kuvab jõudeolekus `title`-propi ning kõne ajal ühendatud agendi nime (kasutades varuvariandina `title`-propi). |
| `.tp-sub` | Alapealkiri | Jõudeolekus kuvatav rida „Praegu saadaval”. |
| `.tp-start` | Jõudeoleku kõnenupp | Ümmargune rõhutatud alustamisnupp (42px). Kasutab taustana `--tp-accent`. |
| `.tp-dot` | Ühendamise täpp | Pulseeriv rõhutatud täpp, mida kuvatakse ühendamise ajal riba vasakul küljel. |
| `.tp-wave` / `.tp-wave--idle` | Helilainekuju | Viie ribaga helilainekuju. `--idle` lisab aeglase hingamisanimatsiooni; kõne ajal reageerivad ribad helile. |
| `.tp-button` | Kõneaegsed nupud | Kõneaegsete juhtnuppude põhistiil (42px, ümardus 12px). |
| `.tp-button-group` | Nuppude rida | Ümbritseb kõne ajal vaigistamise ja kõne lõpetamise nuppe. |
| `.tp-button--start` | Ühendusnupu variant | Rõhutatud värviga variant, mida näidatakse kõne alustamise ajal. |
| `.tp-button--mute` | Vaigistamise lüliti | Vaigistab või taastab kõne ajal mikrofoni heli. Kasutab `--tp-surface`. |
| `.tp-button--end` | Kõne lõpetamise nupp | Lõpetab kõne. Kasutab paletti `--tp-end-*`. |
| `.tp-button--loading` | Laadimise modifikaator | Muudab nupu ühendamise ajal tuhmimaks. |
| `.tp-icon` / `.tp-spin` | Ikoonid | Nupuikoonide suurus; `tp-spin` animeerib ühendamise keerlevat indikaatorit. |
| `.tp-status` | Kõneaegne olekuplokk | Ümbritseb olekurida ühendamise, ühendatud ja vea olekus. |
| `.tp-status__text` | Olekurida | Ühenduse oleku tekst (nt „Ühendamine...”) või kõnetaimer. Saab olekule vastavalt `.tp-status--connected` (rõhutatud värv) või `.tp-status--error` (veavärv). |
| `.tp-status__name` | Agendi nime pesa | Osa olekuplokist, kuid seda ei renderdata praeguses riba paigutuses -- agendi nimi kuvatakse selle asemel elemendis `.tp-name`. |
| `.tp-status__dot` | Oleku täpp | Pulseeriva ühendatud oleku täpi stiil (kasutab `--tp-connected`). |

---

## Näited

### Kohandatud aktsent propide kaudu

Lihtsaim viis vidina brändimiseks:

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

### Kohandatud värvid CSS-i kaudu

Värvide täielikuks juhtimiseks alista kohandatud omadused. Pea meeles, et aktsent tuleb `primaryColor` propist, mitte CSS-ist:

```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);
}
```

### Kohandatud suurus

Muuda vidin suuremaks või väiksemaks, kohandades riba, nuppude ja teksti mõõtmeid:

```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;
}
```

### Peida tekstisildid

Kogu vidina tekst asub `.tp-meta`-s. Peida see täielikult, et alles jääksid ainult lainekuju ja nupud:

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

Või peida üksikud osad:

```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>
  Jõudeoleku silt asub `.tp-name`/`.tp-sub`-is, mitte `.tp-status`-es -- ainult `.tp-status`-e peitmine kuvab pealkirja vidina jõudeolekus endiselt.
</Note>

### Teemapõhised alistused

Konkreetse teema sihtimiseks kasuta teemaklassi:

```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);
}
```

---

## Ulatuse määramine className'i abil

Reacti komponendi kasutamisel anna `className` prop, et piirata alistused konkreetse vidinaeksemplariga:

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

Seejärel sihi seda klassi oma CSS-is:

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

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

See võimaldab samal lehel kasutada mitut eri stiilidega vidinaeksemplari. Anna igale eksemplarile oma aktsent `primaryColor` propi kaudu (CSS ei saa `--tp-accent`-i alistada -- see määratakse siseselt).

---

## Täielikult kohandatud kasutajaliides

Kui CSS-i alistustest ei piisa, annab [ilma kasutajaliideseta hook](/et/widget/headless-hook) sulle täieliku kontrolli. Sina määrad kogu HTML-i ja stiilid, samal ajal kui `useThunderPhone` haldab häälesessiooni. Hook pakub ka `audioLevelRef`-i helile reageerivate visualiseeringute, näiteks lainekujude, loomiseks.

```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>
  Ilma kasutajaliideseta hook on õige valik, kui vajad helile reageerivaid animatsioone, kohandatud paigutusi või integreerimist olemasolevasse komponenditeeki. CSS-i alistused ja kohandatud omadused sobivad paremini kiireteks teemakohandusteks.
</Tip>