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