---
title: "Stiliziranje"
description: "Prilagodite izgled glasovnog widgeta ThunderPhonea pomoću CSS-a"
---

Widget se prikazuje kao staklasta traka s ugrađenim svijetlom i tamnom temom. Prilagodba je dostupna na tri razine: svojstva za uobičajene opcije, prilagođena CSS svojstva za teme i nadjačavanja CSS klasa za potpunu kontrolu.

<Note>
  Ove opcije stiliziranja primjenjuju se na unaprijed izrađeni widget koji prikazuju React komponenta `ThunderPhoneWidget` i CDN metoda `ThunderPhone.mount()`. Ako Vam je potrebno potpuno prilagođeno korisničko sučelje, umjesto toga upotrijebite [headless hook](/hr/widget/headless-hook).
</Note>

---

## Teme

Svojstvo `theme` kontrolira shemu boja widgeta. Primjenjuje klasu `tp--light` ili `tp--dark` na korijenski element widgeta:

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

| Tema | Klasa | Opis |
|-------|-------|-------------|
| `'light'` | `tp--light` | Svijetla pozadina s tamnim tekstom. Zadano. |
| `'dark'` | `tp--dark` | Tamna pozadina sa svijetlim tekstom. |

Obje teme koriste dizajn staklaste trake sa zamućenjem pozadine i suptilnom prozirnošću.

---

## Prilagođena CSS svojstva

Widget izlaže prilagođena CSS svojstva (varijable) koja možete nadjačati za promjenu boja bez mijenjanja pojedinačnih klasa. Definirana su klasom teme (`.tp--light` ili `.tp--dark`) primijenjenom na korijen `.tp-widget`:

| Svojstvo | Zadano (svijetlo) | Zadano (tamno) | Opis |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Boja naglaska: gumb za pokretanje, trake valnog oblika, točka povezivanja, tekst statusa povezivanja. Postavlja se **ugrađeno** iz propa `primaryColor`. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Pozadina trake (poluprozirna; zamućena pomoću `--tp-glass`). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Pozadina gumba za isključivanje zvuka. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Pozadina gumba za isključivanje zvuka pri prelasku mišem. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Obrubi trake i gumba. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Boja obruba pri prelasku mišem. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Primarni tekst (naslov, ime agenta). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Sekundarni tekst (podnaslov, redak statusa, mjerač vremena poziva). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter` koji stvara efekt stakla na traci. |
| `--tp-shadow` | skup sjena u tri sloja | skup sjena u tri sloja | `box-shadow` trake (prstenasti + bliski + udaljeni slojevi). |
| `--tp-shadow-hover` | skup sjena u tri sloja | skup sjena u tri sloja | Deklarirano za podizanje pri prelasku mišem; trenutačno nije primijenjeno nijednim pravilom. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Unutarnje gornje isticanje slojevito dodano sjeni trake. |
| `--tp-connected` | `#059669` | `#34d399` | Boja indikatora stanja povezanosti (točka statusa). |
| `--tp-error` | `#dc2626` | `#fb7185` | Boja teksta statusa pogreške. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Pozadina gumba za završetak poziva. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Boja ikone gumba za završetak poziva. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Obrub gumba za završetak poziva. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Pozadina gumba za završetak poziva pri prelasku mišem. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Deklarirano za zatamnjenje u stanju mirovanja; trenutačno nije primijenjeno nijednim pravilom. |

### Nadjačavanje prilagođenih svojstava

Postavite boju naglaska putem propa `primaryColor`:

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

<Warning>
  `--tp-accent` postavlja se kao **ugrađeni stil** iz propa `primaryColor`, stoga nadjačavanja svojstva `--tp-accent` u tablici stilova nemaju učinka. Promijenite boju naglaska pomoću propa. Sva ostala prilagođena svojstva možete nadjačati u CSS-u.
</Warning>

Nadjačajte ostala prilagođena svojstva pomoću CSS-a. Upotrijebite selektor s dvjema klasama (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) kako bi vaše pravilo imalo prednost nad klasom teme koja definira zadane vrijednosti, neovisno o redoslijedu tablice stilova:

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

Sve klase widgeta imaju prefiks `tp-` kako bi se izbjegli sukobi s vašim postojećim stilovima.

