Styly - ThunderPhone

Widget se vykresluje jako panel ve stylu glassmorphism s vestavěnými světlými a tmavými motivy. Přizpůsobení je dostupné na třech úrovních: props pro běžné možnosti, vlastní vlastnosti CSS pro motivy a přepsání tříd CSS pro úplnou kontrolu.

Tyto možnosti stylování platí pro předpřipravený widget vykreslovaný komponentou React ThunderPhoneWidget a metodou CDN ThunderPhone.mount(). Pokud potřebujete zcela vlastní uživatelské rozhraní, použijte místo toho headless hook.

Motivy

Prop theme ovládá barevné schéma widgetu. Na kořen widgetu aplikuje třídu tp--light nebo tp--dark:

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

Motiv	Třída	Popis
`'light'`	`tp--light`	Světlé pozadí s tmavým textem. Výchozí.
`'dark'`	`tp--dark`	Tmavé pozadí se světlým textem.

Oba motivy používají panel ve stylu glassmorphism s rozostřením pozadí a jemnou průhledností.

Vlastní vlastnosti CSS

Widget zpřístupňuje vlastní vlastnosti CSS (proměnné), které můžete přepsat a změnit tak barvy bez úprav jednotlivých tříd. Jsou definovány třídou motivu (.tp--light nebo .tp--dark) použitou na kořenovém prvku .tp-widget:

Vlastnost	Výchozí (světlý)	Výchozí (tmavý)	Popis
`--tp-accent`	`#000`	`#fff`	Barva akcentu: tlačítko zahájení, pruhy křivky, bod připojování, text stavu připojení. Nastavuje se inline z parametru `primaryColor`.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Pozadí panelu (průsvitné; rozostřené pomocí `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Pozadí tlačítka ztlumení.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Pozadí tlačítka ztlumení při najetí.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Ohraničení panelu a tlačítek.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Barva ohraničení při najetí.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Primární text (název, jméno agenta).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Sekundární text (podtitulek, řádek stavu, časovač hovoru).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter`, který na panelu vytváří efekt skla.
`--tp-shadow`	třívrstvý stín	třívrstvý stín	`box-shadow` panelu (vrstvy prstence + blízkého + vzdáleného stínu).
`--tp-shadow-hover`	třívrstvý stín	třívrstvý stín	Definováno pro zvýraznění při najetí; aktuálně nepoužito žádným pravidlem.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Vnitřní horní zvýraznění přidané ke stínu panelu.
`--tp-connected`	`#059669`	`#34d399`	Barva indikátoru stavu připojení (stavový bod).
`--tp-error`	`#dc2626`	`#fb7185`	Barva textu stavu chyby.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Pozadí tlačítka ukončení hovoru.
`--tp-end-color`	`#ef4444`	`#fb7185`	Barva ikony tlačítka ukončení hovoru.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Ohraničení tlačítka ukončení hovoru.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Pozadí tlačítka ukončení hovoru při najetí.
`--tp-idle-opacity`	`0.4`	`0.3`	Definováno pro ztmavení v nečinném stavu; aktuálně nepoužito žádným pravidlem.

Přepsání vlastních vlastností

Nastavte barvu akcentu pomocí parametru primaryColor:

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

--tp-accent se nastavuje jako inline styl z parametru primaryColor, takže přepsání --tp-accent ve stylesheetu nemá žádný účinek. Změňte akcent pomocí parametru. Každou další vlastní vlastnost můžete přepsat v CSS.

Ostatní vlastní vlastnosti přepište pomocí CSS. Použijte selektor se dvěma třídami (.tp-widget.tp--light / .tp-widget.tp--dark), aby vaše pravidlo mělo přednost před třídou motivu definující výchozí hodnoty bez ohledu na pořadí stylesheetů:

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

Třídy CSS

Všechny třídy widgetu mají předponu tp-, aby nedocházelo ke konfliktům s vašimi stávajícími styly.

Třída	Prvek	Popis
`.tp-widget`	Kořenový obal	Kontejner s pevnou pozicí (`position: fixed`, roh nastavený pomocí vlastnosti `position`, `z-index: 9999`). Obsahuje třídu motivu a základní nastavení písma; sám o sobě nemá žádné vizuální prvky.
`.tp--light` / `.tp--dark`	Modifikátory motivu	Používají se na `.tp-widget` spolu s motivem; definují všechny vlastní vlastnosti `--tp-*`.
`.tp-bar`	Lišta	Samotná skleněná pilulka: pozadí, rozmazání pozadí, ohraničení, poloměr `99px`, stín. Šířka `300px`.
`.tp-meta`	Textový blok	Kontejner pro veškerý text — název a podtitul v nečinném stavu, jméno agenta a stav během hovoru.
`.tp-name`	Primární štítek	V nečinném stavu zobrazuje vlastnost `title` a během hovoru jméno připojeného agenta (při nedostupnosti použije `title`).
`.tp-sub`	Podtitul	Řádek „Nyní k dispozici“ zobrazený v nečinném stavu.
`.tp-start`	Tlačítko hovoru v nečinném stavu	Kruhové zvýrazněné tlačítko pro zahájení hovoru (42px). Jako pozadí používá `--tp-accent`.
`.tp-dot`	Tečka připojování	Pulzující zvýrazněná tečka zobrazená vlevo na liště během připojování.
`.tp-wave` / `.tp-wave--idle`	Zvuková vlna	Zvuková vlna s pěti pruhy. `--idle` přidává pomalou animaci dýchání; během hovoru pruhy reagují na zvuk.
`.tp-button`	Tlačítka během hovoru	Základní styl ovládacích prvků během hovoru (42px, zaoblení 12px).
`.tp-button-group`	Řádek tlačítek	Během hovoru obaluje tlačítka ztlumení a ukončení.
`.tp-button--start`	Varianta tlačítka připojení	Varianta ve zvýrazňující barvě zobrazená při zahajování hovoru.
`.tp-button--mute`	Přepínač ztlumení	Během hovoru ztlumí nebo zapne mikrofon. Používá `--tp-surface`.
`.tp-button--end`	Tlačítko ukončení hovoru	Ukončí hovor. Používá paletu `--tp-end-*`.
`.tp-button--loading`	Modifikátor načítání	Během připojování ztlumí vzhled tlačítka.
`.tp-icon` / `.tp-spin`	Ikony	Velikost ikon tlačítek; `tp-spin` animuje spinner připojování.
`.tp-status`	Blok stavu během hovoru	Obaluje stavový řádek během stavů připojování/připojeno/chyba.
`.tp-status__text`	Stavový řádek	Text stavu připojení (např. „Připojování…“) nebo časovač hovoru. Podle stavu získá `.tp-status--connected` (zvýrazňující barva) nebo `.tp-status--error` (barva chyby).
`.tp-status__name`	Místo pro jméno agenta	Je součástí stavového bloku, ale v aktuálním rozvržení lišty se nevykresluje — jméno agenta se místo toho zobrazuje v `.tp-name`.
`.tp-status__dot`	Stavová tečka	Styl pulzující tečky ve stavu připojení (používá `--tp-connected`).

Příklady

Vlastní zvýrazňující barva pomocí props

Nejjednodušší způsob, jak widget přizpůsobit vaší značce:

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

Vlastní barvy pomocí CSS

Přepište vlastní vlastnosti pro úplnou kontrolu nad barvami. Nezapomeňte, že zvýrazňující barva pochází z propu primaryColor, nikoli z CSS:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>

/* 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);
}

Vlastní velikost

Zvětšete nebo zmenšete widget úpravou rozměrů lišty, tlačítek a textu:

/* 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;
}

Skrytí textových popisků

Veškerý text widgetu je v .tp-meta. Skryjte jej celý, pokud chcete ponechat jen průběh zvuku a tlačítka:

.tp-meta {
  display: none;
}

Nebo skryjte jednotlivé části:

/* 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;
}

Popisek v nečinném stavu je v .tp-name/.tp-sub, nikoli v .tp-status — skrytím samotného .tp-status se při nečinnosti widgetu stále zobrazí název.

Přepsání specifická pro motiv

Cílení na konkrétní motiv pomocí třídy motivu:

/* 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);
}

Vymezení pomocí className

Při použití komponenty React předejte prop className, abyste omezili přepsání na konkrétní instanci widgetu:

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

Poté na tuto třídu zacilte v CSS:

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

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

Díky tomu můžete mít na stejné stránce více instancí widgetu s různými styly. Každé instanci nastavte vlastní zvýrazňující barvu prostřednictvím propu primaryColor (CSS nemůže přepsat --tp-accent — nastavuje se inline).

Zcela vlastní uživatelské rozhraní

Pokud přepsání CSS nestačí, headless hook vám poskytne úplnou kontrolu. Dodáte veškeré HTML a stylování, zatímco useThunderPhone spravuje hlasovou relaci. Hook také poskytuje audioLevelRef pro vytváření vizualizací reagujících na zvuk, například průběhů zvuku.

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

Headless hook je správnou volbou, když potřebujete animace reagující na zvuk, vlastní rozvržení nebo integraci do existující knihovny komponent. Přepsání CSS a vlastní vlastnosti jsou vhodnější pro rychlé úpravy motivu.

​Motivy

​Vlastní vlastnosti CSS

​Přepsání vlastních vlastností

​Třídy CSS

​Příklady

​Vlastní zvýrazňující barva pomocí props

​Vlastní barvy pomocí CSS

​Vlastní velikost

​Skrytí textových popisků

​Přepsání specifická pro motiv

​Vymezení pomocí className

​Zcela vlastní uživatelské rozhraní

Motivy

Vlastní vlastnosti CSS

Přepsání vlastních vlastností

Třídy CSS

Příklady

Vlastní zvýrazňující barva pomocí props

Vlastní barvy pomocí CSS

Vlastní velikost

Skrytí textových popisků

Přepsání specifická pro motiv

Vymezení pomocí className

Zcela vlastní uživatelské rozhraní