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

# स्टाइलिंग

> CSS के साथ ThunderPhone वॉइस विजेट का रूप कस्टमाइज़ करें

विजेट अंतर्निहित लाइट और डार्क थीम के साथ ग्लासमॉर्फिक बार के रूप में रेंडर होता है। कस्टमाइज़ेशन तीन स्तरों पर उपलब्ध है: सामान्य विकल्पों के लिए प्रॉप्स, थीमिंग के लिए CSS कस्टम प्रॉपर्टीज़, और पूर्ण नियंत्रण के लिए CSS क्लास ओवरराइड्स।

<Note>
  ये स्टाइलिंग विकल्प `ThunderPhoneWidget` React कंपोनेंट और `ThunderPhone.mount()` CDN मेथड द्वारा रेंडर किए गए पहले से निर्मित विजेट पर लागू होते हैं। यदि आपको पूरी तरह कस्टम UI चाहिए, तो इसके बजाय [हेडलेस हुक](/hi/widget/headless-hook) का उपयोग करें।
</Note>

***

## थीम

`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-widget` रूट पर लागू की गई थीम क्लास (`.tp--light` या `.tp--dark`) द्वारा परिभाषित होती हैं:

| प्रॉपर्टी            | डिफ़ॉल्ट (लाइट)                         | डिफ़ॉल्ट (डार्क)                         | विवरण                                                                                                                                 |
| -------------------- | --------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | एक्सेंट रंग: स्टार्ट बटन, वेवफ़ॉर्म बार, कनेक्टिंग डॉट, कनेक्टेड-स्टेटस टेक्स्ट। `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`                                    | आइडल-स्टेट डिमिंग के लिए घोषित; वर्तमान में किसी नियम द्वारा लागू नहीं है।                                                            |

### कस्टम प्रॉपर्टीज़ को ओवरराइड करना

`primaryColor` प्रॉप के माध्यम से एक्सेंट रंग सेट करें:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>
```

<Warning>
  `--tp-accent` को `primaryColor` प्रॉप से **इनलाइन स्टाइल** के रूप में सेट किया जाता है, इसलिए `--tp-accent` के स्टाइलशीट ओवरराइड का कोई प्रभाव नहीं होता। प्रॉप से एक्सेंट बदलें। अन्य सभी कस्टम प्रॉपर्टीज़ को 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`, कोना `position` prop द्वारा सेट, `z-index: 9999`)। इसमें थीम क्लास और बेस फ़ॉन्ट सेटिंग्स होती हैं; इसका अपना कोई विज़ुअल क्रोम नहीं होता। |
| `.tp--light` / `.tp--dark`    | थीम मॉडिफ़ायर्स     | थीम के साथ `.tp-widget` पर लागू होते हैं; सभी `--tp-*` कस्टम प्रॉपर्टीज़ निर्धारित करते हैं।                                                                                          |
| `.tp-bar`                     | बार                 | ग्लासमॉर्फिक पिल स्वयं: बैकग्राउंड, बैकड्रॉप ब्लर, बॉर्डर, `99px` रेडियस, शैडो। `300px` चौड़ी।                                                                                        |
| `.tp-meta`                    | टेक्स्ट ब्लॉक       | सभी टेक्स्ट का कंटेनर -- निष्क्रिय होने पर शीर्षक और सबटाइटल, कॉल के दौरान एजेंट का नाम और स्टेटस।                                                                                    |
| `.tp-name`                    | प्राथमिक लेबल       | निष्क्रिय होने पर `title` prop दिखाता है, और कॉल के दौरान कनेक्टेड एजेंट का नाम दिखाता है (`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 के ज़रिए कस्टम रंग

पूरे रंग नियंत्रण के लिए कस्टम प्रॉपर्टीज़ ओवरराइड करें। याद रखें कि एक्सेंट CSS से नहीं, `primaryColor` prop से आता है:

```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 कंपोनेंट का उपयोग करते समय, अपने ओवरराइड्स को किसी विशिष्ट विजेट इंस्टेंस तक सीमित करने के लिए `className` prop पास करें:

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

इससे आप एक ही पेज पर अलग-अलग स्टाइल वाले कई विजेट इंस्टेंस रख सकते हैं। हर इंस्टेंस को उसके `primaryColor` prop के ज़रिए अपना एक्सेंट दें (CSS `--tp-accent` को ओवरराइड नहीं कर सकता -- यह इनलाइन सेट होता है)।

***

## पूरी तरह कस्टम UI

अगर CSS ओवरराइड पर्याप्त नहीं हैं, तो [हेडलेस हुक](/hi/widget/headless-hook) आपको पूरा नियंत्रण देता है। आप सभी HTML और स्टाइलिंग प्रदान करते हैं, जबकि `useThunderPhone` वॉइस सेशन संभालता है। यह हुक वेवफॉर्म जैसे ऑडियो-रिएक्टिव विज़ुअलाइज़ेशन बनाने के लिए `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>
  जब आपको ऑडियो-रिएक्टिव एनिमेशन, कस्टम लेआउट या किसी मौजूदा कंपोनेंट लाइब्रेरी में इंटीग्रेशन चाहिए, तब हेडलेस हुक सही विकल्प है। त्वरित थीमिंग समायोजनों के लिए CSS ओवरराइड और कस्टम प्रॉपर्टीज़ बेहतर हैं।
</Tip>