Styly

Přizpůsobte vzhled hlasového widgetu ThunderPhone pomocí CSS

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.

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"
/>

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

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