---
title: "Vzhľad"
description: "Prispôsobte vzhľad hlasového widgetu ThunderPhone pomocou CSS"
---

Widget sa vykresľuje ako glassmorfická lišta so vstavanými svetlými a tmavými témami. Prispôsobenie je dostupné na troch úrovniach: props pre bežné možnosti, vlastné vlastnosti CSS pre témy a prepísania tried CSS pre úplné ovládanie.

<Note>
  Tieto možnosti štýlovania sa vzťahujú na predpripravený widget vykreslený komponentom React `ThunderPhoneWidget` a metódou CDN `ThunderPhone.mount()`. Ak potrebujete úplne vlastné používateľské rozhranie, použite namiesto toho [headless hook](/sk/widget/headless-hook).
</Note>

---

## Témy

Prop `theme` riadi farebnú schému widgetu. Na koreň widgetu použije triedu `tp--light` alebo `tp--dark`:

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

| Téma | Trieda | Popis |
|-------|-------|-------------|
| `'light'` | `tp--light` | Svetlé pozadie s tmavým textom. Predvolené. |
| `'dark'` | `tp--dark` | Tmavé pozadie so svetlým textom. |

Obe témy používajú dizajn glassmorfickej lišty s rozmazaním pozadia a jemnou priehľadnosťou.

---

## Vlastné vlastnosti CSS

Widget poskytuje vlastné vlastnosti CSS (premenné), ktoré môžete prepísať na zmenu farieb bez zásahu do jednotlivých tried. Definuje ich trieda témy (`.tp--light` alebo `.tp--dark`) použitá na koreňovom prvku `.tp-widget`:

| Vlastnosť | Predvolená (svetlá) | Predvolená (tmavá) | Popis |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Farba zvýraznenia: tlačidlo spustenia, pruhy priebehu zvuku, bod pripojenia, text stavu pripojenia. Nastavuje sa **inline** z parametra `primaryColor`. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Pozadie panela (polopriehľadné; rozmazané pomocou `--tp-glass`). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Pozadie tlačidla stlmenia. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Pozadie tlačidla stlmenia pri prejdení kurzorom. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Okraje panela a tlačidiel. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Farba okraja pri prejdení kurzorom. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Primárny text (názov, meno agenta). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Sekundárny text (podnadpis, riadok stavu, časovač hovoru). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter`, ktorý vytvára na paneli efekt skla. |
| `--tp-shadow` | trojvrstvový súbor tieňov | trojvrstvový súbor tieňov | `box-shadow` panela (vrstvy prstenca + blízkeho + vzdialeného tieňa). |
| `--tp-shadow-hover` | trojvrstvový súbor tieňov | trojvrstvový súbor tieňov | Definované pre zvýšenie pri prejdení kurzorom; momentálne sa nepoužíva v žiadnom pravidle. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Vnútorné horné zvýraznenie pridané do tieňa panela. |
| `--tp-connected` | `#059669` | `#34d399` | Farba indikátora stavu pripojenia (stavový bod). |
| `--tp-error` | `#dc2626` | `#fb7185` | Farba textu stavu chyby. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Pozadie tlačidla ukončenia hovoru. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Farba ikony tlačidla ukončenia hovoru. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Okraj tlačidla ukončenia hovoru. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Pozadie tlačidla ukončenia hovoru pri prejdení kurzorom. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Definované pre stlmenie v nečinnom stave; momentálne sa nepoužíva v žiadnom pravidle. |

### Prepísanie vlastných vlastností

Nastavte farbu zvýraznenia pomocou parametra `primaryColor`:

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

<Warning>
  `--tp-accent` sa nastavuje ako **inline štýl** z parametra `primaryColor`, preto prepísania `--tp-accent` v štýloch nemajú žiadny účinok. Farbu zvýraznenia zmeňte pomocou parametra. Každú inú vlastnú vlastnosť môžete prepísať v CSS.
</Warning>

Ostatné vlastné vlastnosti prepíšte pomocou CSS. Použite selektor s dvoma triedami (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), aby malo vaše pravidlo vyššiu prioritu než trieda témy, ktorá definuje predvolené hodnoty, bez ohľadu na poradie štýlov:

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

---

## Triedy CSS

Všetky triedy widgetu majú predponu `tp-`, aby sa predišlo konfliktom s vašimi existujúcimi štýlmi.

