> ## 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.

# Stylizacja

> Dostosuj wygląd widżetu głosowego ThunderPhone za pomocą CSS

Widżet jest renderowany jako pasek w stylu glassmorphism z wbudowanymi jasnym i ciemnym motywem. Dostosowanie jest dostępne na trzech poziomach: właściwości dla typowych opcji, niestandardowe właściwości CSS do motywowania oraz nadpisania klas CSS dla pełnej kontroli.

<Note>
  Te opcje stylizacji dotyczą gotowego widżetu renderowanego przez komponent React `ThunderPhoneWidget` oraz metodę CDN `ThunderPhone.mount()`. Jeśli potrzebujesz całkowicie niestandardowego interfejsu, użyj zamiast tego [hooka headless](/pl/widget/headless-hook).
</Note>

***

## Motywy

Właściwość `theme` kontroluje schemat kolorów widżetu. Stosuje klasę `tp--light` lub `tp--dark` do głównego elementu widżetu:

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

| Motyw     | Klasa       | Opis                                    |
| --------- | ----------- | --------------------------------------- |
| `'light'` | `tp--light` | Jasne tło z ciemnym tekstem. Domyślnie. |
| `'dark'`  | `tp--dark`  | Ciemne tło z jasnym tekstem.            |

Oba motywy wykorzystują stylistykę paska glassmorphism z rozmyciem tła i subtelną przezroczystością.

***

## Niestandardowe właściwości CSS

Widżet udostępnia niestandardowe właściwości CSS (zmienne), które możesz zastąpić, aby zmienić kolory bez modyfikowania poszczególnych klas. Są one definiowane przez klasę motywu (`.tp--light` lub `.tp--dark`) zastosowaną do głównego elementu `.tp-widget`:

| Właściwość           | Domyślnie (jasny)                       | Domyślnie (ciemny)                       | Opis                                                                                                                                                    |
| -------------------- | --------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | Kolor akcentu: przycisk rozpoczęcia, paski fali dźwiękowej, kropka łączenia, tekst stanu połączenia. Ustawiany **inline** z właściwości `primaryColor`. |
| `--tp-bg`            | `rgba(255, 255, 255, 0.82)`             | `rgba(15, 15, 15, 0.85)`                 | Tło paska (półprzezroczyste; rozmywane przez `--tp-glass`).                                                                                             |
| `--tp-surface`       | `rgba(0, 0, 0, 0.04)`                   | `rgba(255, 255, 255, 0.07)`              | Tło przycisku wyciszenia.                                                                                                                               |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)`                   | `rgba(255, 255, 255, 0.12)`              | Tło przycisku wyciszenia po najechaniu.                                                                                                                 |
| `--tp-border`        | `rgba(0, 0, 0, 0.08)`                   | `rgba(255, 255, 255, 0.1)`               | Obramowania paska i przycisków.                                                                                                                         |
| `--tp-border-hover`  | `rgba(0, 0, 0, 0.14)`                   | `rgba(255, 255, 255, 0.18)`              | Kolor obramowania po najechaniu.                                                                                                                        |
| `--tp-text`          | `rgba(0, 0, 0, 0.88)`                   | `rgba(255, 255, 255, 0.95)`              | Tekst główny (tytuł, nazwa agenta).                                                                                                                     |
| `--tp-text-2`        | `rgba(0, 0, 0, 0.5)`                    | `rgba(255, 255, 255, 0.55)`              | Tekst drugorzędny (podtytuł, wiersz stanu, licznik połączenia).                                                                                         |
| `--tp-glass`         | `blur(32px) saturate(180%)`             | `blur(32px) saturate(180%)`              | `backdrop-filter`, który tworzy efekt szkła na pasku.                                                                                                   |
| `--tp-shadow`        | trzywarstwowy stos cieni                | trzywarstwowy stos cieni                 | Właściwość `box-shadow` paska (warstwy: pierścień + bliska + daleka).                                                                                   |
| `--tp-shadow-hover`  | trzywarstwowy stos cieni                | trzywarstwowy stos cieni                 | Zadeklarowane dla uniesienia po najechaniu; obecnie nie jest stosowane przez żadną regułę.                                                              |
| `--tp-glow`          | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Wewnętrzne górne podświetlenie nałożone na cień paska.                                                                                                  |
| `--tp-connected`     | `#059669`                               | `#34d399`                                | Kolor wskaźnika stanu połączenia (kropka statusu).                                                                                                      |
| `--tp-error`         | `#dc2626`                               | `#fb7185`                                | Kolor tekstu statusu błędu.                                                                                                                             |
| `--tp-end-bg`        | `rgba(239, 68, 68, 0.08)`               | `rgba(251, 113, 133, 0.12)`              | Tło przycisku zakończenia połączenia.                                                                                                                   |
| `--tp-end-color`     | `#ef4444`                               | `#fb7185`                                | Kolor ikony przycisku zakończenia połączenia.                                                                                                           |
| `--tp-end-border`    | `rgba(239, 68, 68, 0.12)`               | `rgba(251, 113, 133, 0.15)`              | Obramowanie przycisku zakończenia połączenia.                                                                                                           |
| `--tp-end-hover`     | `rgba(239, 68, 68, 0.14)`               | `rgba(251, 113, 133, 0.2)`               | Tło przycisku zakończenia połączenia po najechaniu.                                                                                                     |
| `--tp-idle-opacity`  | `0.4`                                   | `0.3`                                    | Zadeklarowane dla przyciemnienia w stanie bezczynności; obecnie nie jest stosowane przez żadną regułę.                                                  |

