---
title: "Oblikovanje"
description: "Prilagodite videz glasovnega gradnika ThunderPhone s CSS"
---

Gradnik se upodobi kot steklast trak z vgrajenima svetlo in temno temo. Prilagajanje je na voljo na treh ravneh: lastnosti za pogoste možnosti, lastnosti CSS po meri za oblikovanje teme in preglasitve razredov CSS za popoln nadzor.

<Note>
  Te možnosti oblikovanja veljajo za vnaprej pripravljen gradnik, upodobljen s komponento React `ThunderPhoneWidget` in metodo CDN `ThunderPhone.mount()`. Če potrebujete popolnoma prilagojen uporabniški vmesnik, namesto tega uporabite [brezglavni kavelj](/sl/widget/headless-hook).
</Note>

---

## Teme

Lastnost `theme` nadzoruje barvno shemo gradnika. Koren gradnika dobi razred `tp--light` ali `tp--dark`:

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

| Tema | Razred | Opis |
|-------|-------|-------------|
| `'light'` | `tp--light` | Svetlo ozadje s temnim besedilom. Privzeto. |
| `'dark'` | `tp--dark` | Temno ozadje s svetlim besedilom. |

Obe temi uporabljata zasnovo steklastega traku z zameglitvijo ozadja in nežno prosojnostjo.

---

## CSS-lastnosti po meri

Gradnik izpostavlja CSS-lastnosti po meri (spremenljivke), ki jih lahko prepišete za spreminjanje barv, ne da bi spreminjali posamezne razrede. Določene so s razredom teme (`.tp--light` ali `.tp--dark`), uporabljenim na korenskem elementu `.tp-widget`:

| Lastnost | Privzeto (svetlo) | Privzeto (temno) | Opis |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Barva poudarka: gumb za začetek, stolpci valovne oblike, pika povezovanja, besedilo stanja povezave. Nastavljena **v vrstičnem slogu** z lastnostjo `primaryColor`. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Ozadje vrstice (polprosojno; zamegljeno z `--tp-glass`). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Ozadje gumba za utišanje. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Ozadje gumba za utišanje ob prehodu miške. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Obrobe vrstice in gumbov. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Barva obrobe ob prehodu miške. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Primarno besedilo (naslov, ime agenta). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Sekundarno besedilo (podnaslov, vrstica stanja, časovnik klica). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter`, ki na vrstici ustvari stekleni učinek. |
| `--tp-shadow` | trislojni niz senc | trislojni niz senc | `box-shadow` vrstice (plasti obroča + bližnja + oddaljena). |
| `--tp-shadow-hover` | trislojni niz senc | trislojni niz senc | Določeno za dvig ob prehodu miške; trenutno ni uporabljeno v nobenem pravilu. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Notranji zgornji poudarek, dodan senci vrstice. |
| `--tp-connected` | `#059669` | `#34d399` | Barva indikatorja povezanega stanja (pika stanja). |
| `--tp-error` | `#dc2626` | `#fb7185` | Barva besedila stanja napake. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Ozadje gumba za končanje klica. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Barva ikone gumba za končanje klica. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Obroba gumba za končanje klica. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Ozadje gumba za končanje klica ob prehodu miške. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Določeno za zatemnitev v mirovanju; trenutno ni uporabljeno v nobenem pravilu. |

### Prepisovanje lastnosti po meri

Barvo poudarka nastavite z lastnostjo `primaryColor`:

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

<Warning>
  `--tp-accent` je nastavljen kot **vrstični slog** z lastnostjo `primaryColor`, zato prepisovanja `--tp-accent` v slogovni predlogi nimajo učinka. Barvo poudarka spremenite z lastnostjo. Vse druge lastnosti po meri lahko prepišete v CSS.
</Warning>

Druge lastnosti po meri prepišite s CSS. Uporabite izbirnik z dvema razredoma (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), da bo vaše pravilo prevladalo nad razredom teme, ki določa privzete vrednosti, ne glede na vrstni red slogovne predloge:

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

---

## Razredi CSS

Vsi razredi pripomočka imajo predpono `tp-`, da preprečite spore z obstoječimi slogi.

