---
type: reference
title: Beri gaya widget dengan CSS
summary: Beri gaya shell widget dari stylesheet-mu sendiri, dengan selektor ::part() dan properti kustom --cpt-skin, plus referensi setiap part dan variabel.
---

Widget dirender di shadow root terbuka dan memberimu dua cara memberinya gaya dari halamanmu sendiri: **shadow part** (targetkan sebuah elemen dengan `::part()`) dan **properti kustom CSS** (timpa sebuah warna dengan `--cpt-skin-*`). Untuk warna dan kata, lebih baik [white-label](/docs/widget-customization/white-label) (ia dibangun untuk itu dan berjalan dengan setiap sematan); jangkau permukaan CSS di sini saat kamu ingin penyesuaian lokal-halaman atau sesuatu yang tak dicakup white-label.

Ini hanya shell widget. Game berjalan di frame ber-sandbox terpisah yang tak bisa kamu beri gaya dari halaman.

## Menargetkan sebuah part

Pilih sebuah part pada elemen dengan `::part(name)`:

```css
caputchin-widget::part(simple-checkbox) {
  border-radius: 1rem;
}

caputchin-game::part(game-frame) {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
```

Beberapa catatan praktis:

- Shadow root terbuka, jadi `::part()` dari halamanmu berfungsi di setiap peramban modern.
- Beberapa part struktural (kontainer checkbox, frame game) membawa gaya tata letak dasar yang diterapkan inline pada elemen. Untuk menimpa salah satu properti itu kamu mungkin butuh `!important`, karena gaya inline mengalahkan aturan `::part()` biasa. Part teks dan merek diberi gaya dengan bersih tanpanya.
- Part adalah permukaan pemberian-gaya; widget tak memaparkan nama kelas internalnya, dan mereka bisa berubah. Beri gaya per part, bukan dengan menggali ke pohon shadow.

## Part pada widget checkbox

Ini muncul pada `<caputchin-widget>` (dan pada overlay pra-game `<caputchin-game>`, yang memakai ulang blok merek yang sama).

| Part | Apa itu |
|---|---|
| `simple-checkbox` | Kontainer checkbox luar (border, latar, padding). |
| `simple-shield-box` | Indikator perisai yang menunjukkan status verifikasi. |
| `simple-shield-spinner` | Busur spinner di dalam perisai selagi memverifikasi. |
| `simple-checkbox-label` | Teks status (Verify, Verifying, Verified, Failed). |
| `simple-brand` | Blok merek (logo, nama, dan tag bersama). |
| `simple-brand-home` | Tautan yang membungkus logo dan nama, mengarah ke tautan home. |
| `simple-brand-logo` | Gambar logo merek. |
| `simple-brand-name` | Teks wordmark merek. |
| `simple-brand-tag` | Baris tag merek, sebuah tautan yang mengarah ke tautan legal. |

## Part pada widget game

Ini muncul pada `<caputchin-game>`, di sekitar frame game ber-sandbox.

| Part | Apa itu |
|---|---|
| `game-frame` | Frame chrome di sekitar game. |
| `game-iframe-slot` | Slot yang menahan iframe ber-sandbox game. |
| `game-slot` | Kontainer proyeksi yang dirender game ke dalamnya. |
| `game-badge-slot` | Lencana merek yang ditunjukkan di bawah game. |
| `game-overlay-host` | Host overlay pra-game (ditunjukkan sebelum game mulai). |
| `game-overlay-checkbox` | Checkbox di overlay itu. |
| `game-overlay-dialog` | Dialog overlay, di tata letak modal dan fullscreen. |
| `game-overlay-close` | Tombol tutup overlay, hanya di tata letak modal dan fullscreen. |

## Variabel warna

Widget menulis warna shell terselesaikannya ke elemen host sebagai properti kustom CSS bernama `--cpt-skin-<token>`, dan gayanya sendiri membacanya. Kamu bisa menimpa satu warna dari stylesheet-mu dengan menyetel properti pada elemen:

```css
caputchin-widget {
  --cpt-skin-primary: #7c3aed !important;
  --cpt-skin-surface_bg: #faf5ff !important;
}
```

`!important` penting: widget menyetel properti ini inline pada host saat ia menyelesaikan skin, dan nilai inline mengalahkan aturan stylesheet biasa, jadi penggantian polos diabaikan. Ini hanya warna shell; mereka tak mencapai game di dalam frame.

Ini adalah pintu darurat lokal-halaman. Untuk mengubah warna lintas setiap sematan, setel sebuah [skin di white-label](/docs/widget-customization/white-label) sebagai gantinya; ia memakai nama token yang sama.

| Variabel | Apa yang ia warnai |
|---|---|
| `--cpt-skin-primary` | Warna aksi utama: perisai aktif, cincin fokus, dan status terverifikasi. |
| `--cpt-skin-primary_hover` | Varian hover dari warna utama. |
| `--cpt-skin-surface_bg` | Latar belakang widget. |
| `--cpt-skin-text_primary` | Teks utama. |
| `--cpt-skin-text_label` | Teks label status (Verify, Verifying, dan seterusnya). |
| `--cpt-skin-text_muted` | Teks sekunder, termasuk tag merek. |
| `--cpt-skin-text_passive` | Garis luar perisai selagi widget menunggu. |
| `--cpt-skin-separator` | Pemisah antar potongan merek di tata letak ringkas. |
| `--cpt-skin-border` | Border widget. |
| `--cpt-skin-glyph` | Glif centang atau peringatan yang digambar di dalam perisai. |
| `--cpt-skin-error` | Warna status galat. |
| `--cpt-skin-shadow` | Bayangan jatuh widget. |
| `--cpt-skin-modal_backdrop` | Latar di belakang overlay game tata letak modal. |
| `--cpt-skin-fullscreen_backdrop` | Latar di belakang overlay game tata letak fullscreen. |
| `--cpt-skin-close_btn_bg` | Latar tombol tutup overlay fullscreen. |
| `--cpt-skin-brand_text` | Warna teks tautan merek. |
| `--cpt-skin-brand_text_hover` | Warna tautan merek saat hover. |

Logo merek adalah token skin terpisah (sebuah gambar, bukan warna), jadi ia ditukar lewat [white-label](/docs/widget-customization/white-label), bukan CSS. Nama token yang sama dan default terang serta gelapnya ada di [referensi skema](/docs/references/customization-schema).

Variabel `--cpt-skin-*` ini hanya membawa skin **shell widget**. Sebuah **game** menerima skin-nya sendiri sebagai nilai yang diserahkan ke kodenya (bukan sebagai variabel CSS, dan kamu tak bisa memberi gaya game dari halamanmu); lihat [Kustomisasi skin sebuah game](/docs/game-customization/skin#how-a-skin-value-reaches-the-game).

## Lihat juga

- [White-label widget](/docs/widget-customization/white-label): ubah kata, warna, dan tautan dengan cara yang didukung.
- [Bagaimana widget menyelesaikan bahasa dan skin-nya](/docs/widget-customization/resolution): apa yang dirender shell sebelum kamu memberinya gaya.
- [Filosofi kami](/docs/understanding-caputchin/philosophy): mengapa permukaan pemberian-gaya ini terbuka dan gratis di setiap paket.