kagi-catppuccin-mocha.css
· 8.6 KiB · CSS
Orginalformat
:root {
--font-main: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-lufga: "Poppins", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.theme_dark, .theme_moon_dark, .theme_moon_dark_conditional {
--app-bg: #1E1E2E; /* Base */
--page-text: #CDD6F4; /* Text */
--app-text: #CDD6F4; /* Text */
--primary: #CDD6F4; /* Text */
--primary-hover: #1E1E2E; /* Base */
--blue: #89b4fa; /* Blue */
--peach: #fab387; /* Peach */
--green: #a6e3a1; /* Green */
--crust: #11111b; /* Crust */
--header-bg: #1E1E2E; /* Base */
--header-border: #313244; /* Surface1 */
--app-sidebar-bg: #1E1E2E; /* Base */
--input-bg: #313244; /* Surface1 */
--color-search-input: #1E1E2E; /* Base */
--search-result-title: #CDD6F4; /* Text */
--search-result-title-hover: #BAC2DE; /* Subtext1 */
--search-result-content-text: #BAC2DE; /* Subtext1 */
--search-result-url-link: #BAC2DE; /* Subtext1 */
--search-result-date-bg: #313244; /* Surface1 */
--search-result-date-new-bg: #F38BA8; /* Red */
--domain-rank-icon-color-trackers: #F9E2AF; /* Yellow */
--color_link: #F9E2AF; /* Yellow */
--primary-hover: #BAC2DE; /* Subtext1 */
--primary-visited: #6C7086; /* Subtext0 */
--related-item-bg: #313244; /* Surface1 */
--inline-domain-tag-bg: #313244; /* Surface1 */
--inline-header-border: #313244; /* Surface1 */
--inline-header-title: #CDD6F4; /* Text */
--inline-widget-bg: #313244; /* Surface1 */
--primary-700: #6C7086; /* Subtext0 */
--primary-800: #BAC2DE; /* Subtext1 */
--resultsummary-highlight: #F9E2AF; /* Yellow */
--resultsummary-highlight_text: #313244; /* Surface1 */
--wiki-title: #CDD6F4; /* Text */
--wiki-content-links: #F9E2AF; /* Yellow */
--wiki-nw-links: #F9E2AF; /* Yellow */
--result-item-title-border: transparent;
--site_info_bg: #313244; /* Surface1 */
--site_info_bottom_bg: #313244; /* Surface1 */
--btn-group-bg: #fab387; /* Surface1 */
--dd-hover-bg: #313244; /* Surface1 */
--dd-list-input-bg: #313244; /* Surface1 */
--kagi-accent: #313244; /* Surface1 */
--filter-dd-bg: #313244; /* Surface1 */
/* mobile */
--m_sri_gap_color: #313244; /* Surface1 */
}
/* disable horizontal scrollbars */
body {
overflow-x: hidden;
}
::selection {
background-color: var(--color_link);
color: #313244; /* Surface1 */
}
.logo svg, .app-logo.--kagi {
stroke: var(--blue);
stroke-width: 2px;
}
.h-w #accountContainer .header_links, .search-form .search-form-icons svg {
color: var(--peach);
}
.mr-3 {
color: var(--green);
}
/* container-level */
.results-box {
margin-top: 10px;
}
/* update color borders for serp tabs */
.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 {
border-color: var(--primary);
}
/* button background color */
.btn.--lg, .btn.--primary, .search-form .searchFormSubmitBtn, .sfi_sep {
background-color: var(--blue);
}
#searchFormSubmit, .dropdown.dd_clean .dd-toggle-label, .c-p, ._0_summarize_link a {
color: var(--blue);
}
.footer .copyright, .serp_nav_start, .serp-nav .nav_item, .trigger svg {
color: var(--peach);
}
.px-4, .more_search_dropdown_box .k_ui_dropdown, .more_search_dropdown_box .k_ui_dropdown_data_list {
color: var(--peach);
}
.control-center-btn svg {
color: var(--peach);
}
.user-auth-bar, #bell_notification, .footer .footerInner ul li a, footer .footerInner ul li a {
color: var(--peach);
}
#bell_notification .notification_count {
background-color: var(--green);
}
.control-center-btn, .control-center-btn:hover {
color: var(--peach);
}
.quick-settings a, .app-content-box._0_content-bay a {
color: var(--peach);
}
/* disable links borders */
#layout-v2 a, .__sri-title .__sri_title_link, .__sri-title .__sri_title_link:hover, .wikipediaResult a:hover {
border-bottom: 0;
}
/* general input focus */
:focus-visible {
outline-color: var(--color_link);
}
/* result tweaks */
.__sri-title-box, .__sri-title, .__sri-url-box, .__sri-body {
padding-left: 0;
}
.__sri-title .__domain-favicon {
margin-left: -25px;
}
.__sri-preview {
left: 0;
}
.__sri-url-box {
margin-bottom: 4px;
}
.__sri-url {
font-size: 0.75rem;
}
.__sri-time {
background-color: transparent;
color: #6C7086; /* Subtext0 */
padding: 0;
}
.__sri-time::after {
content: "—";
display: inline-block;
padding: 0 4px;
}
.__sri-time.--new {
background: transparent;
color: var(--color_link);
}
.__sri-desc {
line-height: 1.57;
}
.newsResultItem .newsResultBody {
margin-top: 0;
}
.top_podcasts_box:empty {
display: none;
}
._0_app_theme_switch_box button.checked .theme_name, ._0_app_theme_switch_box button > input:checked + .theme_name {
background-color: var(--blue);
}
.freeScroller {
overflow-x: auto !important;
}
/* domain info popover */
#domainInfoModal .d-info-box-title-header {
background: transparent;
}
#domainInfoModal .d-info-domain-title {
text-shadow: none;
color: var(--color-primary);
}
#domainInfoModal .rakned-box-close {
color: var(--color-primary);
}
/* wolfram-alpha/"smart" things specific */
.widget_holder .wasb, .wasb, .wasb-ans {
font-family: var(--font-main);
}
.widget_holder .wasb {
border: 1px solid var(--color-primary-dim_3);
}
.suggestions_area {
border-bottom: 1px solid var(--color-primary-dim_3);
}
/* misc */
.wikipediaResult .wiki-title a:hover {
color: var(--color-primary_hover);
border-bottom: 0;
}
.wiki-desc-box {
font-size: 14px;
}
.k_ui_toggle_switch {
--active-bg-color: var(--color_link);
}
.footer .footerInner ul li, footer .footerInner ul li {
color: inherit;
}
.search-form .search-input-container {
border: 1px solid var(--blue);
}
.land_adv_search_btn {
color: var(--peach);
}
/* mobile specific */
@media screen and (max-width: 767px) {
/* header */
.m-h {
padding: 0;
}
.m-h .m-h-i {
height: auto;
}
.m-h .control-center-btn {
top: 32px;
z-index: 51;
}
.m-h .m-app-logo {
display: none;
}
/* search box */
.search-form {
height: auto;
}
.search_form_box {
width: 100%;
}
.search-form .search-input-container {
padding-inline: 0;
border: 0;
}
.search-form .search_area {
min-height: auto;
}
.search-form .search-input-box {
border: 1px solid var(--blue);
border-radius: 24px;
padding: 0 14px;
}
.s-f-w .search-form-container {
padding: 10px 46px 5px 10px;
}
.s-f-w.--active {
margin: 0;
}
.s-f-w.--active .search-input-container {
border: 0;
min-height: 64px;
}
.s-f-w.--active .search-form-container {
margin: 0;
padding: 0 10px;
height: 64px;
}
.s-f-w.--active .search-form {
padding-top: 0;
}
.s-f-w.--active .search-input-box {
margin-left: 4px;
padding-right: 0;
max-width: 100%;
}
.s-f-w.--active .search-form-icons {
margin-right: 0;
}
.s-f-w.--active .auto_suggestions {
top: 64px;
}
.s-f-w.--active .m-b-arrow {
position: relative;
width: auto;
height: auto;
left: 0;
}
#searchFormSubmit {
display: none;
}
.m-h .search-form-icons .clear-search {
margin-right: 4px;
}
.m-b-arrow {
width: 35px;
top: 0;
}
.search-form .auto_suggestions {
margin: 0;
border: 0;
}
.widgetContent {
margin-bottom: 0;
}
.landing-category-select .landing_cat_buttons > button.--active {
background-color: var(--green);
border: 1px solid var(--green);
color: var(--crust);
}
/* remove top/bottom border between results */
.search-result, .sri-group, .inline-content+.search-result, .inline-content+.sri-group {
border-top: 0;
border-bottom: 0;
}
/* tighten line-height */
.__sri-title .__sri_title_link {
line-height: 1.65rem;
}
/* hide inline image preview */
.__sri-body.--img .__sri-preview {
display: none;
}
.__sri-body.--img .__sri-desc:before {
display: none;
}
/* tighten up secondary results to match rhythm */
.sri-group .sr-group {
margin-top: 15px;
}
/* disable bottom-right distracting button on scroll up */
.quick-search-btn {
display: none;
}
/* fix video results spacing */
#newsHeader, .headerVideos {
margin-right: 0;
}
/* clean up page 2 results spacing */
._0_page-separator {
margin-bottom: 15px;
}
/* give the page 2 button more bottom room */
.main-footer {
padding-bottom: 40px;
}
/* light-specific */
.theme_light .search-form .search-form-icons {
/* background: linear-gradient(90deg, transparent 0%, rgb(255, 255, 255) 50%); */
}
}
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 */ |
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 { |
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 |