Like 0
Fork 0

Last active 1737057328

Revision cdfbc3fc1438fc9ad9627c94b98050f28858ce2e

kagi-catppuccin-mocha.css Raw
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 */
64body {
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}
361

Powered by Opengist ⋅ Load: 116ms⋅

English