Last active 1747414621

Kagi Catppuccin Latte/Mocha Theme

jcrabapple's Avatar jcrabapple revised this gist 1734985451. Go to revision

1 file changed, 21 insertions, 2 deletions

kagi-catppuccin-mocha.css

@@ -279,9 +279,28 @@ span.domain {
279 279 }
280 280
281 281 #chat_box .chat_bubble .sources .domain {
282 - background-color: var(--surface0) !important;
282 + background-color: var(--surface0); /* Darker background color */
283 + color: var(--text); /* Ensure readable text color */
284 + padding: 1px 3px; /* Optional: Adjust padding as needed */
285 + border-radius: 3px; /* Optional: Add a slight border-radius */
283 286 }
284 287
285 - span.__domain-name {
288 + span.__domain-name, .prompt-options button:hover, .prompt-options label:hover, .promptOptionsSelector .custom-assistants li.option:hover, .promptOptionsSelector .default-assistants li.option.focus, .promptOptionsSelector .default-assistants li.option:hover, .promptOptionsSelector .custom-assistants span a:hover {
286 289 background-color: var(--surface0) !important;
290 + }
291 +
292 + .message-info li .value {
293 + background-color: var(--surface0); /* Darker background color */
294 + color: var(--text); /* Ensure readable text color */
295 + padding: 2px 5px; /* Optional: Add some padding */
296 + border-radius: 4px; /* Optional: Add a border-radius */
297 + }
298 +
299 + #chat_box .chat_bubble .content sup {
300 + background-color: var(--surface1); /* Darker background color */
301 + color: var(--text); /* Ensure readable text color */
302 + }
303 +
304 + #chat_box .chat_bubble .content sup:hover {
305 + background-color: var(--surface2); /* Slightly lighter on hover */
287 306 }

jcrabapple's Avatar jcrabapple revised this gist 1734977111. Go to revision

1 file changed, 4 insertions

kagi-catppuccin-mocha.css

@@ -278,6 +278,10 @@ span.domain {
278 278 border-radius: 3px !important; /* Optional: Add a slight border radius */
279 279 }
280 280
281 + #chat_box .chat_bubble .sources .domain {
282 + background-color: var(--surface0) !important;
283 + }
284 +
281 285 span.__domain-name {
282 286 background-color: var(--surface0) !important;
283 287 }

jcrabapple's Avatar jcrabapple revised this gist 1734974833. Go to revision

1 file changed, 278 insertions, 374 deletions

kagi-catppuccin-mocha.css

@@ -1,379 +1,283 @@
1 1 :root {
2 - --font-main: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
3 - --font-lufga: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
4 - }
5 -
6 - .theme_dark, .theme_moon_dark, .theme_moon_dark_conditional {
7 - --app-bg: #1E1E2E;
8 - --page-text: #CDD6F4;
9 - --app-text: #CDD6F4;
10 - --primary: #CDD6F4;
11 - --blue: #89b4fa;
2 + --rosewater: #f5e0dc;
3 + --flamingo: #f2cdcd;
4 + --pink: #f5c2e7;
5 + --mauve: #cba6f7;
6 + --red: #f38ba8;
7 + --maroon: #eba0ac;
12 8 --peach: #fab387;
9 + --yellow: #f9e2af;
13 10 --green: #a6e3a1;
11 + --teal: #94e2d5;
12 + --sky: #89dceb;
13 + --sapphire: #74c7ec;
14 + --blue: #89b4fa;
15 + --lavender: #b4befe;
16 + --text: #cdd6f4;
17 + --subtext1: #bac2de;
18 + --subtext0: #a6adc8;
19 + --overlay2: #9399b2;
20 + --overlay1: #7f849c;
21 + --overlay0: #6c7086;
22 + --surface2: #585b70;
23 + --surface1: #45475a;
24 + --surface0: #313244;
25 + --base: #1e1e2e;
26 + --mantle: #181825;
14 27 --crust: #11111b;
15 - --color_link: #F9E2AF;
16 - --primary-hover: #BAC2DE;
17 -
18 - /* mobile */
19 - --m_sri_gap_color: #313244; /* Surface1 */
20 - }
21 -
22 - /* disable horizontal scrollbars */
23 - body {
24 - overflow-x: hidden;
25 - }
26 -
27 - ::selection {
28 - background-color: var(--color_link);
29 - color: #313244; /* Surface1 */
30 - }
31 -
32 - .logo svg, .app-logo.--kagi {
33 - stroke: var(--blue);
34 - stroke-width: 2px;
35 - }
36 -
37 - .h-w #accountContainer .header_links, .search-form .search-form-icons svg {
38 - color: var(--peach);
39 - }
40 -
41 - .mr-3 {
42 - color: var(--green);
43 - }
44 -
45 - /* container-level */
46 - .results-box {
47 - margin-top: 10px;
48 - }
49 -
50 - /* update color borders for serp tabs */
51 - .serp-nav .nav_item.--active:after, .serp-nav .nav_item:hover:after, ._0_lenses .k_ui_dropdown.--active .k_ui_dropdown_first_item span:after {
52 - border-color: var(--primary);
53 - }
54 -
55 - /* button background color */
56 - .btn.--lg, .btn.--primary, .search-form .searchFormSubmitBtn, .sfi_sep {
57 - background-color: var(--blue);
58 - }
59 -
60 - #searchFormSubmit, .dropdown.dd_clean .dd-toggle-label, .c-p, ._0_summarize_link a {
61 - color: var(--blue);
62 - }
63 -
64 - .footer .copyright, .serp_nav_start, .serp-nav .nav_item, .trigger svg {
65 - color: var(--peach);
66 - }
67 -
68 - .px-4, .more_search_dropdown_box .k_ui_dropdown, .more_search_dropdown_box .k_ui_dropdown_data_list {
69 - color: var(--peach);
70 - }
71 -
72 - .control-center-btn svg {
73 - color: var(--peach);
74 - }
75 -
76 - .user-auth-bar, #bell_notification, .footer .footerInner ul li a, footer .footerInner ul li a {
77 - color: var(--peach);
78 - }
79 -
80 - #bell_notification .notification_count {
81 - background-color: var(--green);
82 - }
83 -
84 - .control-center-btn, .control-center-btn:hover {
85 - color: var(--peach);
86 - }
87 -
88 - .quick-settings a, .app-content-box._0_content-bay a {
89 - color: var(--peach);
90 - }
91 -
92 - /* disable links borders */
93 - #layout-v2 a, .__sri-title .__sri_title_link, .__sri-title .__sri_title_link:hover, .wikipediaResult a:hover {
94 - border-bottom: 0;
95 - }
96 -
97 - /* general input focus */
98 - :focus-visible {
99 - outline-color: var(--color_link);
100 - }
101 -
102 - /* result tweaks */
103 - .__sri-title-box, .__sri-title, .__sri-url-box, .__sri-body {
104 - padding-left: 0;
105 - }
106 -
107 - .__sri-title .__domain-favicon {
108 - margin-left: -25px;
109 - }
110 -
111 - .__sri-preview {
112 - left: 0;
113 - }
114 -
115 - .__sri-url-box {
116 - margin-bottom: 4px;
117 - }
118 -
119 - .__sri-url {
120 - font-size: 0.75rem;
121 - }
122 -
123 - .__sri-time {
124 - background-color: transparent;
125 - color: #6C7086; /* Subtext0 */
126 - padding: 0;
127 - }
128 -
129 - .__sri-time::after {
130 - content: "—";
131 - display: inline-block;
132 - padding: 0 4px;
133 - }
134 -
135 - .__sri-time.--new {
136 - background: transparent;
137 - color: var(--color_link);
138 - }
139 -
140 - .__sri-desc {
141 - line-height: 1.57;
142 - }
143 -
144 - .newsResultItem .newsResultBody {
145 - margin-top: 0;
146 - }
147 -
148 - .top_podcasts_box:empty {
149 - display: none;
150 - }
151 -
152 - ._0_app_theme_switch_box button.checked .theme_name, ._0_app_theme_switch_box button > input:checked + .theme_name {
153 - background-color: var(--blue);
154 - }
155 -
156 - .freeScroller {
157 - overflow-x: auto !important;
158 - }
159 -
160 - /* domain info popover */
161 - #domainInfoModal .d-info-box-title-header {
162 - background: transparent;
163 - }
164 -
165 - #domainInfoModal .d-info-domain-title {
166 - text-shadow: none;
167 - color: var(--color-primary);
168 - }
169 -
170 - #domainInfoModal .rakned-box-close {
171 - color: var(--color-primary);
172 - }
173 -
174 - /* wolfram-alpha/"smart" things specific */
175 - .widget_holder .wasb, .wasb, .wasb-ans {
176 - font-family: var(--font-main);
177 - }
178 -
179 - .widget_holder .wasb {
180 - border: 1px solid var(--color-primary-dim_3);
181 - }
182 -
183 - .suggestions_area {
184 - border-bottom: 1px solid var(--color-primary-dim_3);
185 - }
186 28
187 - /* misc */
188 - .wikipediaResult .wiki-title a:hover {
189 - color: var(--color-primary_hover);
190 - border-bottom: 0;
191 - }
192 -
193 - .wiki-desc-box {
194 - font-size: 14px;
195 - }
196 -
197 - .k_ui_toggle_switch {
198 - --active-bg-color: var(--color_link);
199 - }
200 -
201 - .footer .footerInner ul li, footer .footerInner ul li {
202 - color: inherit;
203 - }
204 -
205 - .search-form .search-input-container {
206 - border: 1px solid var(--blue);
207 - }
208 -
209 - .land_adv_search_btn {
210 - color: var(--peach);
211 - }
212 -
213 - /* mobile specific */
214 - @media screen and (max-width: 767px) {
215 - /* header */
216 - .m-h {
217 - padding: 0;
218 - }
219 -
220 - .m-h .m-h-i {
221 - height: auto;
222 - }
223 -
224 - .m-h .control-center-btn {
225 - top: 32px;
226 - z-index: 51;
227 - }
228 -
229 - .m-h .m-app-logo {
230 - display: none;
231 - }
232 -
233 - /* search box */
234 - .search-form {
235 - height: auto;
236 - }
237 -
238 - .search_form_box {
239 - width: 100%;
240 - }
241 -
242 - .search-form .search-input-container {
243 - padding-inline: 0;
244 - border: 0;
245 - border: 1px solid var(--blue);
246 - border-radius: 56px;
247 - }
248 -
249 - .search-form .search_area {
250 - min-height: auto;
251 - }
252 -
253 - .search-form .search-input-box {
254 - border-radius: 24px;
255 - padding: 0 14px;
256 - }
257 -
258 - .s-f-w .search-form-container {
259 - padding: 10px 46px 5px 10px;
260 - }
261 -
262 - .s-f-w.--active {
263 - margin: 0;
264 - }
265 -
266 - .s-f-w.--active .search-input-container {
267 - border: 0;
268 - min-height: 64px;
269 - }
270 -
271 - .s-f-w.--active .search-form-container {
272 - margin: 0;
273 - padding: 0 10px;
274 - height: 64px;
275 - }
276 -
277 - .s-f-w.--active .search-form {
278 - padding-top: 0;
279 - }
280 -
281 - .s-f-w.--active .search-input-box {
282 - margin-left: 4px;
283 - padding-right: 0;
284 - max-width: 100%;
285 - }
286 -
287 - .s-f-w.--active .search-form-icons {
288 - margin-right: 0;
289 - }
290 -
291 - .s-f-w.--active .auto_suggestions {
292 - top: 64px;
293 - }
294 -
295 - .s-f-w.--active .m-b-arrow {
296 - position: relative;
297 - width: auto;
298 - height: auto;
299 - left: 0;
300 - }
301 -
302 - #searchFormSubmit {
303 - display: none;
304 - }
305 -
306 - .m-h .search-form-icons .clear-search {
307 - margin-right: 4px;
308 - }
309 -
310 - .m-b-arrow {
311 - width: 35px;
312 - top: 0;
313 - }
314 -
315 - .search-form .auto_suggestions {
316 - margin: 0;
317 - border: 0;
318 - }
319 -
320 - .widgetContent {
321 - margin-bottom: 0;
322 - }
323 -
324 - .landing-category-select .landing_cat_buttons > button.--active {
325 - background-color: var(--green);
326 - border: 1px solid var(--green);
327 - color: var(--crust);
328 - }
329 -
330 - /* remove top/bottom border between results */
331 - .search-result, .sri-group, .inline-content+.search-result, .inline-content+.sri-group {
332 - border-top: 0;
333 - border-bottom: 0;
334 - }
335 -
336 - /* tighten line-height */
337 - .__sri-title .__sri_title_link {
338 - line-height: 1.65rem;
339 - }
340 -
341 - /* hide inline image preview */
342 - .__sri-body.--img .__sri-preview {
343 - display: none;
344 - }
345 -
346 - .__sri-body.--img .__sri-desc:before {
347 - display: none;
348 - }
349 -
350 - /* tighten up secondary results to match rhythm */
351 - .sri-group .sr-group {
352 - margin-top: 15px;
353 - }
354 -
355 - /* disable bottom-right distracting button on scroll up */
356 - .quick-search-btn {
357 - display: none;
358 - }
359 -
360 - /* fix video results spacing */
361 - #newsHeader, .headerVideos {
362 - margin-right: 0;
363 - }
364 -
365 - /* clean up page 2 results spacing */
366 - ._0_page-separator {
367 - margin-bottom: 15px;
368 - }
369 -
370 - /* give the page 2 button more bottom room */
371 - .main-footer {
372 - padding-bottom: 40px;
373 - }
374 -
375 - /* light-specific */
376 - .theme_light .search-form .search-form-icons {
377 - /* background: linear-gradient(90deg, transparent 0%, rgb(255, 255, 255) 50%); */
378 - }
379 - }
29 + --graphite: var(--base);
30 + --graphite-25: var(--overlay2); /* Changed from --rosewater to --overlay2 */
31 + --graphite-50: var(--flamingo);
32 + --graphite-70: var(--pink);
33 + --graphite-100: var(--mauve);
34 + --graphite-200: var(--red);
35 + --graphite-300: var(--maroon);
36 + --graphite-400: var(--peach);
37 + --graphite-500: var(--yellow);
38 + --graphite-600: var(--green);
39 + --graphite-700: var(--teal);
40 + --graphite-800: var(--sky);
41 + --graphite-850: var(--sapphire);
42 + --graphite-900: var(--blue);
43 + --graphite-950: var(--lavender);
44 + --graphite-1000: var(--text);
45 + --chrome-25: var(--rosewater);
46 + --chrome-50: var(--flamingo);
47 + --chrome-70: var(--pink);
48 + --chrome-100: var(--mauve);
49 + --chrome-200: var(--red);
50 + --chrome-300: var(--maroon);
51 + --chrome-400: var(--peach);
52 + --chrome-500: var(--yellow);
53 + --chrome-600: var(--green);
54 + --chrome-700: var(--teal);
55 + --chrome-800: var(--sky);
56 + --chrome-850: var(--sapphire);
57 + --chrome-900: var(--blue);
58 + --chrome-950: var(--lavender);
59 + --chrome-1000: var(--text);
60 + --purple-300: var(--lavender);
61 + --purple-400: var(--blue);
62 + --purple-500: var(--sapphire);
63 + --purple-600: var(--sky);
64 + --purple-800: var(--teal);
65 + --purple-900: var(--green);
66 + --yellow: var(--yellow);
67 + --warning: var(--peach);
68 + --info: var(--sky);
69 + --danger: var(--red);
70 + --success: var(--green);
71 + --calm: var(--surface0);
72 + --blue: var(--blue);
73 + --color-scheme: dark;
74 + --app-bg: var(--base);
75 + --link: var(--purple-600);
76 + --app-frame-bg: var(--app-bg);
77 + --landing-bg: var(--app-bg);
78 + --app-bg-opac: rgba(30, 30, 46, 0);
79 + --bottom-bar-bg: var(--yellow);
80 + --white: var(--text);
81 + --app-text: var(--text);
82 + --kagi-highlight: var(--yellow);
83 + --beta-tag-bg: var(--yellow);
84 + --beta-tag-text: var(--base);
85 + --beta-tag-inside-corners: var(--maroon);
86 + --kagi-light-cream: var(--rosewater);
87 + --kagi-accent: var(--surface1);
88 + --kagi-sky: var(--sky);
89 + --kagi-sky-b: var(--sapphire);
90 + --kagi-sky-i: var(--sky);
91 + --kagi-orange: var(--maroon);
92 + --resultsummary-highlight: var(--surface2);
93 + --resultsummary-highlight_text: var(--text);
94 + --kagi-graphite: var(--text);
95 + --kagi-graphite-s: var(--overlay2);
96 + --kagi-graphite-text: var(--base);
97 + --kagi-graphite-ia: var(--text);
98 + --kagi-graphite-ia-color: var(--base);
99 + --inner-shadow: rgba(0, 0, 0, .05);
100 + --settings-app-inner-bg: var(--app-bg);
101 + --box-shadow: rgba(0, 0, 0, .09);
102 + --box-shadow-15: rgba(0, 0, 0, .15);
103 + --primary: var(--text);
104 + --primary-25: var(--overlay2); /* Changed from --rosewater to --overlay2 */
105 + --primary-50: var(--flamingo);
106 + --primary-70: var(--pink);
107 + --primary-100: var(--mauve);
108 + --primary-200: var(--red);
109 + --primary-300: var(--maroon);
110 + --primary-400: var(--peach);
111 + --primary-500: var(--yellow);
112 + --primary-600: var(--green);
113 + --primary-700: var(--teal);
114 + --primary-800: var(--sky);
115 + --primary-850: var(--sapphire);
116 + --primary-900: var(--blue);
117 + --primary-950: var(--lavender);
118 + --primary-1000: var(--text);
119 + --primary-g: var(--text);
120 + --primary-g-2: var(--red);
121 + --primary-g-6: var(--green);
122 + --primary-g-8: var(--sky);
123 + --primary-300-solid: var(--maroon);
124 + --secondary: var(--base);
125 + --color-search-input-border: var(--mauve);
126 + --color-search-input: var(--base);
127 + --header-bg: var(--app-bg);
128 + --header-bg-opac: var(--app-bg-opac);
129 + --color-search-input-opac: var(--app-bg-opac);
130 + --color-danger: var(--red);
131 + --primary-hover: var(--purple-600);
132 + --primary-hover-hover: var(--purple-500);
133 + --primary-visited: var(--teal);
134 + --input-bg: var(--app-bg);
135 + --doggo-color-1: var(--text);
136 + --doggo-bg-color: var(--app-bg);
137 + --doggo-stroke-color: var(--maroon);
138 + --landing-page-clouds-opacity: 1;
139 + --quick-search-bg: var(--text);
140 + --quick-search-icon: var(--base);
141 + --app-logo: var(--text);
142 + --app-logo-bg: var(--yellow);
143 + --filters-clear-btn-icon: var(--maroon);
144 + --filter-dd-bg: var(--surface2);
145 + --k-tooltip-bg: rgba(30, 30, 46, .9);
146 + --k-tooltip-text: var(--text);
147 + --dd-hover-bg: var(--mauve);
148 + --dd-hover-color: var(--text);
149 + --dd-list-input-bg: var(--input-bg);
150 + --not-found-bubble-bg: var(--surface1);
151 + --app-sidebar-item-border: rgba(255, 255, 255, .2);
152 + --app-sidebar-link: rgba(255, 255, 255, .6);
153 + --app-sidebar-nav-item-bg_hover: var(--yellow);
154 + --app-sidebar-nav-item-icon_hover: var(--base);
155 + --ranked-box-shadow: rgba(0, 0, 0, .25);
156 + --ranked-box-connection-secure: var(--green);
157 + --ranked-box-connection-insecure: var(--red);
158 + --ranked-box-tracker-desc-danger: var(--red);
159 + --ranked-box-tracker-desc-clear: var(--green);
160 + --site_info_bg: var(--app-bg);
161 + --site_info_bottom_bg: var(--kagi-accent);
162 + --result-item-title-border: var(--peach);
163 + --result-item-title-border_hover: var(--primary-hover);
164 + --result-item-title-visited-border: var(--pink);
165 + --result-rank-icon-stroke_promoted: var(--text);
166 + --result-item-highlight: var(--sky);
167 + --search-result-content-text: var(--text); /* Changed from --teal */
168 + --search-result-url-link: var(--green);
169 + --search-result-title: var(--text);
170 + --search-result-title-hover: var(--primary-hover);
171 + --search-result-date-bg: var(--surface0);
172 + --search-result-date-new-bg: var(--base);
173 + --search-result-date-new: var(--sky);
174 + --domain-rank-icon-color-ban: var(--red);
175 + --domain-rank-icon-color-lower: var(--red);
176 + --domain-rank-icon-color-normal: var(--red);
177 + --domain-rank-icon-color-higher: var(--red);
178 + --domain-rank-icon-color-boosted: var(--red);
179 + --domain-rank-icon-color-trackers: var(--peach);
180 + --domain-rank-icon-color-trackers-hover: var(--maroon);
181 + --domain-rank-icon-color-scam: var(--peach);
182 + --domain-rank-icon-color-scam-hover: var(--maroon);
183 + --inline-header-title: var(--text); /* Changed from --teal */
184 + --inline-widget-bg: var(--surface0);
185 + --inline-widget-hover-bg: var(--surface1);
186 + --inline-header-border: var(--red);
187 + --inline-domain-tag-bg: var(--pink);
188 + --related-item-bg: var(--surface0);
189 + --related-item-hover-bg: var(--surface1);
190 + --video-item-bg: var(--surface0);
191 + --auto-sugg-bg_hover: var(--surface0);
192 + --provider-breakdown_server: var(--sky);
193 + --provider-breakdown_client: var(--peach);
194 + --provider-breakdown_speed1: var(--yellow);
195 + --provider-breakdown_speed2: var(--red);
196 + --provider-breakdown_speed3: var(--red);
197 + --widget-progress_bar: var(--text);
198 + --translate-fc_icon: var(--text);
199 + --rating-star_background: var(--surface1);
200 + --wiki-content-links: var(--text);
201 + --m_sri_gap_color: var(--surface1);
202 + --btn-primary-bg: var(--text);
203 + --btn-primary-text: var(--base);
204 + --btn-primary-color: var(--base);
205 + --btn-group-bg: var(--base);
206 + --image_brightness: 100%;
207 + --nav_n_se_line: var(--yellow);
208 + --nav_n_im_line: var(--blue);
209 + --nav_n_vi_line: var(--red);
210 + --nav_n_ne_line: var(--mauve);
211 + --nav_n_ma_line: var(--green);
212 + --onboarding_theme_options_dark_visibility: flex;
213 + --onboarding_theme_options_light_visibility: none;
214 + --onb_theme_light_preview_box: none;
215 + --onb_theme_calm_blue_preview_box: none;
216 + --onb_theme_royal_blue_preview_box: none;
217 + --onb_theme_moon_dark_preview_box: flex;
218 + --code-bg: var(--base);
219 + --code-border: var(--overlay0);
220 + --code-k: var(--mauve);
221 + --code-s: var(--green);
222 + --code-cm-c1: var(--maroon);
223 + --code-n: var(--mauve);
224 + --code-p: var(--text);
225 + --background-color-sky: var(--sky);
226 + --ai_chat_buble_a_bg: var(--kagi-accent);
227 + --ai_chat_buble_q_bg: var(--app-bg);
228 + --ai_chat_buble_dd_q_bg: var(--kagi-accent);
229 + --ai_chat_buble_dd_a_bg: var(--surface1);
230 + --ai_chat_buble_a_text: var(--app-text);
231 + --ai_chat_buble_q_text: var(--app-text);
232 + --ai_chat_input_text: var(--app-text);
233 + --ai_chat_input_button: var(--teal);
234 + --checkbox-bg: var(--yellow);
235 + --checkbox-check: var(--base);
236 + --as-dd-border: var(--app-bg);
237 + --dd-list-input-bg: var(--base);
238 + --icon-purple: var(--sky);
239 + }
240 +
241 + .k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover {
242 + background-color: var(--surface2) !important; /* Darker background */
243 + /* Optionally, keep the original text color or slightly lighten it if needed */
244 + /* color: var(--text); */
245 + }
246 +
247 + div.sidebar-box {
248 + background-color: var(--mantle) !important; /* Darker background for sidebar-box */
249 + }
250 +
251 + .thread-list > li:is(.active, :hover, :focus-within) {
252 + background-color: var(--surface1) !important; /* Darker background for active, hover, and focus-within states */
253 + }
254 +
255 + .bg-p-50 {
256 + background-color: var(--primary-50); /* Or whichever color you currently have set */
257 + }
258 +
259 + /* Media query for mobile devices */
260 + @media (max-width: 767px) { /* Adjust the breakpoint (767px) as needed for your design */
261 + .bg-p-50 {
262 + background-color: var(--surface0); /* Use a darker color on mobile */
263 + }
264 + }
265 +
266 + .dropdown .dd-list ._0_list_items li:hover {
267 + color: var(--overlay0) !important; /* Darker font color on hover */
268 + }
269 +
270 + .sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover {
271 + color: var(--overlay0) !important; /* Darker text color on hover */
272 + }
273 +
274 + span.domain {
275 + background-color: var(--surface0) !important; /* Use a darker background color */
276 + color: var(--text) !important; /* Ensure text color is readable against the background */
277 + padding: 2px 4px !important; /* Optional: Add some padding for visual comfort */
278 + border-radius: 3px !important; /* Optional: Add a slight border radius */
279 + }
280 +
281 + span.__domain-name {
282 + background-color: var(--surface0) !important;
283 + }

