> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Styly

> Přizpůsobte vzhled hlasového widgetu ThunderPhone pomocí CSS

Widget se vykresluje jako panel ve stylu glassmorphism s vestavěnými světlými a tmavými motivy. Přizpůsobení je dostupné na třech úrovních: props pro běžné možnosti, vlastní vlastnosti CSS pro motivy a přepsání tříd CSS pro úplnou kontrolu.

<Note>
  Tyto možnosti stylování platí pro předpřipravený widget vykreslovaný komponentou React `ThunderPhoneWidget` a metodou CDN `ThunderPhone.mount()`. Pokud potřebujete zcela vlastní uživatelské rozhraní, použijte místo toho [headless hook](/cs/widget/headless-hook).
</Note>

***

## Motivy

Prop `theme` ovládá barevné schéma widgetu. Na kořen widgetu aplikuje třídu `tp--light` nebo `tp--dark`:

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

| Motiv     | Třída       | Popis                                   |
| --------- | ----------- | --------------------------------------- |
| `'light'` | `tp--light` | Světlé pozadí s tmavým textem. Výchozí. |
| `'dark'`  | `tp--dark`  | Tmavé pozadí se světlým textem.         |

Oba motivy používají panel ve stylu glassmorphism s rozostřením pozadí a jemnou průhledností.

***

## Vlastní vlastnosti CSS

Widget zpřístupňuje vlastní vlastnosti CSS (proměnné), které můžete přepsat a změnit tak barvy bez úprav jednotlivých tříd. Jsou definovány třídou motivu (`.tp--light` nebo `.tp--dark`) použitou na kořenovém prvku `.tp-widget`:

| Vlastnost            | Výchozí (světlý)                        | Výchozí (tmavý)                          | Popis                                                                                                                                      |
| -------------------- | --------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | Barva akcentu: tlačítko zahájení, pruhy křivky, bod připojování, text stavu připojení. Nastavuje se **inline** z parametru `primaryColor`. |
| `--tp-bg`            | `rgba(255, 255, 255, 0.82)`             | `rgba(15, 15, 15, 0.85)`                 | Pozadí panelu (průsvitné; rozostřené pomocí `--tp-glass`).                                                                                 |
| `--tp-surface`       | `rgba(0, 0, 0, 0.04)`                   | `rgba(255, 255, 255, 0.07)`              | Pozadí tlačítka ztlumení.                                                                                                                  |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)`                   | `rgba(255, 255, 255, 0.12)`              | Pozadí tlačítka ztlumení při najetí.                                                                                                       |
| `--tp-border`        | `rgba(0, 0, 0, 0.08)`                   | `rgba(255, 255, 255, 0.1)`               | Ohraničení panelu a tlačítek.                                                                                                              |
| `--tp-border-hover`  | `rgba(0, 0, 0, 0.14)`                   | `rgba(255, 255, 255, 0.18)`              | Barva ohraničení při najetí.                                                                                                               |
| `--tp-text`          | `rgba(0, 0, 0, 0.88)`                   | `rgba(255, 255, 255, 0.95)`              | Primární text (název, jméno agenta).                                                                                                       |
| `--tp-text-2`        | `rgba(0, 0, 0, 0.5)`                    | `rgba(255, 255, 255, 0.55)`              | Sekundární text (podtitulek, řádek stavu, časovač hovoru).                                                                                 |
| `--tp-glass`         | `blur(32px) saturate(180%)`             | `blur(32px) saturate(180%)`              | `backdrop-filter`, který na panelu vytváří efekt skla.                                                                                     |
| `--tp-shadow`        | třívrstvý stín                          | třívrstvý stín                           | `box-shadow` panelu (vrstvy prstence + blízkého + vzdáleného stínu).                                                                       |
| `--tp-shadow-hover`  | třívrstvý stín                          | třívrstvý stín                           | Definováno pro zvýraznění při najetí; aktuálně nepoužito žádným pravidlem.                                                                 |
| `--tp-glow`          | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Vnitřní horní zvýraznění přidané ke stínu panelu.                                                                                          |
| `--tp-connected`     | `#059669`                               | `#34d399`                                | Barva indikátoru stavu připojení (stavový bod).                                                                                            |
| `--tp-error`         | `#dc2626`                               | `#fb7185`                                | Barva textu stavu chyby.                                                                                                                   |
| `--tp-end-bg`        | `rgba(239, 68, 68, 0.08)`               | `rgba(251, 113, 133, 0.12)`              | Pozadí tlačítka ukončení hovoru.                                                                                                           |
| `--tp-end-color`     | `#ef4444`                               | `#fb7185`                                | Barva ikony tlačítka ukončení hovoru.                                                                                                      |
| `--tp-end-border`    | `rgba(239, 68, 68, 0.12)`               | `rgba(251, 113, 133, 0.15)`              | Ohraničení tlačítka ukončení hovoru.                                                                                                       |
| `--tp-end-hover`     | `rgba(239, 68, 68, 0.14)`               | `rgba(251, 113, 133, 0.2)`               | Pozadí tlačítka ukončení hovoru při najetí.                                                                                                |
| `--tp-idle-opacity`  | `0.4`                                   | `0.3`                                    | Definováno pro ztmavení v nečinném stavu; aktuálně nepoužito žádným pravidlem.                                                             |

