Last active 1764621585

Kagi Catppuccin Latte/Mocha Theme

Revision f64f7a882eda6c9414535f03a785463d2041e68f

kagi-catppuccin-mocha.css Raw
1:root {
2 --rosewater: #dc8a78;
3 --flamingo: #dd7878;
4 --pink: #ea76cb;
5 --mauve: #8839ef;
6 --red: #d20f39;
7 --maroon: #e64553;
8 --peach: #fe640b;
9 --yellow: #df8e1d;
10 --green: #40a02b;
11 --teal: #179299;
12 --sky: #04a5e5;
13 --sapphire: #209fb5;
14 --blue: #1e66f5;
15 --lavender: #7287fd;
16 --text: #4c4f69;
17 --subtext1: #5c5f77;
18 --subtext0: #6c6f85;
19 --overlay2: #7c7f93;
20 --overlay1: #8c8fa1;
21 --overlay0: #9ca0b0;
22 --surface2: #acb0be;
23 --surface1: #bcc0cc;
24 --surface0: #ccd0da;
25 --base: #eff1f5;
26 --mantle: #e6e9ef;
27 --crust: #dce0e8;
28 --color-scheme: light;
29 --app-bg: var(--base);
30 --app-text: var(--text);
31 --header-bg: var(--crust);
32 --app-frame-bg: var(--app-bg);
33 --landing-bg: var(--app-bg);
34 --app-bg-opac: rgba(30, 30, 46, 0);
35 --bottom-bar-bg: var(--yellow);
36 --white: var(--text);
37 --graphite: var(--base);
38 --graphite-25: var(--overlay2);
39 --graphite-50: var(--flamingo);
40 --graphite-70: var(--pink);
41 --graphite-100: var(--mauve);
42 --graphite-200: var(--red);
43 --graphite-300: var(--maroon);
44 --graphite-400: var(--peach);
45 --graphite-500: var(--yellow);
46 --graphite-600: var(--green);
47 --graphite-700: var(--teal);
48 --graphite-800: var(--sky);
49 --graphite-850: var(--sapphire);
50 --graphite-900: var(--blue);
51 --graphite-950: var(--lavender);
52 --graphite-1000: var(--text);
53 --chrome-25: var(--rosewater);
54 --chrome-50: var(--flamingo);
55 --chrome-70: var(--pink);
56 --chrome-100: var(--mauve);
57 --chrome-200: var(--red);
58 --chrome-300: var(--maroon);
59 --chrome-400: var(--peach);
60 --chrome-500: var(--yellow);
61 --chrome-600: var(--green);
62 --chrome-700: var(--teal);
63 --chrome-800: var(--sky);
64 --chrome-850: var(--sapphire);
65 --chrome-900: var(--blue);
66 --chrome-950: var(--lavender);
67 --chrome-1000: var(--text);
68 --purple-300: var(--lavender);
69 --purple-400: var(--blue);
70 --purple-500: var(--sapphire);
71 --purple-600: var(--sky);
72 --purple-800: var(--teal);
73 --purple-900: var(--green);
74 --primary: var(--text);
75 --primary-25: var(--overlay2);
76 --primary-50: var(--flamingo);
77 --primary-70: var(--pink);
78 --primary-100: var(--mauve);
79 --primary-200: var(--red);
80 --primary-300: var(--maroon);
81 --primary-400: var(--peach);
82 --primary-500: var(--yellow);
83 --primary-600: var(--green);
84 --primary-700: var(--teal);
85 --primary-800: var(--sky);
86 --primary-850: var(--sapphire);
87 --primary-900: var(--blue);
88 --primary-950: var(--lavender);
89 --primary-1000: var(--text);
90 --primary-g: var(--text);
91 --primary-g-2: var(--red);
92 --primary-g-6: var(--green);
93 --primary-g-8: var(--sky);
94 --primary-300-solid: var(--maroon);
95 --warning: var(--peach);
96 --info: var(--sky);
97 --danger: var(--red);
98 --success: var(--green);
99 --calm: var(--surface0);
100 --link: var(--purple-600);
101 --primary-hover: var(--purple-600);
102 --primary-hover-hover: var(--purple-500);
103 --primary-visited: var(--teal);
104 --kagi-highlight: var(--yellow);
105 --beta-tag-bg: var(--yellow);
106 --beta-tag-text: var(--base);
107 --beta-tag-inside-corners: var(--maroon);
108 --kagi-light-cream: var(--rosewater);
109 --kagi-accent: var(--surface1);
110 --kagi-sky: var(--sky);
111 --kagi-sky-b: var(--sapphire);
112 --kagi-sky-i: var(--sky);
113 --kagi-orange: var(--maroon);
114 --resultsummary-highlight: var(--surface2);
115 --resultsummary-highlight_text: var(--text);
116 --kagi-graphite: var(--text);
117 --kagi-graphite-s: var(--overlay2);
118 --kagi-graphite-text: var(--base);
119 --kagi-graphite-ia: var(--text);
120 --kagi-graphite-ia-color: var(--base);
121 --inner-shadow: rgba(0, 0, 0, .05);
122 --settings-app-inner-bg: var(--app-bg);
123 --box-shadow: rgba(0, 0, 0, .09);
124 --box-shadow-15: rgba(0, 0, 0, .15);
125 --ranked-box-shadow: rgba(0, 0, 0, .25);
126 --color-search-input-border: var(--mauve);
127 --color-search-input: var(--base);
128 --color-search-input-opac: var(--app-bg-opac);
129 --color-danger: var(--red);
130 --input-bg: var(--app-bg);
131 --btn-primary-bg: var(--mauve);
132 --btn-primary-text: var(--crust);
133 --btn-primary-color: var(--base);
134 --btn-group-bg: var(--base);
135 --nav_n_se_line: var(--yellow);
136 --nav_n_im_line: var(--blue);
137 --nav_n_vi_line: var(--red);
138 --nav_n_ne_line: var(--mauve);
139 --nav_n_ma_line: var(--green);
140 --secondary: var(--base);
141 --app-sidebar-item-border: rgba(255, 255, 255, .2);
142 --app-sidebar-link: rgba(255, 255, 255, .6);
143 --app-sidebar-nav-item-bg_hover: var(--yellow);
144 --app-sidebar-nav-item-icon_hover: var(--base);
145 --result-item-title-border: var(--peach);
146 --result-item-title-border_hover: var(--primary-hover);
147 --result-item-title-visited-border: var(--pink);
148 --result-rank-icon-stroke_promoted: var(--text);
149 --result-item-highlight: var(--sky);
150 --search-result-content-text: var(--text);
151 --search-result-url-link: var(--green);
152 --search-result-title: var(--text);
153 --search-result-title-hover: var(--primary-hover);
154 --search-result-date-bg: var(--surface0);
155 --search-result-date-new-bg: var(--base);
156 --search-result-date-new: var(--sky);
157 --domain-rank-icon-color-ban: var(--red);
158 --domain-rank-icon-color-lower: var(--red);
159 --domain-rank-icon-color-normal: var(--red);
160 --domain-rank-icon-color-higher: var(--red);
161 --domain-rank-icon-color-boosted: var(--red);
162 --domain-rank-icon-color-trackers: var(--peach);
163 --domain-rank-icon-color-trackers-hover: var(--maroon);
164 --domain-rank-icon-color-scam: var(--peach);
165 --domain-rank-icon-color-scam-hover: var(--maroon);
166 --ranked-box-connection-secure: var(--green);
167 --ranked-box-connection-insecure: var(--red);
168 --ranked-box-tracker-desc-danger: var(--red);
169 --ranked-box-tracker-desc-clear: var(--green);
170 --inline-header-title: var(--text);
171 --inline-widget-bg: var(--surface0);
172 --inline-widget-hover-bg: var(--surface1);
173 --inline-header-border: var(--red);
174 --inline-domain-tag-bg: var(--pink);
175 --related-item-bg: var(--surface0);
176 --related-item-hover-bg: var(--surface1);
177 --video-item-bg: var(--surface0);
178 --auto-sugg-bg_hover: var(--surface0);
179 --provider-breakdown_server: var(--sky);
180 --provider-breakdown_client: var(--peach);
181 --provider-breakdown_speed1: var(--yellow);
182 --provider-breakdown_speed2: var(--red);
183 --provider-breakdown_speed3: var(--red);
184 --widget-progress_bar: var(--text);
185 --translate-fc_icon: var(--text);
186 --rating-star_background: var(--surface1);
187 --wiki-content-links: var(--text);
188 --m_sri_gap_color: var(--surface1);
189 --ai_chat_buble_a_bg: var(--kagi-accent);
190 --ai_chat_buble_q_bg: var(--app-bg);
191 --ai_chat_buble_dd_q_bg: var(--kagi-accent);
192 --ai_chat_buble_dd_a_bg: var(--surface1);
193 --ai_chat_buble_a_text: var(--app-text);
194 --ai_chat_buble_q_text: var(--app-text);
195 --ai_chat_input_text: var(--app-text);
196 --ai_chat_input_button: var(--teal);
197 --doggo-color-1: var(--text);
198 --doggo-bg-color: var(--app-bg);
199 --doggo-stroke-color: var(--maroon);
200 --landing-page-clouds-opacity: 1;
201 --quick-search-bg: var(--text);
202 --quick-search-icon: var(--base);
203 --app-logo: var(--text);
204 --app-logo-bg: var(--yellow);
205 --filters-clear-btn-icon: var(--maroon);
206 --filter-dd-bg: var(--surface2);
207 --k-tooltip-bg: var(--background-color-sky);
208 --k-tooltip-text: var(--text);
209 --dd-hover-bg: var(--mauve);
210 --dd-hover-color: var(--text);
211 --dd-list-input-bg: var(--input-bg);
212 --not-found-bubble-bg: var(--surface1);
213 --site_info_bg: var(--app-bg);
214 --site_info_bottom_bg: var(--kagi-accent);
215 --code-bg: var(--base);
216 --code-border: var(--overlay0);
217 --code-k: var(--mauve);
218 --code-s: var(--green);
219 --code-cm-c1: var(--maroon);
220 --code-n: var(--mauve);
221 --code-p: var(--text);
222 --background-color-sky: var(--sky);
223 --checkbox-bg: var(--mauve);
224 --checkbox-check: var(--crust);
225 --as-dd-border: var(--app-bg);
226 --dd-list-input-bg: var(--base);
227 --icon-purple: var(--sky);
228 --onboarding_theme_options_dark_visibility: none;
229 --onboarding_theme_options_light_visibility: flex;
230 --onb_theme_light_preview_box: flex;
231 --onb_theme_calm_blue_preview_box: none;
232 --onb_theme_royal_blue_preview_box: none;
233 --onb_theme_moon_dark_preview_box: none;
234 --image_brightness: 100%;
235}
236
237.theme_moon_dark {
238 --rosewater: #f5e0dc;
239 --flamingo: #f2cdcd;
240 --pink: #f5c2e7;
241 --mauve: #cba6f7;
242 --red: #f38ba8;
243 --maroon: #eba0ac;
244 --peach: #fab387;
245 --yellow: #f9e2af;
246 --green: #a6e3a1;
247 --teal: #94e2d5;
248 --sky: #89dceb;
249 --sapphire: #74c7ec;
250 --blue: #89b4fa;
251 --lavender: #b4befe;
252 --text: #cdd6f4;
253 --subtext1: #bac2de;
254 --subtext0: #a6adc8;
255 --overlay2: #9399b2;
256 --overlay1: #7f849c;
257 --overlay0: #6c7086;
258 --surface2: #585b70;
259 --surface1: #45475a;
260 --surface0: #313244;
261 --base: #1e1e2e;
262 --mantle: #181825;
263 --crust: #11111b;
264 --color-scheme: dark;
265 --app-bg: var(--base);
266 --app-text: var(--text);
267 --header-bg: var(--app-bg);
268 --inline-widget-bg: var(--surface0);
269 --inline-widget-hover-bg: var(--surface1);
270 --btn-primary-bg: var(--text);
271 --btn-primary-text: var(--base);
272 --checkbox-bg: var(--yellow);
273 --checkbox-check: var(--base);
274 --onboarding_theme_options_dark_visibility: flex;
275 --onboarding_theme_options_light_visibility: none;
276 --onb_theme_light_preview_box: none;
277 --onb_theme_moon_dark_preview_box: flex;
278 --k-tooltip-bg: var(--background-color-sky);
279 --k-tooltip-text: var(--text);
280}
281
282@media (prefers-color-scheme: dark) {
283 .theme_moon_dark_conditional {
284 --rosewater: #f5e0dc;
285 --flamingo: #f2cdcd;
286 --pink: #f5c2e7;
287 --mauve: #cba6f7;
288 --red: #f38ba8;
289 --maroon: #eba0ac;
290 --peach: #fab387;
291 --yellow: #f9e2af;
292 --green: #a6e3a1;
293 --teal: #94e2d5;
294 --sky: #89dceb;
295 --sapphire: #74c7ec;
296 --blue: #89b4fa;
297 --lavender: #b4befe;
298 --text: #cdd6f4;
299 --subtext1: #bac2de;
300 --subtext0: #a6adc8;
301 --overlay2: #9399b2;
302 --overlay1: #7f849c;
303 --overlay0: #6c7086;
304 --surface2: #585b70;
305 --surface1: #45475a;
306 --surface0: #313244;
307 --base: #1e1e2e;
308 --mantle: #181825;
309 --crust: #11111b;
310 --color-scheme: dark;
311 --app-bg: var(--base);
312 --app-text: var(--text);
313 --header-bg: var(--app-bg);
314 --inline-widget-bg: var(--surface0);
315 --inline-widget-hover-bg: var(--surface1);
316 --btn-primary-bg: var(--text);
317 --btn-primary-text: var(--base);
318 --checkbox-bg: var(--yellow);
319 --checkbox-check: var(--base);
320 --onboarding_theme_options_dark_visibility: flex;
321 --onboarding_theme_options_light_visibility: none;
322 --onb_theme_light_preview_box: none;
323 --onb_theme_moon_dark_preview_box: flex;
324 --k-tooltip-bg: var(--background-color-sky);
325 --k-tooltip-text: var(--text);
326 }
327
328.landing-category-select .landing_cat_buttons > .nav-item.n_se::after, .landing-category-select .landing_cat_buttons > .nav-item.n_im::after, .landing-category-select .landing_cat_buttons > .nav-item.n_vi::after, .landing-category-select .landing_cat_buttons > .nav-item.n_ne::after, .landing-category-select .landing_cat_buttons > .nav-item.n_ma::after {
329 display: none;
330}
331
332 .k_ui_toggle_switch input:checked ~ .k_ui_toggle_switch_bar:after {
333 background-color: var(--surface0);
334 border-color: var(--surface1);
335 }
336
337 .k_ui_toggle_switch input:checked ~ .k_ui_toggle_switch_bar {
338 background: var(--green);
339 border-color: var(--primary-25);
340 }
341
342 .tag-selector:hover {
343 background: var(--surface1);
344 }
345
346 .advanced-search-modal-backdrop:before {
347 background-color: unset;
348 }
349
350 .advanced-search-modal {
351 background-color: var(--crust);
352 }
353
354 .ranked-box-wrapper,
355 .d-info-body,
356 dialog {
357 background-color: var(--crust);
358 }
359
360#tags .untagged {
361 background: var(--ai_chat_buble_a_bg);
362}
363
364.promptOptionsSelector .default-assistants li.option:hover, .promptOptionsSelector .recommended-assistants li.option:hover, .promptOptionsSelector .recommended-assistants li.option[aria-selected="true"], .promptOptionsSelector .default-assistants li.option[aria-selected="true"], .promptOptionsSelector .default-assistants li.option.info-show:hover {
365 background-color: var(--ai_chat_buble_a_bg);
366 }
367
368.prompt-options {
369 background: var(--base);
370 margin-top: 18px;
371}
372
373 .k-ui-tooltip,
374 ._0_img-results .item .ai-generated-badge .ai-info,
375 .tooltip_base,
376 p.m-0 {
377 color: var(--surface0);
378 }
379
380 .ranked-box-wrapper,
381 .ranked-box-center,
382 .d-info-section-desc,
383 .d-info-section,
384 .ranked-c-adjust-title {
385 color: var(--text);
386 }
387
388 @media all and (min-device-width: 766px) {
389 form#form {
390 margin: 0;
391 border: 1px var(--peach) solid;
392 border-radius: 35px;
393 padding: 12px 20px;
394 }
395 ._0_more_search_box {
396 max-width: 300px;
397 width: unset;
398 }
399 }
400}
401
402body {
403 font-family: Poppins, sans-serif !important;
404}
405
406.onboarding-tip {
407 background: var(--crust) !important;
408}
409
410._0_copied_tooltip {
411 left: 50% !important;
412}
413
414.kite-nav ul {
415 background-color: var(--ai_chat_buble_a_bg);
416}
417
418#tags > .tag,
419#tags > .untagged {
420 color: var(--text);
421}
422
423#tags #tags-add {
424 color: var(--text);
425}
426
427.results_summary_text_box sup > a {
428 color: var(--crust);
429}
430
431.promptOptionsSelector .custom-assistants {
432 background: unset;
433}
434
435header .header-btn:hover {
436 background-color: var(--background-color-sky);
437}
438
439.new-tooltip.dia-tooltip a {
440 color: var(--cheatsh_ef9);
441 text-decoration: underline;
442}
443
444.citation .source {
445 color: var(--crust);
446}
447
448.cluster section.did-you-know {
449 background-color: var(--box-shadow-15);
450}
451
452.cluster section.perspectives ul li {
453 background-color: var(--ai_chat_buble_a_bg);
454}
455
456.cluster .cluster-header .badge {
457 background-color: var(--accent-info);
458}
459
460.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover {
461 background-color: var(--surface2) !important;
462}
463
464.dropdown .dd-list ._0_list_items li:hover,
465.sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover {
466 color: var(--overlay0) !important;
467}
468
469.k_ui_dropdown_data_list .list_items > div:hover {
470 background-color: unset !important;
471 color: unset !important;
472 outline: 0;
473 text-decoration: none;
474}
475
476span.domain,
477#chat_box .chat_bubble .sources .domain {
478 background-color: var(--surface0) !important;
479 color: var(--text) !important;
480 padding: 2px 4px !important;
481 border-radius: 3px !important;
482}
483
484span.__domain-name,
485.widget-simple .__domain-name,
486.bg-p-50 {
487 background-color: var(--surface0) !important;
488}
489
490.d-info-section-desc,
491.d-info-section,
492.ranked-box-wrapper,
493.d-info-body,
494.ranked-c-adjust-title {
495 color: var(--text);
496}
497
498.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
499 background: var(--primary-g-6);
500}
501
502.k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar {
503 --border-color: var(--primary-g-6);
504}
505
506.k-tooltip {
507 background-color: var(--primary-100);
508}
509
510:focus-visible {
511 border-radius: 5px;
512 outline: 2px solid var(--peach);
513}
514
515div.sidebar-box {
516 background-color: var(--mantle) !important;
517}
518
519.thread-list > li:is(.active, :hover, :focus-within) {
520 background-color: var(--surface1) !important;
521}
522
523#thread-sidebar-collapse:hover {
524 color: var(--crust);
525}
526
527.threads-pane .header,
528.sidebar-box > .tags-pane {
529 background: 0 !important;
530}
531
532.tag-selector:has(:checked) {
533 background: var(--surface1) !important;
534}
535
536header {
537 background: var(--crust) !important;
538}
539
540header .header-btn:hover {
541 color: var(--crust);
542}
543
544.landing-category-select .landing_cat_buttons > button.--active {
545 align-items: center;
546 border: 1px solid var(--primary-400);
547 border-radius: 999px;
548 color: var(--primary-500);
549 display: flex;
550 flex-shrink: 0;
551 gap: 4px;
552 padding: 8px 16px;
553 background-color: var(--surface0);
554 font-weight: 700;
555}
556
557.landing-category-select .landing_cat_buttons > button {
558 border-bottom: 2px solid transparent;
559 color: var(--primary);
560 font-size: .875rem;
561 height: 47px;
562 margin: 0;
563 min-width: unset !important;
564 padding: 0 8px;
565 position: relative;
566}
567
568.landing-category-select .landing_cat_buttons > button.n_se.--active,
569.landing-category-select .landing_cat_buttons > button.n_se:hover {
570 border-bottom: 2px solid var(--nav_n_ma_line) !important;
571}
572
573.landing-category-select .landing_cat_buttons > button.n_im.--active,
574.landing-category-select .landing_cat_buttons > button.n_im:hover,
575.landing-category-select .landing_cat_buttons > button.n_vi.--active,
576.landing-category-select .landing_cat_buttons > button.n_vi:hover {
577 border-bottom: 2px solid var(--nav_n_vi_line) !important;
578}
579
580.landing-category-select .landing_cat_buttons > button.n_ne.--active,
581.landing-category-select .landing_cat_buttons > button.n_ne:hover {
582 border-bottom: 2px solid var(--nav_n_ne_line) !important;
583}
584
585.landing-category-select .landing_cat_buttons > button.n_ma.--active,
586.landing-category-select .landing_cat_buttons > button.n_ma:hover {
587 border-bottom: 2px solid var(--nav_n_ma_line) !important;
588}
589
590.landing_cat_buttons {
591 border-bottom: 1px solid var(--primary-200);
592 display: flex;
593 justify-content: space-between;
594 width: 100%;
595 padding-bottom: 10px;
596 padding-top: 0px;
597}
598
599#adv_search_btn:checked + #mainContent .search-form .landing-category-select {
600 top: 65px;
601}
602
603.prompt-options button:hover,
604.prompt-options label:hover,
605.promptOptionsSelector .custom-assistants li.option:hover,
606.promptOptionsSelector .default-assistants li.option.focus,
607.promptOptionsSelector .default-assistants li.option:hover,
608.promptOptionsSelector .custom-assistants span a:hover,
609.promptOptionsSelector .custom-assistants li.option.focus {
610 background-color: unset !important;
611}
612
613.promptOptionsSelector .custom-assistants li.option,
614.promptOptionsSelector .default-assistants li.option {
615 color: var(--text);
616}
617
618#chat_box > div:nth-child(1),
619[aria-label="You said:"] {
620 background-color: var(--surface0) !important;
621 padding: 20px !important;
622 border: 2px solid var(--overlay0) !important;
623 border-radius: 25px !important;
624}
625
626.chat_bubble {
627 padding-block: 32px;
628 position: relative;
629 border: 2px solid var(--overlay0);
630 border-radius: 25px;
631 margin-top: 25px;
632 margin-bottom: 10px;
633 padding: 20px;
634 background-color: var(--crust);
635}
636
637.chat_bubble:focus-within:before,
638.chat_bubble:hover:before {
639 background-color: unset !important;
640}
641
642.chat_bubble .actions {
643 display: inline-flex !important;
644 gap: 8px !important;
645 flex-direction: row !important;
646}
647
648#chat_box .chat_bubble .actions [data-action]:is(a, button):hover {
649 background: var(--surface1);
650}
651
652#chat_box .chat_bubble .content sup {
653 background-color: var(--surface1);
654 color: var(--text);
655}
656
657#chat_box .chat_bubble .content sup:hover {
658 background-color: var(--surface2);
659}
660
661.message-info li .value {
662 background-color: var(--surface0);
663 color: var(--text);
664 padding: 2px 5px;
665 border-radius: 4px;
666}
667
668#prompt-box:before {
669 border-top: 2px solid var(--peach);
670}
671
672#dictation-button:hover {
673 color: var(--crust);
674}
675
676input[type=date] {
677 color: var(--primary-600) !important;
678}
679
680._0_filters-clear-btn {
681 color: var(--crust) !important;
682}
683
684._0_filters-clear-btn i svg {
685 color: var(--base) !important;
686}
687
688#uploadedItems .item .type,
689#uploadedItems .item .icon,
690#uploadedItems .item .name {
691 color: var(--crust);
692}
693
694.POI-item-back .text {
695 color: var(--crust);
696}
697
698#popover-privacy > p:nth-child(3) > span > i {
699 color: var(--crust) !important;
700}
701
702.search-result,
703.sri-group {
704 border-bottom: unset !important;
705}
706
707.inline-content + .search-result,
708.inline-content + .sri-group {
709 border-top: unset !important;
710}
711
712.s-f-w.--active .search_area {
713 padding: 10px !important;
714}
715
716.main-center-box > * {
717 margin-inline: auto;
718 max-width: 850px;
719 padding-inline: 16px;
720 width: 100%;
721}
722
723.__sri-title .__sri_title_link {
724 border-bottom: 0;
725}
726
727#thread-sidebar-visible:checked ~ #sidebar-backdrop,
728.quick-settings,
729.quick-settings-footer,
730.promptOptionsSelector,
731.promptOptionsSelector .search-bar,
732.k_ui_dropdown_data_list,
733._0_more_search_box,
734.dropdown .dd-list,
735.chat_bubble .actions,
736.citation,
737.message-info,
738.thread-more-menu,
739.threads-pane {
740 background-color: var(--crust) !important;
741}
742
743._0_lenses {
744 background-color: unset !important;
745}
746
747.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar:after {
748 background-color: var(--crust) !important;
749 border-color: unset !important;
750}
751
752#internet-access-mobile:has(:checked) {
753 color: var(--surface0);
754}
755
756.team_badge {
757 color: var(--crust);
758}
759
760@media (min-width: 1280px) {
761 #promptBox:placeholder-shown + .rich-placeholder {
762 padding-left: 25px;
763 }
764}
765
766@media all and (max-device-width: 766px) {
767 .cluster section.did-you-know {
768 background-color: var(--box-shadow-15);
769 }
770
771 .cluster section.perspectives ul li {
772 background-color: var(--ai_chat_buble_a_bg);
773 }
774
775 .cluster .cluster-header .badge {
776 background-color: var(--accent-info);
777 }
778
779 .bg-p-50 {
780 background-color: var(--surface0);
781 }
782
783 body:not(._0_processing) #form:has(#promptBox:placeholder-shown):has(#uploadedItems:empty) #submit {
784 color: var(--surface0);
785 }
786
787 .landing-category-select .landing_cat_buttons > button.--active {
788 align-items: center;
789 border: 1px solid var(--primary-400);
790 border-radius: 999px;
791 color: var(--primary-500);
792 display: flex;
793 flex-shrink: 0;
794 gap: 4px;
795 padding: 8px 16px;
796 background-color: var(--surface0);
797 font-weight: 700;
798 }
799
800 .landing-category-select .landing_cat_buttons > button {
801 border: 0;
802 color: var(--primary);
803 font-size: .875rem;
804 height: 47px;
805 margin: 0;
806 min-width: unset !important;
807 padding: 0 8px;
808 position: relative;
809 }
810
811 #thread-sidebar-visible:checked ~ #sidebar-backdrop {
812 background-color: unset !important;
813 }
814
815 .chat_bubble .actions,
816 .editing .actions {
817 border-radius: 10%;
818 color: var(--primary-600);
819 display: flex;
820 padding: 4px;
821 }
822
823 .landing_cat_buttons {
824 border-bottom: 0 !important;
825 display: flex;
826 justify-content: space-between;
827 width: 100%;
828 }
829
830 #adv_search_btn:checked + #mainContent .search-form .landing-category-select {
831 top: 85px;
832 }
833}
834
835#PreviewImageViewImageBtn,
836#PreviewImageViewPageBtn {
837 color: unset !important;
838}
839
840.ranked-box-wrapper,
841.d-info-body,
842dialog {
843 background-color: var(--crust);
844}
845
846.ranked-box-wrapper,
847.ranked-box-center,
848.d-info-section-desc,
849.d-info-section,
850.ranked-c-adjust-title {
851 color: var(--text);
852}