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 검색 경험을 즐겨보세요!