---
title: "Стилови"
description: "Прилагодите изглед ThunderPhone гласовног виџета помоћу CSS-а"
---

Виџет се приказује као стакласта трака са уграђеним светлом и тамним темама. Прилагођавање је доступно на три нивоа: пропси за уобичајене опције, CSS прилагођена својства за теме и замене CSS класа за потпуну контролу.

<Note>
  Ове опције стилизовања примењују се на унапред израђени виџет који приказују React компонента `ThunderPhoneWidget` и CDN метод `ThunderPhone.mount()`. Ако Вам је потребан потпуно прилагођен кориснички интерфејс, уместо тога користите [headless hook](/sr/widget/headless-hook).
</Note>

---

## Теме

Пропс `theme` контролише шему боја виџета. Примењује класу `tp--light` или `tp--dark` на корен виџета:

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

| Тема | Класа | Опис |
|-------|-------|-------------|
| `'light'` | `tp--light` | Светла позадина са тамним текстом. Подразумевано. |
| `'dark'` | `tp--dark` | Тамна позадина са светлим текстом. |

Обе теме користе дизајн стакласте траке са замућењем позадине и суптилном провидношћу.

---

## CSS прилагођена својства

Виџет излаже CSS прилагођена својства (променљиве) која можете заменити да бисте променили боје без измене појединачних класа. Дефинисана су класом теме (`.tp--light` или `.tp--dark`) примењеном на корен `.tp-widget`:

| Својство | Подразумевано (светло) | Подразумевано (тамно) | Опис |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Боја наглашавања: дугме за почетак, траке таласног облика, тачка повезивања, текст статуса повезивања. Поставља се **уграђено** преко својства `primaryColor`. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Позадина траке (полупрозирна; замућена помоћу `--tp-glass`). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Позадина дугмета за искључивање звука. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Позадина при преласку показивачем преко дугмета за искључивање звука. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Ивице траке и дугмади. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Боја ивице при преласку показивачем. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Примарни текст (наслов, име агента). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Секундарни текст (поднаслов, статусни ред, тајмер позива). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter` који ствара ефекат стакла на траци. |
| `--tp-shadow` | сенка у три слоја | сенка у три слоја | `box-shadow` траке (слојеви прстена + блиски + удаљени). |
| `--tp-shadow-hover` | сенка у три слоја | сенка у три слоја | Дефинисано за подизање при преласку показивачем; тренутно се не примењује ниједним правилом. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Унутрашње горње истицање слојевито додато сенци траке. |
| `--tp-connected` | `#059669` | `#34d399` | Боја индикатора стања повезаности (статусна тачка). |
| `--tp-error` | `#dc2626` | `#fb7185` | Боја текста статуса грешке. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Позадина дугмета за прекид позива. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Боја иконе дугмета за прекид позива. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Ивица дугмета за прекид позива. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Позадина дугмета за прекид позива при преласку показивачем. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Дефинисано за затамњивање у неактивном стању; тренутно се не примењује ниједним правилом. |

### Замена прилагођених својстава

Поставите боју наглашавања преко својства `primaryColor`:

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

<Warning>
  `--tp-accent` се поставља као **уграђени стил** преко својства `primaryColor`, па замене `--tp-accent` у стилском листу немају ефекта. Промените боју наглашавања помоћу својства. Свако друго прилагођено својство можете заменити у CSS-у.
</Warning>

Замените остала прилагођена својства помоћу CSS-а. Користите селектор са две класе (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) како би ваше правило имало предност над класом теме која дефинише подразумеване вредности, без обзира на редослед стилских листова:

