Stilizēšana - ThunderPhone

Logrīks tiek renderēts kā stikla efekta josla ar iebūvētām gaišo un tumšo motīvu versijām. Pielāgošana ir pieejama trīs līmeņos: rekvizīti bieži lietotām opcijām, CSS pielāgotās īpašības motīvu veidošanai un CSS klašu pārrakstīšana pilnīgai kontrolei.

Šīs stila opcijas attiecas uz iepriekš izveidoto logrīku, ko renderē ThunderPhoneWidget React komponents un ThunderPhone.mount() CDN metode. Ja jums nepieciešama pilnībā pielāgota lietotāja saskarne, izmantojiet headless āķi.

Motīvi

Rekvizīts theme nosaka logrīka krāsu shēmu. Tas logrīka saknes elementam piešķir klasi tp--light vai tp--dark:

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

Motīvs	Klase	Apraksts
`'light'`	`tp--light`	Gaišs fons ar tumšu tekstu. Noklusējums.
`'dark'`	`tp--dark`	Tumšs fons ar gaišu tekstu.

Abi motīvi izmanto stikla efekta joslas dizainu ar fona izpludināšanu un smalku caurspīdīgumu.

CSS pielāgotie rekvizīti

Logrīks nodrošina CSS pielāgotos rekvizītus (mainīgos), kurus varat pārrakstīt, lai mainītu krāsas, nemainot atsevišķas klases. Tos nosaka motīva klase (.tp--light vai .tp--dark), kas tiek lietota .tp-widget saknes elementam:

Rekvizīts	Noklusējums (gaišais)	Noklusējums (tumšais)	Apraksts
`--tp-accent`	`#000`	`#fff`	Akcenta krāsa: sākšanas poga, viļņu formas joslas, savienojuma punkts, savienojuma statusa teksts. Iestatīta tieši elementā no `primaryColor` rekvizīta.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Joslas fons (caurspīdīgs; aizmiglots ar `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Izslēgšanas pogas fons.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Izslēgšanas pogas fons, novietojot kursoru virs tās.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Joslas un pogu apmales.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Apmales krāsa, novietojot kursoru virs elementa.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Primārais teksts (virsraksts, aģenta vārds).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Sekundārais teksts (apakšvirsraksts, statusa rinda, zvana taimeris).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter`, kas joslai izveido stikla efektu.
`--tp-shadow`	trīsslāņu ēnu kopa	trīsslāņu ēnu kopa	Joslas `box-shadow` (gredzena + tuvās + tālās kārtas).
`--tp-shadow-hover`	trīsslāņu ēnu kopa	trīsslāņu ēnu kopa	Deklarēta pacēlumam, novietojot kursoru virs elementa; pašlaik to nepiemēro neviens noteikums.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Iekšējais augšējais izcēlums, kas pievienots joslas ēnai.
`--tp-connected`	`#059669`	`#34d399`	Savienotā stāvokļa indikatora krāsa (statusa punkts).
`--tp-error`	`#dc2626`	`#fb7185`	Kļūdas stāvokļa statusa teksta krāsa.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Zvana beigšanas pogas fons.
`--tp-end-color`	`#ef4444`	`#fb7185`	Zvana beigšanas pogas ikonas krāsa.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Zvana beigšanas pogas apmale.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Zvana beigšanas pogas fons, novietojot kursoru virs tās.
`--tp-idle-opacity`	`0.4`	`0.3`	Deklarēta dīkstāves stāvokļa aptumšošanai; pašlaik to nepiemēro neviens noteikums.

Pielāgoto rekvizītu pārrakstīšana

Iestatiet akcenta krāsu, izmantojot primaryColor rekvizītu:

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

--tp-accent tiek iestatīts kā tiešs stils no primaryColor rekvizīta, tāpēc --tp-accent pārrakstīšana stila lapā nedarbojas. Mainiet akcenta krāsu ar rekvizītu. Visus pārējos pielāgotos rekvizītus var pārrakstīt CSS.

Pārrakstiet pārējos pielāgotos rekvizītus ar CSS. Izmantojiet divu klašu selektoru (.tp-widget.tp--light / .tp-widget.tp--dark), lai jūsu noteikumam būtu augstāka prioritāte nekā motīva klasei, kas nosaka noklusējuma vērtības, neatkarīgi no stila lapu secības:

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

Visām logrīka klasēm ir prefikss tp-, lai izvairītos no konfliktiem ar jūsu esošajiem stiliem.

Klase	Elements	Apraksts
`.tp-widget`	Saknes ietvars	Fiksētas pozīcijas konteiners (`position: fixed`, stūris tiek iestatīts ar `position` parametru, `z-index: 9999`). Ietver motīva klasi un pamata fonta iestatījumus; tam pašam nav vizuāla noformējuma.
`.tp--light` / `.tp--dark`	Motīva modifikatori	Tiek lietoti `.tp-widget` kopā ar motīvu; definē visus `--tp-*` pielāgotos rekvizītus.
`.tp-bar`	Josla	Pati stikla efekta kapsula: fons, fona izpludinājums, apmale, `99px` rādiuss, ēna. `300px` plata.
`.tp-meta`	Teksta bloks	Konteiners visam tekstam — virsrakstam un apakšvirsrakstam gaidstāves režīmā, aģenta vārdam un statusam zvana laikā.
`.tp-name`	Primārā etiķete	Gaidstāves režīmā rāda `title` parametru, bet zvana laikā — pievienotā aģenta vārdu (ja tā nav, `title`).
`.tp-sub`	Apakšvirsraksts	Rindiņa “Pieejams tagad”, kas tiek rādīta gaidstāves režīmā.
`.tp-start`	Gaidstāves zvana poga	Apaļā akcenta sākšanas poga (42px). Kā fonu izmanto `--tp-accent`.
`.tp-dot`	Savienojuma punkts	Pulsējošs akcenta punkts, kas savienošanās laikā tiek rādīts joslas kreisajā pusē.
`.tp-wave` / `.tp-wave--idle`	Viļņu forma	Piecu joslu viļņu forma. `--idle` pievieno lēnu elpošanas animāciju; zvana laikā joslas reaģē uz audio.
`.tp-button`	Zvana laikā pieejamās pogas	Pamata stils zvana laikā pieejamajām vadīklām (42px, noapaļojums 12px).
`.tp-button-group`	Pogas rinda	Zvana laikā ietver izslēgšanas un beigšanas pogas.
`.tp-button--start`	Savienojuma pogas variants	Akcenta krāsas variants, kas tiek rādīts zvana sākšanas laikā.
`.tp-button--mute`	Skaņas izslēgšanas slēdzis	Zvana laikā izslēdz/ieslēdz mikrofonu. Izmanto `--tp-surface`.
`.tp-button--end`	Zvana beigšanas poga	Pārtrauc zvanu. Izmanto `--tp-end-*` paleti.
`.tp-button--loading`	Ielādes modifikators	Savienošanās laikā padara pogu blāvāku.
`.tp-icon` / `.tp-spin`	Ikonas	Pogas ikonas izmērs; `tp-spin` animē savienošanās indikatoru.
`.tp-status`	Zvana statusa bloks	Ietver statusa rindiņu savienošanās/pievienotā/kļūdas stāvoklī.
`.tp-status__text`	Statusa rindiņa	Savienojuma stāvokļa teksts (piemēram, “Savienojas…”) vai zvana taimeris. Atkarībā no stāvokļa saņem `.tp-status--connected` (akcenta krāsa) vai `.tp-status--error` (kļūdas krāsa).
`.tp-status__name`	Aģenta vārda vietturis	Statusa bloka daļa, taču pašreizējā joslas izkārtojumā netiek atveidota — aģenta vārds tā vietā tiek rādīts `.tp-name`.
`.tp-status__dot`	Statusa punkts	Pulsējoša pievienotā stāvokļa punkta stils (izmanto `--tp-connected`).

Piemēri

Pielāgots akcents, izmantojot props

Vienkāršākais veids, kā pielāgot logrīku savam zīmolam:

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

Pielāgotas krāsas, izmantojot CSS

Pārrakstiet pielāgotās īpašības, lai pilnībā kontrolētu krāsas. Ņemiet vērā, ka akcents tiek noteikts ar primaryColor prop, nevis 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);
}

