Design für KI-Suche in Serviceportal

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 2 Minuten Lesedauer

    • Sie können das Erscheinungsbild der KI-Suche -Experience in Serviceportal anpassen, indem Sie die relevanten CSS-Variablen aktualisieren.

    Die folgenden CSS-Variablen steuern das Erscheinungsbild der KI-Suche -Funktionen in Serviceportal. Weitere Informationen zu den Funktionen von KI-Suche finden Sie unter AI Search verwenden.

    Sie können diese Variablen im Feld CSS-Variablen eines Design-Datensatzes [sp_theme] bearbeiten. Sie können diese Variablen auch mit einer CSS-Einbindung konfigurieren, die dem Design eines Portals zugeordnet ist. Weitere Informationen finden Sie in den folgenden Themen:

    Variable Standardwert Beschreibung
    $now-sp-font-family-sans-serif „SourceSansPro“, Helvetica, Arial, sans-serif Schriftartfamilie für alle Texte.
    $now-sp-color--text-primär $grau- dunkel Farbe der nicht ausgewählten Registerkarten, Text der Genius-Ergebnisschaltfläche, Treffertextfarbe, Ergebnissymbole und Suchleisten-Dropdown-Listenelementtext und Symbolfarbe.
    $now-sp-display-type--secondary--color $grau- dunkel Die Farbe des Titeltexts in Suchergebnissen.
    $now-sp-display-type--tertiary--color $grau- dunkel Die Farbe des Textausschnitts in den Suchergebnissen.
    $now-sp-Farbe--Neutral-12 $grau- dunkel Erweiterte Symbolfarbe (Chevron) der Aspekte in der mobilen Ansicht.
    $now-sp-global-board-radius 4 px Abgerundete Ecken der Suchergebnisse, die sich auf den Inhaltsbereich und nicht auf Suchergebniskarten auswirken. Diese Variable wirkt sich auch auf Genius-Ergebnisse, Schaltflächen in Genius-Ergebnissen und die Hintergrundhervorhebungen des Suchleistensymbols beim Daraufzeigen aus. Diese Variable wirkt sich nicht auf Aspekte aus.
    $now-sp-Farbe--Fokus-Ring $brand-primär Fokusfarbe der Registerkarten.
    $now-sp-tabs--selected--color $brand-primär Textfarbe der ausgewählten Registerkarte. Wird beim Daraufzeigen nicht berücksichtigt.
    $now-sp-tabs--color--hover $brand-primär Textfarbe aller Registerkarten, wenn der Mauszeiger darüber bewegt wird.
    $now-sp-tabs--frame-color $sp-b-Rahmenfarbe Registerkarten unterstreichen Farbe.
    $now-sp-tabs--selected--background-color $brand-primär Unterstrichfarbe der ausgewählten Registerkarte.
    $now-sp-heading--title-primär--color $grau- dunkel Bezeichnung der Farbfilter.
    $now-sp-checkbox-label--color $grau- dunkel Farbe des Filterelements (Kontrollkästchenbezeichnung).
    $now-sp-button--primary--bare--color $link-Farbe Alle löschen und Linkfarbe im Aspektfilter löschen.
    $now-sp-button--primär--leer--color--aktiv $link-Farbe Beim KlickenAlle löschen und Linkfarbe im Aspektfilter löschen.
    $now-sp-button--primary--leer--color--hover $Link-Hover-Farbe „Alle löschen“ und „Linkfarbe löschen“ im Aspektfilter beim Daraufzeigen.
    $now-sp-pill--selected--background-color $brand-primär Ausgewählter Filterpillenhintergrund.
    $now-sp-pill--selected--grenzfarbe $brand-primär Ausgewählte Rahmenfarbe der Filterpille.
    $now-sp-button--secondary--background-color $btn-default-bg Hintergrund der Genius-Ergebnisschaltfläche.
    $now-sp-button--secondary--color $btn-Standardfarbe Textfarbe der Genius-Ergebnisschaltfläche.
    $now-sp-button--secondary--frame-color $btn-Standardrahmen Rahmenfarbe der Genius-Ergebnisschaltfläche.
    $now-sp-button--secondary--background-color--hover dunkel($btn-default-bg, 10 %) Hintergrundfarbe der Genius-Ergebnisschaltfläche beim Daraufzeigen.
    $now-sp-button--secondary--color--hover $btn-Standardfarbe Textfarbe der Genius-Ergebnisschaltfläche beim Daraufzeigen.
    $now-sp-button--secondary--frame-color--hover dunkel($btn-default-grenzwert, 12 %) Rahmen der Genius-Ergebnisschaltfläche beim Daraufzeigen.
    $now-sp-button--secondary--background-color--active dunkel($btn-default-bg, 10 %) Hintergrund der Genius-Ergebnisschaltfläche beim Klicken.
    $now-sp-button--secondary--color--active $btn-Standardfarbe Textfarbe der Genius-Ergebnisschaltfläche beim Klicken.
    $now-sp-button--secondary--frame-color--active dunkel($btn-default-grenzwert, 12 %) Rahmenfarbe der Genius-Ergebnisschaltfläche beim Klicken.
    $now-sp-highlighted-value--tertiary--color $grau- dunkel Genius-Ergebnis – Top-Ergebnis-Tag – Textfarbe.
    $now-sp-button--frame-radius $now-sp-global-board-radius Unterscheidet den Radius für Schaltflächen und Such-Bat-Schaltflächen.
    $now-sp-container--board-radius $now-sp-global-board-radius Rahmenradius für Suchergebniskarten, Genius-Ergebniskarten und den Suchergebniscontainer. Hat keinen Einfluss auf die Grenze zwischen einzelnen Ergebnissen.
    $now-sp-button--primär-negativ--Hintergrundfarbe $btn-primär-bg Hintergrundfarbe der Genius-Schaltfläche im Dialogfeld „EVAM – Aktionsbestätigung“.
    $now-sp-button--primär-negativ--grenzfarbe $btn-primär-grenzwert Rahmenfarbe der Genius-Schaltfläche im Dialogfeld „EVAM – Aktionsbestätigung“.
    $now-sp-button--primär-negativ--Hintergrundfarbe--Hover dunkel($btn-primär-bg, 10 %) Hintergrundfarbe der Genius-Schaltfläche beim Daraufzeigen im Dialogfeld „EVAM-Aktionsbestätigung“.
    $now-sp-button--primär-negativ--grenzfarbe--zeigen dunkel($btn-primär-grenzwert, 12 %) Rahmenfarbe der Genius-Schaltfläche, wenn der Mauszeiger über die Bestätigung bewegt wird.
    $now-sp-button--primär-negativ--Hintergrundfarbe--aktiv dunkel($btn-primär-bg, 10 %) Hintergrundfarbe der Genius-Schaltfläche beim Klicken im Bestätigungsdialogfeld.
    $now-sp-button--primär-negativ--grenzfarbe--aktiv dunkel($btn-primär-grenzwert, 12 %) Rahmenfarbe der Genius-Schaltfläche beim Klicken im Bestätigungsdialogfeld.
    $now-sp-button--primär--Hintergrundfarbe $btn-primär-bg Ausgewählte Filterhintergrundfarbe (Pille).
    $now-sp-button--primär--grenzfarbe $btn-primär-grenzwert Ausgewählte Filterrahmenfarbe (Pille).
    $now-sp-button--primär--color $btn-Primärfarbe Ausgewählte Filterfarbe (Pille).
    $now-sp-button--primär--Hintergrundfarbe--Hover dunkel($btn-primär-bg, 10 %) Hintergrundfarbe des ausgewählten Filters (Pille) beim Daraufzeigen.
    $now-sp-button--primär--grenzfarbe--zeigen dunkel($btn-primär-grenzwert, 12 %) Rahmenfarbe des ausgewählten Filters (Pille) beim Daraufzeigen.
    $now-sp-button--primär--Hintergrundfarbe--aktiv dunkel($btn-primär-bg, 10 %) Hintergrundfarbe des ausgewählten Filters (Pille) beim Klicken.
    $now-sp-button--primär--grenzfarbe--aktiv dunkel($btn-primär-grenzwert, 12 %) Rahmenfarbe des ausgewählten Filters (Pille) beim Klicken.
    $now-sp-rem-factor 5 Dieselbe Variable wie --classicsponlydonotuse--rem-multipy.
    Hinweis:
    Es wird nicht empfohlen, diese Variable zu verwenden.