kagi css

CSS-Datei im Glassmorphismus-Stil für die Kagi-Suchmaschine

Verbessern Sie Ihr Kagi-Sucherlebnis mit benutzerdefinierten CSS-Animationen und -Stilen! Es handelt sich um eine allgemeine Überarbeitung der Benutzeroberfläche und des Benutzererlebnisses der Suchmaschine.

Bilder

Der Assistent (nur für Ultimate-User)

Überblick

kagi-css ist eine benutzerdefinierte CSS-Datei zur Verschönerung und Belebung der Kagi-Suchmaschinenoberfläche. Mit diesem Stylesheet können Sie bei der Verwendung von Kagi ein optisch ansprechenderes und dynamischeres Sucherlebnis genießen. Hauptsächlich inspiriert von Google und Brave Search, aber mit vielen spannenden eigenen Innovationen!

Merkmale

• Glasmorphismus : Ein von Glas inspiriertes Design für die Einstellungen und die Navigationsleiste
• Dokumentation : Diese CSS-Datei wurde ziemlich genau dokumentiert, weshalb es relativ einfach ist, Änderungen vorzunehmen
• Benutzerdefinierte Animationen : Sanfte Übergänge und auffällige Effekte
• Verbesserte UI-Elemente : Verbesserte Schaltflächen, Suchleiste und Ergebnislayout
• Responsive Design : Sieht sowohl auf Desktop- als auch auf Mobilgeräten großartig aus
• Einfache Farbänderungen : Am Anfang gibt es ein Feld, in dem Sie die wichtigsten Farben ganz einfach nach Ihren Wünschen ändern können
• Einheitliches Design : Das Design erstreckt sich mittlerweile auf fast alle Seiten, seien es Ergebnisse, Bilder, Videos, News oder Podcasts.

 :root{
  --button-color:#F4B644; /* Primary color for the buttons */
  --button-hover-color:#E6AB40; /* Secondary color for the buttons - when hovering - should be slightly darker than the button color */
  --source-highlight-color:#D9A23C; /* Color of the sources and the small annotations for the references in the quick reply */
  --sri-hover-color:#F4B644; /* Color for hovering over search results */
  --color-search-input:#1e2028; /* Color for Search Box */
  --color-search-input-border:var(--graphite-900);
  --time-stamp:rgba(69,69,73,0.8); /* Color for timestamp with alpha value */
  --m_sri_gap_color:#222222!important;
  --app-text:#fdfdfd!important;
  --app-bg:#17191e;
  --inline-widget-bg:#1e2028;
  --primary-25:#1e2028; /* Adjustment for The Assistant */
  --primary-50:#1e2028; /* Adjustment for The Assistant */
  --primary-70:#17191e /* Adjustment for The Assistant */
}

Installation

1. Laden Sie die Datei custom.css aus diesem Repository herunter.
2. Aktivieren Sie benutzerdefiniertes CSS in den Kagi-Einstellungen.
3. Fügen Sie den Code in das Eingabefeld unter: Link ein
4. Sparen Sie und genießen Sie Ihr erweitertes Kagi-Erlebnis!

optional: Es ist geplant, dass unter dem Punkt „Aussehen“ die Einstellung „URL-Platzierung“ auf „Über dem Titel“ gesetzt wird.

Animationen

kagi-css enthält mehrere Animationen, um Ihr Sucherlebnis dynamischer zu gestalten:

1. Einblenden der Ergebnisse : Die Suchergebnisse werden beim Laden reibungslos eingeblendet.
2. Hover-Effekte : Schaltflächen und Links haben angenehme Hover-Übergänge.
3. Suchkacheln : Haben auch schöne Animationen.

Irgendwelche Ideen/Kommentare?

Wenn Sie eine Idee haben, die das Aussehen von Kagi erweitern/vervollständigen würde, oder wenn Sie einen Fehler gefunden haben, schreiben Sie mir bitte auf Discord oder schreiben Sie in Discord: kagi-discussions -> „UI-Design-Ideen für mein benutzerdefiniertes CSS“. Link

Derivate

Dieses Projekt kann natürlich von jedem geforkt und beliebig verändert/erweitert werden. Das Einzige, was zählt, ist, mir Credits und dieses Projekt als Credits zu geben und den Fork als solchen zu kennzeichnen. Ich versuche hier alle möglichen Forks aufzulisten, derzeit gibt es eine dunklere Version meines Themes, die hier angeschaut werden kann.

Genießen Sie Ihr erweitertes Kagi-Sucherlebnis!