Custom CSS for Kagi

Custom CSS for Kagi.css

/******** Typography ********/ 
body {
  font-family: system-ui;
}

/* URL host + path, only applies when URL Display Style is Split, not Classic */
.__sri_url_path_box .host {
  font-weight: bold;
}

/* TITLE font for each result */
.__sri-title-box {
  font-weight: 450; /* 400 is default */
}


/******** Light Theme Color Tweaks ********/
@media (prefers-color-scheme: light) {

:root {

  --search-result-content-text: rgb(0 0 0);                         /* Results body text */
  --search-result-url-link:     var(--search-result-content-text);  /* Results URL domain name (when split) */
  --search-result-url-link:     #222;

  /* Date capsules, regular and new */
  --search-result-date-bg:      rgb(232 232 232);
  --search-result-date-new-bg:  rgb(222 222 242);
  --search-result-date-new:     var(--search-result-content-text);
}


/* Path part of URL in ’split’ mode */
.__sri_url_path_box .path {
  color: rgb(102 102 102);
}

/* Remove (none) or tweak bottom border from links */
.__sri_title_link._0_sri_title_link._0_URL {
  border-bottom-color: #ccc;
}
.__sri_title_link._0_sri_title_link._0_URL:hover {
  border-bottom-color: var(--search-result-title-hover);
}

} /* @media … light */