Kagi Search^ Catppuccin Mocha Custom CSS

/* Source: https://repo.jcrabapple.com/jcrabapple/82208449e52b434a8e695c8124fa3f79 */

: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%); */
  }
}