Caputchin
ウィジェットのカスタマイズ

CSS でウィジェットをスタイルする

ウィジェットは開いた shadow root の中でレンダリングし、あなた自身のページからそれをスタイルする 2 つの方法を渡します。シャドウパーツ（::part() で要素を対象にする）と CSS カスタムプロパティ（--cpt-skin-* で色を上書きする）です。色と文言には ホワイトラベル を選んでください（それはそのために作られていて、すべての埋め込みとともに旅します）。ページローカルな調整や、ホワイトラベルがカバーしないものが欲しいときに、ここの CSS の面に手を伸ばしてください。

これはウィジェットシェルだけです。ゲームは、あなたがページからスタイルできない、別のサンドボックス化されたフレームで動きます。

パーツを対象にする

要素のパーツを ::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);
}

いくつかの実践的な注意：

  • shadow root は開いているので、あなたのページからの ::part() はすべての現代のブラウザで動きます。
  • いくつかの構造的なパーツ（チェックボックスのコンテナ、ゲームフレーム）は、要素にインラインで適用された基本のレイアウトスタイルを運びます。それらのプロパティの 1 つを上書きするには !important が要ることがあります。インラインスタイルが通常の ::part() ルールに優先するからです。テキストとブランドのパーツは、それなしできれいにスタイルできます。
  • パーツがスタイルの面です。ウィジェットはその内部のクラス名を公開せず、それらは変わり得ます。シャドウツリーを掘るのではなく、パーツでスタイルしてください。

チェックボックスウィジェットのパーツ

これらは <caputchin-widget>（そして同じブランドブロックを再利用する <caputchin-game> のゲーム前のオーバーレイ）に現れます。

パーツそれは何か
simple-checkbox外側のチェックボックスのコンテナ（枠線、背景、パディング）。
simple-shield-box検証の状態を示すシールドのインジケーター。
simple-shield-spinner検証中の、シールドの中のスピナーの弧。
simple-checkbox-label状態のテキスト（Verify、Verifying、Verified、Failed）。
simple-brandブランドブロック（ロゴ、名前、タグをまとめて）。
simple-brand-homeロゴと名前を包む、home リンクを指すリンク。
simple-brand-logoブランドのロゴ画像。
simple-brand-nameブランドのワードマークのテキスト。
simple-brand-tagブランドのタグライン、legal リンクを指すリンク。

ゲームウィジェットのパーツ

これらは <caputchin-game> に、サンドボックス化されたゲームフレームの周りに現れます。

パーツそれは何か
game-frameゲームの周りのクロームのフレーム。
game-iframe-slotゲームのサンドボックス化された iframe を保持するスロット。
game-slotゲームがレンダリングするプロジェクションのコンテナ。
game-badge-slotゲームの下に示されるブランドのバッジ。
game-overlay-hostゲーム前のオーバーレイのホスト（ゲームが始まる前に示されます）。
game-overlay-checkboxそのオーバーレイのチェックボックス。
game-overlay-dialogオーバーレイのダイアログ、modal と fullscreen のレイアウトで。
game-overlay-closeオーバーレイの close ボタン、modal と fullscreen のレイアウトでのみ。

色の変数

ウィジェットは、解決済みのシェルの色を、ホスト要素に --cpt-skin-<token> という名前の CSS カスタムプロパティとして書き込み、それ自身のスタイルがそれらを読みます。要素にプロパティを設定して、あなたのスタイルシートから 1 つの色を上書きできます：

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

!important が大事です。ウィジェットはスキンを解決するときにこれらのプロパティをホストにインラインで設定し、インラインの値は通常のスタイルシートのルールに優先するので、素の上書きは無視されます。これらはシェルの色だけです。フレームの中のゲームには届きません。

これはページローカルな避難ハッチです。すべての埋め込みにわたって色を変えるには、代わりに ホワイトラベルでスキン を設定してください。同じトークン名を使います。

変数何を色づけるか
--cpt-skin-primary主要なアクションの色：アクティブなシールド、フォーカスリング、検証済みの状態。
--cpt-skin-primary_hover主要な色のホバーの変種。
--cpt-skin-surface_bgウィジェットの背景。
--cpt-skin-text_primary主要なテキスト。
--cpt-skin-text_label状態のラベルのテキスト（Verify、Verifying など）。
--cpt-skin-text_mutedブランドのタグを含む、二次的なテキスト。
--cpt-skin-text_passiveウィジェットが待つ間のシールドのアウトライン。
--cpt-skin-separatorコンパクトなレイアウトでのブランドの部品の間のセパレーター。
--cpt-skin-borderウィジェットの枠線。
--cpt-skin-glyphシールドの中に描かれるチェックかアラートのグリフ。
--cpt-skin-errorエラー状態の色。
--cpt-skin-shadowウィジェットのドロップシャドウ。
--cpt-skin-modal_backdropmodal レイアウトのゲームオーバーレイの背後の背景。
--cpt-skin-fullscreen_backdropfullscreen レイアウトのゲームオーバーレイの背後の背景。
--cpt-skin-close_btn_bgfullscreen オーバーレイの close ボタンの背景。
--cpt-skin-brand_textブランドリンクのテキストの色。
--cpt-skin-brand_text_hoverホバー時のブランドリンクの色。

ブランドのロゴは別のスキントークン（色ではなく画像）なので、CSS ではなく ホワイトラベル で入れ替えます。同じトークン名と、そのライトとダークの既定は スキーマリファレンス にあります。

これらの --cpt-skin-* 変数は ウィジェットシェル のスキンだけを運びます。ゲーム は、そのコードに渡される値として自身のスキンを受け取ります（CSS 変数としてではなく、ゲームをあなたのページからはスタイルできません）。ゲームのスキンをカスタマイズする を参照してください。

あわせて読む

ウィジェットをホワイトラベルする

前へ

バックエンドなしで検証する

次へ

このページの内容

パーツを対象にするチェックボックスウィジェットのパーツゲームウィジェットのパーツ色の変数あわせて読む