Zuletzt aktiv 1737057328

Änderung 4b4b0b8e44f2f67344f12c6cb93e10db5e1d1d09

kagi-catppuccin-mocha.css Orginalformat
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 --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 */
67body {
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 {
77stroke: var(--blue);
78stroke-width: 2px;
79}
80
81.h-w #accountContainer .header_links, .search-form .search-form-icons svg {
82color: var(--peach);
83}
84
85.mr-3 {
86color: 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 {
101background-color: var(--blue);
102}
103
104#searchFormSubmit, .dropdown.dd_clean .dd-toggle-label, .c-p, ._0_summarize_link a {
105color: var(--blue);
106}
107
108.footer .copyright, .serp_nav_start, .serp-nav .nav_item, .trigger svg {
109color: var(--peach);
110}
111
112.px-4, .more_search_dropdown_box .k_ui_dropdown, .more_search_dropdown_box .k_ui_dropdown_data_list {
113color: var(--peach);
114}
115
116.control-center-btn svg {
117color: var(--peach);
118}
119
120.user-auth-bar, #bell_notification, .footer .footerInner ul li a, footer .footerInner ul li a {
121color: var(--peach);
122}
123
124#bell_notification .notification_count {
125background-color: var(--green);
126}
127
128.control-center-btn, .control-center-btn:hover {
129color: var(--peach);
130}
131
132.quick-settings a, .app-content-box._0_content-bay a {
133color: 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 {
197background-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 {
274 display: none;
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 }
422}
423