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

# Tyylittely

> Mukauta ThunderPhone-puhewidgetin ulkoasua CSS:llä

Widget renderöidään lasimorfisena palkkina, jossa on sisäänrakennetut vaalea ja tumma teema. Mukautuksia on saatavilla kolmella tasolla: propit yleisille asetuksille, CSS-mukautetut ominaisuudet teemoitukseen ja CSS-luokkien ohitukset täydelliseen hallintaan.

<Note>
  Nämä tyylivaihtoehdot koskevat valmiiksi rakennettua widgetiä, jonka renderöivät React-komponentti `ThunderPhoneWidget` ja CDN-metodi `ThunderPhone.mount()`. Jos tarvitset täysin mukautetun käyttöliittymän, käytä sen sijaan [headless-hookia](/fi/widget/headless-hook).
</Note>

***

## Teemat

`theme`-proppi määrittää widgetin värimaailman. Se lisää `tp--light`- tai `tp--dark`-luokan widgetin juurielementtiin:

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

| Teema     | Luokka      | Kuvaus                                 |
| --------- | ----------- | -------------------------------------- |
| `'light'` | `tp--light` | Vaalea tausta ja tumma teksti. Oletus. |
| `'dark'`  | `tp--dark`  | Tumma tausta ja vaalea teksti.         |

Molemmissa teemoissa käytetään lasimorfista palkkimuotoilua, jossa on taustan sumentaminen ja hienovarainen läpinäkyvyys.

## CSS-mukautetut ominaisuudet

Widget tarjoaa CSS-mukautettuja ominaisuuksia (muuttujia), joita voit korvata muuttaaksesi värejä koskematta yksittäisiin luokkiin. Ne määritetään `.tp-widget`-juurielementtiin lisättävällä teemaluokalla (`.tp--light` tai `.tp--dark`):

| Ominaisuus           | Oletus (vaalea)                         | Oletus (tumma)                           | Kuvaus                                                                                                                                             |
| -------------------- | --------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | Korostusväri: aloituspainike, aaltomuotopalkit, yhdistämispiste, yhdistetyn tilan teksti. Asetetaan **sisäisenä** tyylinä `primaryColor`-propista. |
| `--tp-bg`            | `rgba(255, 255, 255, 0.82)`             | `rgba(15, 15, 15, 0.85)`                 | Palkin tausta (läpikuultava; sumentuu `--tp-glass`-ominaisuudella).                                                                                |
| `--tp-surface`       | `rgba(0, 0, 0, 0.04)`                   | `rgba(255, 255, 255, 0.07)`              | Mykistyspainikkeen tausta.                                                                                                                         |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)`                   | `rgba(255, 255, 255, 0.12)`              | Mykistyspainikkeen tausta osoitettaessa.                                                                                                           |
| `--tp-border`        | `rgba(0, 0, 0, 0.08)`                   | `rgba(255, 255, 255, 0.1)`               | Palkin ja painikkeen reunat.                                                                                                                       |
| `--tp-border-hover`  | `rgba(0, 0, 0, 0.14)`                   | `rgba(255, 255, 255, 0.18)`              | Reunan väri osoitettaessa.                                                                                                                         |
| `--tp-text`          | `rgba(0, 0, 0, 0.88)`                   | `rgba(255, 255, 255, 0.95)`              | Ensisijainen teksti (otsikko, agentin nimi).                                                                                                       |
| `--tp-text-2`        | `rgba(0, 0, 0, 0.5)`                    | `rgba(255, 255, 255, 0.55)`              | Toissijainen teksti (alaotsikko, tilarivi, puhelun ajastin).                                                                                       |
| `--tp-glass`         | `blur(32px) saturate(180%)`             | `blur(32px) saturate(180%)`              | Palkin lasiefektin luova `backdrop-filter`.                                                                                                        |
| `--tp-shadow`        | kolmikerroksinen varjopino              | kolmikerroksinen varjopino               | Palkin `box-shadow` (rengas + lähi- ja kaukokerrokset).                                                                                            |
| `--tp-shadow-hover`  | kolmikerroksinen varjopino              | kolmikerroksinen varjopino               | Määritetty osoituksesta aiheutuvaa korostusta varten; ei ole tällä hetkellä käytössä missään säännössä.                                            |
| `--tp-glow`          | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Palkin varjon päälle kerrostettu sisäinen yläreunan korostus.                                                                                      |
| `--tp-connected`     | `#059669`                               | `#34d399`                                | Yhdistetyn tilan ilmaisimen väri (tilapiste).                                                                                                      |
| `--tp-error`         | `#dc2626`                               | `#fb7185`                                | Virhetilan tilatekstin väri.                                                                                                                       |
| `--tp-end-bg`        | `rgba(239, 68, 68, 0.08)`               | `rgba(251, 113, 133, 0.12)`              | Puhelun lopetuspainikkeen tausta.                                                                                                                  |
| `--tp-end-color`     | `#ef4444`                               | `#fb7185`                                | Puhelun lopetuspainikkeen kuvakkeen väri.                                                                                                          |
| `--tp-end-border`    | `rgba(239, 68, 68, 0.12)`               | `rgba(251, 113, 133, 0.15)`              | Puhelun lopetuspainikkeen reuna.                                                                                                                   |
| `--tp-end-hover`     | `rgba(239, 68, 68, 0.14)`               | `rgba(251, 113, 133, 0.2)`               | Puhelun lopetuspainikkeen tausta osoitettaessa.                                                                                                    |
| `--tp-idle-opacity`  | `0.4`                                   | `0.3`                                    | Määritetty käyttämättömän tilan himmennystä varten; ei ole tällä hetkellä käytössä missään säännössä.                                              |

