---
title: "Stilizare"
description: "Personalizați aspectul widgetului vocal ThunderPhone cu CSS"
---

Widgetul este redat ca o bară cu efect de sticlă, cu teme deschise și întunecate integrate. Personalizarea este disponibilă la trei niveluri: proprietăți pentru opțiuni comune, proprietăți personalizate CSS pentru teme și suprascrieri de clase CSS pentru control complet.

<Note>
  Aceste opțiuni de stilizare se aplică widgetului predefinit redat de componenta React `ThunderPhoneWidget` și de metoda CDN `ThunderPhone.mount()`. Dacă aveți nevoie de o interfață complet personalizată, utilizați în schimb [hookul headless](/ro/widget/headless-hook).
</Note>

---

## Teme

Proprietatea `theme` controlează schema de culori a widgetului. Aceasta aplică o clasă `tp--light` sau `tp--dark` rădăcinii widgetului:

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

| Temă | Clasă | Descriere |
|-------|-------|-------------|
| `'light'` | `tp--light` | Fundal deschis cu text închis. Implicită. |
| `'dark'` | `tp--dark` | Fundal închis cu text deschis. |

Ambele teme folosesc designul de bară cu efect de sticlă, cu estomparea fundalului și transparență subtilă.

---

## Proprietăți personalizate CSS

Widgetul expune proprietăți personalizate CSS (variabile) pe care le puteți suprascrie pentru a modifica culorile fără a modifica clase individuale. Acestea sunt definite de clasa de temă (`.tp--light` sau `.tp--dark`) aplicată rădăcinii `.tp-widget`:

| Proprietate | Implicit (deschis) | Implicit (închis) | Descriere |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Culoare de accent: butonul de pornire, barele formei de undă, punctul de conectare, textul stării de conectare. Setată **inline** din proprietatea `primaryColor`. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Fundalul barei (translucid; estompat de `--tp-glass`). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Fundalul butonului de dezactivare a sunetului. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Fundalul la trecerea cursorului peste butonul de dezactivare a sunetului. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Chenarele barei și ale butoanelor. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Culoarea chenarului la trecerea cursorului. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Text principal (titlu, numele agentului). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Text secundar (subtitlu, linia de stare, cronometrul apelului). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter` care creează efectul de sticlă pe bară. |
| `--tp-shadow` | stivă de umbre cu trei straturi | stivă de umbre cu trei straturi | `box-shadow` al barei (straturi inel + apropiat + îndepărtat). |
| `--tp-shadow-hover` | stivă de umbre cu trei straturi | stivă de umbre cu trei straturi | Declarată pentru elevarea la trecerea cursorului; nu este aplicată în prezent de nicio regulă. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Evidențierea interioară de sus suprapusă peste umbra barei. |
| `--tp-connected` | `#059669` | `#34d399` | Culoarea indicatorului pentru starea de conectare (punct de stare). |
| `--tp-error` | `#dc2626` | `#fb7185` | Culoarea textului de stare pentru erori. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Fundalul butonului de încheiere a apelului. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Culoarea pictogramei butonului de încheiere a apelului. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Chenarul butonului de încheiere a apelului. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Fundalul la trecerea cursorului peste butonul de încheiere a apelului. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Declarată pentru estomparea în starea inactivă; nu este aplicată în prezent de nicio regulă. |

### Suprascrierea proprietăților personalizate

Setați culoarea de accent prin proprietatea `primaryColor`:

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

<Warning>
  `--tp-accent` este setată ca **stil inline** din proprietatea `primaryColor`, astfel încât suprascrierile din foile de stil pentru `--tp-accent` nu au efect. Modificați culoarea de accent folosind proprietatea. Orice altă proprietate personalizată poate fi suprascrisă în CSS.
</Warning>

Suprascrieți celelalte proprietăți personalizate cu CSS. Utilizați un selector cu două clase (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) pentru ca regula dumneavoastră să aibă prioritate față de clasa de temă care definește valorile implicite, indiferent de ordinea foilor de stil:

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

---

## Clase CSS

Toate clasele widgetului au prefixul `tp-` pentru a evita conflictele cu stilurile dumneavoastră existente.

