ppb1701/kagi_capy_ui
1
0
Fork 0
Code Issues Pull requests Activity
No description
20 commits 1 branch 0 tags 1.6 MiB
  • CSS 100%
Find a file
Patrick Boyd c00df55166 Version 1.1.0 
add dimming effect to suspected paywalled links or suspected ai generated content.
Inspired by this post from @kagihq: https://mastodon.social/@kagihq/116681434617465276.
2026-06-02 14:00:15 -04:00
Assets Version 1.0.0 2025-12-01 10:43:31 -05:00
.gitignore Version 1.0.0 2025-12-01 10:43:31 -05:00
Capy_UI.css Version 1.1.0 2026-06-02 14:00:15 -04:00
CHANGELOG.md Version 1.1.0 2026-06-02 14:00:15 -04:00
README.md Version 1.1.0 2026-06-02 14:00:15 -04:00

README.md

kagi_capy_ui

Capy UI Theme for Kagi Search

This is a port of Mastodon Capy UI (Single Column CSS) for Kagi Search Custom CSS.

Currently requires Dark Mode enabled in Kagi. Will expand it to not require that in future.

Screenshots

Search Page

Kagi Search with Capy UI

Search Results

Search Results with Capy UI

Features

  • Dark theme with Tricorn Black background and Electric Blue accents
  • Gradient background with subtle blue radial gradient
  • Capybara mascot logo positioned inside the search field
  • Rounded UI elements (16px/32px border radius)
  • Responsive design optimized for both desktop and mobile
  • AI / paywall result de-emphasis — results marked with Kagi's ai-stain-icon fade to 32% opacity; paywall results fade to 45% with a green icon accent. Hover restores full opacity. Sub-listings within a result are also covered. To disable, comment out or delete the final block in the CSS (marked with the .ai-stain-icon / .paywall-icon selectors).

Recent Fixes (Dec 2025)

  • ✅ Fixed capy logo positioning to be inside the search bar (was overlapping at right: -48px)
  • ✅ Adjusted mobile capy logo size and position for better text visibility
  • ✅ Added proper padding to search input to prevent text from being cut off by icons
  • ✅ Fixed magnifier icon positioning on both mobile and desktop
  • ✅ Ensured all icons stay within the search container boundaries

Installation

  1. Go to Kagi Settings → Appearance → Custom CSS
  2. Copy the contents of Capy_UI.css
  3. Paste into the Custom CSS field
  4. Save and enjoy!

Notes

  • The gradient background may be ported back to the Mastodon version in the future
  • Originally based on Mastodon Capy UI