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

# עיצוב

> התאימו אישית את המראה של רכיב הקול של ThunderPhone באמצעות CSS

הווידג'ט מוצג כסרגל בעל עיצוב זכוכיתי עם ערכות עיצוב בהירות וכהות מובנות. ההתאמה האישית זמינה בשלוש רמות: props לאפשרויות נפוצות, מאפיינים מותאמים אישית של CSS לעיצוב, ודריסות של מחלקות CSS לשליטה מלאה.

<Note>
  אפשרויות עיצוב אלה חלות על הווידג'ט המובנה שמוצג באמצעות רכיב React בשם `ThunderPhoneWidget` ושיטת ה-CDN `ThunderPhone.mount()`. אם אתם זקוקים לממשק משתמש מותאם אישית לחלוטין, השתמשו במקום זאת ב-[וו ה-headless](/he/widget/headless-hook).
</Note>

***

## ערכות עיצוב

ה-prop `theme` שולט בערכת הצבעים של הווידג'ט. הוא מחיל מחלקה `tp--light` או `tp--dark` על רכיב הבסיס של הווידג'ט:

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

| ערכת עיצוב | מחלקה       | תיאור                              |
| ---------- | ----------- | ---------------------------------- |
| `'light'`  | `tp--light` | רקע בהיר עם טקסט כהה. ברירת המחדל. |
| `'dark'`   | `tp--dark`  | רקע כהה עם טקסט בהיר.              |

שתי ערכות העיצוב משתמשות בעיצוב הסרגל הזכוכיתי עם טשטוש רקע ושקיפות עדינה.

***

## מאפיינים מותאמים אישית של CSS

הווידג'ט חושף מאפיינים מותאמים אישית של 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 theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>
```

<Warning>
  `--tp-accent` מוגדר כ-**סגנון מוטבע** מתוך ה-prop `primaryColor`, לכן דריסות בגיליון סגנונות של `--tp-accent` אינן משפיעות. שנו את צבע ההדגשה באמצעות ה-prop. ניתן לדרוס ב-CSS כל מאפיין מותאם אישית אחר.
</Warning>

דרסו את שאר המאפיינים המותאמים אישית באמצעות CSS. השתמשו בבורר בעל שתי מחלקות (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) כדי שהכלל שלכם יגבר על מחלקת ערכת הנושא שמגדירה את ברירות המחדל, ללא תלות בסדר גיליון הסגנונות:

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

לכל מחלקות הווידג'ט יש קידומת `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`).                                                                                                                   |

***

## דוגמאות

### צבע הדגשה מותאם אישית באמצעות Props

הדרך הפשוטה ביותר למתג את הווידג'ט:

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

### צבעים מותאמים אישית באמצעות CSS

דרסו את המאפיינים המותאמים אישית כדי לקבל שליטה מלאה בצבעים. זכרו שצבע ההדגשה מגיע מה-prop `primaryColor`, ולא מ-CSS:

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

### גודל מותאם אישית

הגדילו או הקטינו את הווידג'ט באמצעות התאמת הממדים של הסרגל, הכפתור והטקסט:

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

### הסתרת תוויות הטקסט

כל הטקסט של הווידג'ט נמצא ב-`.tp-meta`. הסתירו אותו לחלוטין כדי להשאיר רק את צורת הגל והכפתורים:

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

לחלופין, הסתירו רכיבים נפרדים:

```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>
  תווית מצב ההמתנה נמצאת ב-`.tp-name`/`.tp-sub`, ולא ב-`.tp-status` -- הסתרת `.tp-status` בלבד עדיין מציגה את הכותרת כשהווידג'ט במצב המתנה.
</Note>

### דריסות ספציפיות לעיצוב

מקדו עיצוב מסוים באמצעות מחלקת העיצוב:

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

***

## תחימה באמצעות className

בעת שימוש ברכיב React, העבירו prop מסוג `className` כדי לתחום את הדריסות שלכם למופע וידג'ט מסוים:

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

לאחר מכן, מקדו את המחלקה הזו ב-CSS שלכם:

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

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

כך תוכלו להציג כמה מופעי וידג'ט באותו עמוד, כל אחד עם עיצוב שונה. העניקו לכל מופע צבע הדגשה משלו באמצעות ה-prop `primaryColor` שלו (CSS אינו יכול לדרוס את `--tp-accent` -- הוא מוגדר בתוך השורה).

***

## ממשק משתמש מותאם אישית לחלוטין

אם דריסות CSS אינן מספיקות, ה-[hook ללא ממשק](/he/widget/headless-hook) מעניק לכם שליטה מלאה. אתם מספקים את כל ה-HTML והעיצוב, בעוד `useThunderPhone` מטפל בשיחת הקול. ה-hook מספק גם את `audioLevelRef` לבניית המחשות חזותיות המגיבות לאודיו, כגון צורות גל.

```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>
  ה-hook ללא ממשק הוא הבחירה הנכונה כשאתם זקוקים לאנימציות המגיבות לאודיו, לפריסות מותאמות אישית או לשילוב בספריית רכיבים קיימת. דריסות CSS ומאפיינים מותאמים אישית מתאימים יותר להתאמות עיצוב מהירות.
</Tip>