Last active 1747414621

Kagi Catppuccin Latte/Mocha Theme

jcrabapple's Avatar jcrabapple revised this gist 1738778785. Go to revision

1 file changed, 4 insertions

kagi-catppuccin-mocha.css

@@ -518,6 +518,10 @@ header {
518 518 #prompt-box {
519 519 border-top: 2px solid var(--peach);
520 520 }
521 + :focus-visible {
522 + border-radius: 5px;
523 + outline: 3px solid var(--peach);
524 + }
521 525
522 526
523 527 /* OPTIONAL disable underline on title links in search result

jcrabapple's Avatar jcrabapple revised this gist 1738778523. Go to revision

1 file changed, 24 insertions

kagi-catppuccin-mocha.css

@@ -494,6 +494,30 @@ header {
494 494 #popover-privacy > p:nth-child(3) > span > i {
495 495 color: var(--crust) !important;
496 496 }
497 + .main-center-box>* {
498 + margin-inline: auto;
499 + max-width: 850px;
500 + padding-inline: 16px;
501 + width: 100%;
502 + }
503 + #chat_box > div:nth-child(1) {
504 + background-color: var(--surface0);
505 + padding: 20px;
506 + border: 2px solid var(--overlay0);
507 + border-radius: 25px;
508 + }
509 + .chat_bubble {
510 + padding-block: 32px;
511 + position: relative;
512 + border: 2px solid var(--overlay0);
513 + border-radius: 25px;
514 + margin-top: 25px;
515 + padding: 20px;
516 + background-color: var(--crust);
517 + }
518 + #prompt-box {
519 + border-top: 2px solid var(--peach);
520 + }
497 521
498 522
499 523 /* OPTIONAL disable underline on title links in search result

jcrabapple's Avatar jcrabapple revised this gist 1738602362. Go to revision

1 file changed, 15 deletions

kagi-catppuccin-mocha.css

@@ -295,12 +295,6 @@
295 295 justify-content:space-between;
296 296 width:100%;
297 297 }
298 - #promptBoxButtonsGroup {
299 - border: 2px solid var(--primary-25) !important;
300 - padding: 0px !important;
301 - border-radius: 999px !important;
302 - margin-top: 5px !important;
303 - }
304 298 }
305 299
306 300 /* Desktop CSS */
@@ -501,15 +495,6 @@ header {
501 495 color: var(--crust) !important;
502 496 }
503 497
504 - #promptBoxButtonsGroup {
505 - border: 2px solid var(--primary-25);
506 - padding: 10px;
507 - border-radius: 999px;
508 - }
509 -
510 - .buttons-left {
511 - padding: 10px;
512 - }
513 498
514 499 /* OPTIONAL disable underline on title links in search result
515 500 .__sri-title .__sri_title_link {

jcrabapple's Avatar jcrabapple revised this gist 1738601304. Go to revision

1 file changed, 39 insertions, 20 deletions

kagi-catppuccin-mocha.css

@@ -238,29 +238,12 @@
238 238 --icon-purple: var(--sky);
239 239 }
240 240
241 - .k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover {
242 - background-color: var(--surface2) !important; /* Darker background */
243 - /* Optionally, keep the original text color or slightly lighten it if needed */
244 - /* color: var(--text); */
245 - }
246 -
247 - div.sidebar-box {
248 - background-color: var(--mantle) !important; /* Darker background for sidebar-box */
249 - }
250 -
251 - .thread-list > li:is(.active, :hover, :focus-within) {
252 - background-color: var(--surface1) !important; /* Darker background for active, hover, and focus-within states */
253 - }
241 + /* Media query for mobile devices */
254 242
243 + @media all and (max-device-width: 766px) {
255 244 .bg-p-50 {
256 - background-color: var(--primary-50); /* Or whichever color you currently have set */
257 - }
258 -
259 - /* Media query for mobile devices */
260 - @media (max-width: 767px) {
261 - .bg-p-50 {
262 245 background-color: var(--surface0); /* Use a darker color on mobile */
263 - }
246 + }
264 247 .landing-category-select .landing_cat_buttons > button.--active {
265 248 align-items: center;
266 249 border: 1px solid var(--primary-400);
@@ -312,6 +295,32 @@ div.sidebar-box {
312 295 justify-content:space-between;
313 296 width:100%;
314 297 }
298 + #promptBoxButtonsGroup {
299 + border: 2px solid var(--primary-25) !important;
300 + padding: 0px !important;
301 + border-radius: 999px !important;
302 + margin-top: 5px !important;
303 + }
304 + }
305 +
306 + /* Desktop CSS */
307 +
308 + .k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover {
309 + background-color: var(--surface2) !important; /* Darker background */
310 + /* Optionally, keep the original text color or slightly lighten it if needed */
311 + /* color: var(--text); */
312 + }
313 +
314 + div.sidebar-box {
315 + background-color: var(--mantle) !important; /* Darker background for sidebar-box */
316 + }
317 +
318 + .thread-list > li:is(.active, :hover, :focus-within) {
319 + background-color: var(--surface1) !important; /* Darker background for active, hover, and focus-within states */
320 + }
321 +
322 + .bg-p-50 {
323 + background-color: var(--primary-50); /* Or whichever color you currently have set */
315 324 }
316 325
317 326 .dropdown .dd-list ._0_list_items li:hover {
@@ -492,6 +501,16 @@ header {
492 501 color: var(--crust) !important;
493 502 }
494 503
504 + #promptBoxButtonsGroup {
505 + border: 2px solid var(--primary-25);
506 + padding: 10px;
507 + border-radius: 999px;
508 + }
509 +
510 + .buttons-left {
511 + padding: 10px;
512 + }
513 +
495 514 /* OPTIONAL disable underline on title links in search result
496 515 .__sri-title .__sri_title_link {
497 516 border-bottom: none;

jcrabapple's Avatar jcrabapple revised this gist 1738427301. Go to revision

1 file changed, 23 insertions

kagi-catppuccin-mocha.css

@@ -468,6 +468,29 @@ input[type="date"] {
468 468 #adv_search_btn:checked + #mainContent .search-form .landing-category-select {
469 469 top: 65px;
470 470 }
471 + header {
472 + background: var(--crust) !important;
473 + }
474 + .prompt-options label:hover {
475 + background-color: unset !important;
476 + }
477 + .prompt-options button:hover {
478 + background-color: unset !important;
479 + }
480 + #chat_box .chat_bubble .actions [data-action]:is(a,button):hover {
481 + background: var(--surface1);
482 + }
483 + #dictation-button:hover {
484 + color: var(--crust);
485 + }
486 +
487 + .chat_bubble:focus-within:before,.chat_bubble:hover:before {
488 + background-color: unset !important;
489 + }
490 +
491 + #popover-privacy > p:nth-child(3) > span > i {
492 + color: var(--crust) !important;
493 + }
471 494
472 495 /* OPTIONAL disable underline on title links in search result
473 496 .__sri-title .__sri_title_link {

jcrabapple's Avatar jcrabapple revised this gist 1737057328. Go to revision

1 file changed, 3 insertions

kagi-catppuccin-mocha.css

@@ -465,6 +465,9 @@ input[type="date"] {
465 465 .k-tooltip {
466 466 background-color: var(--primary-100);
467 467 }
468 + #adv_search_btn:checked + #mainContent .search-form .landing-category-select {
469 + top: 65px;
470 + }
468 471
469 472 /* OPTIONAL disable underline on title links in search result
470 473 .__sri-title .__sri_title_link {

jcrabapple's Avatar jcrabapple revised this gist 1737048351. Go to revision

1 file changed, 6 insertions, 1 deletion

kagi-catppuccin-mocha.css

@@ -464,4 +464,9 @@ input[type="date"] {
464 464 }
465 465 .k-tooltip {
466 466 background-color: var(--primary-100);
467 - }
467 + }
468 +
469 + /* OPTIONAL disable underline on title links in search result
470 + .__sri-title .__sri_title_link {
471 + border-bottom: none;
472 + } */