### Mukautettujen ominaisuuksien korvaaminen

Aseta korostusväri `primaryColor`-propilla:

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

<Warning>
  `--tp-accent` asetetaan **sisäisenä tyylinä** `primaryColor`-propista, joten tyylitiedoston `--tp-accent`-korvauksilla ei ole vaikutusta. Muuta korostusväri propilla. Kaikki muut mukautetut ominaisuudet voidaan korvata CSS:ssä.
</Warning>

Korvaa muut mukautetut ominaisuudet CSS:llä. Käytä kahden luokan valitsinta (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), jotta sääntösi on oletukset määrittävää teemaluokkaa painavampi tyylitiedostojen järjestyksestä riippumatta:

```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-luokat

Kaikilla widgetin luokilla on etuliite `tp-`, jotta ne eivät ole ristiriidassa nykyisten tyyliesi kanssa.

| Luokka                        | Elementti                      | Kuvaus                                                                                                                                                                               |
| ----------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `.tp-widget`                  | Juurikääre                     | Kiinteästi sijoitettu säilö (`position: fixed`, kulma määritetään `position`-propilla, `z-index: 9999`). Sisältää teemaluokan ja fontin perusasetukset; ei omaa visuaalista kehystä. |
| `.tp--light` / `.tp--dark`    | Teeman muokkaajat              | Käytetään `.tp-widget`-luokan yhteydessä teeman mukaan; määrittävät kaikki `--tp-*`-mukautetut ominaisuudet.                                                                         |
| `.tp-bar`                     | Palkki                         | Itse lasimainen pillerielementti: tausta, taustan sumennus, reunus, `99px` säde, varjo. Leveys `300px`.                                                                              |
| `.tp-meta`                    | Tekstilohko                    | Säilö kaikelle tekstille -- otsikolle ja alaotsikolle lepotilassa sekä agentin nimelle ja tilalle puhelun aikana.                                                                    |
| `.tp-name`                    | Ensisijainen tunniste          | Näyttää `title`-propin lepotilassa ja yhdistetyn agentin nimen (varavaihtoehtona `title`) puhelun aikana.                                                                            |
| `.tp-sub`                     | Alaotsikko                     | Lepotilassa näkyvä "Saatavilla nyt" -rivi.                                                                                                                                           |
| `.tp-start`                   | Lepotilan soittonappi          | Pyöreä korostusvärinen aloituspainike (42px). Käyttää taustana `--tp-accent`-arvoa.                                                                                                  |
| `.tp-dot`                     | Yhdistämispiste                | Sykkivä korostusvärinen piste, joka näkyy palkin vasemmalla puolella yhdistämisen aikana.                                                                                            |
| `.tp-wave` / `.tp-wave--idle` | Aaltomuoto                     | Viisipalkkinen aaltomuoto. `--idle` lisää hitaan hengitysanimaation; puhelun aikana palkit reagoivat ääneen.                                                                         |
| `.tp-button`                  | Puhelunaikaiset painikkeet     | Puhelunaikaisten ohjainten perustyyli (42px, pyöristetty 12px).                                                                                                                      |
| `.tp-button-group`            | Painikerivi                    | Sisältää mykistys- ja lopetuspainikkeet puhelun aikana.                                                                                                                              |
| `.tp-button--start`           | Yhdistämispainikkeen muunnelma | Korostusvärinen muunnelma, joka näytetään puhelun käynnistyessä.                                                                                                                     |
| `.tp-button--mute`            | Mykistyksen kytkin             | Mykistää tai poistaa mikrofonin mykistyksen puhelun aikana. Käyttää `--tp-surface`-arvoa.                                                                                            |
| `.tp-button--end`             | Puhelun lopetuspainike         | Lopettaa puhelun. Käyttää `--tp-end-*`-palettia.                                                                                                                                     |
| `.tp-button--loading`         | Latauksen muokkaaja            | Himmentää painiketta yhdistämisen aikana.                                                                                                                                            |
| `.tp-icon` / `.tp-spin`       | Kuvakkeet                      | Painikekuvakkeiden mitoitus; `tp-spin` animoi yhdistämisen latauskuvaketta.                                                                                                          |
| `.tp-status`                  | Puhelunaikainen tilalohko      | Sisältää tilarivin yhdistämis-, yhdistetty- ja virhetiloissa.                                                                                                                        |
| `.tp-status__text`            | Tilarivi                       | Yhteyden tilateksti (esim. "Yhdistetään...") tai puhelun ajastin. Saa tilan mukaan `.tp-status--connected`-luokan (korostusväri) tai `.tp-status--error`-luokan (virheväri).         |
| `.tp-status__name`            | Agentin nimipaikka             | Osa tilalohkoa, mutta sitä ei renderöidä nykyisessä palkkiasettelussa -- agentin nimi näkyy sen sijaan `.tp-name`-elementissä.                                                       |
| `.tp-status__dot`             | Tilapiste                      | Sykkivä yhdistetyn tilan pisteen tyyli (käyttää `--tp-connected`-arvoa).                                                                                                             |

***

## Esimerkit

### Mukautettu korostusväri propseilla

Helpoin tapa brändätä widget:

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

### Mukautetut värit CSS:llä

Ohita mukautetut ominaisuudet, jotta saat värien täyden hallinnan. Muista, että korostusväri tulee `primaryColor`-propista, ei CSS:stä:

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

### Mukautettu koko

Tee widgetistä suurempi tai pienempi säätämällä palkin, painikkeiden ja tekstin mittoja:

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

### Piilota tekstiselitteet

Kaikki widgetin teksti on `.tp-meta`-elementissä. Piilota se kokonaan, jos haluat säilyttää vain aaltomuodon ja painikkeet:

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

Voit myös piilottaa yksittäisiä osia:

```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>
  Lepotilan selite on `.tp-name`/`.tp-sub`-elementeissä, ei `.tp-status`-elementissä -- pelkän `.tp-status`-elementin piilottaminen näyttää otsikon edelleen, kun widget on lepotilassa.