```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 класе

Све класе виџета имају префикс `tp-` како би се избегли сукоби са вашим постојећим стиловима.

| Класа | Елемент | Опис |
|-------|---------|-------------|
| `.tp-widget` | Основни омотач | Контејнер са фиксном позицијом (`position: fixed`, угао се поставља пропом `position`, `z-index: 9999`). Садржи класу теме и основна подешавања фонта; нема сопствени визуелни оквир. |
| `.tp--light` / `.tp--dark` | Модификатори теме | Примењују се на `.tp-widget` уз тему; дефинишу сва `--tp-*` прилагођена својства. |
| `.tp-bar` | Трака | Сам стакласти елемент у облику пилуле: позадина, замућење позадине, ивица, полупречник `99px`, сенка. Ширине `300px`. |
| `.tp-meta` | Текстуални блок | Контејнер за сав текст -- наслов и поднаслов у стању мировања, име агента и статус током позива. |
| `.tp-name` | Примарна ознака | Приказује проп `title` у стању мировања, а име повезаног агента (са резервном вредношћу `title`) током позива. |
| `.tp-sub` | Поднаслов | Ред „Доступно сада“ који се приказује у стању мировања. |
| `.tp-start` | Дугме за позив у стању мировања | Кружно акцентно дугме за покретање (42px). Користи `--tp-accent` као позадину. |
| `.tp-dot` | Тачка повезивања | Пулсирајућа акцентна тачка приказана лево од траке током повезивања. |
| `.tp-wave` / `.tp-wave--idle` | Таласни облик | Таласни облик са пет трака. `--idle` додаје спору анимацију дисања; током позива траке реагују на звук. |
| `.tp-button` | Дугмад током позива | Основни стил за контроле током позива (42px, заобљени углови од 12px). |
| `.tp-button-group` | Ред дугмади | Обухвата дугмад за утишавање и прекид током позива. |
| `.tp-button--start` | Варијанта дугмета за повезивање | Варијанта у акцентној боји приказана док се позив покреће. |
| `.tp-button--mute` | Прекидач за утишавање | Утишава/укључује микрофон током позива. Користи `--tp-surface`. |
| `.tp-button--end` | Дугме за прекид позива | Прекида позив. Користи палету `--tp-end-*`. |
| `.tp-button--loading` | Модификатор учитавања | Затамњује дугме током повезивања. |
| `.tp-icon` / `.tp-spin` | Иконе | Величина иконе дугмета; `tp-spin` анимира индикатор повезивања. |
| `.tp-status` | Блок статуса током позива | Обухвата ред статуса током стања повезивања/повезаности/грешке. |
| `.tp-status__text` | Ред статуса | Текст стања повезивања (нпр. „Повезивање...“) или тајмер позива. Добија `.tp-status--connected` (акцентна боја) или `.tp-status--error` (боја грешке) у зависности од стања. |
| `.tp-status__name` | Место за име агента | Део блока статуса, али се не приказује у тренутном распореду траке -- име агента се уместо тога приказује у `.tp-name`. |
| `.tp-status__dot` | Тачка статуса | Стил пулсирајуће тачке за стање повезаности (користи `--tp-connected`). |

---

## Примери

### Прилагођена акцентна боја путем пропса

Најједноставнији начин да брендирате виџет:

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

### Прилагођене боје путем CSS-а

Замените прилагођена својства за потпуну контролу боја. Имајте на уму да акцентна боја долази из пропса `primaryColor`, а не из 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);
}
```

### Прилагођена величина

Повећајте или смањите виџет прилагођавањем димензија траке, дугмади и текста:

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

### Сакријте текстуалне ознаке

Сав текст виџета налази се у `.tp-meta`. У потпуности га сакријте да бисте задржали само таласни облик и дугмад:

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

Или сакријте појединачне делове:

```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>
  Ознака у стању мировања налази се у `.tp-name`/`.tp-sub`, а не у `.tp-status` -- сакривање само `.tp-status` и даље приказује наслов када је виџет у стању мировања.
</Note>

### Замене специфичне за тему

Циљајте одређену тему помоћу класе теме:

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

---

## Ограничавање опсега помоћу className

Када користите React компоненту, проследите пропс `className` да бисте ограничили замене на одређену инстанцу виџета:

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

Затим циљајте ту класу у свом CSS-у:

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

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

Ово вам омогућава да на истој страници имате више инстанци виџета са различитим стиловима. Свакој инстанци доделите сопствену акцентну боју путем њеног пропса `primaryColor` (CSS не може да замени `--tp-accent` -- постављен је уметнуто).

---

## Потпуно прилагођен UI

Ако CSS замене нису довољне, [headless hook](/sr/widget/headless-hook) вам пружа потпуну контролу. Ви обезбеђујете сав HTML и стилизовање, док `useThunderPhone` управља гласовном сесијом. Hook такође обезбеђује `audioLevelRef` за израду визуелизација које реагују на звук, као што су таласни облици.

```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 је прави избор када су вам потребне анимације које реагују на звук, прилагођени распореди или интеграција у постојећу библиотеку компоненти. CSS замене и прилагођена својства су бољи избор за брза прилагођавања теме.
</Tip>