サービスポータル の 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-dark |
選択されていないタブの色、Genius 結果ボタンのテキスト、ヒットテキストの色、結果アイコン、および検索バーのドロップダウンリストアイテムのテキストとアイコンの色。 |
| $now-sp-display-type--secondary--color | $gray-dark |
検索結果のタイトルテキストの色。 |
| $now-sp-display-type--tertiary--color | $gray-dark |
検索結果のテキストスニペットの色。 |
| $now-sp-color--neutral-12 | $gray-dark |
モバイルビューのファセットの拡張アイコン色 (二重山かっこ)。 |
| $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-border-color |
タブの下線の色。 |
| $now-sp-tabs--selected--background-color | $brand-primary |
選択したタブの下線の色。 |
| $now-sp-heading--title-primary--color | $gray-dark |
カラーフィルターラベル。 |
| $now-sp-checkbox-label--color | $gray-dark |
フィルターアイテム (チェックボックスラベル) の色。 |
| $now-sp-button--primary--bare--color | $link-color |
ファセットフィルターの [すべてクリア] および [リンクの色をクリア]。 |
| $now-sp-button--primary--bare--color--active | $link-color |
クリック時にファセットフィルターの [すべてクリア] および [リンクの色をクリア] をクリックします。 |
| $now-sp-button--primary--bare--color--hover | $link-hover-color |
ホバー時のファセットフィルターの [すべてクリア] および [リンクの色をクリア]。 |
| $now-sp-pill--selected--background-color | $brand-primary |
選択したフィルターピルの背景。 |
| $now-sp-pill--selected--border-color | $brand-primary |
選択したフィルターピルの境界の色。 |
| $now-sp-button--secondary--background-color | $btn-default-bg |
Genius 結果ボタンの背景。 |
| $now-sp-button--secondary--color | $btn-default-color |
Genius 結果ボタンのテキストの色。 |
| $now-sp-button--secondary--border-color | $btn-default-border |
Genius 結果ボタンの境界の色。 |
| $now-sp-button--secondary--background-color--hover | darken($btn-default-bg, 10%) |
カーソルを合わせた時の Genius 結果ボタンの背景の色。 |
| $now-sp-button--secondary--color--hover | $btn-default-color |
カーソルを合わせた時の Genius 結果ボタンのテキストの色。 |
| $now-sp-button--secondary--border-color--hover | darken($btn-default-border, 12%) |
カーソルを合わせた時の Genius 結果ボタンの境界。 |
| $now-sp-button--secondary--background-color--active | darken($btn-default-bg, 10%) |
クリック時の Genius 結果ボタンの背景。 |
| $now-sp-button--secondary--color--active | $btn-default-color |
クリック時の Genius 結果ボタンのテキストの色。 |
| $now-sp-button--secondary--border-color--active | darken($btn-default-border, 12%) |
クリック時の Genius 結果ボタンの境界の色。 |
| $now-sp-highlighted-value--tertiary--color | $gray-dark |
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 | darken($btn-primary-bg, 10%) |
EVAM アクション確認モーダルのカーソルを合わせた時の Genius ボタンの背景の色。 |
| $now-sp-button--primary-negative--border-color--hover | darken($btn-primary-border, 12%) |
確認の内側にカーソルを合わせた時の Genius ボタンの境界の色。 |
| $now-sp-button--primary-negative--background-color--active | darken($btn-primary-bg, 10%) |
確認モーダルの内側をクリックした時の Genius ボタンの背景の色。 |
| $now-sp-button--primary-negative--border-color--active | darken($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-primary-color |
選択したフィルター (ピル) の色。 |
| $now-sp-button--primary--background-color--hover | darken($btn-primary-bg, 10%) |
選択したフィルター (ピル) のカーソルを合わせた時の背景の色。 |
| $now-sp-button--primary--border-color--hover | darken($btn-primary-border, 12%) |
選択したフィルター (ピル) のカーソルを合わせた時の境界の色。 |
| $now-sp-button--primary--background-color--active | darken($btn-primary-bg, 10%) |
選択したフィルター (ピル) のクリック時の背景の色。 |
| $now-sp-button--primary--border-color--active | darken($btn-primary-border, 12%) |
選択したフィルター (ピル) のクリック時の境界の色。 |
| $now-sp-rem-factor | 5 |
--classicsponlydonotuse--rem-multily と同じ変数。 注: この変数を使用することはお勧めしません。 |