에 대한 AI 검색 테마 서비스 포털
관련 CSS 변수를 업데이트하여 경험 서비스 포털 의 AI 검색 모양과 느낌을 사용자 지정할 수 있습니다.
다음 CSS 변수는 에서 기능의 서비스 포털모양과 느낌을 AI 검색 제어합니다. 기능에 대한 AI 검색 자세한 내용은 AI 검색 사용을 참조하십시오.
테마 [sp_theme] 기록의 CSS 변수 필드에서 이러한 변수를 편집할 수 있습니다. 포털 테마와 연결된 CSS 포함을 사용하여 이러한 변수를 구성할 수도 있습니다. 자세한 내용은 다음 주제를 참조하십시오.
| 변수 | 기본값 | 설명 |
|---|---|---|
| $now-sp-font-family-sans-serif | "SourceSansPro", 헬베티카, 아리알, 산세리프체 |
모든 텍스트의 글꼴 제품군입니다. |
| $now-sp-color--text-primary | $gray 다크 |
선택되지 않은 탭의 색상, Genius 결과 버튼 텍스트, 적중 텍스트 색상, 결과 아이콘, 검색 창 드롭다운 목록 항목 텍스트 및 아이콘 색상입니다. |
| $now-sp-display-type--secondary--color | $gray 다크 |
검색 결과의 제목 텍스트 색상입니다. |
| $now-sp-display-type--tertiary--color | $gray 다크 |
검색 결과의 텍스트 스니펫 색상입니다. |
| $now-sp-color--neutral-12 | $gray 다크 |
모바일 뷰에서 패싯의 확장된 아이콘 색상(펼침 단추)입니다. |
| $now-sp-global-border-radius | 4px |
검색 결과 카드가 아닌 컨텐츠 창에 영향을 주는 둥근 검색 결과 모서리입니다. 이 변수는 Genius 결과, Genius 결과의 버튼 및 검색 창 아이콘 가리킴 배경 강조 표시에도 영향을 줍니다. 이 변수는 패싯에 영향을 주지 않습니다. |
| $now-sp-color--focus-ring | $brand-primary |
탭의 포커스 색상입니다. |
| $now-sp-tabs--selected--color | $brand-primary |
선택한 탭의 텍스트 색입니다. 호버에 포함되지 않습니다. |
| $now-sp-tabs--color--hover | $brand-primary |
마우스를 가져갔을 때 모든 탭의 텍스트 색입니다. |
| $now-sp-tabs--border-color | $sp-b-테두리-색상 |
탭의 밑줄 색상. |
| $now-sp-tabs--selected--background-color | $brand-primary |
선택한 탭의 밑줄 색입니다. |
| $now-sp-heading--title-primary--color | $gray 다크 |
색상 필터 레이블입니다. |
| $now-sp-checkbox-label--color | $gray 다크 |
필터 항목(확인란 레이블) 색상입니다. |
| $now-sp-button--primary--bare--color | $link색 |
패싯 필터에서 모두 지우기 및 링크 색상 지우기. |
| $now-sp-버튼--기본--베어--색상--활성 | $link색 |
클릭 시 패싯 필터에서 모두 지우기 및 링크 색상 지우기. |
| $now-sp-button--primary--bare--color--hover | $link 가리키기 색상 |
마우스를 가져가면 패싯 필터에서 모두 지우기 및 링크 색상 지우기. |
| $now-sp-pill--selected--background-color | $brand-primary |
필터 정제 배경이 선택되었습니다. |
| $now-sp-pill--selected--border-color | $brand-primary |
선택한 필터 알약 테두리 색입니다. |
| $now-sp-버튼--보조--배경색 | $btn-기본값-bg |
Genius 결과 단추 배경입니다. |
| $now-sp-버튼--보조--색상 | $btn 기본 색상 |
Genius 결과 단추 텍스트 색입니다. |
| $now-sp-button--secondary--border-color | $btn 기본 테두리 |
Genius 결과 단추 테두리 색입니다. |
| $now-sp-button--secondary--background-color--hover | 어둡게($btn-default-bg, 10%) |
Genius 결과 단추 가리키기 시 배경색입니다. |
| $now-sp-button--secondary--color--hover | $btn 기본 색상 |
마우스로 가리켰을 때의 Genius 결과 버튼 텍스트 색상입니다. |
| $now-sp-button--secondary--border-color--hover | 어둡게($btn-default-border, 12%) |
Genius 결과 버튼 테두리를 가리킬 때. |
| $now-sp-버튼--보조--배경색--활성 | 어둡게($btn-default-bg, 10%) |
클릭 시 Genius 결과 단추 배경입니다. |
| $now-sp-버튼--보조--색상--활성 | $btn 기본 색상 |
클릭 시 Genius 결과 버튼 텍스트 색상입니다. |
| $now-sp-button--secondary--border-color--active | 어둡게($btn-default-border, 12%) |
클릭 시 Genius 결과 단추 테두리 색상입니다. |
| $now-sp-highlighted-value--tertiary--color | $gray 다크 |
Genius 결과 상위 결과 태그 텍스트 색입니다. |
| $now-sp-버튼--border-radius | $now-sp-global-border-radius |
버튼 및 검색 Bat 버튼의 반경을 구분합니다. |
| $now-sp-container--border-radius | $now-sp-global-border-radius |
검색 결과 카드, Genius 결과 카드 및 검색 결과 컨테이너의 테두리 반경입니다. 개별 결과 간의 경계에는 영향을 주지 않습니다. |
| $now-sp-button--primary-negative--background-color | $btn-primary-bg |
EVAM 작업 확인 모달의 Genius 버튼 배경색입니다. |
| $now-sp-button--primary-negative--border-color | $btn-primary-border |
EVAM 작업 확인 모달의 Genius 버튼 테두리 색상입니다. |
| $now-sp-버튼--primary-negative--background-color--hover | 어둡게($btn-primary-bg, 10%) |
EVAM 작업 확인 모달에서 마우스를 가져가면 Genius 버튼 배경색입니다. |
| $now-sp-button--primary-negative--border-color--hover | 어둡게($btn-primary-border, 12%) |
확인 내부에 마우스를 가져가면 Genius 버튼 테두리 색상입니다. |
| $now-sp-button--primary-negative--background-color--active | 어둡게($btn-primary-bg, 10%) |
확인 모달 내부를 클릭하면 Genius 단추 배경색입니다. |
| $now-sp-button--primary-negative--border-color--active | 어둡게($btn-primary-border, 12%) |
확인 모달 내부를 클릭하면 Genius 버튼 테두리 색상입니다. |
| $now-sp-button--primary--background-color | $btn-primary-bg |
선택한 필터(알약) 배경색입니다. |
| $now-sp-button--primary--border-color | $btn-primary-border |
선택한 필터(알약) 테두리 색상 |
| $now-sp-button--primary--color | $btn원색 |
선택한 필터(알약) 색상입니다. |
| $now-sp-button--primary--background-color--hover | 어둡게($btn-primary-bg, 10%) |
선택한 필터(알약) 호버 시 배경색입니다. |
| $now-sp-버튼--기본--테두리 색상--hover | 어둡게($btn-primary-border, 12%) |
선택한 필터(알약) 호버 시 테두리 색입니다. |
| $now-sp-button--primary--background-color--active | 어둡게($btn-primary-bg, 10%) |
클릭 시 선택한 필터(알약) 배경색입니다. |
| $now-sp-button--primary--border-color--active | 어둡게($btn-primary-border, 12%) |
클릭 시 선택한 필터(알약) 테두리 색상입니다. |
| $now-sp-rem-factor | 5 |
--classicsponlydonotuse--rem-multipy와 동일한 변수입니다. 주: 이 변수를 사용하지 않는 것이 좋습니다. |