jcrabapple's Avatar jcrabapple revised this gist 1734969395. Go to revision

1 file changed, 12 insertions, 55 deletions

kagi-catppuccin-mocha.css

@@ -4,60 +4,16 @@
4 4 }
5 5
6 6 .theme_dark, .theme_moon_dark, .theme_moon_dark_conditional {
7 - --app-bg: #1E1E2E; /* Base */
8 - --page-text: #CDD6F4; /* Text */
9 - --app-text: #CDD6F4; /* Text */
10 - --primary: #CDD6F4; /* Text */
11 - --primary-hover: #1E1E2E; /* Base */
12 - --blue: #89b4fa; /* Blue */
13 - --peach: #fab387; /* Peach */
14 - --green: #a6e3a1; /* Green */
15 - --crust: #11111b; /* Crust */
16 - --header-bg: #1E1E2E; /* Base */
17 - --header-border: #313244; /* Surface1 */
18 -
19 - --app-sidebar-bg: #1E1E2E; /* Base */
20 -
21 - --input-bg: #313244; /* Surface1 */
22 - --color-search-input: #1E1E2E; /* Base */
23 -
24 - --search-result-title: #CDD6F4; /* Text */
25 - --search-result-title-hover: #BAC2DE; /* Subtext1 */
26 - --search-result-content-text: #BAC2DE; /* Subtext1 */
27 - --search-result-url-link: #BAC2DE; /* Subtext1 */
28 - --search-result-date-bg: #313244; /* Surface1 */
29 - --search-result-date-new-bg: #F38BA8; /* Red */
30 -
31 - --domain-rank-icon-color-trackers: #F9E2AF; /* Yellow */
32 -
33 - --color_link: #F9E2AF; /* Yellow */
34 - --primary-hover: #BAC2DE; /* Subtext1 */
35 - --primary-visited: #6C7086; /* Subtext0 */
36 - --related-item-bg: #313244; /* Surface1 */
37 - --inline-domain-tag-bg: #313244; /* Surface1 */
38 - --inline-header-border: #313244; /* Surface1 */
39 - --inline-header-title: #CDD6F4; /* Text */
40 - --inline-widget-bg: #313244; /* Surface1 */
41 -
42 - --primary-700: #6C7086; /* Subtext0 */
43 - --primary-800: #BAC2DE; /* Subtext1 */
44 -
45 - --resultsummary-highlight: #F9E2AF; /* Yellow */
46 - --resultsummary-highlight_text: #313244; /* Surface1 */
47 -
48 - --wiki-title: #CDD6F4; /* Text */
49 - --wiki-content-links: #F9E2AF; /* Yellow */
50 - --wiki-nw-links: #F9E2AF; /* Yellow */
51 - --result-item-title-border: transparent;
52 -
53 - --site_info_bg: #313244; /* Surface1 */
54 - --site_info_bottom_bg: #313244; /* Surface1 */
55 - --btn-group-bg: #fab387; /* Surface1 */
56 -
57 - --dd-hover-bg: #313244; /* Surface1 */
58 - --dd-list-input-bg: #313244; /* Surface1 */
59 - --kagi-accent: #313244; /* Surface1 */
60 - --filter-dd-bg: #313244; /* Surface1 */
7 + --app-bg: #1E1E2E;
8 + --page-text: #CDD6F4;
9 + --app-text: #CDD6F4;
10 + --primary: #CDD6F4;
11 + --blue: #89b4fa;
12 + --peach: #fab387;
13 + --green: #a6e3a1;
14 + --crust: #11111b;
15 + --color_link: #F9E2AF;
16 + --primary-hover: #BAC2DE;
61 17
62 18 /* mobile */
63 19 --m_sri_gap_color: #313244; /* Surface1 */
@@ -286,6 +242,8 @@ background-color: var(--blue);
286 242 .search-form .search-input-container {
287 243 padding-inline: 0;
288 244 border: 0;
245 + border: 1px solid var(--blue);
246 + border-radius: 56px;
289 247 }
290 248
291 249 .search-form .search_area {
@@ -293,7 +251,6 @@ background-color: var(--blue);
293 251 }
294 252
295 253 .search-form .search-input-box {
296 - border: 1px solid var(--blue);
297 254 border-radius: 24px;
298 255 padding: 0 14px;
299 256 }

jcrabapple's Avatar jcrabapple revised this gist 1734901730. Go to revision

1 file changed, 419 insertions, 814 deletions

kagi-catppuccin-mocha.css

@@ -1,817 +1,422 @@
1 1 :root {
2 - --button-color: #89b4fa;
3 - /* Primary color for the buttons */
4 - --button-hover-color: #74c7ec;
5 - /* Secondary color for the buttons - when hovering */
6 - --source-highlight-color: #89dceb;
7 - /* Color of the sources and small annotations */
8 - --sri-hover-color: #89b4fa;
9 - /* Color for hovering over search results */
10 - --color-search-input: #1e1e2e;
11 - /* Color for Search Box */
12 - --color-search-input-border: #313244;
13 - --time-stamp: rgba(166, 173, 200, 0.8);
14 - /* Color for timestamp with alpha value */
15 - --m_sri_gap_color: #181825 !important;
16 - --app-text: #cdd6f4 !important;
17 - --app-bg: #1e1e2e;
18 - --inline-widget-bg: #181825;
19 - --primary-25: #181825;
20 - /* Adjustment for The Assistant */
21 - --primary-50: #1e1e2e;
22 - /* Adjustment for The Assistant */
23 - --primary-70: #11111b
24 - /* Adjustment for The Assistant */
25 - }
26 - :focus-visible{
27 - outline:1px solid #ffb319
28 - }
29 - .my-7{
30 - margin-bottom:5px;
31 - margin-top:5px;
32 - }
33 - #uploadedItems .item,[data-files] .item {
34 - background-color:var(--primary-50);
35 - outline:0.5px solid var(--primary-100);
36 - }
37 - #uploadedItems .item:focus-visible,#uploadedItems .item:hover:not(:has([data-selector=close]:hover)),[data-files] .item:focus-visible,[data-files] .item:hover:not(:has([data-selector=close]:hover)) {
38 - outline:.5px solid var(--kagi-highlight)
39 - }
40 - .chat_bubble {
41 - background-color: #1e2028;
42 - border-radius: 5px;
43 - padding: 1rem;
44 - margin-bottom: 1.3rem;
45 - box-shadow:0 8px 15px rgba(0,0,0,0.2);
46 - }
47 - #chat_box .chat_bubble .model{
48 - color:var(--secondary);
49 - background-color: var(--primary);
50 - max-width: fit-content;
51 - height: 24px;
52 - border-radius: 5px;
53 - padding: 0 8px;
54 - user-select: none;
55 - box-shadow: 0 8px 15px rgba(0,0,0,0.2);
56 - }
57 - .widget#translate {
58 - background-color: var(--primary-50);
59 - padding: 15px;
60 - border-radius: 5px;
61 - }
62 - .widget#translate .tbox .icons .fc {
63 - color:var(--primary);
64 - background-color: var(--primary-70);
65 - padding: 5px;
66 - border-radius: 100%;
67 - transition: all 0.5s ease;
68 - }
69 - .widget#translate .tbox .icons .fc:hover {
70 - background-color: var(--button-hover-color);
71 - color: var(--secondary);
72 - }
73 - .dropdown .dd-list li {
74 - border-radius: 9px;
75 - }
76 - .dropdown .dd-list li.--hover,.dropdown .dd-list li:hover {
77 - background-color:var(--primary);
78 - color:var(--secondary);
79 - }
80 - .dropdown .dd-list input[type=search] {
81 - background-color:var(--primary-50);
82 - border:1px solid var(--secondary);
83 - }
84 - .scene .cardHistory ._0_cardHistoryBack svg {
85 - margin-bottom: 25px;
86 - background: var(--button-color);
87 - border-radius: 100%;
88 - color: var(--primary-50);
89 - }
90 - .widget-simple .widgetItem {
91 - transition: all 0.5s ease;
92 - border-radius: 8px
93 - }
94 - .widget-simple .widgetItem:hover {
95 - background-color: var(--primary);
96 - padding: 5px
97 - }
98 - .widget-simple .widgetItemTitle .__title-text:hover {
99 - text-decoration:none
100 - }
101 - .widget-simple .widgetItemTitle .__title-text:hover {
102 - color:var(--secondary);
103 - text-decoration:none
104 - }
105 - .widget-simple .widgetItemTitle .__title-text {
106 - color:var(--primary);
107 - transition: all 0.5s ease;
108 - }
109 - .widgetContent .widgetItems .widgetItem:hover {
110 - background-color:#1c1e24
111 - }
112 - #quickPeekResults .inlineHeader,#quickPeekResults details {
113 - border-bottom:.5px dashed var(--inline-header-border);
114 - }
115 - .k_ui_dropdown_data_list{
116 - background-color:var(--primary-50);
117 - left:65px !important;
118 - top:0px !important;
119 - border: 1px solid var(--as-dd-border);
120 - border-radius: 12px;
121 - box-shadow: 1px 8px 30px 0 rgba(0,0,0,.09);
122 - gap: 6px;
123 - padding-block: 20px;
124 - padding-inline: 10px;
125 - }
126 - .k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li, .k_ui_dropdown_data_list .list_items>a, .k_ui_dropdown_data_list .list_items>div {
127 - align-items:center;
128 - background-color:transparent;
129 - border-radius:9px;
130 - transition:background-color .1s ease-in-out,color .1s ease-in-out
131 - }
132 - .k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li.__hover,.k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li:focus-visible, .k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li:hover,.k_ui_dropdown_data_list .list_items>a.__hover,.k_ui_dropdown_data_list .list_items>a:focus-visible,.k_ui_dropdown_data_list .list_items>a:hover,.k_ui_dropdown_data_list .list_items>div.__hover,.k_ui_dropdown_data_list .list_items>div:focus-visible,.k_ui_dropdown_data_list .list_items>div:hover {
133 - background-color:var(--primary);
134 - color:var(--secondary);
135 - }
136 - .d-info-box-title-header {
137 - background:#a5d46a;
138 - }
139 - .d-info-box-title-header.--trackers {
140 - background:#ffdf80
141 - }
142 - .d-info-box-title-header.--trackers-danger {
143 - background:#ffa080
144 - }
145 - .k_ui_btn_group{
146 - border:none;
147 - background-color:var(--app-bg);
148 - }
149 - .advanced-search-modal-backdrop::before{
150 - background-color:#121213
151 - }
152 - a.wiki-nw-link{
153 - background-color:var(--inline-domain-tag-bg);
154 - border-radius:8px;
155 - margin-top:10px;
156 - padding:5px;
157 - transition:all .5s ease;
158 - }
159 - a.wiki-nw-link:hover{
160 - background-color:var(--button-hover-color);
161 - color:#1b1b1b
162 - }
163 - .wiki-nw-link{
164 - color:var(--primary-700)!important;
165 - }
166 - .wiki-nw-link:hover{
167 - color:#1b1b1b
168 - }
169 - .dropdown.dd_clean .dd-toggle-label{
170 - transition:all .5s ease
171 - }
172 - .dropdown.dd_clean .dd-toggle-label:hover{
173 - background-color:#34373f;
174 - padding-left:5px
175 - }
176 - ._0_filters-panel{
177 - background-color:#1e2028;
178 - border-radius:12px;
179 - padding-left:15px;
180 - margin-right:10px;
181 - margin-bottom:5px;
182 - box-shadow:0 0 10px rgba(0,0,0,.25)
183 - }
184 - .d-info-section,.question_form_box .q_form_wrapper{
185 - background-color:#1e2028
186 - }
187 - .d-info-body{
188 - background-color:#17191e
189 - }
190 - .d-info-section-desc.col{
191 - background-color:transparent
192 - }
193 - ._0_result_page_summary{
194 - background-color:#17191e;
195 - padding:8px;
196 - border-radius:5px;
197 - border:.5px dashed var(--button-color);
198 - line-height:1.5rem
199 - }
200 - .quick-settings-footer{
201 - border-top:1px solid var(--button-color);
202 - border-radius:8px
203 - }
204 - .image-preview-wrapper #PreviewImageUrl{
205 - max-width:fit-content;
206 - background-color:#17191e;
207 - padding:5px;
208 - border-radius:8px;
209 - border:1px solid var(--primary-hover);
210 - margin-top:5px
211 - }
212 - .ranked-c-adjust-info-icon:not(.new-tooltip) .k-tooltip:after,.tooltip-trigger:not(.new-tooltip) .k-tooltip:after{
213 - border-top:8px solid var(--secondary)
214 - }
215 - .newsResultItem .newsResultHeader .sourceAndTime{
216 - background-color:#17191e;
217 - border-radius:5px;
218 - padding:8px
219 - }
220 - .instant-answer{
221 - padding-bottom:10px;
222 - padding-left:14px;
223 - background-color:#1e2028;
224 - border-radius:12px;
225 - margin-bottom:30px;
226 - box-shadow:rgba(244,182,68,0.4) 5px 5px,rgba(244,182,68,0.3) 10px 10px,rgba(244,182,68,0.2) 15px 15px,rgba(244,182,68,0.1) 20px 20px
227 - }
228 - .ext_icon{
229 - border:1px solid var(--button-color)
230 - }
231 - .result-comments .comment{
232 - background-color:var(--button-color);
233 - color:#1b1b1b;
234 - border-radius:10px;
235 - padding:5px;
236 - margin:0 auto
237 - }
238 - .result-comments .comment:hover{
239 - background-color:var(--button-hover-color)
240 - }
241 - .top_podcast_item{
242 - width:130px;
243 - background-color:#1e2028;
244 - padding:10px;
245 - border-radius:12px
246 - }
247 - .top_podcast_item:hover{
248 - text-decoration:none
249 - }
250 - .__sri-url-box{
251 - margin-bottom: 10px;
252 - background-color:#17191e;
253 - border-radius:5px;
254 - padding:8px
255 - }
256 - .videoResultItem{
257 - background-color:#1e2028
258 - }
259 - .auto_suggestions .auto_item{
260 - transition:all .5s ease
261 - }
262 - .auto_suggestions .auto_item.highlighted {
263 - background-color:var(--primary-70)
264 - }
265 - .videoResultItem .videoResultRight .videoResultInfo .videoPublished .videoPublishedDate{
266 - background-color:var(--time-stamp);
267 - color:var(--primary-700);
268 - border-radius:5px;
269 - padding:0 6px;
270 - transition:background-color .3s ease,color .3s ease;
271 - user-select:none
272 - }
273 - .videoResultItem .videoResultRight .videoResultInfo .videoPublished .videoPublishedDate:hover{
274 - background-color:rgba(150,190,250,0.8);
275 - color:#1b1b1b
276 - }
277 - .videoResultItem .videoResultRight .videoResultInfo .videoPublishedDate,.videoResultItem .videoResultRight .videoResultInfo .videoViewsCount{
278 - background-color:var(--time-stamp);
279 - color:var(--primary-700);
280 - border-radius:5px;
281 - padding:0 6px;
282 - transition:background-color .3s ease,color .3s ease;
283 - user-select:none
284 - }
285 - .videoResultItem .videoResultRight .videoResultInfo .videoPublishedDate:hover,.videoResultItem .videoResultRight .videoResultInfo .videoViewsCount:hover{
286 - background-color:rgba(150,190,250,0.8);
287 - color:#1b1b1b
288 - }
289 - .newsResultItem{
290 - background-color:#1e2028;
291 - border-radius:12px;
292 - padding:1.2rem 22px .7rem 18px;
293 - opacity:0;
294 - transform:translateY(20px);
295 - animation:fadeInUp .3s ease-out forwards
296 - }
297 - .newsResultItem:first-child{
298 - padding-top:1.2rem
299 - }
300 - .newsResultItem .newsResultTime{
301 - background-color:var(--time-stamp);
302 - color:var(--primary-700);
303 - border-radius:5px;
304 - padding:0 6px;
305 - user-select:none;
306 - transition:background-color .3s ease,color .3s ease
307 - }
308 - .newsResultItem .newsResultTime:hover{
309 - background-color:rgba(150,190,250,0.8);
310 - color:#1b1b1b
311 - }
312 - .podcast_result{
313 - background-color:#1e2028;
314 - border-radius:12px;
315 - padding:1.2rem 22px .7rem 18px;
316 - opacity:0;
317 - transform:translateY(20px);
318 - animation:fadeInUp .3s ease-out forwards
319 - }
320 - .podcast_result .body .thumbnail img{
321 - transition:box-shadow .5s ease
322 - }
323 - .podcast_result .body .thumbnail img:hover{
324 - box-shadow:0 8px 15px rgba(0,0,0,0.2)
325 - }
326 - .podcast_result .body{
327 - margin-top:0
328 - }
329 - .podcast_result .title a{
330 - transition:all .5s ease
331 - }
332 - .podcast_result .episode_meta>div+div,.podcast_result .body .content .podcast_publisher,.podcast_result .podcast_duration{
333 - background-color:var(--time-stamp);
334 - color:var(--primary-700);
335 - border-radius:5px;
336 - padding:0 6px;
337 - transition:background-color .3s ease,color .3s ease;
338 - user-select:none
339 - }
340 - .podcast_result .episode_meta>div+div:hover,.podcast_result .body .content .podcast_publisher:hover,.podcast_result .podcast_duration:hover{
341 - background-color:rgba(150,190,250,0.8);
342 - color:#1b1b1b
343 - }
344 - .podcast_result .body .content .podcast_publisher i{
345 - color:var(--primary-700);
346 - transition:color .3s ease
347 - }
348 - .podcast_result .body .content .podcast_publisher:hover i{
349 - color:#1b1b1b
350 - }
351 - .widget-time-ago{
352 - background-color:rgba(150,190,250,0.8);
353 - color:#1b1b1b;
354 - user-select:none;
355 - border-radius:5px;
356 - display:inline-block;
357 - padding:0 6px;
358 - margin-bottom:auto;
359 - margin-top:auto
360 - }
361 - .app-header.app-content-box{
362 - position:sticky;
363 - top:0;
364 - z-index:114;
365 - background:rgba(26,28,35,0.2);
366 - border-bottom-left-radius:16px;
367 - border-bottom-right-radius:16px;
368 - box-shadow:0 2px 15px rgba(0,0,0,.7);
369 - backdrop-filter:blur(5px);
370 - -webkit-backdrop-filter:blur(5px);
371 - border:1px solid rgba(35,35,37,0.3)
372 - }
373 - .quick-settings{
374 - background:rgba(32,33,36,0.6);
375 - border-bottom-left-radius:16px;
376 - border-top-left-radius:16px;
377 - box-shadow:0 7px 10px #1a1c23;
378 - backdrop-filter:blur(5px);
379 - -webkit-backdrop-filter:blur(5px);
380 - border:2px solid rgba(35,35,37,0.7)
381 - }
382 - .sri-group .sr-group {
383 - padding: 10px 10px 20px 30px!important;
384 - margin-top:0px
385 - }
386 - .correctedQuery{
387 - line-height:2
388 - }
389 - .wikipedia_results{
390 - background-color:#28282a
391 - }
392 - .wiki_desc_text{
393 - line-height:1.55
394 - }
395 - .app-box{
396 - background-color:#17191e
397 - }
398 - .app-box-center{
399 - margin-top:1rem
400 - }
401 - .read-more-inline{
402 - background-color:var(--button-color);
403 - color:#1b1b1b;
404 - border-radius:10px;
405 - padding:2px 8px
406 - }
407 - .read-more-inline:hover{
408 - background-color:var(--button-hover-color);
409 - color:#1b1b1b
410 - }
411 - .read-more-inline svg{
412 - color:#1b1b1b;
413 - transition:all .3s ease
414 - }
415 - .read-more-inline:hover svg{
416 - color:#1b1b1b;
417 - transform:translateX(5px)
418 - }
419 - ._0_results_summary_text{
420 - color:#b3b7bb
421 - }
422 - .__sri-time{
423 - background-color:var(--time-stamp);
424 - color:var(--primary-700);
425 - user-select:none
426 - }
427 - .__sri-time.--new{
428 - background-color:var(--time-stamp);
429 - color:var(--primary-700);
430 - user-select:none
431 - }
432 - .sri-group,.search-result,.scene{
433 - background-color:#1e2028;
434 - border-radius:5px;
435 - opacity:0;
436 - transform:translateY(20px);
437 - animation:fadeInUp .3s ease-out forwards
438 - }
439 - .__sri-title,.__sri_title_link{
440 - transition:all .5s ease
441 - }
442 - .scene{
443 - padding:1rem;
444 - opacity:0;
445 - transform:translateY(20px);
446 - animation:fadeInUp .3s ease-out forwards
447 - }
448 - body,html,.mob{
449 - background-color:#17191e;
450 - font-family:var(--font-lufga),system-ui
451 - }
452 - .search-result{
453 - padding:1.2rem .8rem .6rem .8rem;
454 - opacity:0;
455 - transform:translateY(20px);
456 - animation:fadeInUp .3s ease-out forwards
457 - }
458 - @keyframes fadeInUp{
459 - to{
460 - opacity:1;
461 - transform:translateY(0)
462 - }
463 - }
464 - .widgetContent{
465 - background-color:#1e2028;
466 - border-radius:5px;
467 - padding:1.2rem 22px .7rem 18px;
468 - opacity:0;
469 - transform:translateY(20px);
470 - animation:fadeInUp .3s ease-out forwards
471 - }
472 - .serp-nav .nav_item{
473 - position:relative
474 - }
475 - .serp-nav .nav_item:after{
476 - content:"";
477 - display:block;
478 - position:absolute;
479 - bottom:0;
480 - left:0;
481 - width:100%;
482 - height:3px;
483 - background-color:var(--nav_n_se_line);
484 - transform:scaleY(0);
485 - transform-origin:bottom;
486 - transition:transform .3s ease,box-shadow .3s ease;
487 - border-top-left-radius:5px;
488 - border-top-right-radius:5px
489 - }
490 - .serp-nav .nav_item:hover:after{
491 - transform:scaleY(1)
492 - }
493 - ._0_sri-w-highlight .serp-nav .nav_item.searchResultAnswer:after,.serp-nav ._0_sri-w-highlight .nav_item.searchResultAnswer:after,.serp-nav .nav_item.--active:after,.serp-nav .nav_item:hover:after{
494 - transform:scaleY(1)
495 - }
496 - ._0_more_search_box{
497 - text-align:center;
498 - width:80%
499 - }
500 - .__sri_title_link._0_sri_title_link._0_URL{
501 - border-bottom:none!important
502 - }
503 - .__srgi-title a{
504 - border-bottom:none!important
505 - }
506 - .newsResultItem .newsResultHeader .newsResultTitle a._0_TITLE{
507 - border-bottom:none!important
508 - }
509 - .wikipediaResult a{
510 - border-bottom:none!important;
511 - color:var(--button-color)
512 - }
513 - ._0_results_summary_box{
514 - border-bottom:none!important;
515 - margin-bottom:30px;
516 - background-color:#1e2028;
517 - border-radius:22px;
518 - padding:20px
519 - }
520 - .results_summary_text_box:has(#qa_show_more:not(:checked)) .smw::before{
521 - background:linear-gradient(transparent,#1e2028)
522 - }
523 - ._0_summarize_link{
524 - background-color:var(--button-color);
525 - max-width:max-content;
526 - margin-bottom:10px;
527 - margin-top:3px;
528 - border-radius:10px!important;
529 - padding:5px 10px
530 - }
531 - ._0_summarize_link:hover{
532 - background-color:var(--button-hover-color);
533 - box-shadow:0 8px 15px rgba(0,0,0,0.2);
534 - transition:all .5s ease
535 - }
536 - ._0_summarize_link svg{
537 - transition:all .3s ease!important
538 - }
539 - ._0_summarize_link:hover .ic svg{
540 - transform:translateX(5px)!important
541 - }
542 - ._0_summarize_link,._0_summarize_link a{
543 - color:#232325!important
544 - }
545 - .top-content .top-content ._0_provider-content{
546 - display:none!important
547 - }
548 - ._0_results_summary_link_to_IA{
549 - background-color:var(--inline-domain-tag-bg);
550 - max-width:max-content;
551 - padding:5px;
552 - border-radius:10px;
553 - margin-top:15px;
554 - transition:all .5s ease;
555 - user-select:none;
556 - }
557 - ._0_results_summary_link_to_IA:hover{
558 - background-color:var(--button-hover-color);
559 - box-shadow:0 8px 15px rgba(0,0,0,0.2)
560 - }
561 - .results_summary_text_box sup a{
562 - border-radius:50%;
563 - background-color:#2D2F2F;
564 - color:#8D9191;
565 - padding:1px 4px;
566 - transition:background-color .3s ease,color .3s ease
567 - }
568 - .results_summary_text_box sup a:hover{
569 - background-color:var(--source-highlight-color);
570 - color:#F2FCFC;
571 - transition:all .5s ease
572 - }
573 - ._0_results_summary_links{
574 - margin-bottom:30px
575 - }
576 - ._0_results_summary_links a{
577 - transition:color .3s ease-in-out,transform .3s ease-in-out;
578 - border-radius:3px;
579 - display:inline-block;
580 - text-decoration:none
581 - }
582 - ._0_results_summary_links a.__0_highlight,._0_results_summary_links a:hover{
583 - transform:translateX(3px);
584 - background-color:var(--source-highlight-color);
585 - color:var(--resultsummary-highlight_text)
586 - }
587 - ._0_results_summary_links .__domain-name{
588 - user-select:none
589 - }
590 - .widget .wasb{
591 - background-color:#1e2028
592 - }
593 - .wasb-title{
594 - text-decoration:none;
595 - font-size:1.25rem;
596 - font-weight:450
597 - }
598 - .wolfram-answer{
599 - background-color:#1e2028;
600 - margin-bottom:25px;
601 - border-radius:10px;
602 - padding-right:10px;
603 - padding-left:10px
604 - }
605 - ._0_discuss_document_btn{
606 - background-color:var(--button-color);
607 - color:#1b1b1b;
608 - border-radius:10px;
609 - padding:2px 8px;
610 - max-width:max-content;
611 - position:relative;
612 - margin-top:1rem
613 - }
614 - ._0_discuss_document_btn:hover{
615 - background-color:var(--button-hover-color);
616 - color:#1b1b1b
617 - }
618 - ._0_discuss_document_btn svg{
619 - transition:all .3s ease
620 - }
621 - ._0_discuss_document_btn:hover svg{
622 - transform:translateX(5px)
623 - }
624 - .smw{
625 - background-color:var(--button-color);
626 - color:#1b1b1b;
627 - border-radius:10px;
628 - padding:2px 8px;
629 - max-width:max-content;
630 - position:relative;
631 - margin:10px auto 0;
632 - user-select:none
633 - }
634 - .smw:hover{
635 - background-color:var(--button-hover-color);
636 - color:#1b1b1b
637 - }
638 - .smw svg{
639 - transition:all .3s ease
640 - }
641 - .smw:hover svg{
642 - transform:translateX(3px)
643 - }
644 - .results_summary_text_box:has(#qa_show_more:not(:checked)) .smw::before{
645 - background:linear-gradient(transparent,#1e2028)
646 - }
647 - .ks-tooltip-body{
648 - background-color:var(--k-tooltip-text);
649 - color:#FDFDFD
650 - }
651 - .ia-tooltip-body__desc,.ia-tooltip-body__desc__title{
652 - color:#fdfdfd
653 - }
654 - .tooltip_base{
655 - color:var(--k-tooltip-bg);
656 - background-color:var(--k-tooltip-text);
657 - box-shadow:0 8px 15px rgba(0,0,0,0.2);
658 - width:500px;
659 - z-index:115
660 - }
661 - [data-arrow]{
662 - background-color:var(--k-tooltip-text)
663 - }
664 - .related-items a{
665 - background-color:#1e2028;
666 - transition:all .5s ease
667 - }
668 - .footer-search-results #load_more_results,.btn.--primary{
669 - transition:all .5s ease
670 - }
671 - .ranked-c-adjust-info-icon:not(.new-tooltip) .k-tooltip,.tooltip-trigger:not(.new-tooltip) .k-tooltip{
672 - background-color:var(--k-tooltip-text);
673 - color:#FDFDFD
674 - }
675 - .widgetContent .widgetItems .widgetItem{
676 - background-color:#17191e;
677 - transition:all .5s ease
678 - }
679 - .widgetItem .videoResultThumbnail img{
680 - border-top-left-radius:5px;
681 - border-bottom-left-radius:5px
682 - }
683 - .search-form .search-input-container,.search-form .search-input-container-kids{
684 - box-shadow:1px 8px 30px 0 rgba(0,0,0,0.3)
685 - }
686 - .paywall-icon .paywall-tooltip{
687 - color:var(--k-tooltip-bg);
688 - background-color:var(--k-tooltip-text);
689 - box-shadow:0 8px 15px rgba(0,0,0,0.2)
690 - }
691 - .btn.--secondary-light-s:hover{
692 - border:1px solid var(--primary-hover);
693 - color:var(--primary-hover);
694 - transition:all .5s ease
695 - }
696 - .inlineHeader{
697 - transition:all .5s ease
698 - }
699 - .ranked-c-adjust-info-icon:not(.new-tooltip) .k-tooltip:after, .tooltip-trigger:not(.new-tooltip) .k-tooltip:after {
700 - border-top: 8px solid var(--secondary);
701 - }
702 - .auto_suggestions_lenses_edit_box:hover {
703 - background-color: var(--sri-hover-color);
704 - }
705 - .top_podcast_item {
706 - width: 130px;
707 - background-color: #1e2028;
708 - padding: 10px;
709 - border-radius: 12px;
710 - }
711 - .widget-time-ago {
712 - background-color: rgba(150, 190, 250, 0.8);
713 - color: #1b1b1b;
714 - user-select: none;
715 - border-radius: 5px;
716 - display: inline-block;
717 - padding: 0 6px;
718 - margin-bottom: auto;
719 - margin-top: auto;
720 - }
721 - .podcast_result {
722 - background-color: #1e2028;
723 - border-radius: 12px;
724 - padding-top: 1.2rem;
725 - padding-right: 22px;
726 - padding-bottom: 0.7rem;
727 - padding-left: 18px;
728 - opacity: 0;
729 - transform: translateY(20px);
730 - animation: fadeInUp 0.3s ease-out forwards;
731 - }
732 - .scene {
733 - padding: 1rem;
734 - opacity: 0;
735 - transform: translateY(20px);
736 - animation: fadeInUp 0.3s ease-out forwards;
737 - }
738 - @keyframes fadeInUp {
739 - to{
740 - opacity: 1;
741 - transform: translateY(0);
742 - }
743 - }
744 - ._0_queryInfo{
2 + --font-main: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
3 + --font-lufga: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
4 + }
5 +
6 + .theme_dark, .theme_moon_dark, .theme_moon_dark_conditional {
7 + --app-bg: #1E1E2E; /* Base */
8 + --page-text: #CDD6F4; /* Text */
9 + --app-text: #CDD6F4; /* Text */
10 + --primary: #CDD6F4; /* Text */
11 + --primary-hover: #1E1E2E; /* Base */
12 + --blue: #89b4fa; /* Blue */
13 + --peach: #fab387; /* Peach */
14 + --green: #a6e3a1; /* Green */
15 + --crust: #11111b; /* Crust */
16 + --header-bg: #1E1E2E; /* Base */
17 + --header-border: #313244; /* Surface1 */
18 +
19 + --app-sidebar-bg: #1E1E2E; /* Base */
20 +
21 + --input-bg: #313244; /* Surface1 */
22 + --color-search-input: #1E1E2E; /* Base */
23 +
24 + --search-result-title: #CDD6F4; /* Text */
25 + --search-result-title-hover: #BAC2DE; /* Subtext1 */
26 + --search-result-content-text: #BAC2DE; /* Subtext1 */
27 + --search-result-url-link: #BAC2DE; /* Subtext1 */
28 + --search-result-date-bg: #313244; /* Surface1 */
29 + --search-result-date-new-bg: #F38BA8; /* Red */
30 +
31 + --domain-rank-icon-color-trackers: #F9E2AF; /* Yellow */
32 +
33 + --color_link: #F9E2AF; /* Yellow */
34 + --primary-hover: #BAC2DE; /* Subtext1 */
35 + --primary-visited: #6C7086; /* Subtext0 */
36 + --related-item-bg: #313244; /* Surface1 */
37 + --inline-domain-tag-bg: #313244; /* Surface1 */
38 + --inline-header-border: #313244; /* Surface1 */
39 + --inline-header-title: #CDD6F4; /* Text */
40 + --inline-widget-bg: #313244; /* Surface1 */
41 +
42 + --primary-700: #6C7086; /* Subtext0 */
43 + --primary-800: #BAC2DE; /* Subtext1 */
44 +
45 + --resultsummary-highlight: #F9E2AF; /* Yellow */
46 + --resultsummary-highlight_text: #313244; /* Surface1 */
47 +
48 + --wiki-title: #CDD6F4; /* Text */
49 + --wiki-content-links: #F9E2AF; /* Yellow */
50 + --wiki-nw-links: #F9E2AF; /* Yellow */
51 + --result-item-title-border: transparent;
52 +
53 + --site_info_bg: #313244; /* Surface1 */
54 + --site_info_bottom_bg: #313244; /* Surface1 */
55 + --btn-group-bg: #fab387; /* Surface1 */
56 +
57 + --dd-hover-bg: #313244; /* Surface1 */
58 + --dd-list-input-bg: #313244; /* Surface1 */
59 + --kagi-accent: #313244; /* Surface1 */
60 + --filter-dd-bg: #313244; /* Surface1 */
61 +
62 + /* mobile */
63 + --m_sri_gap_color: #313244; /* Surface1 */
64 + }
65 +
66 + /* disable horizontal scrollbars */
67 + body {
68 + overflow-x: hidden;
69 + }
70 +
71 + ::selection {
72 + background-color: var(--color_link);
73 + color: #313244; /* Surface1 */
74 + }
75 +
76 + .logo svg, .app-logo.--kagi {
77 + stroke: var(--blue);
78 + stroke-width: 2px;
79 + }
80 +
81 + .h-w #accountContainer .header_links, .search-form .search-form-icons svg {
82 + color: var(--peach);
83 + }
84 +
85 + .mr-3 {
86 + color: var(--green);
87 + }
88 +
89 + /* container-level */
90 + .results-box {
91 + margin-top: 10px;
92 + }
93 +
94 + /* update color borders for serp tabs */
95 + .serp-nav .nav_item.--active:after, .serp-nav .nav_item:hover:after, ._0_lenses .k_ui_dropdown.--active .k_ui_dropdown_first_item span:after {
96 + border-color: var(--primary);
97 + }
98 +
99 + /* button background color */
100 + .btn.--lg, .btn.--primary, .search-form .searchFormSubmitBtn, .sfi_sep {
101 + background-color: var(--blue);
102 + }
103 +
104 + #searchFormSubmit, .dropdown.dd_clean .dd-toggle-label, .c-p, ._0_summarize_link a {
105 + color: var(--blue);
106 + }
107 +
108 + .footer .copyright, .serp_nav_start, .serp-nav .nav_item, .trigger svg {
109 + color: var(--peach);
110 + }
111 +
112 + .px-4, .more_search_dropdown_box .k_ui_dropdown, .more_search_dropdown_box .k_ui_dropdown_data_list {
113 + color: var(--peach);
114 + }
115 +
116 + .control-center-btn svg {
117 + color: var(--peach);
118 + }
119 +
120 + .user-auth-bar, #bell_notification, .footer .footerInner ul li a, footer .footerInner ul li a {
121 + color: var(--peach);
122 + }
123 +
124 + #bell_notification .notification_count {
125 + background-color: var(--green);
126 + }
127 +
128 + .control-center-btn, .control-center-btn:hover {
129 + color: var(--peach);
130 + }
131 +
132 + .quick-settings a, .app-content-box._0_content-bay a {
133 + color: var(--peach);
134 + }
135 +
136 + /* disable links borders */
137 + #layout-v2 a, .__sri-title .__sri_title_link, .__sri-title .__sri_title_link:hover, .wikipediaResult a:hover {
138 + border-bottom: 0;
139 + }
140 +
141 + /* general input focus */
142 + :focus-visible {
143 + outline-color: var(--color_link);
144 + }
145 +
146 + /* result tweaks */
147 + .__sri-title-box, .__sri-title, .__sri-url-box, .__sri-body {
148 + padding-left: 0;
149 + }
150 +
151 + .__sri-title .__domain-favicon {
152 + margin-left: -25px;
153 + }
154 +
155 + .__sri-preview {
156 + left: 0;
157 + }
158 +
159 + .__sri-url-box {
160 + margin-bottom: 4px;
161 + }
162 +
163 + .__sri-url {
164 + font-size: 0.75rem;
165 + }
166 +
167 + .__sri-time {
168 + background-color: transparent;
169 + color: #6C7086; /* Subtext0 */
170 + padding: 0;
171 + }
172 +
173 + .__sri-time::after {
174 + content: "—";
175 + display: inline-block;
176 + padding: 0 4px;
177 + }
178 +
179 + .__sri-time.--new {
180 + background: transparent;
181 + color: var(--color_link);
182 + }
183 +
184 + .__sri-desc {
185 + line-height: 1.57;
186 + }
187 +
188 + .newsResultItem .newsResultBody {
189 + margin-top: 0;
190 + }
191 +
192 + .top_podcasts_box:empty {
193 + display: none;
194 + }
195 +
196 + ._0_app_theme_switch_box button.checked .theme_name, ._0_app_theme_switch_box button > input:checked + .theme_name {
197 + background-color: var(--blue);
198 + }
199 +
200 + .freeScroller {
201 + overflow-x: auto !important;
202 + }
203 +
204 + /* domain info popover */
205 + #domainInfoModal .d-info-box-title-header {
206 + background: transparent;
207 + }
208 +
209 + #domainInfoModal .d-info-domain-title {
210 + text-shadow: none;
211 + color: var(--color-primary);
212 + }
213 +
214 + #domainInfoModal .rakned-box-close {
215 + color: var(--color-primary);
216 + }
217 +
218 + /* wolfram-alpha/"smart" things specific */
219 + .widget_holder .wasb, .wasb, .wasb-ans {
220 + font-family: var(--font-main);
221 + }
222 +
223 + .widget_holder .wasb {
224 + border: 1px solid var(--color-primary-dim_3);
225 + }
226 +
227 + .suggestions_area {
228 + border-bottom: 1px solid var(--color-primary-dim_3);
229 + }
230 +
231 + /* misc */
232 + .wikipediaResult .wiki-title a:hover {
233 + color: var(--color-primary_hover);
234 + border-bottom: 0;
235 + }
236 +
237 + .wiki-desc-box {
238 + font-size: 14px;
239 + }
240 +
241 + .k_ui_toggle_switch {
242 + --active-bg-color: var(--color_link);
243 + }
244 +
245 + .footer .footerInner ul li, footer .footerInner ul li {
246 + color: inherit;
247 + }
248 +
249 + .search-form .search-input-container {
250 + border: 1px solid var(--blue);
251 + }
252 +
253 + .land_adv_search_btn {
254 + color: var(--peach);
255 + }
256 +
257 + /* mobile specific */
258 + @media screen and (max-width: 767px) {
259 + /* header */
260 + .m-h {
261 + padding: 0;
262 + }
263 +
264 + .m-h .m-h-i {
265 + height: auto;
266 + }
267 +
268 + .m-h .control-center-btn {
269 + top: 32px;
270 + z-index: 51;
271 + }
272 +
273 + .m-h .m-app-logo {
745 274 display: none;
746 - }
747 - ._0_results_summary_link_to_IA a {
748 - color:var(--primary-700);
749 - }
750 - ._0_results_summary_link_to_IA a:hover {
751 - color:#1b1b1b;
752 - text-decoration:none!important;
753 - }
754 - .top_nav_links>a{
755 - background-color: var(--button-color);
756 - padding-left: 20px;
757 - border-radius: 20px;
758 - color: #232325 !important;
759 - box-shadow: 0 0 10px rgba(0,0,0,.5);
760 - transition: all 0.5s ease;
761 - padding-right: 20px;
762 - height: 40px;
763 - }
764 - .top_nav_links>a:hover{
765 - background-color:var(--button-hover-color);
766 - }
767 - #settings_showFiltersPanel:checked~.top-panel #top-parent {
768 - margin-left:3px;
769 - }
770 - .cheatsh .content{
771 - background-color: var(--primary-25);
772 - border-radius: 5px;
773 - }
774 - .cheatsh .cheatsh_content_wrpr::after {
775 - background-color: var(--primary-50);
776 - }
777 - .cheatsh .code {
778 - box-shadow: 0 0 10px rgba(0,0,0,.25)
779 - }
780 - .ranked-box-overlay.--open {
781 - left:656px !important;
782 - }
783 - #form .buttons button.submit {
784 - background-color: #89b4fa !important;
785 - }
786 - #form .buttons button.submit:hover {
787 - background-color: #b4befe !important;
788 - }
789 - .mb-10 a.btn {
790 - background-color: #89b4fa !important;
791 - }
792 - .mb-10 a.btn:hover {
793 - background-color: #b4befe !important;
794 - }
795 - .control-center-btn {
796 - background-color: #89b4fa !important;
797 - color: #313244 !important;
798 - }
799 - .control-center-btn:hover {
800 - background-color: #b4befe !important;
801 - }
802 - #form {
803 - background-color: #1e1e2e !important;
804 - border-color: #89b4fa !important;
805 - }
806 - .search-form .search-input-container {
807 - border: 1px solid #89b4fa !important;
808 - }
809 - button.searchFormSubmitBtn {
810 - background-color: #89b4fa !important;
811 - }
812 - button.searchFormSubmitBtn:hover {
813 - background-color: #b4befe !important;
814 - }
815 - #form #promptBoxButtonsGroup {
816 - border-color: #89b4fa !important;
275 + }
276 +
277 + /* search box */
278 + .search-form {
279 + height: auto;
280 + }
281 +
282 + .search_form_box {
283 + width: 100%;
284 + }
285 +
286 + .search-form .search-input-container {
287 + padding-inline: 0;
288 + border: 0;
289 + }
290 +
291 + .search-form .search_area {
292 + min-height: auto;
293 + }
294 +
295 + .search-form .search-input-box {
296 + border: 1px solid var(--blue);
297 + border-radius: 24px;
298 + padding: 0 14px;
299 + }
300 +
301 + .s-f-w .search-form-container {
302 + padding: 10px 46px 5px 10px;
303 + }
304 +
305 + .s-f-w.--active {
306 + margin: 0;
307 + }
308 +
309 + .s-f-w.--active .search-input-container {
310 + border: 0;
311 + min-height: 64px;
312 + }
313 +
314 + .s-f-w.--active .search-form-container {
315 + margin: 0;
316 + padding: 0 10px;
317 + height: 64px;
318 + }
319 +
320 + .s-f-w.--active .search-form {
321 + padding-top: 0;
322 + }
323 +
324 + .s-f-w.--active .search-input-box {
325 + margin-left: 4px;
326 + padding-right: 0;
327 + max-width: 100%;
328 + }
329 +
330 + .s-f-w.--active .search-form-icons {
331 + margin-right: 0;
332 + }
333 +
334 + .s-f-w.--active .auto_suggestions {
335 + top: 64px;
336 + }
337 +
338 + .s-f-w.--active .m-b-arrow {
339 + position: relative;
340 + width: auto;
341 + height: auto;
342 + left: 0;
343 + }
344 +
345 + #searchFormSubmit {
346 + display: none;
347 + }
348 +
349 + .m-h .search-form-icons .clear-search {
350 + margin-right: 4px;
351 + }
352 +
353 + .m-b-arrow {
354 + width: 35px;
355 + top: 0;
356 + }
357 +
358 + .search-form .auto_suggestions {
359 + margin: 0;
360 + border: 0;
361 + }
362 +
363 + .widgetContent {
364 + margin-bottom: 0;
365 + }
366 +
367 + .landing-category-select .landing_cat_buttons > button.--active {
368 + background-color: var(--green);
369 + border: 1px solid var(--green);
370 + color: var(--crust);
371 + }
372 +
373 + /* remove top/bottom border between results */
374 + .search-result, .sri-group, .inline-content+.search-result, .inline-content+.sri-group {
375 + border-top: 0;
376 + border-bottom: 0;
377 + }
378 +
379 + /* tighten line-height */
380 + .__sri-title .__sri_title_link {
381 + line-height: 1.65rem;
382 + }
383 +
384 + /* hide inline image preview */
385 + .__sri-body.--img .__sri-preview {
386 + display: none;
387 + }
388 +
389 + .__sri-body.--img .__sri-desc:before {
390 + display: none;
391 + }
392 +
393 + /* tighten up secondary results to match rhythm */
394 + .sri-group .sr-group {
395 + margin-top: 15px;
396 + }
397 +
398 + /* disable bottom-right distracting button on scroll up */
399 + .quick-search-btn {
400 + display: none;
401 + }
402 +
403 + /* fix video results spacing */
404 + #newsHeader, .headerVideos {
405 + margin-right: 0;
406 + }
407 +
408 + /* clean up page 2 results spacing */
409 + ._0_page-separator {
410 + margin-bottom: 15px;
411 + }
412 +
413 + /* give the page 2 button more bottom room */
414 + .main-footer {
415 + padding-bottom: 40px;
416 + }
417 +
418 + /* light-specific */
419 + .theme_light .search-form .search-form-icons {
420 + /* background: linear-gradient(90deg, transparent 0%, rgb(255, 255, 255) 50%); */
421 + }
817 422 }