### Zastępowanie niestandardowych właściwości

Ustaw kolor akcentu za pomocą właściwości `primaryColor`:

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

<Warning>
  `--tp-accent` jest ustawiane jako **styl inline** z właściwości `primaryColor`, więc zastąpienia `--tp-accent` w arkuszu stylów nie działają. Zmień kolor akcentu za pomocą właściwości. Wszystkie pozostałe niestandardowe właściwości można zastąpić w CSS.
</Warning>

Zastąp pozostałe niestandardowe właściwości za pomocą CSS. Użyj selektora z dwiema klasami (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), aby Twoja reguła miała wyższy priorytet niż klasa motywu definiująca wartości domyślne, niezależnie od kolejności arkuszy stylów:

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

***

## Klasy CSS

Wszystkie klasy widżetu mają prefiks `tp-`, aby uniknąć konfliktów z istniejącymi stylami.

| Klasa                         | Element                                   | Opis                                                                                                                                                                                               |
| ----------------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.tp-widget`                  | Główny kontener                           | Kontener o stałej pozycji (`position: fixed`, róg ustawiany przez właściwość `position`, `z-index: 9999`). Zawiera klasę motywu i podstawowe ustawienia czcionki; nie ma własnej oprawy wizualnej. |
| `.tp--light` / `.tp--dark`    | Modyfikatory motywu                       | Stosowane do `.tp-widget` wraz z motywem; definiują wszystkie właściwości niestandardowe `--tp-*`.                                                                                                 |
| `.tp-bar`                     | Pasek                                     | Sama kapsuła ze szklistym efektem: tło, rozmycie tła, obramowanie, promień `99px`, cień. Szerokość `300px`.                                                                                        |
| `.tp-meta`                    | Blok tekstowy                             | Kontener na cały tekst -- tytuł i podtytuł w stanie bezczynności, nazwę agenta i status podczas połączenia.                                                                                        |
| `.tp-name`                    | Główna etykieta                           | Wyświetla właściwość `title` w stanie bezczynności oraz nazwę połączonego agenta (z użyciem `title` jako wartości zastępczej) podczas połączenia.                                                  |
| `.tp-sub`                     | Podtytuł                                  | Wiersz „Dostępny teraz” wyświetlany w stanie bezczynności.                                                                                                                                         |
| `.tp-start`                   | Przycisk połączenia w stanie bezczynności | Okrągły przycisk rozpoczęcia z akcentem (42px). Jako tła używa `--tp-accent`.                                                                                                                      |
| `.tp-dot`                     | Kropka łączenia                           | Pulsująca kropka akcentu wyświetlana po lewej stronie paska podczas łączenia.                                                                                                                      |
| `.tp-wave` / `.tp-wave--idle` | Przebieg fali                             | Pięciosłupkowy przebieg fali. `--idle` dodaje powolną animację oddechu; podczas połączenia słupki reagują na dźwięk.                                                                               |
| `.tp-button`                  | Przyciski podczas połączenia              | Styl podstawowy dla kontrolek podczas połączenia (42px, zaokrąglenie 12px).                                                                                                                        |
| `.tp-button-group`            | Wiersz przycisków                         | Obejmuje przyciski wyciszenia i zakończenia podczas połączenia.                                                                                                                                    |
| `.tp-button--start`           | Wariant przycisku połączenia              | Wariant w kolorze akcentu wyświetlany podczas rozpoczynania połączenia.                                                                                                                            |
| `.tp-button--mute`            | Przełącznik wyciszenia                    | Wycisza/włącza mikrofon podczas połączenia. Używa `--tp-surface`.                                                                                                                                  |
| `.tp-button--end`             | Przycisk zakończenia połączenia           | Rozłącza połączenie. Używa palety `--tp-end-*`.                                                                                                                                                    |
| `.tp-button--loading`         | Modyfikator ładowania                     | Przyciemnia przycisk podczas łączenia.                                                                                                                                                             |
| `.tp-icon` / `.tp-spin`       | Ikony                                     | Rozmiar ikon przycisków; `tp-spin` animuje wskaźnik łączenia.                                                                                                                                      |
| `.tp-status`                  | Blok statusu podczas połączenia           | Obejmuje wiersz statusu podczas stanów łączenia/połączenia/błędu.                                                                                                                                  |
| `.tp-status__text`            | Wiersz statusu                            | Tekst stanu połączenia (np. „Łączenie...”) albo licznik czasu połączenia. Otrzymuje `.tp-status--connected` (kolor akcentu) albo `.tp-status--error` (kolor błędu) zależnie od stanu.              |
| `.tp-status__name`            | Miejsce na nazwę agenta                   | Część bloku statusu, ale nie jest renderowana w bieżącym układzie paska -- nazwa agenta pojawia się zamiast tego w `.tp-name`.                                                                     |
| `.tp-status__dot`             | Kropka statusu                            | Styl pulsującej kropki stanu połączenia (używa `--tp-connected`).                                                                                                                                  |

***

## Przykłady

### Niestandardowy akcent za pomocą propsów

Najprostszy sposób na dostosowanie widżetu do marki:

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

### Niestandardowe kolory za pomocą CSS

Zastąp właściwości niestandardowe, aby uzyskać pełną kontrolę nad kolorami. Pamiętaj, że kolor akcentu pochodzi z propa `primaryColor`, a nie 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);
}
```

