kagi css

Kagi 検索エンジン用の Glassmorphism スタイル CSS ファイル

カスタム CSS アニメーションとスタイルを使用して、Kagi の検索エクスペリエンスを強化します。これは、検索エンジンのユーザー インターフェイスとユーザー エクスペリエンスの全体的な見直しです。

画像

アシスタント (究極ユーザーのみ)

概要

kagi-css は、Kagi 検索エンジン インターフェイスを美しくし、活性化するためのカスタム CSS ファイルです。このスタイルシートを使用すると、Kagi の使用中に、より視覚的に魅力的で動的な検索エクスペリエンスを楽しむことができます。主に Google と Brave Search からインスピレーションを得ていますが、独自のエキサイティングなイノベーションも多数含まれています。

特徴

• Glassmorphism : 設定とナビゲーション バーのガラスにインスピレーションを得たデザイン
• ドキュメント: この CSS ファイルは非常に正確にドキュメント化されているため、変更を加えるのは比較的簡単です。
• カスタム アニメーション: スムーズなトランジションと目を引く効果
• UI 要素の強化: ボタン、検索バー、結果レイアウトの改善
• レスポンシブ デザイン: デスクトップとモバイル デバイスの両方で見栄えがよくなります
• 簡単な色の変更：最初に、必要に応じて最も重要な色を簡単に変更できるフィールドがあります。
• 統一されたデザイン: デザインは、結果、画像、ビデオ、ニュース、ポッドキャストなど、ほぼすべてのページに拡張されました。

 :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. Kagi 設定でカスタム CSS を有効にします。
3. コードを次の入力フィールドに貼り付けます: リンク
4. 保存して強化された Kagi エクスペリエンスをお楽しみください!

オプション：「外観」項目の「URL 配置」設定を「タイトルの上」に設定する予定です。

アニメーション

kagi-css には、検索エクスペリエンスをよりダイナミックにするためのいくつかのアニメーションが含まれています。

1. 結果のフェードイン: 検索結果は読み込まれるにつれてスムーズにフェードインします。
2. ホバー効果: ボタンとリンクには快適なホバートランジションがあります。
3. 検索タイル: 美しいアニメーションもあります。

何かアイデア/コメントはありますか?

Kagi の外観を拡張/完成させるアイデアがある場合、またはバグを見つけた場合は、Discord で私に連絡するか、Discord に次のように書いてください: kagi-Discussions -> 「カスタム CSS の UI デザインのアイデア」。リンク

派生語

もちろん、このプロジェクトは誰でもフォークでき、自由に変更/拡張できます。重要なのは、私とこのプロジェクトのクレジットをクレジットとして付与し、フォークにその旨をマークすることだけです。ここでは考えられるすべてのフォークをリストします。現在、テーマのダークバージョンがあり、ここで見ることができます。

強化された Kagi 検索エクスペリエンスをお楽しみください。