| Razred | Element | Opis |
|-------|---------|-------------|
| `.tp-widget` | Korenski ovoj | Vsebnik s fiksnim položajem (`position: fixed`, kot določa lastnost `position`, `z-index: 9999`). Vsebuje razred teme in osnovne nastavitve pisave; sam po sebi nima vizualnega okvirja. |
| `.tp--light` / `.tp--dark` | Modifikatorji teme | Uporabljena za `.tp-widget` skupaj s temo; določata vse lastnosti po meri `--tp-*`. |
| `.tp-bar` | Vrstica | Sam steklen kapsulast element: ozadje, zameglitev ozadja, obroba, polmer `99px`, senca. Širok je `300px`. |
| `.tp-meta` | Besedilni blok | Vsebnik za vse besedilo -- naslov in podnaslov v stanju pripravljenosti ter ime agenta in stanje med klicem. |
| `.tp-name` | Primarna oznaka | V stanju pripravljenosti prikaže lastnost `title`, med klicem pa ime povezanega agenta (če ni na voljo, uporabi `title`). |
| `.tp-sub` | Podnaslov | Vrstica »Na voljo zdaj«, prikazana v stanju pripravljenosti. |
| `.tp-start` | Gumb za začetek klica v stanju pripravljenosti | Krožni poudarjeni gumb za začetek (42px). Kot ozadje uporablja `--tp-accent`. |
| `.tp-dot` | Pika povezovanja | Utripajoča poudarjena pika, prikazana na levi strani vrstice med povezovanjem. |
| `.tp-wave` / `.tp-wave--idle` | Valovna oblika | Petstolpčna valovna oblika. `--idle` doda počasno animacijo dihanja; med klicem se stolpci odzivajo na zvok. |
| `.tp-button` | Gumbi med klicem | Osnovni slog za kontrolnike med klicem (42px, zaobljeni na 12px). |
| `.tp-button-group` | Vrstica gumbov | Med klicem obdaja gumba za izklop zvoka in končanje klica. |
| `.tp-button--start` | Različica gumba za povezovanje | Različica v poudarjeni barvi, prikazana med začetkom klica. |
| `.tp-button--mute` | Preklop izklopa zvoka | Med klicem izklopi/vklopi zvok mikrofona. Uporablja `--tp-surface`. |
| `.tp-button--end` | Gumb za končanje klica | Prekine klic. Uporablja paleto `--tp-end-*`. |
| `.tp-button--loading` | Modifikator nalaganja | Med povezovanjem zatemni gumb. |
| `.tp-icon` / `.tp-spin` | Ikone | Določanje velikosti ikon gumbov; `tp-spin` animira indikator povezovanja. |
| `.tp-status` | Blok stanja med klicem | Obdaja vrstico stanja med stanji povezovanja/povezanosti/napake. |
| `.tp-status__text` | Vrstica stanja | Besedilo stanja povezave (npr. »Povezovanje ...«) ali časovnik klica. Glede na stanje dobi `.tp-status--connected` (poudarjena barva) ali `.tp-status--error` (barva napake). |
| `.tp-status__name` | Mesto za ime agenta | Del bloka stanja, vendar ni prikazan v trenutni postavitvi vrstice -- ime agenta je namesto tega prikazano v `.tp-name`. |
| `.tp-status__dot` | Pika stanja | Slog utripajoče pike za stanje povezanosti (uporablja `--tp-connected`). |

---

## Primeri

### Barva poudarka po meri prek lastnosti

Najpreprostejši način za prilagoditev znamke gradnika:

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

### Barve po meri prek CSS-ja

Za popoln nadzor nad barvami preglasite lastnosti po meri. Ne pozabite, da barva poudarka izhaja iz lastnosti `primaryColor`, ne iz CSS-ja:

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

### Velikost po meri

Gradnik povečajte ali pomanjšajte s prilagoditvijo dimenzij vrstice, gumbov in besedila:

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

### Skrijte besedilne oznake

Vse besedilo gradnika je v `.tp-meta`. Skrijte ga v celoti, da ostanejo samo valovna oblika in gumbi:

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

Lahko pa skrijete posamezne dele:

```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 v stanju mirovanja je v `.tp-name`/`.tp-sub`, ne v `.tp-status` -- če skrijete samo `.tp-status`, je naslov še vedno prikazan, ko je gradnik v stanju mirovanja.
</Note>

### Preglasitve za posamezno temo

Določeno temo ciljajte z razredom 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);
}
```

---

## Omejevanje obsega s className

Pri uporabi komponente React posredujte lastnost `className`, da preglasitve omejite na določen primerek gradnika:

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

Nato ta razred ciljajte v CSS-ju:

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

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

Tako lahko imate na isti strani več primerkov gradnika z različnimi slogi. Vsakemu primerku nastavite lastno barvo poudarka prek njegove lastnosti `primaryColor` (CSS ne more preglasiti `--tp-accent` -- nastavljen je v vrstici).

---

## Popolnoma prilagojen uporabniški vmesnik

Če preglasitve CSS-ja niso dovolj, vam [headless kavelj](/sl/widget/headless-hook) omogoča popoln nadzor. Zagotovite ves HTML in oblikovanje, medtem ko `useThunderPhone` upravlja glasovno sejo. Kavelj zagotavlja tudi `audioLevelRef` za izdelavo na zvok odzivnih vizualizacij, kot so valovne oblike.

```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 kavelj je prava izbira, kadar potrebujete na zvok odzivne animacije, postavitve po meri ali integracijo v obstoječo knjižnico komponent. Preglasitve CSS-ja in lastnosti po meri so primernejše za hitre prilagoditve teme.
</Tip>