kagi css

File CSS Gaya Glassmorphism untuk Mesin Pencari Kagi

Tingkatkan pengalaman pencarian Kagi Anda dengan animasi dan gaya CSS khusus! Ini adalah perombakan umum antarmuka pengguna mesin pencari dan pengalaman pengguna.

Gambar

Asisten (hanya untuk Pengguna Utama)

Ringkasan

kagi-css adalah file CSS khusus untuk mempercantik dan menghidupkan antarmuka mesin pencari Kagi. Dengan stylesheet ini, Anda dapat menikmati pengalaman pencarian yang lebih menarik secara visual dan dinamis saat menggunakan Kagi. Terutama terinspirasi oleh Google dan Brave Search, namun dengan banyak inovasi menarik!

Fitur

• Glassmorphism : Desain yang terinspirasi kaca untuk pengaturan dan bilah navigasi
• Dokumentasi : File css ini telah didokumentasikan dengan cukup akurat, sehingga relatif mudah untuk melakukan perubahan
• Animasi Khusus : Transisi halus dan efek menarik
• Elemen UI yang Ditingkatkan : Peningkatan tombol, bilah pencarian, dan tata letak hasil
• Desain Responsif : Tampak hebat di desktop dan perangkat seluler
• Perubahan warna yang mudah : Ada bidang di awal di mana Anda dapat dengan mudah mengubah warna terpenting sesuai keinginan
• Desain Seragam : Desain kini meluas ke hampir semua halaman, baik itu hasil, gambar, video, berita, atau podcast.

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

Instalasi

1. Unduh file custom.css dari repositori ini.
2. Aktifkan CSS khusus di Pengaturan Kagi.
3. Rekatkan kode ke kolom input di: Tautan
4. Simpan dan nikmati pengalaman Kagi Anda yang ditingkatkan!

opsional: Rencananya pengaturan "Penempatan URL" akan ditetapkan ke "Di Atas Judul" di bawah item "Tampilan".

Animasi

kagi-css menyertakan beberapa animasi untuk membuat pengalaman pencarian Anda lebih dinamis:

1. Hasil Fade-In : Hasil pencarian memudar dengan mulus saat dimuat.
2. Efek Melayang : Tombol dan tautan memiliki transisi melayang yang menyenangkan.
3. Ubin Pencarian : Juga memiliki animasi yang indah.

Ada ide/komentar?

Jika Anda memiliki ide yang akan memperluas/menyempurnakan tampilan Kagi atau jika Anda menemukan bug, silakan tulis kepada saya di Discord atau tulis di Discord: kagi-discussions -> “Ide Desain UI untuk css khusus saya”. Link

Turunan

Proyek ini tentu saja dapat dilakukan oleh siapa saja dan diubah/diperpanjang sesuka hati. Satu-satunya hal yang penting adalah memberi saya penghargaan dan proyek ini sebagai penghargaan dan menandai percabangannya. Saya mencoba membuat daftar semua kemungkinan percabangan di sini, saat ini ada versi yang lebih gelap dari tema saya, yang dapat dilihat di sini.

Nikmati pengalaman pencarian Kagi Anda yang ditingkatkan!