jcrabapple's Avatar jcrabapple revised this gist 1736881017. Go to revision

1 file changed, 3 insertions

kagi-catppuccin-mocha.css

@@ -461,4 +461,7 @@ input[type="date"] {
461 461 }
462 462 .POI-item-back .text {
463 463 color: var(--crust);
464 + }
465 + .k-tooltip {
466 + background-color: var(--primary-100);
464 467 }

jcrabapple's Avatar jcrabapple revised this gist 1736880832. Go to revision

1 file changed, 3 insertions

kagi-catppuccin-mocha.css

@@ -458,4 +458,7 @@ input[type="date"] {
458 458 }
459 459 #form .uploadLabel:hover {
460 460 color: var(--crust);
461 + }
462 + .POI-item-back .text {
463 + color: var(--crust);
461 464 }

jcrabapple's Avatar jcrabapple revised this gist 1736124889. Go to revision

1 file changed, 6 insertions

kagi-catppuccin-mocha.css

@@ -452,4 +452,10 @@ input[type="date"] {
452 452 color: unset !important;
453 453 outline: none;
454 454 text-decoration: none;
455 + }
456 + #uploadedItems .item .type, #uploadedItems .item .icon, #uploadedItems .item .name {
457 + color: var(--crust);
458 + }
459 + #form .uploadLabel:hover {
460 + color: var(--crust);
455 461 }