Kagi Search Engine Beautification Share

Dec 18, 2024#技术508

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

Kagi is a paid search engine focused on user privacy and high-quality results, offering an ad-free experience, customization options, privacy protection, and AI features. The author had a positive experience during a three-month free trial and customized Kagi's appearance to match their blog's color scheme. They provide CSS code for users interested in personalizing their Kagi interface. The customization includes adjustments to colors for various elements, hover effects, and button styles.

Kagi is a paid search engine focused on user privacy and high-quality search results, featuring an ad-free experience, highly customizable, privacy protection, and AI capabilities. I previously received a three-month free trial through a link, and the overall experience was good. To optimize my experience using Kagi, I customized it according to the color style of the blog, which interested friends can refer to.

Learn More About Kagi#

Effect Images#

Steps to Operate#

Kagi - Top right corner Setting - Appearance - Custom CSS, copy the content below into the text box and save it.

(Non-professionals, just fiddling around, please don't touch if you don't like it, thank you 🙏)

:root {
    --result-item-title-border: var(--highlight-color);
    --border-color: #f3f4f7;
    --highlight-color: #98c1d9;
  }

.theme_light {
    --title-color: #293241;
    --text-color: #475671;
    --after-color: #A9AAAE;   
    --other-color: #ffffff;
    --primary:#475671;
    --primary-hover:#98c1d9;
    --search-result-content-text:#475671;
     }
  
  .theme_dark, .theme_moon_dark {
    --title-color: #ffffff;
    --text-color: #ffffff;
    --after-color: #475671;
    --other-color: #475671;
    --search-result-content-text: #ffffff;
    --image_brightness: 85%; }
  
  
  
  a.__sri_title_link._ext_t._0_sri_title_link._0_URL {
    font-weight: 700;
    font-style: normal;
    color: var(--title-color);
    border-bottom: none;
  }
  
  a.__sri_title_link._ext_t._0_sri_title_link._0_URL:hover {
    color: var(--highlight-color);  /* Color on hover */
    border-bottom: none;
  }
  
  a.__sri_title_link._ext_t._0_sri_title_link._0_URL:visited {
    color: var(--after-color);  /* Color after click */
  }
  
  a.__sri_title_link._ext_t._0_sri_title_link._0_URL:visited:hover {
    color: var(--highlight-color);  /* Color after click */
  }

  a._0_URL {
    color: var(--title-color);
    border-bottom: 0px solid var(--highlight-color);
  }
  
  div.__sri_url_path_box {
    color: var(--text-color);
  }
  
  div div div {
    color: var(--text-color);
  }
  
  div div svg {
    color: var(--title-color);
  }
  
  a._0_URL:hover  {
    color: var(--highlight-color);
    border-bottom: 0px solid var(--highlight-color);
  }
  
  a._0_URL:visited {
    color: var(--after-color);
  }
  
  a._0_URL:visited:hover {
    color: var(--highlight-color);
  }
  
  a.nav_item._0_query_link_item {
    color: var(--title-color);
    font-weight: 700;
  }
  
  a.inlineHeader:hover {
    color: var(--highlight-color);
  }
  
  a.btn.--secondary.--block{
    color: var(--text-color);
    border-color: var(--text-color);
    font-weight: 700;
  }
  
  a.btn.--secondary.--block:hover {
    color: var(--highlight-color);
    border-color: var(--highlight-color);
    font-weight: 700;
  }
  
  span.smw-less:hover {
    color: var(--highlight-color);
  }
  label.smw:hover {
    color: var(--highlight-color);
  }
  span.smw-more:hover {
    color: var(--highlight-color);
  }
  
  div._0_results_summary_box.__0_show {
    border: 2px solid var(--border-color);  /* Border color */
    border-radius: 14px;        /* Rounded corners */
    padding: 20px;              /* Increased padding */
  }
  
  
  .doggo_sit_a {
    display: none;
  }
  
  div div b {
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    color: var(--title-color);
  }
  
  a.share_url_footer_content.copyToClipLink:hover {
    color: var(--highlight-color);
  }
  
  
  /* Style buttons */
  .btn.--primary {
    background-color: var(--title-color);
    border: 1px solid var(--title-color);
    color: var(--other-color);
    transition: ease 150ms;
  }
  
  .btn.--primary:hover {
    background-color: var(--title-color);
    color: var(--other-color);
    border: 1px solid var(--title-color);
  }
  
  /* Hover styles */
  .btn.--primary:hover {
    background-color: var(--title-color);
    border: 1px solid var(--highlight-color);
    transform: scale(1.05);
  }
  
  /* Outer glow on hover */
  .btn.--primary:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 0 1rem 0.5rem var(--highlight-color);
    opacity: 0.6;
  }
  
  
  .k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
    background: var(--highlight-color);
    background: linear-gradient(90deg, var(--highlight-color), var(--highlight-color));
    box-shadow: 0 0 0 1px var(--highlight-color);
  }
  