### Přepsání vlastních vlastností

Nastavte barvu akcentu pomocí parametru `primaryColor`:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>
```

<Warning>
  `--tp-accent` se nastavuje jako **inline styl** z parametru `primaryColor`, takže přepsání `--tp-accent` ve stylesheetu nemá žádný účinek. Změňte akcent pomocí parametru. Každou další vlastní vlastnost můžete přepsat v CSS.
</Warning>

Ostatní vlastní vlastnosti přepište pomocí CSS. Použijte selektor se dvěma třídami (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), aby vaše pravidlo mělo přednost před třídou motivu definující výchozí hodnoty bez ohledu na pořadí stylesheetů:

```css theme={null}
.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);
}
```

***

## Třídy CSS

Všechny třídy widgetu mají předponu `tp-`, aby nedocházelo ke konfliktům s vašimi stávajícími styly.

| Třída                         | Prvek                            | Popis                                                                                                                                                                                               |
| ----------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.tp-widget`                  | Kořenový obal                    | Kontejner s pevnou pozicí (`position: fixed`, roh nastavený pomocí vlastnosti `position`, `z-index: 9999`). Obsahuje třídu motivu a základní nastavení písma; sám o sobě nemá žádné vizuální prvky. |
| `.tp--light` / `.tp--dark`    | Modifikátory motivu              | Používají se na `.tp-widget` spolu s motivem; definují všechny vlastní vlastnosti `--tp-*`.                                                                                                         |
| `.tp-bar`                     | Lišta                            | Samotná skleněná pilulka: pozadí, rozmazání pozadí, ohraničení, poloměr `99px`, stín. Šířka `300px`.                                                                                                |
| `.tp-meta`                    | Textový blok                     | Kontejner pro veškerý text -- název a podtitul v nečinném stavu, jméno agenta a stav během hovoru.                                                                                                  |
| `.tp-name`                    | Primární štítek                  | V nečinném stavu zobrazuje vlastnost `title` a během hovoru jméno připojeného agenta (při nedostupnosti použije `title`).                                                                           |
| `.tp-sub`                     | Podtitul                         | Řádek „Nyní k dispozici“ zobrazený v nečinném stavu.                                                                                                                                                |
| `.tp-start`                   | Tlačítko hovoru v nečinném stavu | Kruhové zvýrazněné tlačítko pro zahájení hovoru (42px). Jako pozadí používá `--tp-accent`.                                                                                                          |
| `.tp-dot`                     | Tečka připojování                | Pulzující zvýrazněná tečka zobrazená vlevo na liště během připojování.                                                                                                                              |
| `.tp-wave` / `.tp-wave--idle` | Zvuková vlna                     | Zvuková vlna s pěti pruhy. `--idle` přidává pomalou animaci dýchání; během hovoru pruhy reagují na zvuk.                                                                                            |
| `.tp-button`                  | Tlačítka během hovoru            | Základní styl ovládacích prvků během hovoru (42px, zaoblení 12px).                                                                                                                                  |
| `.tp-button-group`            | Řádek tlačítek                   | Během hovoru obaluje tlačítka ztlumení a ukončení.                                                                                                                                                  |
| `.tp-button--start`           | Varianta tlačítka připojení      | Varianta ve zvýrazňující barvě zobrazená při zahajování hovoru.                                                                                                                                     |
| `.tp-button--mute`            | Přepínač ztlumení                | Během hovoru ztlumí nebo zapne mikrofon. Používá `--tp-surface`.                                                                                                                                    |
| `.tp-button--end`             | Tlačítko ukončení hovoru         | Ukončí hovor. Používá paletu `--tp-end-*`.                                                                                                                                                          |
| `.tp-button--loading`         | Modifikátor načítání             | Během připojování ztlumí vzhled tlačítka.                                                                                                                                                           |
| `.tp-icon` / `.tp-spin`       | Ikony                            | Velikost ikon tlačítek; `tp-spin` animuje spinner připojování.                                                                                                                                      |
| `.tp-status`                  | Blok stavu během hovoru          | Obaluje stavový řádek během stavů připojování/připojeno/chyba.                                                                                                                                      |
| `.tp-status__text`            | Stavový řádek                    | Text stavu připojení (např. „Připojování...“) nebo časovač hovoru. Podle stavu získá `.tp-status--connected` (zvýrazňující barva) nebo `.tp-status--error` (barva chyby).                           |
| `.tp-status__name`            | Místo pro jméno agenta           | Je součástí stavového bloku, ale v aktuálním rozvržení lišty se nevykresluje -- jméno agenta se místo toho zobrazuje v `.tp-name`.                                                                  |
| `.tp-status__dot`             | Stavová tečka                    | Styl pulzující tečky ve stavu připojení (používá `--tp-connected`).                                                                                                                                 |

