---
title: "Στυλ"
description: "Προσαρμόστε την εμφάνιση του φωνητικού widget του ThunderPhone με CSS"
---

Το widget αποδίδεται ως μπάρα με εφέ γυαλιού και ενσωματωμένα φωτεινά και σκούρα θέματα. Η προσαρμογή είναι διαθέσιμη σε τρία επίπεδα: props για συνήθεις επιλογές, προσαρμοσμένες ιδιότητες CSS για θεματοποίηση και παρακάμψεις κλάσεων CSS για πλήρη έλεγχο.

<Note>
  Αυτές οι επιλογές στυλ εφαρμόζονται στο προκατασκευασμένο widget που αποδίδεται από το στοιχείο React `ThunderPhoneWidget` και τη μέθοδο CDN `ThunderPhone.mount()`. Αν χρειάζεστε ένα πλήρως προσαρμοσμένο UI, χρησιμοποιήστε αντί αυτού το [headless hook](/el/widget/headless-hook).
</Note>

---

## Θέματα

Το prop `theme` ελέγχει το συνδυασμό χρωμάτων του widget. Εφαρμόζει μια κλάση `tp--light` ή `tp--dark` στη ρίζα του widget:

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

| Θέμα | Κλάση | Περιγραφή |
|-------|-------|-------------|
| `'light'` | `tp--light` | Ανοιχτό φόντο με σκούρο κείμενο. Προεπιλογή. |
| `'dark'` | `tp--dark` | Σκούρο φόντο με ανοιχτό κείμενο. |

Και τα δύο θέματα χρησιμοποιούν τον σχεδιασμό μπάρας με εφέ γυαλιού, με θόλωση φόντου και διακριτική διαφάνεια.

---

## Προσαρμοσμένες ιδιότητες CSS

Το widget εκθέτει προσαρμοσμένες ιδιότητες CSS (μεταβλητές) τις οποίες μπορείτε να παρακάμψετε για να αλλάξετε χρώματα χωρίς να τροποποιήσετε μεμονωμένες κλάσεις. Ορίζονται από την κλάση θέματος (`.tp--light` ή `.tp--dark`) που εφαρμόζεται στη ρίζα `.tp-widget`:

| Ιδιότητα | Προεπιλογή (ανοιχτό) | Προεπιλογή (σκούρο) | Περιγραφή |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Χρώμα έμφασης: κουμπί έναρξης, μπάρες κυματομορφής, κουκκίδα σύνδεσης, κείμενο κατάστασης σύνδεσης. Ορίζεται **ενσωματωμένα** από το prop `primaryColor`. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Φόντο μπάρας (ημιδιαφανές· θολώνεται από το `--tp-glass`). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Φόντο κουμπιού σίγασης. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Φόντο κατά την αιώρηση του κουμπιού σίγασης. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Περιγράμματα μπάρας και κουμπιών. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Χρώμα περιγράμματος κατά την αιώρηση. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Κύριο κείμενο (τίτλος, όνομα πράκτορα). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Δευτερεύον κείμενο (υπότιτλος, γραμμή κατάστασης, χρονομετρητής κλήσης). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter` που δημιουργεί το εφέ γυαλιού στη μπάρα. |
| `--tp-shadow` | στοίβα σκιάς τριών επιπέδων | στοίβα σκιάς τριών επιπέδων | Το `box-shadow` της μπάρας (επίπεδα δακτυλίου + κοντινής + μακρινής σκιάς). |
| `--tp-shadow-hover` | στοίβα σκιάς τριών επιπέδων | στοίβα σκιάς τριών επιπέδων | Δηλώνεται για ανύψωση κατά την αιώρηση· δεν εφαρμόζεται επί του παρόντος από κανέναν κανόνα. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Εσωτερική επάνω επισήμανση που προστίθεται πάνω από τη σκιά της μπάρας. |
| `--tp-connected` | `#059669` | `#34d399` | Χρώμα ένδειξης κατάστασης σύνδεσης (κουκκίδα κατάστασης). |
| `--tp-error` | `#dc2626` | `#fb7185` | Χρώμα κειμένου κατάστασης σφάλματος. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Φόντο κουμπιού τερματισμού κλήσης. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Χρώμα εικονιδίου κουμπιού τερματισμού κλήσης. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Περίγραμμα κουμπιού τερματισμού κλήσης. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Φόντο κατά την αιώρηση του κουμπιού τερματισμού κλήσης. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Δηλώνεται για μείωση φωτεινότητας σε κατάσταση αδράνειας· δεν εφαρμόζεται επί του παρόντος από κανέναν κανόνα. |

### Παράκαμψη προσαρμοσμένων ιδιοτήτων

Ορίστε το χρώμα έμφασης μέσω του prop `primaryColor`:

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

