Caputchin
위젯 맞춤화

CSS로 위젯 스타일링하기

위젯은 열린 섀도 루트에 렌더링되고 당신 자신의 페이지에서 그것을 스타일링하는 두 방법을 줍니다: 섀도 파트(::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);
}

몇 가지 실용적 메모:

  • 섀도 루트는 열려 있으니, 당신의 페이지에서 ::part()가 모든 현대 브라우저에서 동작합니다.
  • 일부 구조 파트(체크박스 컨테이너, 게임 프레임)는 요소에 인라인으로 적용된 기본 레이아웃 스타일을 지닙니다. 그 속성 중 하나를 재정의하려면 !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로고와 이름을 감싸는, 홈 링크를 가리키는 링크.
simple-brand-logo브랜드 로고 이미지.
simple-brand-name브랜드 워드마크 텍스트.
simple-brand-tag브랜드 태그라인, 법적 링크를 가리키는 링크.

게임 위젯의 파트

이것들은 <caputchin-game>에, 샌드박스된 게임 프레임 둘레에 나타납니다.

파트무엇인가
game-frame게임 둘레의 크롬 프레임.
game-iframe-slot게임의 샌드박스된 iframe을 담는 슬롯.
game-slot게임이 렌더링되는 투영 컨테이너.
game-badge-slot게임 아래에 보이는 브랜드 배지.
game-overlay-host게임 전 오버레이의 호스트(게임 시작 전에 보임).
game-overlay-checkbox그 오버레이의 체크박스.
game-overlay-dialog모달과 풀스크린 레이아웃의 오버레이 다이얼로그.
game-overlay-close모달과 풀스크린 레이아웃에서만, 오버레이 닫기 버튼.

색상 변수

위젯은 해소된 셸 색상을 --cpt-skin-<token>이라는 CSS 커스텀 속성으로 호스트 요소에 쓰고, 자기 스타일이 그것들을 읽습니다. 요소에 속성을 설정해 당신의 스타일시트에서 단일 색상을 재정의할 수 있습니다:

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_backdrop모달 레이아웃 게임 오버레이 뒤의 배경막.
--cpt-skin-fullscreen_backdrop풀스크린 레이아웃 게임 오버레이 뒤의 배경막.
--cpt-skin-close_btn_bg풀스크린 오버레이 닫기 버튼의 배경.
--cpt-skin-brand_text브랜드 링크 텍스트 색상.
--cpt-skin-brand_text_hover호버 시 브랜드 링크 색상.

브랜드 로고는 별도의 스킨 토큰(색상이 아니라 이미지)이라, CSS가 아니라 화이트라벨링을 통해 바뀝니다. 같은 토큰 이름과 그 라이트·다크 기본값은 스키마 레퍼런스에 있습니다.

이 --cpt-skin-* 변수들은 위젯 셸의 스킨만 지닙니다. 게임은 자기 코드에 건네진 값으로 자기 스킨을 받습니다(CSS 변수로가 아니며, 당신은 페이지에서 게임을 스타일링할 수 없습니다); 게임의 스킨 맞춤화하기를 보세요.

함께 보기

위젯 화이트라벨링

이전

백엔드 없이 검증하기

다음

이 페이지에서

파트 겨냥하기체크박스 위젯의 파트게임 위젯의 파트색상 변수함께 보기