jcrabapple's Avatar jcrabapple revised this gist 1734734348. Go to revision

1 file changed, 814 insertions, 357 deletions

kagi-catppuccin-mocha.css

@@ -1,360 +1,817 @@
1 1 :root {
2 - --font-main: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
3 - --font-lufga: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
4 - }
5 -
6 - .theme_dark, .theme_moon_dark, .theme_moon_dark_conditional {
7 - --app-bg: #1E1E2E; /* Base */
8 - --page-text: #CDD6F4; /* Text */
9 - --app-text: #CDD6F4; /* Text */
10 - --primary: #CDD6F4; /* Text */
11 - --primary-hover: #1E1E2E; /* Base */
12 -
13 - --header-bg: #1E1E2E; /* Base */
14 - --header-border: #313244; /* Surface1 */
15 -
16 - --app-sidebar-bg: #1E1E2E; /* Base */
17 -
18 - --input-bg: #313244; /* Surface1 */
19 - --color-search-input: #1E1E2E; /* Base */
20 -
21 - --search-result-title: #CDD6F4; /* Text */
22 - --search-result-title-hover: #BAC2DE; /* Subtext1 */
23 - --search-result-content-text: #BAC2DE; /* Subtext1 */
24 - --search-result-url-link: #BAC2DE; /* Subtext1 */
25 - --search-result-date-bg: #313244; /* Surface1 */
26 - --search-result-date-new-bg: #F38BA8; /* Red */
27 -
28 - --domain-rank-icon-color-trackers: #F9E2AF; /* Yellow */
29 -
30 - --color_link: #A6E3A1; /* Yellow */
31 - --primary-hover: #BAC2DE; /* Subtext1 */
32 - --primary-visited: #6C7086; /* Subtext0 */
33 - --related-item-bg: #313244; /* Surface1 */
34 - --inline-domain-tag-bg: #313244; /* Surface1 */
35 - --inline-header-border: #313244; /* Surface1 */
36 - --inline-header-title: #CDD6F4; /* Text */
37 - --inline-widget-bg: #313244; /* Surface1 */
38 -
39 - --primary-700: #6C7086; /* Subtext0 */
40 - --primary-800: #BAC2DE; /* Subtext1 */
41 -
42 - --resultsummary-highlight: #F9E2AF; /* Yellow */
43 - --resultsummary-highlight_text: #313244; /* Surface1 */
44 -
45 - --wiki-title: #CDD6F4; /* Text */
46 - --wiki-content-links: #F9E2AF; /* Yellow */
47 - --wiki-nw-links: #F9E2AF; /* Yellow */
48 - --result-item-title-border: transparent;
49 -
50 - --site_info_bg: #313244; /* Surface1 */
51 - --site_info_bottom_bg: #313244; /* Surface1 */
52 - --btn-group-bg: #313244; /* Surface1 */
53 -
54 - --dd-hover-bg: #313244; /* Surface1 */
55 - --dd-list-input-bg: #313244; /* Surface1 */
56 - --kagi-accent: #313244; /* Surface1 */
57 - --filter-dd-bg: #313244; /* Surface1 */
58 -
59 - /* mobile */
60 - --m_sri_gap_color: #313244; /* Surface1 */
61 - }
62 -
63 - /* disable horizontal scrollbars */
64 - body {
65 - overflow-x: hidden;
66 - }
67 -
68 - ::selection {
69 - background-color: var(--color_link);
70 - color: #313244; /* Surface1 */
71 - }
72 -
73 - /* header, logo */
74 - .app-logo.--kagi {
75 - top: 26px;
76 - }
77 -
78 - /* container-level */
79 - .results-box {
80 - margin-top: 10px;
81 - }
82 -
83 - .serp-nav .nav_item.n_se::after {
84 - border-color: #A6E3A1 !important; /* Green from Catppuccin Mocha */
85 - }
86 -
87 - /* update color borders for serp tabs */
88 - .serp-nav .nav_item.--active:after, .serp-nav .nav_item:hover:after, ._0_lenses .k_ui_dropdown.--active .k_ui_dropdown_first_item span:after {
89 - border-color: var(--primary);
90 - }
91 -
92 - /* disable links borders */
93 - #layout-v2 a, .__sri-title .__sri_title_link, .__sri-title .__sri_title_link:hover, .wikipediaResult a:hover {
94 - border-bottom: 0;
95 - }
96 -
97 - /* general input focus */
98 - :focus-visible {
99 - outline-color: var(--color_link);
100 - }
101 -
102 - /* result tweaks */
103 - .__sri-title-box, .__sri-title, .__sri-url-box, .__sri-body {
104 - padding-left: 0;
105 - }
106 -
107 - .__sri-title .__domain-favicon {
108 - margin-left: -25px;
109 - }
110 -
111 - .__sri-preview {
112 - left: 0;
113 - }
114 -
115 - .__sri-url-box {
116 - margin-bottom: 4px;
117 - }
118 -
119 - .__sri-url {
120 - font-size: 0.75rem;
121 - }
122 -
123 - .__sri-time {
124 - background-color: transparent;
125 - color: #6C7086; /* Subtext0 */
126 - padding: 0;
127 - }
128 -
129 - .__sri-time::after {
130 - content: "—";
131 - display: inline-block;
132 - padding: 0 4px;
133 - }
134 -
135 - .__sri-time.--new {
136 - background: transparent;
137 - color: var(--color_link);
138 - }
139 -
140 - .__sri-desc {
141 - line-height: 1.57;
142 - }
143 -
144 - .newsResultItem .newsResultBody {
145 - margin-top: 0;
146 - }
147 -
148 - .top_podcasts_box:empty {
149 - display: none;
150 - }
151 -
152 - .freeScroller {
153 - overflow-x: auto !important;
154 - }
155 -
156 - /* domain info popover */
157 - #domainInfoModal .d-info-box-title-header {
158 - background: transparent;
159 - }
160 -
161 - #domainInfoModal .d-info-domain-title {
162 - text-shadow: none;
163 - color: var(--color-primary);
164 - }
165 -
166 - #domainInfoModal .rakned-box-close {
167 - color: var(--color-primary);
168 - }
169 -
170 - /* wolfram-alpha/"smart" things specific */
171 - .widget_holder .wasb, .wasb, .wasb-ans {
172 - font-family: var(--font-main);
173 - }
174 -
175 - .widget_holder .wasb {
176 - border: 1px solid var(--color-primary-dim_3);
177 - }
178 -
179 - .suggestions_area {
180 - border-bottom: 1px solid var(--color-primary-dim_3);
181 - }
182 -
183 - /* misc */
184 - .wikipediaResult .wiki-title a:hover {
185 - color: var(--color-primary_hover);
186 - border-bottom: 0;
187 - }
188 -
189 - .wiki-desc-box {
190 - font-size: 14px;
191 - }
192 -
193 - .k_ui_toggle_switch {
194 - --active-bg-color: var(--color_link);
195 - }
196 -
197 - .footer .footerInner ul li, footer .footerInner ul li {
198 - color: inherit;
199 - }
200 -
201 - /* mobile specific */
202 - @media screen and (max-width: 767px) {
203 - /* header */
204 - .m-h {
205 - padding: 0;
206 - }
207 -
208 - .m-h .m-h-i {
209 - height: auto;
210 - }
211 -
212 - .m-h .control-center-btn {
213 - top: 32px;
214 - z-index: 51;
215 - }
216 -
217 - .m-h .m-app-logo {
2 + --button-color: #89b4fa;
3 + /* Primary color for the buttons */
4 + --button-hover-color: #74c7ec;
5 + /* Secondary color for the buttons - when hovering */
6 + --source-highlight-color: #89dceb;
7 + /* Color of the sources and small annotations */
8 + --sri-hover-color: #89b4fa;
9 + /* Color for hovering over search results */
10 + --color-search-input: #1e1e2e;
11 + /* Color for Search Box */
12 + --color-search-input-border: #313244;
13 + --time-stamp: rgba(166, 173, 200, 0.8);
14 + /* Color for timestamp with alpha value */
15 + --m_sri_gap_color: #181825 !important;
16 + --app-text: #cdd6f4 !important;
17 + --app-bg: #1e1e2e;
18 + --inline-widget-bg: #181825;
19 + --primary-25: #181825;
20 + /* Adjustment for The Assistant */
21 + --primary-50: #1e1e2e;
22 + /* Adjustment for The Assistant */
23 + --primary-70: #11111b
24 + /* Adjustment for The Assistant */
25 + }
26 + :focus-visible{
27 + outline:1px solid #ffb319
28 + }
29 + .my-7{
30 + margin-bottom:5px;
31 + margin-top:5px;
32 + }
33 + #uploadedItems .item,[data-files] .item {
34 + background-color:var(--primary-50);
35 + outline:0.5px solid var(--primary-100);
36 + }
37 + #uploadedItems .item:focus-visible,#uploadedItems .item:hover:not(:has([data-selector=close]:hover)),[data-files] .item:focus-visible,[data-files] .item:hover:not(:has([data-selector=close]:hover)) {
38 + outline:.5px solid var(--kagi-highlight)
39 + }
40 + .chat_bubble {
41 + background-color: #1e2028;
42 + border-radius: 5px;
43 + padding: 1rem;
44 + margin-bottom: 1.3rem;
45 + box-shadow:0 8px 15px rgba(0,0,0,0.2);
46 + }
47 + #chat_box .chat_bubble .model{
48 + color:var(--secondary);
49 + background-color: var(--primary);
50 + max-width: fit-content;
51 + height: 24px;
52 + border-radius: 5px;
53 + padding: 0 8px;
54 + user-select: none;
55 + box-shadow: 0 8px 15px rgba(0,0,0,0.2);
56 + }
57 + .widget#translate {
58 + background-color: var(--primary-50);
59 + padding: 15px;
60 + border-radius: 5px;
61 + }
62 + .widget#translate .tbox .icons .fc {
63 + color:var(--primary);
64 + background-color: var(--primary-70);
65 + padding: 5px;
66 + border-radius: 100%;
67 + transition: all 0.5s ease;
68 + }
69 + .widget#translate .tbox .icons .fc:hover {
70 + background-color: var(--button-hover-color);
71 + color: var(--secondary);
72 + }
73 + .dropdown .dd-list li {
74 + border-radius: 9px;
75 + }
76 + .dropdown .dd-list li.--hover,.dropdown .dd-list li:hover {
77 + background-color:var(--primary);
78 + color:var(--secondary);
79 + }
80 + .dropdown .dd-list input[type=search] {
81 + background-color:var(--primary-50);
82 + border:1px solid var(--secondary);
83 + }
84 + .scene .cardHistory ._0_cardHistoryBack svg {
85 + margin-bottom: 25px;
86 + background: var(--button-color);
87 + border-radius: 100%;
88 + color: var(--primary-50);
89 + }
90 + .widget-simple .widgetItem {
91 + transition: all 0.5s ease;
92 + border-radius: 8px
93 + }
94 + .widget-simple .widgetItem:hover {
95 + background-color: var(--primary);
96 + padding: 5px
97 + }
98 + .widget-simple .widgetItemTitle .__title-text:hover {
99 + text-decoration:none
100 + }
101 + .widget-simple .widgetItemTitle .__title-text:hover {
102 + color:var(--secondary);
103 + text-decoration:none
104 + }
105 + .widget-simple .widgetItemTitle .__title-text {
106 + color:var(--primary);
107 + transition: all 0.5s ease;
108 + }
109 + .widgetContent .widgetItems .widgetItem:hover {
110 + background-color:#1c1e24
111 + }
112 + #quickPeekResults .inlineHeader,#quickPeekResults details {
113 + border-bottom:.5px dashed var(--inline-header-border);
114 + }
115 + .k_ui_dropdown_data_list{
116 + background-color:var(--primary-50);
117 + left:65px !important;
118 + top:0px !important;
119 + border: 1px solid var(--as-dd-border);
120 + border-radius: 12px;
121 + box-shadow: 1px 8px 30px 0 rgba(0,0,0,.09);
122 + gap: 6px;
123 + padding-block: 20px;
124 + padding-inline: 10px;
125 + }
126 + .k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li, .k_ui_dropdown_data_list .list_items>a, .k_ui_dropdown_data_list .list_items>div {
127 + align-items:center;
128 + background-color:transparent;
129 + border-radius:9px;
130 + transition:background-color .1s ease-in-out,color .1s ease-in-out
131 + }
132 + .k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li.__hover,.k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li:focus-visible, .k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li:hover,.k_ui_dropdown_data_list .list_items>a.__hover,.k_ui_dropdown_data_list .list_items>a:focus-visible,.k_ui_dropdown_data_list .list_items>a:hover,.k_ui_dropdown_data_list .list_items>div.__hover,.k_ui_dropdown_data_list .list_items>div:focus-visible,.k_ui_dropdown_data_list .list_items>div:hover {
133 + background-color:var(--primary);
134 + color:var(--secondary);
135 + }
136 + .d-info-box-title-header {
137 + background:#a5d46a;
138 + }
139 + .d-info-box-title-header.--trackers {
140 + background:#ffdf80
141 + }
142 + .d-info-box-title-header.--trackers-danger {
143 + background:#ffa080
144 + }
145 + .k_ui_btn_group{
146 + border:none;
147 + background-color:var(--app-bg);
148 + }
149 + .advanced-search-modal-backdrop::before{
150 + background-color:#121213
151 + }
152 + a.wiki-nw-link{
153 + background-color:var(--inline-domain-tag-bg);
154 + border-radius:8px;
155 + margin-top:10px;
156 + padding:5px;
157 + transition:all .5s ease;
158 + }
159 + a.wiki-nw-link:hover{
160 + background-color:var(--button-hover-color);
161 + color:#1b1b1b
162 + }
163 + .wiki-nw-link{
164 + color:var(--primary-700)!important;
165 + }
166 + .wiki-nw-link:hover{
167 + color:#1b1b1b
168 + }
169 + .dropdown.dd_clean .dd-toggle-label{
170 + transition:all .5s ease
171 + }
172 + .dropdown.dd_clean .dd-toggle-label:hover{
173 + background-color:#34373f;
174 + padding-left:5px
175 + }
176 + ._0_filters-panel{
177 + background-color:#1e2028;
178 + border-radius:12px;
179 + padding-left:15px;
180 + margin-right:10px;
181 + margin-bottom:5px;
182 + box-shadow:0 0 10px rgba(0,0,0,.25)
183 + }
184 + .d-info-section,.question_form_box .q_form_wrapper{
185 + background-color:#1e2028
186 + }
187 + .d-info-body{
188 + background-color:#17191e
189 + }
190 + .d-info-section-desc.col{
191 + background-color:transparent
192 + }
193 + ._0_result_page_summary{
194 + background-color:#17191e;
195 + padding:8px;
196 + border-radius:5px;
197 + border:.5px dashed var(--button-color);
198 + line-height:1.5rem
199 + }
200 + .quick-settings-footer{
201 + border-top:1px solid var(--button-color);
202 + border-radius:8px
203 + }
204 + .image-preview-wrapper #PreviewImageUrl{
205 + max-width:fit-content;
206 + background-color:#17191e;
207 + padding:5px;
208 + border-radius:8px;
209 + border:1px solid var(--primary-hover);
210 + margin-top:5px
211 + }
212 + .ranked-c-adjust-info-icon:not(.new-tooltip) .k-tooltip:after,.tooltip-trigger:not(.new-tooltip) .k-tooltip:after{
213 + border-top:8px solid var(--secondary)
214 + }
215 + .newsResultItem .newsResultHeader .sourceAndTime{
216 + background-color:#17191e;
217 + border-radius:5px;
218 + padding:8px
219 + }
220 + .instant-answer{
221 + padding-bottom:10px;
222 + padding-left:14px;
223 + background-color:#1e2028;
224 + border-radius:12px;
225 + margin-bottom:30px;
226 + box-shadow:rgba(244,182,68,0.4) 5px 5px,rgba(244,182,68,0.3) 10px 10px,rgba(244,182,68,0.2) 15px 15px,rgba(244,182,68,0.1) 20px 20px
227 + }
228 + .ext_icon{
229 + border:1px solid var(--button-color)
230 + }
231 + .result-comments .comment{
232 + background-color:var(--button-color);
233 + color:#1b1b1b;
234 + border-radius:10px;
235 + padding:5px;
236 + margin:0 auto
237 + }
238 + .result-comments .comment:hover{
239 + background-color:var(--button-hover-color)
240 + }
241 + .top_podcast_item{
242 + width:130px;
243 + background-color:#1e2028;
244 + padding:10px;
245 + border-radius:12px
246 + }
247 + .top_podcast_item:hover{
248 + text-decoration:none
249 + }
250 + .__sri-url-box{
251 + margin-bottom: 10px;
252 + background-color:#17191e;
253 + border-radius:5px;
254 + padding:8px
255 + }
256 + .videoResultItem{
257 + background-color:#1e2028
258 + }
259 + .auto_suggestions .auto_item{
260 + transition:all .5s ease
261 + }
262 + .auto_suggestions .auto_item.highlighted {
263 + background-color:var(--primary-70)
264 + }
265 + .videoResultItem .videoResultRight .videoResultInfo .videoPublished .videoPublishedDate{
266 + background-color:var(--time-stamp);
267 + color:var(--primary-700);
268 + border-radius:5px;
269 + padding:0 6px;
270 + transition:background-color .3s ease,color .3s ease;
271 + user-select:none
272 + }
273 + .videoResultItem .videoResultRight .videoResultInfo .videoPublished .videoPublishedDate:hover{
274 + background-color:rgba(150,190,250,0.8);
275 + color:#1b1b1b
276 + }
277 + .videoResultItem .videoResultRight .videoResultInfo .videoPublishedDate,.videoResultItem .videoResultRight .videoResultInfo .videoViewsCount{
278 + background-color:var(--time-stamp);
279 + color:var(--primary-700);
280 + border-radius:5px;
281 + padding:0 6px;
282 + transition:background-color .3s ease,color .3s ease;
283 + user-select:none
284 + }
285 + .videoResultItem .videoResultRight .videoResultInfo .videoPublishedDate:hover,.videoResultItem .videoResultRight .videoResultInfo .videoViewsCount:hover{
286 + background-color:rgba(150,190,250,0.8);
287 + color:#1b1b1b
288 + }
289 + .newsResultItem{
290 + background-color:#1e2028;
291 + border-radius:12px;
292 + padding:1.2rem 22px .7rem 18px;
293 + opacity:0;
294 + transform:translateY(20px);
295 + animation:fadeInUp .3s ease-out forwards
296 + }
297 + .newsResultItem:first-child{
298 + padding-top:1.2rem
299 + }
300 + .newsResultItem .newsResultTime{
301 + background-color:var(--time-stamp);
302 + color:var(--primary-700);
303 + border-radius:5px;
304 + padding:0 6px;
305 + user-select:none;
306 + transition:background-color .3s ease,color .3s ease
307 + }
308 + .newsResultItem .newsResultTime:hover{
309 + background-color:rgba(150,190,250,0.8);
310 + color:#1b1b1b
311 + }
312 + .podcast_result{
313 + background-color:#1e2028;
314 + border-radius:12px;
315 + padding:1.2rem 22px .7rem 18px;
316 + opacity:0;
317 + transform:translateY(20px);
318 + animation:fadeInUp .3s ease-out forwards
319 + }
320 + .podcast_result .body .thumbnail img{
321 + transition:box-shadow .5s ease
322 + }
323 + .podcast_result .body .thumbnail img:hover{
324 + box-shadow:0 8px 15px rgba(0,0,0,0.2)
325 + }
326 + .podcast_result .body{
327 + margin-top:0
328 + }
329 + .podcast_result .title a{
330 + transition:all .5s ease
331 + }
332 + .podcast_result .episode_meta>div+div,.podcast_result .body .content .podcast_publisher,.podcast_result .podcast_duration{
333 + background-color:var(--time-stamp);
334 + color:var(--primary-700);
335 + border-radius:5px;
336 + padding:0 6px;
337 + transition:background-color .3s ease,color .3s ease;
338 + user-select:none
339 + }
340 + .podcast_result .episode_meta>div+div:hover,.podcast_result .body .content .podcast_publisher:hover,.podcast_result .podcast_duration:hover{
341 + background-color:rgba(150,190,250,0.8);
342 + color:#1b1b1b
343 + }
344 + .podcast_result .body .content .podcast_publisher i{
345 + color:var(--primary-700);
346 + transition:color .3s ease
347 + }
348 + .podcast_result .body .content .podcast_publisher:hover i{
349 + color:#1b1b1b
350 + }
351 + .widget-time-ago{
352 + background-color:rgba(150,190,250,0.8);
353 + color:#1b1b1b;
354 + user-select:none;
355 + border-radius:5px;
356 + display:inline-block;
357 + padding:0 6px;
358 + margin-bottom:auto;
359 + margin-top:auto
360 + }
361 + .app-header.app-content-box{
362 + position:sticky;
363 + top:0;
364 + z-index:114;
365 + background:rgba(26,28,35,0.2);
366 + border-bottom-left-radius:16px;
367 + border-bottom-right-radius:16px;
368 + box-shadow:0 2px 15px rgba(0,0,0,.7);
369 + backdrop-filter:blur(5px);
370 + -webkit-backdrop-filter:blur(5px);
371 + border:1px solid rgba(35,35,37,0.3)
372 + }
373 + .quick-settings{
374 + background:rgba(32,33,36,0.6);
375 + border-bottom-left-radius:16px;
376 + border-top-left-radius:16px;
377 + box-shadow:0 7px 10px #1a1c23;
378 + backdrop-filter:blur(5px);
379 + -webkit-backdrop-filter:blur(5px);
380 + border:2px solid rgba(35,35,37,0.7)
381 + }
382 + .sri-group .sr-group {
383 + padding: 10px 10px 20px 30px!important;
384 + margin-top:0px
385 + }
386 + .correctedQuery{
387 + line-height:2
388 + }
389 + .wikipedia_results{
390 + background-color:#28282a
391 + }
392 + .wiki_desc_text{
393 + line-height:1.55
394 + }
395 + .app-box{
396 + background-color:#17191e
397 + }
398 + .app-box-center{
399 + margin-top:1rem
400 + }
401 + .read-more-inline{
402 + background-color:var(--button-color);
403 + color:#1b1b1b;
404 + border-radius:10px;
405 + padding:2px 8px
406 + }
407 + .read-more-inline:hover{
408 + background-color:var(--button-hover-color);
409 + color:#1b1b1b
410 + }
411 + .read-more-inline svg{
412 + color:#1b1b1b;
413 + transition:all .3s ease
414 + }
415 + .read-more-inline:hover svg{
416 + color:#1b1b1b;
417 + transform:translateX(5px)
418 + }
419 + ._0_results_summary_text{
420 + color:#b3b7bb
421 + }
422 + .__sri-time{
423 + background-color:var(--time-stamp);
424 + color:var(--primary-700);
425 + user-select:none
426 + }
427 + .__sri-time.--new{
428 + background-color:var(--time-stamp);
429 + color:var(--primary-700);
430 + user-select:none
431 + }
432 + .sri-group,.search-result,.scene{
433 + background-color:#1e2028;
434 + border-radius:5px;
435 + opacity:0;
436 + transform:translateY(20px);
437 + animation:fadeInUp .3s ease-out forwards
438 + }
439 + .__sri-title,.__sri_title_link{
440 + transition:all .5s ease
441 + }
442 + .scene{
443 + padding:1rem;
444 + opacity:0;
445 + transform:translateY(20px);
446 + animation:fadeInUp .3s ease-out forwards
447 + }
448 + body,html,.mob{
449 + background-color:#17191e;
450 + font-family:var(--font-lufga),system-ui
451 + }
452 + .search-result{
453 + padding:1.2rem .8rem .6rem .8rem;
454 + opacity:0;
455 + transform:translateY(20px);
456 + animation:fadeInUp .3s ease-out forwards
457 + }
458 + @keyframes fadeInUp{
459 + to{
460 + opacity:1;
461 + transform:translateY(0)
462 + }
463 + }
464 + .widgetContent{
465 + background-color:#1e2028;
466 + border-radius:5px;
467 + padding:1.2rem 22px .7rem 18px;
468 + opacity:0;
469 + transform:translateY(20px);
470 + animation:fadeInUp .3s ease-out forwards
471 + }
472 + .serp-nav .nav_item{
473 + position:relative
474 + }
475 + .serp-nav .nav_item:after{
476 + content:"";
477 + display:block;
478 + position:absolute;
479 + bottom:0;
480 + left:0;
481 + width:100%;
482 + height:3px;
483 + background-color:var(--nav_n_se_line);
484 + transform:scaleY(0);
485 + transform-origin:bottom;
486 + transition:transform .3s ease,box-shadow .3s ease;
487 + border-top-left-radius:5px;
488 + border-top-right-radius:5px
489 + }
490 + .serp-nav .nav_item:hover:after{
491 + transform:scaleY(1)
492 + }
493 + ._0_sri-w-highlight .serp-nav .nav_item.searchResultAnswer:after,.serp-nav ._0_sri-w-highlight .nav_item.searchResultAnswer:after,.serp-nav .nav_item.--active:after,.serp-nav .nav_item:hover:after{
494 + transform:scaleY(1)
495 + }
496 + ._0_more_search_box{
497 + text-align:center;
498 + width:80%
499 + }
500 + .__sri_title_link._0_sri_title_link._0_URL{
501 + border-bottom:none!important
502 + }
503 + .__srgi-title a{
504 + border-bottom:none!important
505 + }
506 + .newsResultItem .newsResultHeader .newsResultTitle a._0_TITLE{
507 + border-bottom:none!important
508 + }
509 + .wikipediaResult a{
510 + border-bottom:none!important;
511 + color:var(--button-color)
512 + }
513 + ._0_results_summary_box{
514 + border-bottom:none!important;
515 + margin-bottom:30px;
516 + background-color:#1e2028;
517 + border-radius:22px;
518 + padding:20px
519 + }
520 + .results_summary_text_box:has(#qa_show_more:not(:checked)) .smw::before{
521 + background:linear-gradient(transparent,#1e2028)
522 + }
523 + ._0_summarize_link{
524 + background-color:var(--button-color);
525 + max-width:max-content;
526 + margin-bottom:10px;
527 + margin-top:3px;
528 + border-radius:10px!important;
529 + padding:5px 10px
530 + }
531 + ._0_summarize_link:hover{
532 + background-color:var(--button-hover-color);
533 + box-shadow:0 8px 15px rgba(0,0,0,0.2);
534 + transition:all .5s ease
535 + }
536 + ._0_summarize_link svg{
537 + transition:all .3s ease!important
538 + }
539 + ._0_summarize_link:hover .ic svg{
540 + transform:translateX(5px)!important
541 + }
542 + ._0_summarize_link,._0_summarize_link a{
543 + color:#232325!important
544 + }
545 + .top-content .top-content ._0_provider-content{
546 + display:none!important
547 + }
548 + ._0_results_summary_link_to_IA{
549 + background-color:var(--inline-domain-tag-bg);
550 + max-width:max-content;
551 + padding:5px;
552 + border-radius:10px;
553 + margin-top:15px;
554 + transition:all .5s ease;
555 + user-select:none;
556 + }
557 + ._0_results_summary_link_to_IA:hover{
558 + background-color:var(--button-hover-color);
559 + box-shadow:0 8px 15px rgba(0,0,0,0.2)
560 + }
561 + .results_summary_text_box sup a{
562 + border-radius:50%;
563 + background-color:#2D2F2F;
564 + color:#8D9191;
565 + padding:1px 4px;
566 + transition:background-color .3s ease,color .3s ease
567 + }
568 + .results_summary_text_box sup a:hover{
569 + background-color:var(--source-highlight-color);
570 + color:#F2FCFC;
571 + transition:all .5s ease
572 + }
573 + ._0_results_summary_links{
574 + margin-bottom:30px
575 + }
576 + ._0_results_summary_links a{
577 + transition:color .3s ease-in-out,transform .3s ease-in-out;
578 + border-radius:3px;
579 + display:inline-block;
580 + text-decoration:none
581 + }
582 + ._0_results_summary_links a.__0_highlight,._0_results_summary_links a:hover{
583 + transform:translateX(3px);
584 + background-color:var(--source-highlight-color);
585 + color:var(--resultsummary-highlight_text)
586 + }
587 + ._0_results_summary_links .__domain-name{
588 + user-select:none
589 + }
590 + .widget .wasb{
591 + background-color:#1e2028
592 + }
593 + .wasb-title{
594 + text-decoration:none;
595 + font-size:1.25rem;
596 + font-weight:450
597 + }
598 + .wolfram-answer{
599 + background-color:#1e2028;
600 + margin-bottom:25px;
601 + border-radius:10px;
602 + padding-right:10px;
603 + padding-left:10px
604 + }
605 + ._0_discuss_document_btn{
606 + background-color:var(--button-color);
607 + color:#1b1b1b;
608 + border-radius:10px;
609 + padding:2px 8px;
610 + max-width:max-content;
611 + position:relative;
612 + margin-top:1rem
613 + }
614 + ._0_discuss_document_btn:hover{
615 + background-color:var(--button-hover-color);
616 + color:#1b1b1b
617 + }
618 + ._0_discuss_document_btn svg{
619 + transition:all .3s ease
620 + }
621 + ._0_discuss_document_btn:hover svg{
622 + transform:translateX(5px)
623 + }
624 + .smw{
625 + background-color:var(--button-color);
626 + color:#1b1b1b;
627 + border-radius:10px;
628 + padding:2px 8px;
629 + max-width:max-content;
630 + position:relative;
631 + margin:10px auto 0;
632 + user-select:none
633 + }
634 + .smw:hover{
635 + background-color:var(--button-hover-color);
636 + color:#1b1b1b
637 + }
638 + .smw svg{
639 + transition:all .3s ease
640 + }
641 + .smw:hover svg{
642 + transform:translateX(3px)
643 + }
644 + .results_summary_text_box:has(#qa_show_more:not(:checked)) .smw::before{
645 + background:linear-gradient(transparent,#1e2028)
646 + }
647 + .ks-tooltip-body{
648 + background-color:var(--k-tooltip-text);
649 + color:#FDFDFD
650 + }
651 + .ia-tooltip-body__desc,.ia-tooltip-body__desc__title{
652 + color:#fdfdfd
653 + }
654 + .tooltip_base{
655 + color:var(--k-tooltip-bg);
656 + background-color:var(--k-tooltip-text);
657 + box-shadow:0 8px 15px rgba(0,0,0,0.2);
658 + width:500px;
659 + z-index:115
660 + }
661 + [data-arrow]{
662 + background-color:var(--k-tooltip-text)
663 + }
664 + .related-items a{
665 + background-color:#1e2028;
666 + transition:all .5s ease
667 + }
668 + .footer-search-results #load_more_results,.btn.--primary{
669 + transition:all .5s ease
670 + }
671 + .ranked-c-adjust-info-icon:not(.new-tooltip) .k-tooltip,.tooltip-trigger:not(.new-tooltip) .k-tooltip{
672 + background-color:var(--k-tooltip-text);
673 + color:#FDFDFD
674 + }
675 + .widgetContent .widgetItems .widgetItem{
676 + background-color:#17191e;
677 + transition:all .5s ease
678 + }
679 + .widgetItem .videoResultThumbnail img{
680 + border-top-left-radius:5px;
681 + border-bottom-left-radius:5px
682 + }
683 + .search-form .search-input-container,.search-form .search-input-container-kids{
684 + box-shadow:1px 8px 30px 0 rgba(0,0,0,0.3)
685 + }
686 + .paywall-icon .paywall-tooltip{
687 + color:var(--k-tooltip-bg);
688 + background-color:var(--k-tooltip-text);
689 + box-shadow:0 8px 15px rgba(0,0,0,0.2)
690 + }
691 + .btn.--secondary-light-s:hover{
692 + border:1px solid var(--primary-hover);
693 + color:var(--primary-hover);
694 + transition:all .5s ease
695 + }
696 + .inlineHeader{
697 + transition:all .5s ease
698 + }
699 + .ranked-c-adjust-info-icon:not(.new-tooltip) .k-tooltip:after, .tooltip-trigger:not(.new-tooltip) .k-tooltip:after {
700 + border-top: 8px solid var(--secondary);
701 + }
702 + .auto_suggestions_lenses_edit_box:hover {
703 + background-color: var(--sri-hover-color);
704 + }
705 + .top_podcast_item {
706 + width: 130px;
707 + background-color: #1e2028;
708 + padding: 10px;
709 + border-radius: 12px;
710 + }
711 + .widget-time-ago {
712 + background-color: rgba(150, 190, 250, 0.8);
713 + color: #1b1b1b;
714 + user-select: none;
715 + border-radius: 5px;
716 + display: inline-block;
717 + padding: 0 6px;
718 + margin-bottom: auto;
719 + margin-top: auto;
720 + }
721 + .podcast_result {
722 + background-color: #1e2028;
723 + border-radius: 12px;
724 + padding-top: 1.2rem;
725 + padding-right: 22px;
726 + padding-bottom: 0.7rem;
727 + padding-left: 18px;
728 + opacity: 0;
729 + transform: translateY(20px);
730 + animation: fadeInUp 0.3s ease-out forwards;
731 + }
732 + .scene {
733 + padding: 1rem;
734 + opacity: 0;
735 + transform: translateY(20px);
736 + animation: fadeInUp 0.3s ease-out forwards;
737 + }
738 + @keyframes fadeInUp {
739 + to{
740 + opacity: 1;
741 + transform: translateY(0);
742 + }
743 + }
744 + ._0_queryInfo{
218 745 display: none;
219 - }
220 -
221 - /* search box */
222 - .search-form {
223 - height: auto;
224 - }
225 -
226 - .search_form_box {
227 - width: 100%;
228 - }
229 -
230 - .search-form .search-input-container {
231 - padding-inline: 0;
232 - border: 0;
233 - }
234 -
235 - .search-form .search_area {
236 - min-height: auto;
237 - }
238 -
239 - .search-form .search-input-box {
240 - border: 1px solid var(--header-border);
241 - border-radius: 24px;
242 - padding: 0 14px;
243 - }
244 -
245 - .s-f-w .search-form-container {
246 - padding: 10px 46px 5px 10px;
247 - }
248 -
249 - .s-f-w.--active {
250 - margin: 0;
251 - }
252 -
253 - .s-f-w.--active .search-input-container {
254 - border: 0;
255 - min-height: 64px;
256 - }
257 -
258 - .s-f-w.--active .search-form-container {
259 - margin: 0;
260 - padding: 0 10px;
261 - height: 64px;
262 - }
263 -
264 - .s-f-w.--active .search-form {
265 - padding-top: 0;
266 - }
267 -
268 - .s-f-w.--active .search-input-box {
269 - margin-left: 4px;
270 - padding-right: 0;
271 - max-width: 100%;
272 - }
273 -
274 - .s-f-w.--active .search-form-icons {
275 - margin-right: 0;
276 - }
277 -
278 - .s-f-w.--active .auto_suggestions {
279 - top: 64px;
280 - }
281 -
282 - .s-f-w.--active .m-b-arrow {
283 - position: relative;
284 - width: auto;
285 - height: auto;
286 - left: 0;
287 - }
288 -
289 - #searchFormSubmit {
290 - display: none;
291 - }
292 -
293 - .m-h .search-form-icons .clear-search {
294 - margin-right: 4px;
295 - }
296 -
297 - .m-b-arrow {
298 - width: 35px;
299 - top: 0;
300 - }
301 -
302 - .search-form .auto_suggestions {
303 - margin: 0;
304 - border: 0;
305 - }
306 -
307 - .widgetContent {
308 - margin-bottom: 0;
309 - }
310 -
311 - /* remove top/bottom border between results */
312 - .search-result, .sri-group, .inline-content+.search-result, .inline-content+.sri-group {
313 - border-top: 0;
314 - border-bottom: 0;
315 - }
316 -
317 - /* tighten line-height */
318 - .__sri-title .__sri_title_link {
319 - line-height: 1.65rem;
320 - }
321 -
322 - /* hide inline image preview */
323 - .__sri-body.--img .__sri-preview {
324 - display: none;
325 - }
326 -
327 - .__sri-body.--img .__sri-desc:before {
328 - display: none;
329 - }
330 -
331 - /* tighten up secondary results to match rhythm */
332 - .sri-group .sr-group {
333 - margin-top: 15px;
334 - }
335 -
336 - /* disable bottom-right distracting button on scroll up */
337 - .quick-search-btn {
338 - display: none;
339 - }
340 -
341 - /* fix video results spacing */
342 - #newsHeader, .headerVideos {
343 - margin-right: 0;
344 - }
345 -
346 - /* clean up page 2 results spacing */
347 - ._0_page-separator {
348 - margin-bottom: 15px;
349 - }
350 -
351 - /* give the page 2 button more bottom room */
352 - .main-footer {
353 - padding-bottom: 40px;
354 - }
355 -
356 - /* light-specific */
357 - .theme_light .search-form .search-form-icons {
358 - /* background: linear-gradient(90deg, transparent 0%, rgb(255, 255, 255) 50%); */
359 - }
746 + }
747 + ._0_results_summary_link_to_IA a {
748 + color:var(--primary-700);
749 + }
750 + ._0_results_summary_link_to_IA a:hover {
751 + color:#1b1b1b;
752 + text-decoration:none!important;
753 + }
754 + .top_nav_links>a{
755 + background-color: var(--button-color);
756 + padding-left: 20px;
757 + border-radius: 20px;
758 + color: #232325 !important;
759 + box-shadow: 0 0 10px rgba(0,0,0,.5);
760 + transition: all 0.5s ease;
761 + padding-right: 20px;
762 + height: 40px;
763 + }
764 + .top_nav_links>a:hover{
765 + background-color:var(--button-hover-color);
766 + }
767 + #settings_showFiltersPanel:checked~.top-panel #top-parent {
768 + margin-left:3px;
769 + }
770 + .cheatsh .content{
771 + background-color: var(--primary-25);
772 + border-radius: 5px;
773 + }
774 + .cheatsh .cheatsh_content_wrpr::after {
775 + background-color: var(--primary-50);
776 + }
777 + .cheatsh .code {
778 + box-shadow: 0 0 10px rgba(0,0,0,.25)
779 + }
780 + .ranked-box-overlay.--open {
781 + left:656px !important;
782 + }
783 + #form .buttons button.submit {
784 + background-color: #89b4fa !important;
785 + }
786 + #form .buttons button.submit:hover {
787 + background-color: #b4befe !important;
788 + }
789 + .mb-10 a.btn {
790 + background-color: #89b4fa !important;
791 + }
792 + .mb-10 a.btn:hover {
793 + background-color: #b4befe !important;
794 + }
795 + .control-center-btn {
796 + background-color: #89b4fa !important;
797 + color: #313244 !important;
798 + }
799 + .control-center-btn:hover {
800 + background-color: #b4befe !important;
801 + }
802 + #form {
803 + background-color: #1e1e2e !important;
804 + border-color: #89b4fa !important;
805 + }
806 + .search-form .search-input-container {
807 + border: 1px solid #89b4fa !important;
808 + }
809 + button.searchFormSubmitBtn {
810 + background-color: #89b4fa !important;
811 + }
812 + button.searchFormSubmitBtn:hover {
813 + background-color: #b4befe !important;
814 + }
815 + #form #promptBoxButtonsGroup {
816 + border-color: #89b4fa !important;
360 817 }