<Warning>
  Το `--tp-accent` ορίζεται ως **ενσωματωμένο στυλ** από το prop `primaryColor`, επομένως οι παρακάμψεις του `--tp-accent` στο stylesheet δεν έχουν αποτέλεσμα. Αλλάξτε το χρώμα έμφασης με το prop. Κάθε άλλη προσαρμοσμένη ιδιότητα μπορεί να παρακαμφθεί σε CSS.
</Warning>

Παρακάμψτε τις άλλες προσαρμοσμένες ιδιότητες με CSS. Χρησιμοποιήστε έναν επιλογέα δύο κλάσεων (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), ώστε ο κανόνας σας να υπερισχύει της κλάσης θέματος που ορίζει τις προεπιλογές, ανεξάρτητα από τη σειρά του stylesheet:

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

Όλες οι κλάσεις widget έχουν το πρόθεμα `tp-` για την αποφυγή διενέξεων με τα υπάρχοντα στυλ σας.

| Κλάση | Στοιχείο | Περιγραφή |
|-------|---------|-------------|
| `.tp-widget` | Ριζικό περιτύλιγμα | Περιέκτης σταθερής θέσης (`position: fixed`, η γωνία ορίζεται από το prop `position`, `z-index: 9999`). Περιλαμβάνει την κλάση θέματος και τις βασικές ρυθμίσεις γραμματοσειράς· δεν έχει δική του οπτική διακόσμηση. |
| `.tp--light` / `.tp--dark` | Τροποποιητές θέματος | Εφαρμόζονται στο `.tp-widget` μαζί με το θέμα· ορίζουν όλες τις προσαρμοσμένες ιδιότητες `--tp-*`. |
| `.tp-bar` | Η μπάρα | Το ίδιο το γυάλινο χάπι: φόντο, θόλωση παρασκηνίου, περίγραμμα, ακτίνα `99px`, σκιά. Πλάτος `300px`. |
| `.tp-meta` | Μπλοκ κειμένου | Περιέκτης για όλο το κείμενο -- τίτλο και υπότιτλο σε αδράνεια, όνομα και κατάσταση πράκτορα κατά τη διάρκεια κλήσης. |
| `.tp-name` | Κύρια ετικέτα | Εμφανίζει το prop `title` σε αδράνεια και το όνομα του συνδεδεμένου πράκτορα (με εναλλακτική το `title`) κατά τη διάρκεια κλήσης. |
| `.tp-sub` | Υπότιτλος | Η γραμμή «Διαθέσιμο τώρα» που εμφανίζεται σε αδράνεια. |
| `.tp-start` | Κουμπί κλήσης σε αδράνεια | Το κυκλικό κουμπί έναρξης με χρώμα έμφασης (42px). Χρησιμοποιεί το `--tp-accent` ως φόντο. |
| `.tp-dot` | Κουκκίδα σύνδεσης | Παλμική κουκκίδα έμφασης που εμφανίζεται αριστερά στη μπάρα κατά τη σύνδεση. |
| `.tp-wave` / `.tp-wave--idle` | Κυματομορφή | Η κυματομορφή πέντε ράβδων. Το `--idle` προσθέτει την αργή κινούμενη εικόνα αναπνοής· κατά τη διάρκεια κλήσης οι ράβδοι ανταποκρίνονται στον ήχο. |
| `.tp-button` | Κουμπιά κατά τη διάρκεια κλήσης | Βασικό στυλ για τα στοιχεία ελέγχου κατά τη διάρκεια κλήσης (42px, στρογγυλεμένα 12px). |
| `.tp-button-group` | Σειρά κουμπιών | Περιτυλίγει τα κουμπιά σίγασης και τερματισμού κατά τη διάρκεια κλήσης. |
| `.tp-button--start` | Παραλλαγή κουμπιού σύνδεσης | Παραλλαγή με χρώμα έμφασης που εμφανίζεται κατά την έναρξη μιας κλήσης. |
| `.tp-button--mute` | Εναλλαγή σίγασης | Θέτει σε σίγαση ή καταργεί τη σίγαση του μικροφώνου κατά τη διάρκεια κλήσης. Χρησιμοποιεί το `--tp-surface`. |
| `.tp-button--end` | Κουμπί τερματισμού κλήσης | Τερματίζει την κλήση. Χρησιμοποιεί την παλέτα `--tp-end-*`. |
| `.tp-button--loading` | Τροποποιητής φόρτωσης | Μειώνει την ένταση του κουμπιού κατά τη σύνδεση. |
| `.tp-icon` / `.tp-spin` | Εικονίδια | Διαστάσεις εικονιδίων κουμπιών· το `tp-spin` κινεί το περιστρεφόμενο εικονίδιο σύνδεσης. |
| `.tp-status` | Μπλοκ κατάστασης κατά τη διάρκεια κλήσης | Περιτυλίγει τη γραμμή κατάστασης στις καταστάσεις σύνδεσης/σύνδεσης που ολοκληρώθηκε/σφάλματος. |
| `.tp-status__text` | Γραμμή κατάστασης | Κείμενο κατάστασης σύνδεσης (π.χ. «Σύνδεση...») ή ο χρονομετρητής κλήσης. Λαμβάνει `.tp-status--connected` (χρώμα έμφασης) ή `.tp-status--error` (χρώμα σφάλματος) ανά κατάσταση. |
| `.tp-status__name` | Θέση ονόματος πράκτορα | Μέρος του μπλοκ κατάστασης, αλλά δεν αποδίδεται στην τρέχουσα διάταξη της μπάρας -- το όνομα του πράκτορα εμφανίζεται αντίθετα στο `.tp-name`. |
| `.tp-status__dot` | Κουκκίδα κατάστασης | Στυλ παλλόμενης κουκκίδας κατάστασης σύνδεσης (χρησιμοποιεί το `--tp-connected`). |

