Design für KI-Suche in Serviceportal

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 2 Minuten Lesedauer

    • Sie können das Erscheinungsbild der Experience [ KI-Suche 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 KI-Suche verwenden.

    Sie können diese Variablen im Feld „ CSS-Variablen “ eines Designdatensatzes [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“, Helvetik, Arial, Sans-Serif Schriftartfamilie für alle Texte.
    $now-sp-color--text-primary $grau- dunkel Farbe nicht ausgewählter Registerkarten, Text der Genius-Ergebnisschaltfläche, Farbe von Treffertext, Ergebnissymbole, Text des Dropdown-Listenelements der Suchleiste 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 Suchergebnissen.
    $now-sp-color--neutral-12 $grau- dunkel Erweiterte Symbolfarbe (Chevron) der Aspekte in der mobilen Ansicht.
    $now-sp-global-frame-radius 4px Abgerundete Ecken von Suchergebnissen, die sich auf den Inhaltsbereich und nicht auf die Suchergebniskarten auswirken. Diese Variable wirkt sich auch auf Genius-Ergebnisse, Schaltflächen in Genius-Ergebnissen und die Hintergrundhervorhebungen beim Zeigen auf das Suchleistensymbol aus. Diese Variable hat keine Auswirkungen auf Aspekte.
    $now-sp-color--fokus-ring $brand-primary Fokusfarbe auf Registerkarten.
    $now-sp-tabs--selected--color $brand-primary Textfarbe der ausgewählten Registerkarte. Schließt beim Daraufzeigen nicht ein.
    $now-sp-tabs--color--hover $brand-primary Textfarbe aller Registerkarten, wenn darauf gezeigt wird.
    $now-sp-tabs--frame-color $sp-b-frame-color Registerkarten unterstreichen Farbe.
    $now-sp-tabs--selected--background-color $brand-primary Unterstrichfarbe der ausgewählten Registerkarte.
    $now-sp-heading--title-primary--color $grau- dunkel Bezeichnung für Farbfilter.
    $now-sp-checkbox-label--color $grau- dunkel Farbe des Filterelements (Kontrollkästchenbezeichnung).
    $now-sp-button--primary--bare--color $link-color Alle löschen und Linkfarbe im Aspektfilter löschen.
    $now-sp-button--primary--bare--color--active $link-color „Alle löschen“ und „Linkfarbe löschen“ im Aspektfilter beim Klicken.
    $now-sp-button--primary--bare--color--hover $link-hover-color Alle löschen und Linkfarbe im Aspektfilter löschen, wenn Sie mit der Maus darauf zeigen.
    $now-sp-pill--selected--background-color $brand-primary Hintergrund der ausgewählten Filterpille.
    $now-sp-pill--selected--frame-color $brand-primary Rahmenfarbe der ausgewählten Filterpille.
    $now-sp-button--secondary--background-color $btn-default-bg Hintergrund der Genius-Ergebnisschaltfläche.
    $now-sp-button--secondary--color $btn-default-color Textfarbe der Genius-Ergebnisschaltfläche.
    $now-sp-button--secondary--frame-color $btn-default-frame 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-default-color Textfarbe der Genius-Ergebnisschaltfläche beim Daraufzeigen.
    $now-sp-button--secondary--frame-color--hover dunkel($btn-default-frame, 12%) Genius-Ergebnisschaltflächenrahmen 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-default-color Textfarbe der Genius-Ergebnisschaltfläche beim Klicken.
    $now-sp-button--secondary--frame-color--active dunkel($btn-default-frame, 12%) Rahmenfarbe der Genius-Ergebnisschaltfläche bei Klick.
    $now-sp-highlighted-value--tertiary--color $grau- dunkel Textfarbe des Tags für Top-Ergebnis für Genius-Ergebnis.
    $now-sp-button--frame-radius $now-sp-global-frame-radius Differenziert den Radius für Schaltflächen und Such-Bat-Schaltflächen.
    $now-sp-container--frame-radius $now-sp-global-frame-radius Rahmenradius für Suchergebniskarten, Genius-Ergebniskarten und den Suchergebniscontainer. Hat keine Auswirkungen auf den Rahmen zwischen einzelnen Ergebnissen.
    $now-sp-button--primary-negative--background-color $btn-primary-bg Hintergrundfarbe der Genius-Schaltfläche im Bestätigungsdialogfeld der EVAM-Aktion.
    $now-sp-button--primary-negative--frame-color $btn-primary-frame Rahmenfarbe der Genius-Schaltfläche im Bestätigungsdialogfeld der EVAM-Aktion.
    $now-sp-button--primary-negative--background-color--hover dunkel($btn-primary-bg, 10%) Hintergrundfarbe der Genius-Schaltfläche beim Daraufzeigen im Bestätigungsdialogfeld der EVAM-Aktion.
    $now-sp-button--primary-negative--frame-color--hover dunkel($btn-primary-frame, 12%) Rahmenfarbe der Genius-Schaltfläche, wenn Sie den Mauszeiger innerhalb der Bestätigung bewegen.
    $now-sp-button--primary-negative--background-color--active dunkel($btn-primary-bg, 10%) Hintergrundfarbe der Genius-Schaltfläche beim Klicken im Bestätigungsdialogfeld.
    $now-sp-button--primary-negative--frame-color--active dunkel($btn-primary-frame, 12%) Rahmenfarbe der Genius-Schaltfläche beim Klicken im Bestätigungsdialogfeld.
    $now-sp-button--primary--background-color $btn-primary-bg Hintergrundfarbe des ausgewählten Filters (Pille).
    $now-sp-button--primary--frame-color $btn-primary-frame Rahmenfarbe des ausgewählten Filters (Pille).
    $now-sp-button--primary--color $btn-primary-color Farbe des ausgewählten Filters (Pille).
    $now-sp-button--primary--background-color--hover dunkel($btn-primary-bg, 10%) Hintergrundfarbe des ausgewählten Filters (Pille) beim Daraufzeigen.
    $now-sp-button--primary--frame-color--hover dunkel($btn-primary-frame, 12%) Rahmenfarbe des ausgewählten Filters (Pille) beim Daraufzeigen.
    $now-sp-button--primary--background-color--active dunkel($btn-primary-bg, 10%) Hintergrundfarbe des ausgewählten Filters (Pille) beim Klicken.
    $now-sp-button--primary--frame-color--active dunkel($btn-primary-frame, 12%) Rahmenfarbe des ausgewählten Filters (Pille) beim Klicken.
    $now-sp-rem-factor 5 Dieselbe Variable wie --classicsponlydonotuse--rem-multipy.
    Hinweis:
    Die Verwendung dieser Variable wird nicht empfohlen.