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

# Stilizare

> 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 theme={null}
<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 theme={null}
<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 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);
}
```

***

## 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 theme={null}
<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 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);
}
```

### Dimensiune personalizată

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

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

### 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 theme={null}
.tp-meta {
  display: none;
}
```

Sau ascundeți elemente individuale:

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

***

## 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 theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>
```

Apoi vizați acea clasă în CSS:

```css theme={null}
.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 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>
  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>