---
title: "Stílusok"
description: "Szabja testre a ThunderPhone hangwidget megjelenését CSS-sel"
---

A widget üvegmorf sávként jelenik meg beépített világos és sötét témákkal. A testreszabás három szinten érhető el: propok a gyakori beállításokhoz, CSS-egyéni tulajdonságok a témázáshoz, valamint CSS-osztályfelülírások a teljes körű vezérléshez.

<Note>
  Ezek a stílusbeállítások a `ThunderPhoneWidget` React-komponens és a `ThunderPhone.mount()` CDN-metódus által megjelenített előre elkészített widgetre vonatkoznak. Ha teljesen egyéni felhasználói felületre van szüksége, használja inkább a [headless hookot](/hu/widget/headless-hook).
</Note>

---

## Témák

A `theme` prop vezérli a widget színsémáját. A widget gyökére a `tp--light` vagy `tp--dark` osztályt alkalmazza:

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

| Téma | Osztály | Leírás |
|-------|-------|-------------|
| `'light'` | `tp--light` | Világos háttér sötét szöveggel. Alapértelmezett. |
| `'dark'` | `tp--dark` | Sötét háttér világos szöveggel. |

Mindkét téma az üvegmorf sávdizájnt használja háttérelmosással és visszafogott átlátszósággal.

---

## CSS egyéni tulajdonságok

A widget CSS egyéni tulajdonságokat (változókat) tesz elérhetővé, amelyeket felülírhat a színek módosításához anélkül, hogy az egyes osztályokat érintené. Ezeket a `.tp-widget` gyökérelemre alkalmazott témaklassz (`.tp--light` vagy `.tp--dark`) határozza meg:

| Tulajdonság | Alapértelmezett (világos) | Alapértelmezett (sötét) | Leírás |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Kiemelőszín: indítógomb, hullámforma-sávok, csatlakozási pont, csatlakoztatott állapot szövege. A `primaryColor` prop alapján **inline** van beállítva. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Sáv háttere (áttetsző; a `--tp-glass` elhomályosítja). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Némítás gombjának háttere. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Némítás gombjának háttérszíne rámutatáskor. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Sáv- és gombszegélyek. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Szegélyszín rámutatáskor. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Elsődleges szöveg (cím, ügynök neve). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Másodlagos szöveg (alcím, állapotsor, hívásidőzítő). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | A sáv üveghatását létrehozó `backdrop-filter`. |
| `--tp-shadow` | háromrétegű árnyékkészlet | háromrétegű árnyékkészlet | A sáv `box-shadow` értéke (gyűrű + közeli + távoli rétegek). |
| `--tp-shadow-hover` | háromrétegű árnyékkészlet | háromrétegű árnyékkészlet | Rámutatáskor alkalmazott kiemeléshez van deklarálva; jelenleg egyetlen szabály sem alkalmazza. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | A sáv árnyékára rétegzett belső felső kiemelés. |
| `--tp-connected` | `#059669` | `#34d399` | Csatlakoztatott állapot jelzőszíne (állapotpont). |
| `--tp-error` | `#dc2626` | `#fb7185` | Hibaállapot szövegének színe. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Hívás befejezése gomb háttere. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Hívás befejezése gomb ikonjának színe. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Hívás befejezése gomb szegélye. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Hívás befejezése gomb háttérszíne rámutatáskor. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Üresjárati állapot halványításához van deklarálva; jelenleg egyetlen szabály sem alkalmazza. |

### Egyéni tulajdonságok felülírása

Állítsa be a kiemelőszínt a `primaryColor` prop segítségével:

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

<Warning>
  A `--tp-accent` a `primaryColor` prop alapján **inline stílusként** van beállítva, ezért a `--tp-accent` stíluslapban történő felülírása nem érvényesül. A kiemelőszínt a prop segítségével módosítsa. Minden más egyéni tulajdonság felülírható CSS-ben.
</Warning>

A többi egyéni tulajdonságot CSS-sel írja felül. Használjon kétosztályos szelektort (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), hogy a szabálya a stíluslap sorrendjétől függetlenül felülírja az alapértelmezett értékeket meghatározó témaklaszt:

```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-osztályok

Az összes widgetosztály `tp-` előtaggal rendelkezik, hogy elkerülje az ütközéseket a meglévő stílusokkal.

| Osztály | Elem | Leírás |
|-------|---------|-------------|
| `.tp-widget` | Gyökérburkoló | Rögzített pozíciójú tároló (`position: fixed`, a sarok beállítása a `position` prop alapján, `z-index: 9999`). Tartalmazza a témához tartozó osztályt és az alap betűtípus-beállításokat; önmagában nincs vizuális kerete. |
| `.tp--light` / `.tp--dark` | Témamódosítók | A téma mellett a `.tp-widget` elemre kerülnek; meghatározzák az összes `--tp-*` egyéni tulajdonságot. |
| `.tp-bar` | Sáv | Maga az üveghatású kapszula: háttér, háttérelmosás, szegély, `99px`-es sugár, árnyék. `300px` széles. |
| `.tp-meta` | Szövegblokk | Az összes szöveg tárolója -- üresjáratban a cím és az alcím, hívás közben az ügynök neve és állapota. |
| `.tp-name` | Elsődleges címke | Üresjáratban a `title` prop értékét, hívás közben pedig a kapcsolódott ügynök nevét jeleníti meg (`title` tartalék értékként). |
| `.tp-sub` | Alcím | Az üresjáratban megjelenő „Most elérhető” sor. |
| `.tp-start` | Üresjárati hívásgomb | A kör alakú, kiemelt indítógomb (42px). Háttérként a `--tp-accent` értékét használja. |
| `.tp-dot` | Kapcsolódási pont | A kapcsolódás közben a sáv bal oldalán megjelenő, pulzáló kiemelő pont. |
| `.tp-wave` / `.tp-wave--idle` | Hullámforma | Az ötsávos hullámforma. Az `--idle` hozzáadja a lassú légzésanimációt; hívás közben a sávok hangra reagálnak. |
| `.tp-button` | Hívás közbeni gombok | A hívás közbeni vezérlők alapstílusa (42px, lekerekítés: 12px). |
| `.tp-button-group` | Gombsor | Hívás közben a némítási és a hívásbefejezési gombokat foglalja magába. |
| `.tp-button--start` | Kapcsolódógomb-változat | Kiemelő színű változat, amely a hívás indításakor jelenik meg. |
| `.tp-button--mute` | Némítás kapcsoló | Hívás közben némítja vagy visszakapcsolja a mikrofont. A `--tp-surface` értékét használja. |
| `.tp-button--end` | Hívásbefejező gomb | Bontja a hívást. A `--tp-end-*` palettát használja. |
| `.tp-button--loading` | Betöltési módosító | Kapcsolódás közben halványítja a gombot. |
| `.tp-icon` / `.tp-spin` | Ikonok | A gombikonok méretezése; a `tp-spin` animálja a kapcsolódási forgó ikont. |
| `.tp-status` | Hívás közbeni állapotblokk | A kapcsolódási/kapcsolódott/hiba állapotok során az állapotsort foglalja magába. |
| `.tp-status__text` | Állapotsor | A kapcsolat állapotának szövege (például „Kapcsolódás...”) vagy a hívásidőzítő. Állapottól függően `.tp-status--connected` (kiemelő szín) vagy `.tp-status--error` (hibaszín) osztályt kap. |
| `.tp-status__name` | Ügynöknév-hely | Az állapotblokk része, de a jelenlegi sávelrendezésben nem jelenik meg -- az ügynök neve helyette a `.tp-name` elemben látható. |
| `.tp-status__dot` | Állapotpont | Pulzáló, kapcsolódott állapotú pontstílus (a `--tp-connected` értékét használja). |

---

## Példák

### Egyéni kiemelőszín propokon keresztül

A widget arculathoz igazításának legegyszerűbb módja:

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

### Egyéni színek CSS-en keresztül

A teljes színvezérléshez írja felül az egyéni tulajdonságokat. Ne feledje, hogy a kiemelőszín a `primaryColor` propból származik, nem a CSS-ből:

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

### Egyéni méret

A sáv, a gombok és a szöveg méreteinek módosításával növelheti vagy csökkentheti a widget méretét:

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

### Szövegcímkék elrejtése

A widget teljes szövege a `.tp-meta` elemben található. Rejtse el teljesen, hogy csak a hullámforma és a gombok maradjanak:

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

Vagy rejtse el az egyes részeket:

```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>
  Az üresjárati címke a `.tp-name`/`.tp-sub` elemben található, nem a `.tp-status` elemben -- önmagában a `.tp-status` elrejtése esetén a cím továbbra is látható, amikor a widget üresjáratban van.
</Note>

### Témaspecifikus felülírások

A témaosztály használatával célozzon meg egy adott témát:

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

---

## Hatókör beállítása className használatával

A React-komponens használatakor adjon át egy `className` propot, hogy a felülírások egy adott widgetpéldányra vonatkozzanak:

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

Ezután célozza meg ezt az osztályt a CSS-ben:

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

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

Így ugyanazon az oldalon több, eltérő stílusú widgetpéldányt is használhat. Adjon minden példánynak saját kiemelőszínt a `primaryColor` propján keresztül (a CSS nem írhatja felül a `--tp-accent` értékét -- azt a rendszer inline állítja be).

---

## Teljesen egyéni felhasználói felület

Ha a CSS-felülírások nem elegendők, a [headless hook](/hu/widget/headless-hook) teljes körű irányítást biztosít. Ön biztosítja az összes HTML-t és stílust, míg a `useThunderPhone` kezeli a hangmunkamenetet. A hook az `audioLevelRef` értéket is biztosítja hangra reagáló vizualizációk, például hullámformák készítéséhez.

```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>
  A headless hook a megfelelő választás, ha hangra reagáló animációkra, egyéni elrendezésekre vagy meglévő komponenskönyvtárba való integrációra van szüksége. A CSS-felülírások és az egyéni tulajdonságok gyors témabeállításokhoz jobbak.
</Tip>