Dark theme for Kagi based on DuckDuckGo (+ UI improvements)

kagi-dark-theme.css

:root {
  --card-color: #222;;
  --card-radius: 5px;
  --card-padding: 20px;
  --sub-result-inset: 20px;
  --border-color: var(--header-border);
  --related-item-bg: #222;
  --search-result-gap: 8px;
  --background-color: #161616; /* #222 */
  --app-sidebar-bg: #161616;
  --header-bg: #161616;
  --inline-widget-bg: #222;
  --header-bg_hover: #161616;
  --header-bg-opac: none;
  --app-logo-bg: inherit;
  --app-logo: var(--app-sidebar-link);
  --auto-suggestion-bg: #333333;
  --filter-dd-bg: #222;
  --wiki_box_margin: 20px;
}

/* Image scroll/overflow */
._0_img-results .images-wrapper {
  height: 100%;
}

._0_img-results .item {
  margin: 2px;
}

/* Widget scroll/overflow + add borders */
.searchResultAnswers .widgetItems {
  padding-bottom: 5px;
  overflow-x: auto !important;
  justify-content: space-between;
}

.searchResultAnswers {
  padding-bottom: 0px;
}

.s-pag-w {
  display: none;
}

.searchResultAnswers .widgetItems a {
  min-width: 32%;
  max-width: 32%;
}

.searchResultAnswer {
  border: 1px solid var(--border-color);
}

/* Align search/nav with results */
.app-header .app-content, .app-nav .app-content {
    max-width: var(--app_content_width);
}

/* Adjust sidebar margin/padding */
.right-content-box {
  padding-left: 0px;
}

.filter-toggle-btn {
  right: calc(-43px - var(--wiki_box_margin));
}


/* Rounded vertically centered search bar with autosuggestions */
.search-form {
  background-color: var(--auto-suggestion-bg);
  border: 1px solid var(--auto-suggestion-border);
  margin-top: 4px;
  height: 36px;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  border-radius: var(--card-radius);
}


.auto_suggestions {
  border-top: none !important;
  left: -1px;
  top: 36px;
  box-sizing: content-box;
}

._0_bangs_wrpr ._0_search_tag {
  height: 100%;
  top: 0px;
}

.search-form .search-form-icons {
  background-color: inherit;
  padding-left: 0px;
  height: 100%;
  margin-left: 10px;
}

.search-input-title {
  display: none;
}

/* Search input focus and size for rounded */
.search-input-container {
  width: 81%;
  height: 100%;
  border-bottom: none;
  align-self: flex-start;
}

.search-form .search-input:focus {
  width: 100%;
  height: 100%;
}

.search-form .search-input {
  width: 100%;
  height: 100%;
  padding-top: 0px;
  padding-left: 10px;
  padding-bottom: 0px;
  border: none;
  background: inherit;
}

.m-h .search-input-container {
  width: 100%;
}

/* Autosugesstion item size */
.auto_suggestions .auto_item {
  min-height: 34px;
}

/* Change size of orb. Waiting on kagi fix */
.icon-d-info {
  width: 18px;
  height: 18px;
}

/* Hide beta tag */
.app-beta-tag {
  visibility: hidden;
}

/* Borders so same background has distinctions */
.app-sidebar-content, .app-logo {
  border-right: 1px solid var(--border-color);
}

.m-h-i .app-logo {
  border-right: none;
}

.m-h .menu-icon {
  margin-top: 4px;
  width: 36px;
  height: 38px;
}

/* Mobile border */
.content-area {
  margin-left: 5px;
  margin-right: 5px;
}

/* Adjust the keyboard select bar */
.sri-group > ._0_sri-highlight::before {
  left: -12px;
  height: 80%;
  top: 10%;
}

.sr-group > ._0_sri-highlight::before {
  left: -12px;
  height: 80%;
  top: 20%;
}

._0_provider-content > ._0_sri-highlight::before {
  left: 8px;
  height: 65%;
  top: 17.5%;
}

/* Hide the default mobile cards */
#layout-v2 > div:first-child:not(.widget) {
  border-top: none;
}

#layout-v2 > div:first-child {
  border-top: none;
}

.inline-content + .search-result, .inline-content + .sri-group {
  border-top: none;
}

.m-h {
  padding: 0px;
}



/* Custom card styling for search result group */
.sri-group {
  background: var(--card-color);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  border-bottom: none;
  margin-bottom: var(--search-result-gap)
}

.search-result {
  background: var(--card-color);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  border-top: none;
  border-bottom: none;
  margin-bottom: var(--search-result-gap)
}       

/* Custom sub result grouoping */
.sri-group > .search-result {
  background: inherit !important;
  border-radius: 0px !important;
  padding: 0px !important;
}

.sr-group > .__srgi:first-of-type {
  border-top: none !important;
  margin-top: 0px !important;
 }

.__srgi {
  border-top: 2px solid var(--border-color);
  margin: 0px !important;
  padding-top: 10px;
  margin-top: 10px !important;
}

.sr-group {
  padding-left: var(--sub-result-inset) !important;
  padding-right: var(--sub-result-inset) !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}


/* Hide bottom border for results, but custom for hover */
.__sri-title a {
  border-bottom: none !important;
}

.__srgi-title a {
  border-bottom: none !important;
}

.__sri_title_link:hover {
  border-bottom: 1px solid white !important;
}