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

# Stílusok

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

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

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

Vagy rejtse el az egyes részeket:

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

***

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