kagi css

Fichier CSS de style Glassmorphism pour le moteur de recherche Kagi

Améliorez votre expérience de recherche Kagi avec des animations et des styles CSS personnalisés ! Il s'agit d'une refonte générale de l'interface utilisateur du moteur de recherche et de l'expérience utilisateur.

Images

L'Assistant (uniquement pour l'utilisateur ultime)

Aperçu

kagi-css est un fichier CSS personnalisé pour embellir et animer l'interface du moteur de recherche Kagi. Avec cette feuille de style, vous pouvez profiter d'une expérience de recherche plus attrayante et dynamique lorsque vous utilisez Kagi. Principalement inspiré de Google et de Brave Search, mais avec de nombreuses innovations passionnantes qui lui sont propres !

Caractéristiques

• Glassmorphism : Un design inspiré du verre pour les paramètres et la barre de navigation
• Documentation : Ce fichier CSS a été documenté de manière assez précise, c'est pourquoi il est relativement facile d'y apporter des modifications
• Animations personnalisées : transitions fluides et effets accrocheurs
• Éléments d'interface utilisateur améliorés : boutons, barre de recherche et présentation des résultats améliorés
• Conception réactive : s'affiche parfaitement sur les ordinateurs de bureau et les appareils mobiles
• Changements de couleurs faciles : Il y a un champ au début où vous pouvez facilement changer les couleurs les plus importantes à votre guise.
• Design uniforme : Le design s'étend désormais à presque toutes les pages, qu'il s'agisse de résultats, d'images, de vidéos, d'actualités ou de 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. Téléchargez le fichier custom.css à partir de ce référentiel.
2. Activez le CSS personnalisé dans les paramètres Kagi.
3. Collez le code dans le champ de saisie à l'adresse : Lien
4. Enregistrez et profitez de votre expérience Kagi améliorée !

facultatif : il est prévu que le paramètre "Placement de l'URL" soit défini sur "Au-dessus du titre" sous l'élément "Apparence".

Animations

kagi-css comprend plusieurs animations pour rendre votre expérience de recherche plus dynamique :

1. Fondu en fondu des résultats : les résultats de la recherche apparaissent en douceur au fur et à mesure de leur chargement.
2. Effets de survol : les boutons et les liens ont des transitions de survol agréables.
3. Tuiles de recherche : disposez également de belles animations.

Des idées/commentaires ?

Si vous avez une idée qui pourrait étendre/compléter le look de Kagi ou si vous avez trouvé un bug, écrivez-moi sur Discord ou écrivez dans Discord : kagi-discussions -> « UI Design Ideas for my custom css ». Lien

Dérivés

Ce projet peut bien sûr être bifurqué par n'importe qui et modifié/étendu à volonté. La seule chose qui compte c'est de me donner du crédit ainsi que ce projet comme crédits et de marquer le fork comme tel. J'essaie de lister tous les forks possibles ici, il existe actuellement une version plus sombre de mon thème, qui peut être consultée ici.

Profitez de votre expérience de recherche Kagi améliorée !