kagi css

ไฟล์ CSS สไตล์ Glassmorphism สำหรับเครื่องมือค้นหา Kagi

ยกระดับประสบการณ์การค้นหา Kagi ของคุณด้วยภาพเคลื่อนไหวและสไตล์ CSS ที่กำหนดเอง! เป็นการยกเครื่องอินเทอร์เฟซผู้ใช้ของเครื่องมือค้นหาและประสบการณ์ผู้ใช้โดยรวม

รูปภาพ

ผู้ช่วย (สำหรับ Ultimate-User เท่านั้น)

ภาพรวม

kagi-css เป็นไฟล์ CSS ที่กำหนดเองเพื่อตกแต่งและทำให้อินเทอร์เฟซเครื่องมือค้นหาของ Kagi มีชีวิตชีวา ด้วยสไตล์ชีตนี้ คุณจะเพลิดเพลินกับประสบการณ์การค้นหาที่ดึงดูดสายตาและไดนามิกมากขึ้นในขณะที่ใช้ 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. เปิดใช้งาน CSS ที่กำหนดเองในการตั้งค่า Kagi
3. วางโค้ดในช่องป้อนข้อมูลที่: ลิงก์
4. บันทึกและเพลิดเพลินไปกับประสบการณ์ Kagi ที่ได้รับการปรับปรุงของคุณ!

ทางเลือก: มีการวางแผนว่าการตั้งค่า "ตำแหน่ง URL" จะถูกตั้งค่าเป็น "เหนือชื่อ" ใต้รายการ "ลักษณะที่ปรากฏ"

ภาพเคลื่อนไหว

kagi-css มีภาพเคลื่อนไหวหลายแบบเพื่อทำให้ประสบการณ์การค้นหาของคุณมีไดนามิกมากขึ้น:

1. ผลลัพธ์จางลง : ผลการค้นหาจางลงอย่างราบรื่นขณะโหลด
2. เอฟเฟกต์โฮเวอร์ : ปุ่มและลิงก์มีการเปลี่ยนโฮเวอร์ที่น่าพอใจ
3. ค้นหาไทล์ : มีภาพเคลื่อนไหวที่สวยงามด้วย

ความคิด / ความคิดเห็นใด ๆ ?

หากคุณมีไอเดียที่จะขยาย/ทำให้รูปลักษณ์ของ Kagi สมบูรณ์ หรือหากคุณพบข้อบกพร่อง โปรดเขียนถึงฉันบน Discord หรือเขียนใน Discord: kagi-discussions -> “แนวคิดการออกแบบ UI สำหรับ CSS ที่กำหนดเองของฉัน” ลิงค์

อนุพันธ์

แน่นอนว่าโปรเจ็กต์นี้สามารถถูก Fork โดยใครก็ได้ และเปลี่ยนแปลง/ขยายได้ตามต้องการ สิ่งเดียวที่สำคัญคือการให้เครดิตแก่ฉันและโครงการนี้เป็นเครดิต และทำเครื่องหมายทางแยกเช่นนี้ ฉันพยายามแสดงรายการทางแยกที่เป็นไปได้ทั้งหมดที่นี่ ขณะนี้มีธีมของฉันในเวอร์ชันสีเข้มกว่า ซึ่งสามารถดูได้ที่นี่

เพลิดเพลินไปกับประสบการณ์การค้นหา Kagi ที่ได้รับการปรับปรุงของคุณ!