| Trieda | Prvok | Popis |
|-------|---------|-------------|
| `.tp-widget` | Koreňový obal | Kontajner s pevnou pozíciou (`position: fixed`, roh nastavený vlastnosťou `position`, `z-index: 9999`). Obsahuje triedu témy a základné nastavenia písma; sám o sebe nemá žiadne vizuálne prvky. |
| `.tp--light` / `.tp--dark` | Modifikátory témy | Používajú sa na `.tp-widget` spolu s témou; definujú všetky vlastné vlastnosti `--tp-*`. |
| `.tp-bar` | Lišta | Samotná sklenená kapsula: pozadie, rozmazanie pozadia, okraj, polomer `99px`, tieň. Šírka `300px`. |
| `.tp-meta` | Textový blok | Kontajner pre všetok text -- názov a podnadpis v nečinnom stave, meno agenta a stav počas hovoru. |
| `.tp-name` | Primárny štítok | V nečinnom stave zobrazuje vlastnosť `title` a počas hovoru meno pripojeného agenta (ak nie je k dispozícii, použije sa `title`). |
| `.tp-sub` | Podnadpis | Riadok „Teraz k dispozícii“ zobrazený v nečinnom stave. |
| `.tp-start` | Tlačidlo hovoru v nečinnom stave | Kruhové tlačidlo spustenia so zvýrazňujúcou farbou (42px). Ako pozadie používa `--tp-accent`. |
| `.tp-dot` | Bodka pripájania | Pulzujúca bodka so zvýrazňujúcou farbou zobrazená naľavo od lišty počas pripájania. |
| `.tp-wave` / `.tp-wave--idle` | Zvuková vlna | Zvuková vlna s piatimi stĺpcami. `--idle` pridáva pomalú animáciu dýchania; počas hovoru stĺpce reagujú na zvuk. |
| `.tp-button` | Tlačidlá počas hovoru | Základný štýl ovládacích prvkov počas hovoru (42px, zaoblenie 12px). |
| `.tp-button-group` | Riadok tlačidiel | Počas hovoru obaľuje tlačidlá stlmenia a ukončenia. |
| `.tp-button--start` | Variant tlačidla pripojenia | Variant so zvýrazňujúcou farbou zobrazený počas spúšťania hovoru. |
| `.tp-button--mute` | Prepínač stlmenia | Počas hovoru stlmí alebo zapne mikrofón. Používa `--tp-surface`. |
| `.tp-button--end` | Tlačidlo ukončenia hovoru | Ukončí hovor. Používa paletu `--tp-end-*`. |
| `.tp-button--loading` | Modifikátor načítavania | Počas pripájania stmaví tlačidlo. |
| `.tp-icon` / `.tp-spin` | Ikony | Veľkosť ikon tlačidiel; `tp-spin` animuje indikátor pripájania. |
| `.tp-status` | Blok stavu počas hovoru | Obaľuje stavový riadok počas stavov pripájania/pripojenia/chyby. |
| `.tp-status__text` | Stavový riadok | Text stavu pripojenia (napr. „Pripája sa...“) alebo časovač hovoru. Podľa stavu získa `.tp-status--connected` (zvýrazňujúca farba) alebo `.tp-status--error` (farba chyby). |
| `.tp-status__name` | Priestor pre meno agenta | Je súčasťou stavového bloku, ale v aktuálnom rozložení lišty sa nevykresľuje -- meno agenta sa namiesto toho zobrazuje v `.tp-name`. |
| `.tp-status__dot` | Stavová bodka | Štýl pulzujúcej bodky pre stav pripojenia (používa `--tp-connected`). |

---

## Príklady

### Vlastná farba akcentu cez props

Najjednoduchší spôsob, ako prispôsobiť widget vašej značke:

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

### Vlastné farby cez CSS

Prepíšte vlastné vlastnosti a získajte úplnú kontrolu nad farbami. Nezabudnite, že akcent sa nastavuje pomocou props `primaryColor`, nie cez 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);
}
```

### Vlastná veľkosť

Zväčšite alebo zmenšite widget úpravou rozmerov panela, tlačidiel a textu:

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

### Skrytie textových štítkov

Všetok text widgetu sa nachádza v `.tp-meta`. Ak chcete ponechať iba priebeh zvuku a tlačidlá, úplne ho skryte:

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

Môžete tiež skryť jednotlivé časti:

```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>
  Štítok v nečinnom stave sa nachádza v `.tp-name`/`.tp-sub`, nie v `.tp-status` -- ak skryjete iba `.tp-status`, názov sa bude stále zobrazovať, keď je widget nečinný.
</Note>

### Prepísania pre konkrétnu tému

Konkrétnu tému zacielite pomocou jej triedy:

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

---

## Obmedzenie rozsahu pomocou className

Pri používaní komponentu React odovzdajte props `className`, aby ste obmedzili prepísania na konkrétnu inštanciu widgetu:

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

Potom túto triedu zacielite v CSS:

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

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

Vďaka tomu môžete mať na rovnakej stránke viacero inštancií widgetu s rôznymi štýlmi. Každej inštancii nastavte vlastný akcent pomocou props `primaryColor` (CSS nemôže prepísať `--tp-accent` -- nastavuje sa priamo v riadku).

---

## Úplne vlastné používateľské rozhranie

Ak prepísania CSS nestačia, [headless hook](/sk/widget/headless-hook) vám poskytne úplnú kontrolu. Dodáte všetko HTML a štýly, zatiaľ čo `useThunderPhone` spracuje hlasovú reláciu. Hook poskytuje aj `audioLevelRef` na vytváranie vizualizácií reagujúcich na zvuk, napríklad priebehov zvuku.

```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>
  Headless hook je správna voľba, keď potrebujete animácie reagujúce na zvuk, vlastné rozloženia alebo integráciu do existujúcej knižnice komponentov. Prepísania CSS a vlastné vlastnosti sú vhodnejšie na rýchle úpravy témy.
</Tip>