jcrabapple's Avatar jcrabapple revised this gist 1734725267. Go to revision

1 file changed, 360 insertions

kagi-catppuccin-mocha.css(file created)

@@ -0,0 +1,360 @@
1 + :root {
2 + --font-main: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
3 + --font-lufga: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
4 + }
5 +
6 + .theme_dark, .theme_moon_dark, .theme_moon_dark_conditional {
7 + --app-bg: #1E1E2E; /* Base */
8 + --page-text: #CDD6F4; /* Text */
9 + --app-text: #CDD6F4; /* Text */
10 + --primary: #CDD6F4; /* Text */
11 + --primary-hover: #1E1E2E; /* Base */
12 +
13 + --header-bg: #1E1E2E; /* Base */
14 + --header-border: #313244; /* Surface1 */
15 +
16 + --app-sidebar-bg: #1E1E2E; /* Base */
17 +
18 + --input-bg: #313244; /* Surface1 */
19 + --color-search-input: #1E1E2E; /* Base */
20 +
21 + --search-result-title: #CDD6F4; /* Text */
22 + --search-result-title-hover: #BAC2DE; /* Subtext1 */
23 + --search-result-content-text: #BAC2DE; /* Subtext1 */
24 + --search-result-url-link: #BAC2DE; /* Subtext1 */
25 + --search-result-date-bg: #313244; /* Surface1 */
26 + --search-result-date-new-bg: #F38BA8; /* Red */
27 +
28 + --domain-rank-icon-color-trackers: #F9E2AF; /* Yellow */
29 +
30 + --color_link: #A6E3A1; /* Yellow */
31 + --primary-hover: #BAC2DE; /* Subtext1 */
32 + --primary-visited: #6C7086; /* Subtext0 */
33 + --related-item-bg: #313244; /* Surface1 */
34 + --inline-domain-tag-bg: #313244; /* Surface1 */
35 + --inline-header-border: #313244; /* Surface1 */
36 + --inline-header-title: #CDD6F4; /* Text */
37 + --inline-widget-bg: #313244; /* Surface1 */
38 +
39 + --primary-700: #6C7086; /* Subtext0 */
40 + --primary-800: #BAC2DE; /* Subtext1 */
41 +
42 + --resultsummary-highlight: #F9E2AF; /* Yellow */
43 + --resultsummary-highlight_text: #313244; /* Surface1 */
44 +
45 + --wiki-title: #CDD6F4; /* Text */
46 + --wiki-content-links: #F9E2AF; /* Yellow */
47 + --wiki-nw-links: #F9E2AF; /* Yellow */
48 + --result-item-title-border: transparent;
49 +
50 + --site_info_bg: #313244; /* Surface1 */
51 + --site_info_bottom_bg: #313244; /* Surface1 */
52 + --btn-group-bg: #313244; /* Surface1 */
53 +
54 + --dd-hover-bg: #313244; /* Surface1 */
55 + --dd-list-input-bg: #313244; /* Surface1 */
56 + --kagi-accent: #313244; /* Surface1 */
57 + --filter-dd-bg: #313244; /* Surface1 */
58 +
59 + /* mobile */
60 + --m_sri_gap_color: #313244; /* Surface1 */
61 + }
62 +
63 + /* disable horizontal scrollbars */
64 + body {
65 + overflow-x: hidden;
66 + }
67 +
68 + ::selection {
69 + background-color: var(--color_link);
70 + color: #313244; /* Surface1 */
71 + }
72 +
73 + /* header, logo */
74 + .app-logo.--kagi {
75 + top: 26px;
76 + }
77 +
78 + /* container-level */
79 + .results-box {
80 + margin-top: 10px;
81 + }
82 +
83 + .serp-nav .nav_item.n_se::after {
84 + border-color: #A6E3A1 !important; /* Green from Catppuccin Mocha */
85 + }
86 +
87 + /* update color borders for serp tabs */
88 + .serp-nav .nav_item.--active:after, .serp-nav .nav_item:hover:after, ._0_lenses .k_ui_dropdown.--active .k_ui_dropdown_first_item span:after {
89 + border-color: var(--primary);
90 + }
91 +
92 + /* disable links borders */
93 + #layout-v2 a, .__sri-title .__sri_title_link, .__sri-title .__sri_title_link:hover, .wikipediaResult a:hover {
94 + border-bottom: 0;
95 + }
96 +
97 + /* general input focus */
98 + :focus-visible {
99 + outline-color: var(--color_link);
100 + }
101 +
102 + /* result tweaks */
103 + .__sri-title-box, .__sri-title, .__sri-url-box, .__sri-body {
104 + padding-left: 0;
105 + }
106 +
107 + .__sri-title .__domain-favicon {
108 + margin-left: -25px;
109 + }
110 +
111 + .__sri-preview {
112 + left: 0;
113 + }
114 +
115 + .__sri-url-box {
116 + margin-bottom: 4px;
117 + }
118 +
119 + .__sri-url {
120 + font-size: 0.75rem;
121 + }
122 +
123 + .__sri-time {
124 + background-color: transparent;
125 + color: #6C7086; /* Subtext0 */
126 + padding: 0;
127 + }
128 +
129 + .__sri-time::after {
130 + content: "—";
131 + display: inline-block;
132 + padding: 0 4px;
133 + }
134 +
135 + .__sri-time.--new {
136 + background: transparent;
137 + color: var(--color_link);
138 + }
139 +
140 + .__sri-desc {
141 + line-height: 1.57;
142 + }
143 +
144 + .newsResultItem .newsResultBody {
145 + margin-top: 0;
146 + }
147 +
148 + .top_podcasts_box:empty {
149 + display: none;
150 + }
151 +
152 + .freeScroller {
153 + overflow-x: auto !important;
154 + }
155 +
156 + /* domain info popover */
157 + #domainInfoModal .d-info-box-title-header {
158 + background: transparent;
159 + }
160 +
161 + #domainInfoModal .d-info-domain-title {
162 + text-shadow: none;
163 + color: var(--color-primary);
164 + }
165 +
166 + #domainInfoModal .rakned-box-close {
167 + color: var(--color-primary);
168 + }
169 +
170 + /* wolfram-alpha/"smart" things specific */
171 + .widget_holder .wasb, .wasb, .wasb-ans {
172 + font-family: var(--font-main);
173 + }
174 +
175 + .widget_holder .wasb {
176 + border: 1px solid var(--color-primary-dim_3);
177 + }
178 +
179 + .suggestions_area {
180 + border-bottom: 1px solid var(--color-primary-dim_3);
181 + }
182 +
183 + /* misc */
184 + .wikipediaResult .wiki-title a:hover {
185 + color: var(--color-primary_hover);
186 + border-bottom: 0;
187 + }
188 +
189 + .wiki-desc-box {
190 + font-size: 14px;
191 + }
192 +
193 + .k_ui_toggle_switch {
194 + --active-bg-color: var(--color_link);
195 + }
196 +
197 + .footer .footerInner ul li, footer .footerInner ul li {
198 + color: inherit;
199 + }
200 +
201 + /* mobile specific */
202 + @media screen and (max-width: 767px) {
203 + /* header */
204 + .m-h {
205 + padding: 0;
206 + }
207 +
208 + .m-h .m-h-i {
209 + height: auto;
210 + }
211 +
212 + .m-h .control-center-btn {
213 + top: 32px;
214 + z-index: 51;
215 + }
216 +
217 + .m-h .m-app-logo {
218 + display: none;
219 + }
220 +
221 + /* search box */
222 + .search-form {
223 + height: auto;
224 + }
225 +
226 + .search_form_box {
227 + width: 100%;
228 + }
229 +
230 + .search-form .search-input-container {
231 + padding-inline: 0;
232 + border: 0;
233 + }
234 +
235 + .search-form .search_area {
236 + min-height: auto;
237 + }
238 +
239 + .search-form .search-input-box {
240 + border: 1px solid var(--header-border);
241 + border-radius: 24px;
242 + padding: 0 14px;
243 + }
244 +
245 + .s-f-w .search-form-container {
246 + padding: 10px 46px 5px 10px;
247 + }
248 +
249 + .s-f-w.--active {
250 + margin: 0;
251 + }
252 +
253 + .s-f-w.--active .search-input-container {
254 + border: 0;
255 + min-height: 64px;
256 + }
257 +
258 + .s-f-w.--active .search-form-container {
259 + margin: 0;
260 + padding: 0 10px;
261 + height: 64px;
262 + }
263 +
264 + .s-f-w.--active .search-form {
265 + padding-top: 0;
266 + }
267 +
268 + .s-f-w.--active .search-input-box {
269 + margin-left: 4px;
270 + padding-right: 0;
271 + max-width: 100%;
272 + }
273 +
274 + .s-f-w.--active .search-form-icons {
275 + margin-right: 0;
276 + }
277 +
278 + .s-f-w.--active .auto_suggestions {
279 + top: 64px;
280 + }
281 +
282 + .s-f-w.--active .m-b-arrow {
283 + position: relative;
284 + width: auto;
285 + height: auto;
286 + left: 0;
287 + }
288 +
289 + #searchFormSubmit {
290 + display: none;
291 + }
292 +
293 + .m-h .search-form-icons .clear-search {
294 + margin-right: 4px;
295 + }
296 +
297 + .m-b-arrow {
298 + width: 35px;
299 + top: 0;
300 + }
301 +
302 + .search-form .auto_suggestions {
303 + margin: 0;
304 + border: 0;
305 + }
306 +
307 + .widgetContent {
308 + margin-bottom: 0;
309 + }
310 +
311 + /* remove top/bottom border between results */
312 + .search-result, .sri-group, .inline-content+.search-result, .inline-content+.sri-group {
313 + border-top: 0;
314 + border-bottom: 0;
315 + }
316 +
317 + /* tighten line-height */
318 + .__sri-title .__sri_title_link {
319 + line-height: 1.65rem;
320 + }
321 +
322 + /* hide inline image preview */
323 + .__sri-body.--img .__sri-preview {
324 + display: none;
325 + }
326 +
327 + .__sri-body.--img .__sri-desc:before {
328 + display: none;
329 + }
330 +
331 + /* tighten up secondary results to match rhythm */
332 + .sri-group .sr-group {
333 + margin-top: 15px;
334 + }
335 +
336 + /* disable bottom-right distracting button on scroll up */
337 + .quick-search-btn {
338 + display: none;
339 + }
340 +
341 + /* fix video results spacing */
342 + #newsHeader, .headerVideos {
343 + margin-right: 0;
344 + }
345 +
346 + /* clean up page 2 results spacing */
347 + ._0_page-separator {
348 + margin-bottom: 15px;
349 + }
350 +
351 + /* give the page 2 button more bottom room */
352 + .main-footer {
353 + padding-bottom: 40px;
354 + }
355 +
356 + /* light-specific */
357 + .theme_light .search-form .search-form-icons {
358 + /* background: linear-gradient(90deg, transparent 0%, rgb(255, 255, 255) 50%); */
359 + }
360 + }
Newer Older