Kagi Deep Purple theme made by TheLastEnvoy

deep_purple_css_kagi

/* Root variables - Define custom color scheme with purple theme */
:root {
  --search-result-title: var(--color-primary);
  --result-item-title-border: var(--color-primary);
  --icon-new-ia-color: initial;
  --circle-color: rgb(123, 113, 188);
  --kagi-sky-i: rgb(123, 113, 188) !important;
  --hover-color: #7b71bc;       /* Main purple accent color */
  --dark-bg: #17191e;           /* Dark background */
  --darker-bg: #0d0e11;         /* Darker background shade */
  --purple-gray-bg: #232238;    /* Custom purplish-gray for containers */
}

/* Set monospace font for the entire interface */
body {
  font-family: monospace;
}

/* Change Kagi logo color to match theme */
.logo > svg:nth-child(1),
.logo_kagi > svg:nth-child(1),
.logo_kagi_small > svg:nth-child(1),
svg[viewBox="0 0 105 55"][data-darkreader-inline-invert] {
  fill: var(--hover-color);
  color: var(--hover-color);
}

/* Customize dog mascot circle color */
.doggo_sit_a > svg:nth-child(1) > path:nth-child(23),
.doggo_sit_a > svg:nth-child(1) > path:nth-child(24) {
  fill: var(--hover-color);
}

/* Change dog mascot medal color to match theme */
.doggo_sit_a > svg:nth-child(1) > ellipse:nth-child(19) {
  fill: #7b71bc;
}

/* Style links and titles with bottom border and transition */
.__sri-title .__sri_title_link,
.__srgi-title a,
._0_summarize_link a,
.k_ui_dropdown .k_ui_dropdown_first_item,
a {
  color: var(--search-result-title);
  border-bottom: 1px solid var(--result-item-title-border);
  transition: color 0.15s ease;
}

/* Style visited links */
.__sri-title .__sri_title_link:visited,
.__srgi-title a:visited {
  color: var(--color-primary_visited);
  border-bottom-color: var(--color-primary_visited);
}

/* Hover effects for all links */
.__sri-title .__sri_title_link:hover,
.__srgi-title a:hover,
._0_summarize_link a:hover,
.k_ui_dropdown .k_ui_dropdown_first_item:hover,
a:hover,
.dropdown .dd-toggle-label:hover,
._0_results_summary_links.ol a:hover {
  color: var(--hover-color);
  border-bottom-color: var(--hover-color);
}

/* Restyle yellow buttons with dark background */
.btn.--yellow {
  background-color: #191919;
  border: 1px solid #191919;
  color: #FFFFFF;
  transition: all 0.15s ease;
}

/* Add hover effects to buttons - scale and glow */
.btn.--yellow:hover {
  border-color: var(--hover-color);
  transform: scale(1.05);
}

/* Create purple glow effect on button hover */
.btn.--yellow:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem var(--hover-color);
  opacity: 0.6;
}

/* Style search modes and categories with yellow background */
.landing-category-select button.n_se.--active,
.landing-category-select button.n_se:hover,
._0_d_info_ranking.k_ui_btn_group .search_mode_box_s input:checked + a.k_ui_btn,
._0_sri-w-highlight .search_mode_box_s a.searchResultAnswer,
.search_mode_box_s a.--active,
.search_mode_box_s a._0_sri-w-highlight.box,
.search_mode_box_s a.box:hover {
  background-color: #ffb319;
  border-color: #ffb319;
  color: var(--color-primary);
}

/* Adjust text color for search answer elements */
._0_sri-w-highlight .search_mode_box_s a.searchResultAnswer,
.search_mode_box_s ._0_sri-w-highlight a.searchResultAnswer,
.search_mode_box_s a.--active {
  color: #191919;
}

/* Change toggle switch color to purple */
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
  background-color: var(--hover-color);
}

/* Style search results and boxes with custom background */
.sri-group,
.search-result,
.scene,
.weather_days_box {
  background-color: var(--purple-gray-bg);
  border-radius: 12px;
  margin-bottom: 1.3rem;
  padding: 1rem;
}

/* Apply custom background to specific widgets */
#myip,
#conversions {
  background-color: var(--purple-gray-bg);
}

/* Add border to weather day elements */
.weather_day {
  border: 1px solid black;
}

/* Custom icon colors */
#icon_new_ia {
  color: var(--icon-new-ia-color);
}

/* Set search mode toggle icon color */
.search_mode_toggle i.oSea {
  color: #191919;
}

/* Hide search submit buttons */
button#searchFormSubmitBtn,
button#orbSubmitBtn {
  display: none !important;
}

/* Adjust result title font size */
.__srgi-title a {
  font-size: 1rem;
}

/* NEW: Responsive layout controls for consistent experience across different screen sizes */

/* Limit maximum width and center content for consistent experience across screens */
.main_container,
.search_results_container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
}

/* Control width of individual search result items */
.sri-group,
.search-result {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Adjust sidebar info boxes to maintain proportion */
.scene_sidebar {
  max-width: 360px;
}

/* Keep overall page structure balanced */
.scene_container {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

/* Ensure padding on small screens */
@media (max-width: 768px) {
  .main_container,
  .search_results_container {
    padding: 0 1rem;
  }
}