---

## Παραδείγματα

### Προσαρμοσμένο χρώμα έμφασης μέσω ιδιοτήτων

Ο απλούστερος τρόπος να εφαρμόσετε την επωνυμία σας στο γραφικό στοιχείο:

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

### Προσαρμοσμένα χρώματα μέσω CSS

Παρακάμψτε τις προσαρμοσμένες ιδιότητες για πλήρη έλεγχο των χρωμάτων. Θυμηθείτε ότι το χρώμα έμφασης προέρχεται από την ιδιότητα `primaryColor`, όχι από CSS:

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

### Προσαρμοσμένο μέγεθος

Κάντε το γραφικό στοιχείο μεγαλύτερο ή μικρότερο προσαρμόζοντας τις διαστάσεις της γραμμής, των κουμπιών και του κειμένου:

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

### Απόκρυψη των ετικετών κειμένου

Όλο το κείμενο του γραφικού στοιχείου βρίσκεται στο `.tp-meta`. Αποκρύψτε το πλήρως για να διατηρήσετε μόνο την κυματομορφή και τα κουμπιά:

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

Εναλλακτικά, αποκρύψτε μεμονωμένα στοιχεία:

```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>
  Η ετικέτα αδράνειας βρίσκεται στα `.tp-name`/`.tp-sub`, όχι στο `.tp-status` -- η απόκρυψη μόνο του `.tp-status` εξακολουθεί να εμφανίζει τον τίτλο όταν το γραφικό στοιχείο είναι σε αδράνεια.
</Note>

### Παρακάμψεις ανά θέμα

Στοχεύστε ένα συγκεκριμένο θέμα με την κλάση θέματος:

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

---

## Περιορισμός εμβέλειας με className

Όταν χρησιμοποιείτε το στοιχείο React, περάστε μια ιδιότητα `className` για να περιορίσετε τις παρακάμψεις σας σε ένα συγκεκριμένο στιγμιότυπο γραφικού στοιχείου:

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

Έπειτα, στοχεύστε αυτήν την κλάση στο CSS σας:

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

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

Αυτό σας επιτρέπει να έχετε πολλαπλά στιγμιότυπα γραφικών στοιχείων στην ίδια σελίδα με διαφορετικά στυλ. Δώστε σε κάθε στιγμιότυπο το δικό του χρώμα έμφασης μέσω της ιδιότητας `primaryColor` του (το CSS δεν μπορεί να παρακάμψει το `--tp-accent` -- ορίζεται ενσωματωμένα).

---

## Πλήρως προσαρμοσμένο περιβάλλον χρήστη

Αν οι παρακάμψεις CSS δεν επαρκούν, ο [γάντζος χωρίς διεπαφή](/el/widget/headless-hook) σας παρέχει πλήρη έλεγχο. Παρέχετε όλη την HTML και τη διαμόρφωση, ενώ το `useThunderPhone` διαχειρίζεται τη φωνητική συνεδρία. Ο γάντζος παρέχει επίσης το `audioLevelRef` για τη δημιουργία οπτικοποιήσεων που αντιδρούν στον ήχο, όπως κυματομορφές.

```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>
  Ο γάντζος χωρίς διεπαφή είναι η σωστή επιλογή όταν χρειάζεστε κινούμενα σχέδια που αντιδρούν στον ήχο, προσαρμοσμένες διατάξεις ή ενσωμάτωση σε μια υπάρχουσα βιβλιοθήκη στοιχείων. Οι παρακάμψεις CSS και οι προσαρμοσμένες ιδιότητες είναι καλύτερες για γρήγορες προσαρμογές θέματος.
</Tip>