| Clasă | Element | Descriere |
|-------|---------|-------------|
| `.tp-widget` | Container rădăcină | Container cu poziție fixă (`position: fixed`, colț stabilit de proprietatea `position`, `z-index: 9999`). Include clasa de temă și setările de bază pentru font; nu are propriile elemente vizuale. |
| `.tp--light` / `.tp--dark` | Modificatori de temă | Aplicate la `.tp-widget` împreună cu tema; definesc toate proprietățile personalizate `--tp-*`. |
| `.tp-bar` | Bara | Elementul tip pastilă cu efect glassmorphic: fundal, estompare de fundal, chenar, rază de `99px`, umbră. Lățime de `300px`. |
| `.tp-meta` | Bloc de text | Container pentru tot textul -- titlu și subtitlu în repaus, numele agentului și starea în timpul unui apel. |
| `.tp-name` | Etichetă principală | Afișează proprietatea `title` în repaus și numele agentului conectat (folosind `title` ca alternativă) în timpul unui apel. |
| `.tp-sub` | Subtitlu | Linia „Disponibil acum” afișată în repaus. |
| `.tp-start` | Buton de apel în repaus | Butonul circular de pornire cu accent (42px). Utilizează `--tp-accent` ca fundal. |
| `.tp-dot` | Punct de conectare | Punct de accent pulsatoriu afișat în partea stângă a barei în timpul conectării. |
| `.tp-wave` / `.tp-wave--idle` | Formă de undă | Forma de undă cu cinci bare. `--idle` adaugă animația lentă de respirație; în timpul unui apel, barele reacționează la sunet. |
| `.tp-button` | Butoane în apel | Stil de bază pentru comenzile din timpul apelului (42px, colțuri rotunjite de 12px). |
| `.tp-button-group` | Rând de butoane | Include butoanele de dezactivare a sunetului și de încheiere în timpul unui apel. |
| `.tp-button--start` | Variantă de buton pentru conectare | Variantă în culoarea de accent, afișată în timp ce începe un apel. |
| `.tp-button--mute` | Comutator de dezactivare a sunetului | Dezactivează/activează microfonul în timpul unui apel. Utilizează `--tp-surface`. |
| `.tp-button--end` | Buton de încheiere a apelului | Închide apelul. Utilizează paleta `--tp-end-*`. |
| `.tp-button--loading` | Modificator de încărcare | Estompează butonul în timpul conectării. |
| `.tp-icon` / `.tp-spin` | Pictograme | Dimensiunea pictogramelor butoanelor; `tp-spin` animează indicatorul de conectare. |
| `.tp-status` | Bloc de stare în apel | Include linia de stare în timpul stărilor de conectare/conectat/eroare. |
| `.tp-status__text` | Linie de stare | Textul stării conexiunii (de exemplu, „Se conectează...”) sau cronometrul apelului. Primește `.tp-status--connected` (culoare de accent) sau `.tp-status--error` (culoare de eroare) în funcție de stare. |
| `.tp-status__name` | Zonă pentru numele agentului | Parte a blocului de stare, dar nu este afișată în aspectul actual al barei -- numele agentului apare în schimb în `.tp-name`. |
| `.tp-status__dot` | Punct de stare | Stil de punct pulsatoriu pentru starea conectată (utilizează `--tp-connected`). |

---

## Exemple

### Accent personalizat prin proprietăți

Cea mai simplă modalitate de a personaliza widgetul cu identitatea de brand:

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

### Culori personalizate prin CSS

Suprascrieți proprietățile personalizate pentru control complet asupra culorilor. Rețineți că accentul provine din proprietatea `primaryColor`, nu din 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);
}
```

### Dimensiune personalizată

Măriți sau micșorați widgetul ajustând dimensiunile barei, butoanelor și textului:

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

### Ascundeți etichetele text

Tot textul widgetului se află în `.tp-meta`. Ascundeți-l complet pentru a păstra doar forma de undă și butoanele:

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

Sau ascundeți elemente individuale:

```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>
  Eticheta pentru starea inactivă se află în `.tp-name`/`.tp-sub`, nu în `.tp-status` -- ascunderea doar a `.tp-status` afișează în continuare titlul când widgetul este inactiv.
</Note>

### Suprascrieri specifice temei

Vizați o anumită temă folosind clasa temei:

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

---

## Limitarea domeniului cu className

Când utilizați componenta React, transmiteți o proprietate `className` pentru a limita suprascrierile la o anumită instanță de widget:

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

Apoi vizați acea clasă în CSS:

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

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

Astfel, puteți avea mai multe instanțe de widget pe aceeași pagină, cu stiluri diferite. Oferiți fiecărei instanțe propriul accent prin proprietatea `primaryColor` (CSS nu poate suprascrie `--tp-accent` -- acesta este setat inline).

---

## Interfață complet personalizată

Dacă suprascrierile CSS nu sunt suficiente, [hookul headless](/ro/widget/headless-hook) vă oferă control complet. Furnizați tot HTML-ul și stilizarea, în timp ce `useThunderPhone` gestionează sesiunea vocală. Hookul oferă și `audioLevelRef` pentru crearea de vizualizări reactive la sunet, cum ar fi formele de undă.

```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>
  Hookul headless este alegerea potrivită când aveți nevoie de animații reactive la sunet, machete personalizate sau integrare într-o bibliotecă de componente existentă. Suprascrierile CSS și proprietățile personalizate sunt mai potrivite pentru ajustări rapide ale temei.
</Tip>