Beri gaya widget dengan CSS
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 (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):
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:
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 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, bukan CSS. Nama token yang sama dan default terang serta gelapnya ada di referensi skema.
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.
Lihat juga
- White-label widget: ubah kata, warna, dan tautan dengan cara yang didukung.
- Bagaimana widget menyelesaikan bahasa dan skin-nya: apa yang dirender shell sebelum kamu memberinya gaya.
- Filosofi kami: mengapa permukaan pemberian-gaya ini terbuka dan gratis di setiap paket.