kagi css

Arquivo CSS de estilo Glassmorphism para mecanismo de pesquisa Kagi

Aprimore sua experiência de pesquisa Kagi com animações e estilos CSS personalizados! É uma revisão geral da interface do usuário e da experiência do usuário do mecanismo de pesquisa.

Imagens

O Assistente (apenas para Usuário Final)

Visão geral

kagi-css é um arquivo CSS personalizado para embelezar e animar a interface do mecanismo de pesquisa Kagi. Com esta folha de estilo, você pode desfrutar de uma experiência de pesquisa visualmente mais atraente e dinâmica ao usar o Kagi. Inspirado principalmente no Google e no Brave Search, mas com muitas inovações interessantes!

Características

• Glassmorphism : Um design inspirado em vidro para as configurações e barra de navegação
• Documentação : Este arquivo css foi documentado com bastante precisão, por isso é relativamente fácil fazer alterações
• Animações personalizadas : transições suaves e efeitos atraentes
• Elementos de UI aprimorados : botões, barra de pesquisa e layout de resultados aprimorados
• Design responsivo : fica ótimo em desktops e dispositivos móveis
• Mudanças fáceis de cores : Há um campo no início onde você pode alterar facilmente as cores mais importantes conforme desejar
• Design Uniforme : O design agora se estende a quase todas as páginas, sejam elas de resultados, imagens, vídeos, notícias ou 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 */
}

Instalação

1. Baixe o arquivo custom.css deste repositório.
2. Habilite CSS personalizado nas configurações do Kagi.
3. Cole o código no campo de entrada em: Link
4. Salve e aproveite sua experiência Kagi aprimorada!

opcional: está planejado que a configuração "Posicionamento de URL" seja definida como "Acima do título" no item "Aparência".

Animações

kagi-css inclui diversas animações para tornar sua experiência de pesquisa mais dinâmica:

1. Resultados Fade-In : os resultados da pesquisa desaparecem suavemente à medida que são carregados.
2. Efeitos de foco : botões e links têm transições de foco agradáveis.
3. Blocos de pesquisa : também possuem belas animações.

Alguma ideia/comentário?

Se você tem uma ideia que ampliaria/completaria a aparência do Kagi ou se encontrou um bug, escreva para mim no Discord ou escreva no Discord: kagi-discussions -> “Idéias de design de UI para meu css personalizado”. Link

Derivados

É claro que este projeto pode ser bifurcado por qualquer pessoa e alterado/ampliado à vontade. A única coisa que importa é dar crédito a mim e a este projeto e marcar o fork como tal. Tento listar todos os forks possíveis aqui, atualmente existe uma versão mais sombria do meu tema, que pode ser visualizada aqui.

Aproveite sua experiência aprimorada de pesquisa Kagi!