kagi css

Archivo CSS de estilo Glassmorphism para el motor de búsqueda Kagi

¡Mejora tu experiencia de búsqueda de Kagi con animaciones y estilos CSS personalizados! Es una revisión general de la interfaz de usuario del motor de búsqueda y de la experiencia del usuario.

Imágenes

El Asistente (solo para usuarios finales)

Descripción general

kagi-css es un archivo CSS personalizado para embellecer y animar la interfaz del motor de búsqueda Kagi. Con esta hoja de estilo, puede disfrutar de una experiencia de búsqueda más dinámica y visualmente atractiva mientras utiliza Kagi. Principalmente inspirado en Google y Brave Search, ¡pero con muchas innovaciones interesantes propias!

Características

• Glassmorphism : un diseño inspirado en el vidrio para la configuración y la barra de navegación
• Documentación : este archivo CSS se ha documentado con bastante precisión, por lo que es relativamente fácil realizar cambios.
• Animaciones personalizadas : transiciones suaves y efectos llamativos
• Elementos de interfaz de usuario mejorados : botones, barra de búsqueda y diseño de resultados mejorados
• Diseño responsivo : se ve genial tanto en computadoras de escritorio como en dispositivos móviles
• Cambios de color sencillos : hay un campo al principio donde puedes cambiar fácilmente los colores más importantes como desees
• Diseño uniforme : El diseño ahora se extiende a casi todas las páginas, ya sean resultados, imágenes, vídeos, noticias o 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 */
}

Instalación

1. Descargue el archivo custom.css de este repositorio.
2. Habilite CSS personalizado en la configuración de Kagi.
3. Pegue el código en el campo de entrada en: Enlace
4. ¡Guarda y disfruta de tu experiencia Kagi mejorada!

Opcional: está previsto que la configuración "Ubicación de URL" se establezca en "Título superior" en el elemento "Apariencia".

Animaciones

kagi-css incluye varias animaciones para hacer más dinámica tu experiencia de búsqueda:

1. Resultados graduales : los resultados de la búsqueda aparecen gradualmente a medida que se cargan.
2. Efectos de desplazamiento : los botones y enlaces tienen agradables transiciones de desplazamiento.
3. Buscar mosaicos : también tiene hermosas animaciones.

¿Alguna idea/comentario?

Si tiene una idea que ampliaría/completaría el aspecto de Kagi o si encontró un error, escríbame en Discord o escriba en Discord: kagi-discussions -> “Ideas de diseño de interfaz de usuario para mi CSS personalizado”. Enlace

Derivados

Por supuesto, cualquier persona puede bifurcar este proyecto y cambiarlo o ampliarlo a voluntad. Lo único que importa es darme crédito y este proyecto como créditos y marcar la bifurcación como tal. Intento enumerar todas las bifurcaciones posibles aquí; actualmente hay una versión más oscura de mi tema, que se puede ver aquí.

¡Disfruta de tu experiencia de búsqueda Kagi mejorada!