</Note>

### Teemakohtaiset ohitukset

Kohdista tiettyyn teemaan teemaluokan avulla:

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

***

## Rajaus className-propilla

Kun käytät React-komponenttia, välitä `className`-proppi rajataksesi ohitukset tiettyyn widget-instanssiin:

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

Kohdista sitten kyseiseen luokkaan CSS:ssä:

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

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

Näin samalla sivulla voi olla useita eri tyylisiä widget-instansseja. Anna jokaiselle instanssille oma korostusvärinsä `primaryColor`-propin kautta (CSS ei voi ohittaa `--tp-accent`-arvoa -- se asetetaan inline-tyylinä).

***

## Täysin mukautettu käyttöliittymä

Jos CSS-ohitukset eivät riitä, [headless-hook](/fi/widget/headless-hook) antaa sinulle täyden hallinnan. Tarjoat kaiken HTML:n ja tyylittelyn, kun taas `useThunderPhone` hallitsee puheistuntoa. Hook tarjoaa myös `audioLevelRef`-viitteen audioreaktiivisten visualisointien, kuten aaltomuotojen, rakentamiseen.

```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 on oikea valinta, kun tarvitset audioreaktiivisia animaatioita, mukautettuja asetteluja tai integraation olemassa olevaan komponenttikirjastoon. CSS-ohitukset ja mukautetut ominaisuudet sopivat paremmin nopeisiin teeman säätöihin.
</Tip>