Pielāgots izmērs

Palieliniet vai samaziniet logrīku, pielāgojot joslas, pogu un teksta izmērus:

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

Paslēpt teksta etiķetes

Viss logrīka teksts atrodas .tp-meta. Paslēpiet to pilnībā, lai atstātu tikai viļņu formu un pogas:

.tp-meta {
  display: none;
}

Vai paslēpiet atsevišķus elementus:

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

Gaidstāves etiķete atrodas .tp-name/.tp-sub, nevis .tp-status — paslēpjot tikai .tp-status, nosaukums joprojām tiek rādīts, kad logrīks ir gaidstāvē.

Konkrētai tēmai paredzētas pārrakstīšanas

Atlasiet konkrētu tēmu, izmantojot tēmas klasi:

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

Tvēruma noteikšana ar className

Izmantojot React komponentu, nododiet className prop, lai attiecinātu pārrakstīšanas uz konkrētu logrīka instanci:

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

Pēc tam atlasiet šo klasi savā CSS:

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

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

Tas ļauj vienā lapā izmantot vairākas logrīka instances ar dažādiem stiliem. Piešķiriet katrai instancei savu akcentu, izmantojot tās primaryColor prop (CSS nevar pārrakstīt --tp-accent — tas tiek iestatīts rindā).

Pilnībā pielāgota lietotāja saskarne

Ja ar CSS pārrakstīšanām nepietiek, headless hook sniedz jums pilnīgu kontroli. Jūs nodrošināt visu HTML un noformējumu, kamēr useThunderPhone pārvalda balss sesiju. Hook nodrošina arī audioLevelRef, lai veidotu uz audio reaģējošas vizualizācijas, piemēram, viļņu formas.

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 ir pareizā izvēle, ja nepieciešamas uz audio reaģējošas animācijas, pielāgoti izkārtojumi vai integrācija esošā komponentu bibliotēkā. CSS pārrakstīšanas un pielāgotās īpašības ir piemērotākas ātriem tēmas pielāgojumiem.

​Motīvi

​CSS pielāgotie rekvizīti

​Pielāgoto rekvizītu pārrakstīšana

​CSS klases

​Piemēri

​Pielāgots akcents, izmantojot props

​Pielāgotas krāsas, izmantojot CSS

​Pielāgots izmērs

​Paslēpt teksta etiķetes

​Konkrētai tēmai paredzētas pārrakstīšanas

​Tvēruma noteikšana ar className

​Pilnībā pielāgota lietotāja saskarne

Motīvi

CSS pielāgotie rekvizīti

Pielāgoto rekvizītu pārrakstīšana

CSS klases

Piemēri

Pielāgots akcents, izmantojot props

Pielāgotas krāsas, izmantojot CSS

Pielāgots izmērs

Paslēpt teksta etiķetes

Konkrētai tēmai paredzētas pārrakstīšanas

Tvēruma noteikšana ar className

Pilnībā pielāgota lietotāja saskarne