kagi css

CSS-файл стиля Glassmorphism для поисковой системы Kagi

Улучшите свои возможности поиска в Kagi с помощью пользовательских анимаций и стилей CSS! Это общий пересмотр пользовательского интерфейса и пользовательского опыта поисковой системы.

Изображения

Ассистент (только для Ultimate-пользователя)

Обзор

kagi-css — это специальный CSS-файл, предназначенный для украшения и оживления интерфейса поисковой системы Kagi. Благодаря этой таблице стилей вы сможете сделать поиск более визуально привлекательным и динамичным при использовании Kagi. В основном вдохновлен Google и Brave Search, но содержит множество собственных интересных инноваций!

Функции

• Glassmorphism : дизайн настроек и панели навигации в стиле стекла.
• Документация : этот CSS-файл довольно точно задокументирован, поэтому в него относительно легко вносить изменения.
• Пользовательские анимации : плавные переходы и привлекательные эффекты.
• Улучшенные элементы пользовательского интерфейса : улучшенные кнопки, панель поиска и макет результатов.
• Адаптивный дизайн : отлично смотрится как на настольных, так и на мобильных устройствах.
• Легкое изменение цвета : в начале есть поле, где вы можете легко изменить наиболее важные цвета по своему желанию.
• Единый дизайн : дизайн теперь распространяется практически на все страницы, будь то результаты, изображения, видео, новости или подкасты.

 :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 */
}

Установка

1. Загрузите файл custom.css из этого репозитория.
2. Включите пользовательский CSS в настройках Kagi.
3. Вставьте код в поле ввода по адресу: Ссылка.
4. Сохраните и наслаждайтесь улучшенными впечатлениями от Каги!

необязательно: планируется, что в пункте «Внешний вид» для параметра «Размещение URL» будет установлено значение «Над заголовком».

Анимации

kagi-css включает несколько анимаций, которые сделают поиск более динамичным:

1. Результаты постепенно исчезают : результаты поиска плавно появляются по мере загрузки.
2. Эффекты при наведении : кнопки и ссылки имеют приятные переходы при наведении.
3. Плитки поиска : Также есть красивая анимация.

Есть идеи/комментарии?

Если у вас есть идея, которая могла бы расширить/дополнить внешний вид Kagi, или если вы нашли ошибку, напишите мне в Discord или напишите в Discord: kagi-discussions -> «Идеи дизайна пользовательского интерфейса для моего пользовательского CSS». Связь

Производные

Разумеется, кто угодно может разветвить этот проект и изменить/расширить его по своему желанию. Единственное, что имеет значение, — это отдать должное мне и этому проекту как кредитам и отметить вилку как таковую. Я пытаюсь перечислить все возможные форки здесь, на данный момент существует более темная версия моей темы, которую можно посмотреть здесь.

Наслаждайтесь улучшенным поиском Kagi!