Beğen 0
Çatalla 0

Son aktivite 1747414621

Kagi Catppuccin Latte/Mocha Theme

Revizyon d45f0a07f9a3ad177c770e30723256798a338dab

kagi-catppuccin-mocha.css Ham
1:root {
2 --rosewater: #f5e0dc;
3 --flamingo: #f2cdcd;
4 --pink: #f5c2e7;
5 --mauve: #cba6f7;
6 --red: #f38ba8;
7 --maroon: #eba0ac;
8 --peach: #fab387;
9 --yellow: #f9e2af;
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;
27 --crust: #11111b;
28
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: light;
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/* Light theme variables */
242@media (prefers-color-scheme: light) {
243 :root {
244 /* Catppuccin Latte (light) colors */
245 --rosewater: #dc8a78;
246 --flamingo: #dd7878;
247 --pink: #ea76cb;
248 --mauve: #8839ef;
249 --red: #d20f39;
250 --maroon: #e64553;
251 --peach: #fe640b;
252 --yellow: #df8e1d;
253 --green: #40a02b;
254 --teal: #179299;
255 --sky: #04a5e5;
256 --sapphire: #209fb5;
257 --blue: #1e66f5;
258 --lavender: #7287fd;
259 --text: #4c4f69;
260 --subtext1: #5c5f77;
261 --subtext0: #6c6f85;
262 --overlay2: #7c7f93;
263 --overlay1: #8c8fa1;
264 --overlay0: #9ca0b0;
265 --surface2: #acb0be;
266 --surface1: #bcc0cc;
267 --surface0: #ccd0da;
268 --base: #eff1f5;
269 --mantle: #e6e9ef;
270 --crust: #dce0e8;
271
272 /* Set light mode scheme */
273 --color-scheme: light;
274
275 /* Adjust specific UI elements for light mode */
276 --app-bg: var(--base);
277 --app-text: var(--text);
278 --header-bg: var(--crust);
279 --inline-widget-bg: var(--surface0);
280 --inline-widget-hover-bg: var(--surface1);
281
282 /* Ensure proper contrast for buttons and interactive elements */
283 --btn-primary-bg: var(--mauve);
284 --btn-primary-text: var(--crust);
285 --checkbox-bg: var(--mauve);
286 --checkbox-check: var(--crust);
287 }
288}
289
290/* Media query for mobile devices */
291
292@media all and (max-device-width: 766px) {
293.bg-p-50 {
294 background-color: var(--surface0); /* Use a darker color on mobile */
295}
296.landing-category-select .landing_cat_buttons > button.--active {
297 align-items: center;
298 border: 1px solid var(--primary-400);
299 border-radius: 999px;
300 color: var(--primary-500);
301 display: flex;
302 flex-shrink: 0;
303 gap: 4px;
304 padding: 8px 16px;
305 background-color: var(--surface0);
306}
307
308.landing-category-select .landing_cat_buttons>button {
309 border: none;
310 color:var(--primary);
311 font-size:.875rem;
312 height:47px;
313 margin:0;
314 min-width:unset!important;
315 padding:0 8px;
316 position:relative
317}
318.landing-category-select .landing_cat_buttons>button.--active {
319 font-weight:700;
320}
321.landing-category-select .landing_cat_buttons>button.n_se.--active,
322.landing-category-select .landing_cat_buttons>button.n_se:hover {
323 border-bottom:2px solid var(--nav_n_ma_line) !important;
324}
325.landing-category-select .landing_cat_buttons>button.n_im.--active,
326.landing-category-select .landing_cat_buttons>button.n_im:hover {
327 border-bottom:2px solid var(--nav_n_vi_line) !important;
328}
329.landing-category-select .landing_cat_buttons>button.n_vi.--active,
330.landing-category-select .landing_cat_buttons>button.n_vi:hover {
331 border-bottom:2px solid var(--nav_n_vi_line) !important;
332}
333.landing-category-select .landing_cat_buttons>button.n_ne.--active,
334.landing-category-select .landing_cat_buttons>button.n_ne:hover {
335 border-bottom:2px solid var(--nav_n_ne_line) !important;
336}
337.landing-category-select .landing_cat_buttons>button.n_ma.--active,
338.landing-category-select .landing_cat_buttons>button.n_ma:hover {
339 border-bottom:2px solid var(--nav_n_ma_line) !important;
340}
341.landing_cat_buttons {
342 border-bottom:none !important;
343 display:flex;
344 justify-content:space-between;
345 width:100%;
346}
347.search-result, .sri-group {
348 border-bottom: unset !important;
349}
350.inline-content+.search-result, .inline-content+.sri-group {
351 border-top: unset !important;
352}
353}
354
355/* Desktop CSS */
356
357body {
358 font-family: Poppins, sans-serif !important;
359}
360
361.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover {
362 background-color: var(--surface2) !important; /* Darker background */
363 /* Optionally, keep the original text color or slightly lighten it if needed */
364 /* color: var(--text); */
365}
366
367div.sidebar-box {
368 background-color: var(--mantle) !important; /* Darker background for sidebar-box */
369}
370
371.thread-list > li:is(.active, :hover, :focus-within) {
372 background-color: var(--surface1) !important; /* Darker background for active, hover, and focus-within states */
373}
374
375.bg-p-50 {
376 background-color: var(--primary-50); /* Or whichever color you currently have set */
377}
378
379.dropdown .dd-list ._0_list_items li:hover {
380 color: var(--overlay0) !important; /* Darker font color on hover */
381}
382
383.sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover {
384 color: var(--overlay0) !important; /* Darker text color on hover */
385}
386
387span.domain {
388 background-color: var(--surface0) !important; /* Use a darker background color */
389 color: var(--text) !important; /* Ensure text color is readable against the background */
390 padding: 2px 4px !important; /* Optional: Add some padding for visual comfort */
391 border-radius: 3px !important; /* Optional: Add a slight border radius */
392}
393
394#chat_box .chat_bubble .sources .domain {
395 background-color: var(--surface0); /* Darker background color */
396 color: var(--text); /* Ensure readable text color */
397 padding: 1px 3px; /* Optional: Adjust padding as needed */
398 border-radius: 3px; /* Optional: Add a slight border-radius */
399}
400
401span.__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, .promptOptionsSelector .custom-assistants li.option.focus, .widget-simple .__domain-name, .bg-p-50 {
402 background-color: var(--surface0) !important;
403}
404
405.message-info li .value {
406 background-color: var(--surface0); /* Darker background color */
407 color: var(--text); /* Ensure readable text color */
408 padding: 2px 5px; /* Optional: Add some padding */
409 border-radius: 4px; /* Optional: Add a border-radius */
410}
411
412#chat_box .chat_bubble .content sup {
413 background-color: var(--surface1); /* Darker background color */
414 color: var(--text); /* Ensure readable text color */
415}
416
417#chat_box .chat_bubble .content sup:hover {
418 background-color: var(--surface2); /* Slightly lighter on hover */
419}
420
421.landing-category-select .landing_cat_buttons > button.--active {
422 align-items: center;
423 border: 1px solid var(--primary-400);
424 border-radius: 999px;
425 color: var(--primary-500);
426 display: flex;
427 flex-shrink: 0;
428 gap: 4px;
429 padding: 8px 16px;
430 background-color: var(--surface0);
431}
432
433.landing-category-select .landing_cat_buttons>button {
434 border-bottom:2px solid transparent;
435 color:var(--primary);
436 font-size:.875rem;
437 height:47px;
438 margin:0;
439 min-width:unset!important;
440 padding:0 8px;
441 position:relative
442}
443.landing-category-select .landing_cat_buttons>button.--active {
444 font-weight:700
445}
446.landing-category-select .landing_cat_buttons>button.n_se.--active,
447.landing-category-select .landing_cat_buttons>button.n_se:hover {
448 border-bottom:2px solid var(--nav_n_ma_line) !important;
449}
450.landing-category-select .landing_cat_buttons>button.n_im.--active,
451.landing-category-select .landing_cat_buttons>button.n_im:hover {
452 border-bottom:2px solid var(--nav_n_vi_line) !important;
453}
454.landing-category-select .landing_cat_buttons>button.n_vi.--active,
455.landing-category-select .landing_cat_buttons>button.n_vi:hover {
456 border-bottom:2px solid var(--nav_n_vi_line) !important;
457}
458.landing-category-select .landing_cat_buttons>button.n_ne.--active,
459.landing-category-select .landing_cat_buttons>button.n_ne:hover {
460 border-bottom:2px solid var(--nav_n_ne_line) !important;
461}
462.landing-category-select .landing_cat_buttons>button.n_ma.--active,
463.landing-category-select .landing_cat_buttons>button.n_ma:hover {
464 border-bottom:2px solid var(--nav_n_ma_line) !important;
465}
466.landing_cat_buttons {
467 border-bottom:1px solid var(--primary-200);
468 display:flex;
469 justify-content:space-between;
470 width:100%
471}
472
473._0_filters-clear-btn {
474 color: var(--crust) !important;
475}
476
477._0_filters-clear-btn i svg {
478 color: var(--base) !important;
479}
480
481#adv_search_btn:checked + #mainContent .search-form .landing-category-select {
482top: 85px;
483}
484
485.landing_cat_buttons {
486padding-bottom: 10px;
487}
488
489._0_copied_tooltip {
490left: -45px;
491}
492
493.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
494background: var(--primary-g-6);
495}
496
497.k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar {
498--border-color: var(--primary-g-6);
499}
500input[type="date"] {
501 color: var(--primary-600) !important;
502}
503.sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover {
504 color: unset !important;
505}
506.dropdown .dd-list .checked.inner-label:hover {
507 color: var(--crust) !important;
508}
509.dropdown .dd-list .inner-label:hover {
510 color: var(--crust);
511}
512.k_ui_dropdown_data_list .list_items > div:hover {
513 background-color: unset !important;
514 color: unset !important;
515 outline: none;
516 text-decoration: none;
517}
518#uploadedItems .item .type, #uploadedItems .item .icon, #uploadedItems .item .name {
519 color: var(--crust);
520}
521#form .uploadLabel:hover {
522 color: var(--crust);
523}
524.POI-item-back .text {
525 color: var(--crust);
526}
527.k-tooltip {
528 background-color: var(--primary-100);
529}
530#adv_search_btn:checked + #mainContent .search-form .landing-category-select {
531 top: 65px;
532}
533header {
534 background: var(--crust) !important;
535}
536.prompt-options label:hover {
537 background-color: unset !important;
538}
539.prompt-options button:hover {
540 background-color: unset !important;
541}
542#chat_box .chat_bubble .actions [data-action]:is(a,button):hover {
543 background: var(--surface1);
544}
545#dictation-button:hover {
546 color: var(--crust);
547}
548
549.chat_bubble:focus-within:before,.chat_bubble:hover:before {
550 background-color: unset !important;
551}
552
553#popover-privacy > p:nth-child(3) > span > i {
554 color: var(--crust) !important;
555}
556.main-center-box>* {
557 margin-inline: auto;
558 max-width: 850px;
559 padding-inline: 16px;
560 width: 100%;
561}
562#chat_box > div:nth-child(1), [aria-label="You said:"] {
563 background-color: var(--surface0) !important;
564 padding: 20px !important;
565 border: 2px solid var(--overlay0) !important;
566 border-radius: 25px !important;
567}
568.chat_bubble {
569 padding-block: 32px;
570 position: relative;
571 border: 2px solid var(--overlay0);
572 border-radius: 25px;
573 margin-top: 25px;
574 padding: 20px;
575 background-color: var(--crust);
576}
577#prompt-box {
578 border-top: 2px solid var(--peach);
579}
580:focus-visible {
581 border-radius: 5px;
582 outline: 2px solid var(--peach);
583}
584.s-f-w.--active .search_area {
585 padding: 10px !important;
586}
587.chat_bubble .actions {
588 display: inline-flex !important;
589 gap: 8px !important;
590 flex-direction: row !important;
591}
592#thread-sidebar-collapse:hover {
593 color: var(--crust);
594}
595header .header-btn:hover {
596 color: var(--crust);
597}
598.promptOptionsSelector .custom-assistants li.option, .promptOptionsSelector .default-assistants li.option {
599 color: var(--text);
600}
601
602/* OPTIONAL disable underline on title links in search result */
603.__sri-title .__sri_title_link {
604 border-bottom: none;
605}

Opengist tarafından desteklenmektedir ⋅ Load: 299ms⋅

Türkçe