### Niestandardowy rozmiar

Powiększ lub pomniejsz widżet, dostosowując wymiary paska, przycisków i tekstu:

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

### Ukrywanie etykiet tekstowych

Cały tekst widżetu znajduje się w `.tp-meta`. Ukryj go całkowicie, aby pozostawić tylko przebieg fali i przyciski:

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

Możesz też ukryć poszczególne elementy:

```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>
  Etykieta stanu bezczynności znajduje się w `.tp-name`/`.tp-sub`, a nie w `.tp-status` -- ukrycie samego `.tp-status` nadal wyświetla tytuł, gdy widżet jest w stanie bezczynności.
</Note>

### Zastąpienia specyficzne dla motywu

Wybierz konkretny motyw za pomocą klasy motywu:

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

***

## Zakresowanie za pomocą className

Podczas korzystania z komponentu React przekaż prop `className`, aby ograniczyć zastąpienia do konkretnej instancji widżetu:

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

Następnie wskaż tę klasę w CSS:

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

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

Pozwala to mieć wiele instancji widżetu na tej samej stronie, z różnymi stylami. Nadaj każdej instancji własny akcent za pomocą propa `primaryColor` (CSS nie może zastąpić `--tp-accent` -- jest ustawiany inline).

***

## W pełni niestandardowy interfejs

Jeśli zastąpienia CSS nie wystarczają, [headless hook](/pl/widget/headless-hook) zapewnia pełną kontrolę. Udostępniasz cały HTML i stylowanie, a `useThunderPhone` obsługuje sesję głosową. Hook udostępnia również `audioLevelRef` do tworzenia wizualizacji reagujących na dźwięk, takich jak przebiegi fali.

```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 to właściwy wybór, gdy potrzebujesz animacji reagujących na dźwięk, niestandardowych układów lub integracji z istniejącą biblioteką komponentów. Zastąpienia CSS i właściwości niestandardowe lepiej sprawdzają się przy szybkich zmianach motywu.
</Tip>