| Klasa | Element | Opis |
|-------|---------|-------------|
| `.tp-widget` | Korijenski omotač | Spremnik s fiksnim položajem (`position: fixed`, kut određen propom `position`, `z-index: 9999`). Sadrži klasu teme i osnovne postavke fonta; nema vlastite vizualne elemente. |
| `.tp--light` / `.tp--dark` | Modifikatori teme | Primjenjuju se na `.tp-widget` zajedno s temom; definiraju sva prilagođena svojstva `--tp-*`. |
| `.tp-bar` | Traka | Sama staklasta kapsula: pozadina, zamućenje pozadine, obrub, radijus `99px`, sjena. Široka je `300px`. |
| `.tp-meta` | Tekstualni blok | Spremnik za sav tekst -- naslov i podnaslov u stanju mirovanja, ime agenta i status tijekom poziva. |
| `.tp-name` | Primarna oznaka | Prikazuje prop `title` u stanju mirovanja te ime povezanog agenta (uz korištenje `title` kao zamjene) tijekom poziva. |
| `.tp-sub` | Podnaslov | Redak "Dostupno sada" prikazan u stanju mirovanja. |
| `.tp-start` | Gumb za poziv u stanju mirovanja | Kružni naglašeni gumb za pokretanje (42px). Kao pozadinu koristi `--tp-accent`. |
| `.tp-dot` | Točka povezivanja | Pulsirajuća naglašena točka prikazana lijevo od trake tijekom povezivanja. |
| `.tp-wave` / `.tp-wave--idle` | Valni oblik | Valni oblik s pet traka. `--idle` dodaje sporu animaciju disanja; tijekom poziva trake reagiraju na zvuk. |
| `.tp-button` | Gumbi tijekom poziva | Osnovni stil za kontrole tijekom poziva (42px, zaobljenje 12px). |
| `.tp-button-group` | Redak gumba | Obuhvaća gumbe za isključivanje mikrofona i završetak poziva tijekom poziva. |
| `.tp-button--start` | Varijanta gumba za povezivanje | Varijanta u naglašenoj boji prikazana tijekom pokretanja poziva. |
| `.tp-button--mute` | Prekidač za isključivanje mikrofona | Isključuje/uključuje mikrofon tijekom poziva. Koristi `--tp-surface`. |
| `.tp-button--end` | Gumb za završetak poziva | Prekida poziv. Koristi paletu `--tp-end-*`. |
| `.tp-button--loading` | Modifikator učitavanja | Zatamnjuje gumb tijekom povezivanja. |
| `.tp-icon` / `.tp-spin` | Ikone | Dimenzioniranje ikona gumba; `tp-spin` animira pokazivač povezivanja. |
| `.tp-status` | Blok statusa tijekom poziva | Obuhvaća redak statusa tijekom stanja povezivanja/povezanosti/pogreške. |
| `.tp-status__text` | Redak statusa | Tekst stanja veze (npr. "Povezivanje...") ili mjerač vremena poziva. Prima `.tp-status--connected` (naglašena boja) ili `.tp-status--error` (boja pogreške) ovisno o stanju. |
| `.tp-status__name` | Mjesto za ime agenta | Dio je bloka statusa, ali se ne prikazuje u trenutačnom rasporedu trake -- ime agenta umjesto toga prikazuje se u `.tp-name`. |
| `.tp-status__dot` | Točka statusa | Stil pulsirajuće točke za stanje povezanosti (koristi `--tp-connected`). |

---

## Primjeri

### Prilagođena akcentna boja putem propova

Najjednostavniji način brendiranja widgeta:

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

### Prilagođene boje putem CSS-a

Nadjačajte prilagođena svojstva za potpunu kontrolu nad bojama. Imajte na umu da akcentna boja dolazi iz propa `primaryColor`, a ne iz CSS-a:

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

### Prilagođena veličina

Povećajte ili smanjite widget prilagodbom dimenzija trake, gumba i teksta:

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

### Sakrijte tekstne oznake

Sav tekst widgeta nalazi se u `.tp-meta`. U potpunosti ga sakrijte kako bi ostali samo valni oblik i gumbi:

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

Ili sakrijte pojedinačne dijelove:

```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>
  Oznaka u stanju mirovanja nalazi se u `.tp-name`/`.tp-sub`, a ne u `.tp-status` -- skrivanje samo `.tp-status` i dalje prikazuje naslov kada je widget u stanju mirovanja.
</Note>

### Nadjačavanja specifična za temu

Ciljajte određenu temu pomoću klase teme:

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

---

## Ograničavanje opsega pomoću className

Kada koristite React komponentu, proslijedite prop `className` kako biste ograničili nadjačavanja na određenu instancu widgeta:

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

Zatim ciljajte tu klasu u CSS-u:

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

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

To vam omogućuje da na istoj stranici imate više instanci widgeta s različitim stilovima. Svakoj instanci dodijelite vlastitu akcentnu boju putem njezina propa `primaryColor` (CSS ne može nadjačati `--tp-accent` -- postavljen je ugrađeno).

---

## Potpuno prilagođeno sučelje

Ako nadjačavanja CSS-a nisu dovoljna, [headless hook](/hr/widget/headless-hook) pruža vam potpunu kontrolu. Vi pružate sav HTML i stiliziranje, dok `useThunderPhone` upravlja glasovnom sesijom. Hook također pruža `audioLevelRef` za izradu vizualizacija koje reagiraju na zvuk, poput valnih oblika.

```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 pravi je izbor kada trebate animacije koje reagiraju na zvuk, prilagođene rasporede ili integraciju u postojeću biblioteku komponenti. Nadjačavanja CSS-a i prilagođena svojstva bolja su za brze prilagodbe teme.
</Tip>