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

# Stilizēšana

> Pielāgojiet ThunderPhone balss logrīka izskatu, izmantojot CSS

Logrīks tiek renderēts kā stikla efekta josla ar iebūvētām gaišo un tumšo motīvu versijām. Pielāgošana ir pieejama trīs līmeņos: rekvizīti bieži lietotām opcijām, CSS pielāgotās īpašības motīvu veidošanai un CSS klašu pārrakstīšana pilnīgai kontrolei.

<Note>
  Šīs stila opcijas attiecas uz iepriekš izveidoto logrīku, ko renderē `ThunderPhoneWidget` React komponents un `ThunderPhone.mount()` CDN metode. Ja jums nepieciešama pilnībā pielāgota lietotāja saskarne, izmantojiet [headless āķi](/lv/widget/headless-hook).
</Note>

***

## Motīvi

Rekvizīts `theme` nosaka logrīka krāsu shēmu. Tas logrīka saknes elementam piešķir klasi `tp--light` vai `tp--dark`:

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

| Motīvs    | Klase       | Apraksts                                 |
| --------- | ----------- | ---------------------------------------- |
| `'light'` | `tp--light` | Gaišs fons ar tumšu tekstu. Noklusējums. |
| `'dark'`  | `tp--dark`  | Tumšs fons ar gaišu tekstu.              |

Abi motīvi izmanto stikla efekta joslas dizainu ar fona izpludināšanu un smalku caurspīdīgumu.

***

## CSS pielāgotie rekvizīti

Logrīks nodrošina CSS pielāgotos rekvizītus (mainīgos), kurus varat pārrakstīt, lai mainītu krāsas, nemainot atsevišķas klases. Tos nosaka motīva klase (`.tp--light` vai `.tp--dark`), kas tiek lietota `.tp-widget` saknes elementam:

| Rekvizīts            | Noklusējums (gaišais)                   | Noklusējums (tumšais)                    | Apraksts                                                                                                                                                     |
| -------------------- | --------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | Akcenta krāsa: sākšanas poga, viļņu formas joslas, savienojuma punkts, savienojuma statusa teksts. Iestatīta **tieši elementā** no `primaryColor` rekvizīta. |
| `--tp-bg`            | `rgba(255, 255, 255, 0.82)`             | `rgba(15, 15, 15, 0.85)`                 | Joslas fons (caurspīdīgs; aizmiglots ar `--tp-glass`).                                                                                                       |
| `--tp-surface`       | `rgba(0, 0, 0, 0.04)`                   | `rgba(255, 255, 255, 0.07)`              | Izslēgšanas pogas fons.                                                                                                                                      |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)`                   | `rgba(255, 255, 255, 0.12)`              | Izslēgšanas pogas fons, novietojot kursoru virs tās.                                                                                                         |
| `--tp-border`        | `rgba(0, 0, 0, 0.08)`                   | `rgba(255, 255, 255, 0.1)`               | Joslas un pogu apmales.                                                                                                                                      |
| `--tp-border-hover`  | `rgba(0, 0, 0, 0.14)`                   | `rgba(255, 255, 255, 0.18)`              | Apmales krāsa, novietojot kursoru virs elementa.                                                                                                             |
| `--tp-text`          | `rgba(0, 0, 0, 0.88)`                   | `rgba(255, 255, 255, 0.95)`              | Primārais teksts (virsraksts, aģenta vārds).                                                                                                                 |
| `--tp-text-2`        | `rgba(0, 0, 0, 0.5)`                    | `rgba(255, 255, 255, 0.55)`              | Sekundārais teksts (apakšvirsraksts, statusa rinda, zvana taimeris).                                                                                         |
| `--tp-glass`         | `blur(32px) saturate(180%)`             | `blur(32px) saturate(180%)`              | `backdrop-filter`, kas joslai izveido stikla efektu.                                                                                                         |
| `--tp-shadow`        | trīsslāņu ēnu kopa                      | trīsslāņu ēnu kopa                       | Joslas `box-shadow` (gredzena + tuvās + tālās kārtas).                                                                                                       |
| `--tp-shadow-hover`  | trīsslāņu ēnu kopa                      | trīsslāņu ēnu kopa                       | Deklarēta pacēlumam, novietojot kursoru virs elementa; pašlaik to nepiemēro neviens noteikums.                                                               |
| `--tp-glow`          | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Iekšējais augšējais izcēlums, kas pievienots joslas ēnai.                                                                                                    |
| `--tp-connected`     | `#059669`                               | `#34d399`                                | Savienotā stāvokļa indikatora krāsa (statusa punkts).                                                                                                        |
| `--tp-error`         | `#dc2626`                               | `#fb7185`                                | Kļūdas stāvokļa statusa teksta krāsa.                                                                                                                        |
| `--tp-end-bg`        | `rgba(239, 68, 68, 0.08)`               | `rgba(251, 113, 133, 0.12)`              | Zvana beigšanas pogas fons.                                                                                                                                  |
| `--tp-end-color`     | `#ef4444`                               | `#fb7185`                                | Zvana beigšanas pogas ikonas krāsa.                                                                                                                          |
| `--tp-end-border`    | `rgba(239, 68, 68, 0.12)`               | `rgba(251, 113, 133, 0.15)`              | Zvana beigšanas pogas apmale.                                                                                                                                |
| `--tp-end-hover`     | `rgba(239, 68, 68, 0.14)`               | `rgba(251, 113, 133, 0.2)`               | Zvana beigšanas pogas fons, novietojot kursoru virs tās.                                                                                                     |
| `--tp-idle-opacity`  | `0.4`                                   | `0.3`                                    | Deklarēta dīkstāves stāvokļa aptumšošanai; pašlaik to nepiemēro neviens noteikums.                                                                           |