.serp-nav .nav_item.n_se:after,
.serp-nav .nav_item.n_im:after,
.serp-nav .nav_item.n_vi:after,
.serp-nav .nav_item.n_ne:after,
.serp-nav .nav_item.n_ma:after {
  background-color: var(--highlight-color);
}
  
  
  .landing-category-select .landing_cat_buttons>button.n_se.--active, .landing-category-select .landing_cat_buttons>button.n_se:hover {
    border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .landing-category-select .landing_cat_buttons>button.n_ne.--active, .landing-category-select .landing_cat_buttons>button.n_ne:hover {
      border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .landing-category-select .landing_cat_buttons>button.n_ma.--active, .landing-category-select .landing_cat_buttons>button.n_ma:hover {
      border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .landing-category-select .landing_cat_buttons>button.n_vi.--active, .landing-category-select .landing_cat_buttons>button.n_vi:hover {
      border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .landing-category-select .landing_cat_buttons>button.n_im.--active, .landing-category-select .landing_cat_buttons>button.n_im:hover {
      border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .k_ui_dropdown.__basic .k_ui_dropdown_data_list .list_items>a, .k_ui_dropdown.__basic .k_ui_dropdown_data_list .list_items>label {
    color:var(--text-color);
  }
  
.quick-search-btn svg {
  color: var(--other-color);
}

.quick-search-btn{
  background:var(--highlight-color);
  backgroud-color:var(--highlight-color);
}

div.__sri-url-box {
  margin-bottom: 5px;
}
  
/* mobile buttons */

.mob .landing-category-select .landing_cat_buttons > button.--active {
  border: 1px solid var(--highlight-color);
  background-color: var(--highlight-color); 
  color: var(--text-color);}

:root { --result-item-title-border: var(--highlight-color); --border-color: #f3f4f7; --highlight-color: #98c1d9; } .theme_light { --title-color: #293241; --text-color: #475671; --after-color: #A9AAAE; --other-color: #ffffff; --primary:#475671; --primary-hover:#98c1d9; --search-result-content-text:#475671; } .theme_dark, .theme_moon_dark { --title-color: #ffffff; --text-color: #ffffff; --after-color: #475671; --other-color: #475671; --search-result-content-text: #ffffff; --image_brightness: 85%; } a.__sri_title_link._ext_t._0_sri_title_link._0_URL { font-weight: 700; font-style: normal; color: var(--title-color); border-bottom: none; } a.__sri_title_link._ext_t._0_sri_title_link._0_URL:hover { color: var(--highlight-color); /* Color on hover */ border-bottom: none; } a.__sri_title_link._ext_t._0_sri_title_link._0_URL:visited { color: var(--after-color); /* Color after click */ } a.__sri_title_link._ext_t._0_sri_title_link._0_URL:visited:hover { color: var(--highlight-color); /* Color after click */ } a._0_URL { color: var(--title-color); border-bottom: 0px solid var(--highlight-color); } div.__sri_url_path_box { color: var(--text-color); } div div div { color: var(--text-color); } div div svg { color: var(--title-color); } a._0_URL:hover { color: var(--highlight-color); border-bottom: 0px solid var(--highlight-color); } a._0_URL:visited { color: var(--after-color); } a._0_URL:visited:hover { color: var(--highlight-color); } a.nav_item._0_query_link_item { color: var(--title-color); font-weight: 700; } a.inlineHeader:hover { color: var(--highlight-color); } a.btn.--secondary.--block{ color: var(--text-color); border-color: var(--text-color); font-weight: 700; } a.btn.--secondary.--block:hover { color: var(--highlight-color); border-color: var(--highlight-color); font-weight: 700; } span.smw-less:hover { color: var(--highlight-color); } label.smw:hover { color: var(--highlight-color); } span.smw-more:hover { color: var(--highlight-color); } div._0_results_summary_box.__0_show { border: 2px solid var(--border-color); /* Border color */ border-radius: 14px; /* Rounded corners */ padding: 20px; /* Increased padding */ } .doggo_sit_a { display: none; } div div b { font-size: 24px; font-weight: 700; font-style: normal; color: var(--title-color); } a.share_url_footer_content.copyToClipLink:hover { color: var(--highlight-color); } /* Style buttons */ .btn.--primary { background-color: var(--title-color); border: 1px solid var(--title-color); color: var(--other-color); transition: ease 150ms; } .btn.--primary:hover { background-color: var(--title-color); color: var(--other-color); border: 1px solid var(--title-color); } /* Hover styles */ .btn.--primary:hover { background-color: var(--title-color); border: 1px solid var(--highlight-color); transform: scale(1.05); } /* Outer glow on hover */ .btn.--primary:hover::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; box-shadow: 0 0 1rem 0.5rem var(--highlight-color); opacity: 0.6; } .k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar { background: var(--highlight-color); background: linear-gradient(90deg, var(--highlight-color), var(--highlight-color)); box-shadow: 0 0 0 1px var(--highlight-color); } .serp-nav .nav_item.n_se:after, .serp-nav .nav_item.n_im:after, .serp-nav .nav_item.n_vi:after, .serp-nav .nav_item.n_ne:after, .serp-nav .nav_item.n_ma:after { background-color: var(--highlight-color); } .landing-category-select .landing_cat_buttons>button.n_se.--active, .landing-category-select .landing_cat_buttons>button.n_se:hover { border-bottom: solid var(--highlight-color); color: var(--text-color); } .landing-category-select .landing_cat_buttons>button.n_ne.--active, .landing-category-select .landing_cat_buttons>button.n_ne:hover { border-bottom: solid var(--highlight-color); color: var(--text-color); } .landing-category-select .landing_cat_buttons>button.n_ma.--active, .landing-category-select .landing_cat_buttons>button.n_ma:hover { border-bottom: solid var(--highlight-color); color: var(--text-color); } .landing-category-select .landing_cat_buttons>button.n_vi.--active, .landing-category-select .landing_cat_buttons>button.n_vi:hover { border-bottom: solid var(--highlight-color); color: var(--text-color); } .landing-category-select .landing_cat_buttons>button.n_im.--active, .landing-category-select .landing_cat_buttons>button.n_im:hover { border-bottom: solid var(--highlight-color); color: var(--text-color); } .k_ui_dropdown.__basic .k_ui_dropdown_data_list .list_items>a, .k_ui_dropdown.__basic .k_ui_dropdown_data_list .list_items>label { color:var(--text-color); } .quick-search-btn svg { color: var(--other-color); } .quick-search-btn{ background:var(--highlight-color); backgroud-color:var(--highlight-color); } div.__sri-url-box { margin-bottom: 5px; } /* mobile buttons */ .mob .landing-category-select .landing_cat_buttons > button.--active { border: 1px solid var(--highlight-color); background-color: var(--highlight-color); color: var(--text-color);}