Extension to the Kagi CSS

minimal-kagi.css

/* Extension to the Kagi CSS */
/* https://kagi.com/settings?p=custom_css */
/* based on https://gist.github.com/joshellington/51765a15d8f780089619b638fc6aea6b */

/* Unique part */

.logo svg, .app-logo, .doggo_sit_a, .footer { display: none }
.m-h .m-app-logo { display: none }

.top_nav_links, #accountContainer .header_links { display: none }

.search-form .search-submit-wrapper .search-submit-wrapper-inner { display: none }

.search-form .search-input-box { /* Replace original theme CSS */
  border: 1px solid var(--header-border);
  border-radius: 23px;
  padding-left: 14px;
  padding-right: 25px;
}

/* Mobile */
.m-h-i .search-form-container { margin: none }
.m-h-i .search-form-container .search_form_box .search-form .search-input-box { 
  border: none;
  padding-left: 0;
}
.m-h .m-h-i { height: 46px }

.center-content-box .search_form_box .search-form {
  margin-left: 0;
  height: 46px;
  width: 100%;
  padding-top: 0;
}
.center-content-box .search_form_box .search-form .search-input-container {
  min-height: 46px;
}

body._0_auto-sug .search-input-container,body._0_auto-sug .search-input-container-kids {
    border-radius: 23px 23px 0 0
}


/* Original https://gist.github.com/joshellington/51765a15d8f780089619b638fc6aea6b */

:root {
  --font-main: "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-lufga: "Inter", 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: #000;
  --page-text: #F2E6D7;
  --primary: #F2E6D7;
  
  --header-bg: #181715;
  --header-border: #2B2621;

  --app-sidebar-bg: #181715;
  
  --input-bg: #1E1E1E;
  --color-search-input: #181715;

  --search-result-title: #F2E6D7;
  --search-result-title-hover: #BBB2A8;
  --search-result-content-text: #BBB2A8;
  --search-result-url-link: #BBB2A8;
  --search-result-date-bg: #2B2621;
  --search-result-date-new-bg: #603C12;

  --domain-rank-icon-color-trackers: #C97E26;
  
  --color_link: #C97E26;
  --primary-hover: #BBB2A8;
  --primary-visited: #766B5E;
  --related-item-bg: #1E1E1E;
  --inline-domain-tag-bg: #2B2621;
  --inline-header-border: #2B2621;
  --inline-header-title: #F2E6D7;
  --inline-widget-bg: #2B2621;
  
  --primary-700: #766B5E;
  --primary-800: #BBB2A8;

  --resultsummary-highlight: #C97E26;
  --resultsummary-highlight_text: #2B2621;

  --wiki-title: #F2E6D7;
  --wiki-content-links: #C97E26;
  --wiki-nw-links: #C97E26;
  --result-item-title-border: transparent;

  --site_info_bg: #2B2621;
  --site_info_bottom_bg: #1E1E1E;
  --btn-group-bg: #1E1E1E;

  --dd-hover-bg: #2B2621;
  --dd-list-input-bg: #2B2621;
  --kagi-accent: #2B2621;
  --filter-dd-bg: #2B2621;

  /* mobile */
  --m_sri_gap_color: #2B2621;
}

/* disable horizontal scrollbars */
body {
  overflow-x: hidden;
}

::selection {
  background-color: var(--color_link);
  color: #2B2621;
}

/* header, logo */
.app-logo.--kagi {
  top: 26px;
}

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

/* 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: #948677;
  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;
}

.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);  
}

.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;
}

/* mobile specific */
@media screen and (max-width: 767px) {
  /* header */
  .m-h {
    padding: 0;
  }

  .m-h-i {
    padding: 4px 16px;
  }

  .m-h .control-center-btn {
    position: relative;
    transition: none;
  }

  /* search box */
  .m-h .m-app-logo {
    justify-content: flex-start;
    width: auto;
    min-width: auto;
  }

  .search-form-container {
    padding-right: 0;
  }

  .s-f-w.--active .search-form-container {
    margin: 0;
    padding-right: 0;
  }

  .search-form-container {
    margin: 0 0 0 12px;
  }

  .search-form {
    width: 100%;
    padding-top: 4px;
  }

  .search-form .search_area {
    min-height: auto;
  }

  .s-f-w.--active .search-input-box {
    margin-left: 5px;
    padding-right: 0;
    max-width: calc(100% - 60px);
  }

  #searchFormSubmit {
    display: none;
  }

  .s-f-w.--active .m-b-arrow {
    position: relative;
    width: auto;
    height: auto;
    left: 0;
  }

  .m-h .search-form-icons .clear-search {
    margin-right: 4px;
  }

  .m-b-arrow {
    width: 35px;
    top: 0;
  }

  .search-form .auto_suggestions {
    left: -16px;
  }

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