### Pielāgoto rekvizītu pārrakstīšana

Iestatiet akcenta krāsu, izmantojot `primaryColor` rekvizītu:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>
```

<Warning>
  `--tp-accent` tiek iestatīts kā **tiešs stils** no `primaryColor` rekvizīta, tāpēc `--tp-accent` pārrakstīšana stila lapā nedarbojas. Mainiet akcenta krāsu ar rekvizītu. Visus pārējos pielāgotos rekvizītus var pārrakstīt CSS.
</Warning>

Pārrakstiet pārējos pielāgotos rekvizītus ar CSS. Izmantojiet divu klašu selektoru (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), lai jūsu noteikumam būtu augstāka prioritāte nekā motīva klasei, kas nosaka noklusējuma vērtības, neatkarīgi no stila lapu secības:

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

***

## CSS klases

Visām logrīka klasēm ir prefikss `tp-`, lai izvairītos no konfliktiem ar jūsu esošajiem stiliem.

| Klase                         | Elements                    | Apraksts                                                                                                                                                                                                |
| ----------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.tp-widget`                  | Saknes ietvars              | Fiksētas pozīcijas konteiners (`position: fixed`, stūris tiek iestatīts ar `position` parametru, `z-index: 9999`). Ietver motīva klasi un pamata fonta iestatījumus; tam pašam nav vizuāla noformējuma. |
| `.tp--light` / `.tp--dark`    | Motīva modifikatori         | Tiek lietoti `.tp-widget` kopā ar motīvu; definē visus `--tp-*` pielāgotos rekvizītus.                                                                                                                  |
| `.tp-bar`                     | Josla                       | Pati stikla efekta kapsula: fons, fona izpludinājums, apmale, `99px` rādiuss, ēna. `300px` plata.                                                                                                       |
| `.tp-meta`                    | Teksta bloks                | Konteiners visam tekstam -- virsrakstam un apakšvirsrakstam gaidstāves režīmā, aģenta vārdam un statusam zvana laikā.                                                                                   |
| `.tp-name`                    | Primārā etiķete             | Gaidstāves režīmā rāda `title` parametru, bet zvana laikā -- pievienotā aģenta vārdu (ja tā nav, `title`).                                                                                              |
| `.tp-sub`                     | Apakšvirsraksts             | Rindiņa “Pieejams tagad”, kas tiek rādīta gaidstāves režīmā.                                                                                                                                            |
| `.tp-start`                   | Gaidstāves zvana poga       | Apaļā akcenta sākšanas poga (42px). Kā fonu izmanto `--tp-accent`.                                                                                                                                      |
| `.tp-dot`                     | Savienojuma punkts          | Pulsējošs akcenta punkts, kas savienošanās laikā tiek rādīts joslas kreisajā pusē.                                                                                                                      |
| `.tp-wave` / `.tp-wave--idle` | Viļņu forma                 | Piecu joslu viļņu forma. `--idle` pievieno lēnu elpošanas animāciju; zvana laikā joslas reaģē uz audio.                                                                                                 |
| `.tp-button`                  | Zvana laikā pieejamās pogas | Pamata stils zvana laikā pieejamajām vadīklām (42px, noapaļojums 12px).                                                                                                                                 |
| `.tp-button-group`            | Pogas rinda                 | Zvana laikā ietver izslēgšanas un beigšanas pogas.                                                                                                                                                      |
| `.tp-button--start`           | Savienojuma pogas variants  | Akcenta krāsas variants, kas tiek rādīts zvana sākšanas laikā.                                                                                                                                          |
| `.tp-button--mute`            | Skaņas izslēgšanas slēdzis  | Zvana laikā izslēdz/ieslēdz mikrofonu. Izmanto `--tp-surface`.                                                                                                                                          |
| `.tp-button--end`             | Zvana beigšanas poga        | Pārtrauc zvanu. Izmanto `--tp-end-*` paleti.                                                                                                                                                            |
| `.tp-button--loading`         | Ielādes modifikators        | Savienošanās laikā padara pogu blāvāku.                                                                                                                                                                 |
| `.tp-icon` / `.tp-spin`       | Ikonas                      | Pogas ikonas izmērs; `tp-spin` animē savienošanās indikatoru.                                                                                                                                           |
| `.tp-status`                  | Zvana statusa bloks         | Ietver statusa rindiņu savienošanās/pievienotā/kļūdas stāvoklī.                                                                                                                                         |
| `.tp-status__text`            | Statusa rindiņa             | Savienojuma stāvokļa teksts (piemēram, “Savienojas...”) vai zvana taimeris. Atkarībā no stāvokļa saņem `.tp-status--connected` (akcenta krāsa) vai `.tp-status--error` (kļūdas krāsa).                  |
| `.tp-status__name`            | Aģenta vārda vietturis      | Statusa bloka daļa, taču pašreizējā joslas izkārtojumā netiek atveidota -- aģenta vārds tā vietā tiek rādīts `.tp-name`.                                                                                |
| `.tp-status__dot`             | Statusa punkts              | Pulsējoša pievienotā stāvokļa punkta stils (izmanto `--tp-connected`).                                                                                                                                  |