***

## Příklady

### Vlastní zvýrazňující barva pomocí props

Nejjednodušší způsob, jak widget přizpůsobit vaší značce:

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

### Vlastní barvy pomocí CSS

Přepište vlastní vlastnosti pro úplnou kontrolu nad barvami. Nezapomeňte, že zvýrazňující barva pochází z propu `primaryColor`, nikoli z CSS:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>
```

```css theme={null}
/* 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í velikost

Zvětšete nebo zmenšete widget úpravou rozměrů lišty, tlačítek a textu:

```css theme={null}
/* 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;
}
```

### Skrytí textových popisků

Veškerý text widgetu je v `.tp-meta`. Skryjte jej celý, pokud chcete ponechat jen průběh zvuku a tlačítka:

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

Nebo skryjte jednotlivé části:

```css theme={null}
/* 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>
  Popisek v nečinném stavu je v `.tp-name`/`.tp-sub`, nikoli v `.tp-status` -- skrytím samotného `.tp-status` se při nečinnosti widgetu stále zobrazí název.
</Note>

### Přepsání specifická pro motiv

Cílení na konkrétní motiv pomocí třídy motivu:

```css theme={null}
/* 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);
}
```

***

## Vymezení pomocí className

Při použití komponenty React předejte prop `className`, abyste omezili přepsání na konkrétní instanci widgetu:

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

Poté na tuto třídu zacilte v CSS:

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

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

Díky tomu můžete mít na stejné stránce více instancí widgetu s různými styly. Každé instanci nastavte vlastní zvýrazňující barvu prostřednictvím propu `primaryColor` (CSS nemůže přepsat `--tp-accent` -- nastavuje se inline).

***

## Zcela vlastní uživatelské rozhraní

Pokud přepsání CSS nestačí, [headless hook](/cs/widget/headless-hook) vám poskytne úplnou kontrolu. Dodáte veškeré HTML a stylování, zatímco `useThunderPhone` spravuje hlasovou relaci. Hook také poskytuje `audioLevelRef` pro vytváření vizualizací reagujících na zvuk, například průběhů zvuku.

```tsx theme={null}
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ávnou volbou, když potřebujete animace reagující na zvuk, vlastní rozvržení nebo integraci do existující knihovny komponent. Přepsání CSS a vlastní vlastnosti jsou vhodnější pro rychlé úpravy motivu.
</Tip>