***

## Piemēri

### Pielāgots akcents, izmantojot props

Vienkāršākais veids, kā pielāgot logrīku savam zīmolam:

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

### Pielāgotas krāsas, izmantojot CSS

Pārrakstiet pielāgotās īpašības, lai pilnībā kontrolētu krāsas. Ņemiet vērā, ka akcents tiek noteikts ar `primaryColor` prop, nevis 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);
}
```

### Pielāgots izmērs

Palieliniet vai samaziniet logrīku, pielāgojot joslas, pogu un teksta izmērus:

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

### Paslēpt teksta etiķetes

Viss logrīka teksts atrodas `.tp-meta`. Paslēpiet to pilnībā, lai atstātu tikai viļņu formu un pogas:

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

Vai paslēpiet atsevišķus elementus:

```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>
  Gaidstāves etiķete atrodas `.tp-name`/`.tp-sub`, nevis `.tp-status` — paslēpjot tikai `.tp-status`, nosaukums joprojām tiek rādīts, kad logrīks ir gaidstāvē.
</Note>

### Konkrētai tēmai paredzētas pārrakstīšanas

Atlasiet konkrētu tēmu, izmantojot tēmas klasi:

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

***

## Tvēruma noteikšana ar className

Izmantojot React komponentu, nododiet `className` prop, lai attiecinātu pārrakstīšanas uz konkrētu logrīka instanci:

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

Pēc tam atlasiet šo klasi savā CSS:

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

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

Tas ļauj vienā lapā izmantot vairākas logrīka instances ar dažādiem stiliem. Piešķiriet katrai instancei savu akcentu, izmantojot tās `primaryColor` prop (CSS nevar pārrakstīt `--tp-accent` — tas tiek iestatīts rindā).

***

## Pilnībā pielāgota lietotāja saskarne

Ja ar CSS pārrakstīšanām nepietiek, [headless hook](/lv/widget/headless-hook) sniedz jums pilnīgu kontroli. Jūs nodrošināt visu HTML un noformējumu, kamēr `useThunderPhone` pārvalda balss sesiju. Hook nodrošina arī `audioLevelRef`, lai veidotu uz audio reaģējošas vizualizācijas, piemēram, viļņu formas.

```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>
  Headless hook ir pareizā izvēle, ja nepieciešamas uz audio reaģējošas animācijas, pielāgoti izkārtojumi vai integrācija esošā komponentu bibliotēkā. CSS pārrakstīšanas un pielāgotās īpašības ir piemērotākas ātriem tēmas pielāgojumiem.
</Tip>