Custom kagi CSS

kagi.css

:root {
  --background: #282a36;
  --current-line: #44475a;
  --selection: #44475a;
  --foreground: #f8f8f2;
  --comment: #bfbfbf;
  --cyan: #8be9fd;
  --green: #50fa7b;
  --orange: #ffb86c;
  --pink: #ff79c6;
  --purple: #bd93f9;
  --red: #ff5555;
  --yellow: #f1fa8c;
  --border-color: #44475a;
  --hover-bg-color: #6272a4;
  --active-bg-color: #50fa7b;
  --box-shadow-color: rgba(255, 255, 255, 0.05);
  --white: #ffffff;
}

.theme_light {
  --bg-primary: var(--background);
  --bg-secondary: var(--current-line);
  --text-primary: var(--foreground);
  --search-result-title: var(--pink);
  --search-result-content-text: var(--comment);
}

.theme_dark {
  --bg-primary: var(--background);
  --bg-secondary: var(--current-line);
  --text-primary: var(--foreground);
  --search-result-title: var(--purple);
  --search-result-content-text: var(--comment);
}

.theme_light,
.theme_dark {
  --background-color: var(--bg-primary);
  --color-primary: var(--text-primary);
  --page-text-color: var(--color-primary);
  --header-bg: var(--bg-secondary);
  --header-border: var(--border-color);
  --color-primary_hover: var(--cyan);
  --result-item-title-border_hover: var(--color-primary_hover);
  --color-primary_visited: var(--orange);
  --control-center-bg: var(--bg-primary);
  --search-result-url-link: var(--yellow);
  --color_link: var(--color-primary);
  --tabs-round-bg: var(--bg-secondary);
  --related-item-bg: var(--bg-secondary);
  --inline-widget-bg: var(--bg-secondary);
  --color-search-input: var(--bg-primary);
  --footer-bg: var(--bg-secondary);
  --footer-border: var(--border-color);
  --button-hover-bg: var(--hover-bg-color);
  --button-active-bg: var(--active-bg-color);
  --item-border-color: var(--border-color);
  --item-box-shadow: 0 2px 5px var(--box-shadow-color);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary_hover);
  text-decoration: underline;
}

a:visited {
  color: var(--color-primary_visited);
}

/* Styles for navigation items */
.nav-item {
  display: inline-block;
  margin-right: 15px;
}

.nav-item.active {
  border-left: 3px solid var(--active-bg-color);
  padding-left: 12px;
}

/* Search result styling */
.search-result {
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0;
}

.search-result-title {
  color: var(--search-result-title);
  font-weight: bold;
}

.search-result-title:hover {
  border-color: var(--result-item-title-border_hover);
}

.search-result-content {
  color: var(--search-result-content-text);
}



/* Scrollbar styling for Webkit browsers */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--foreground);
  border-radius: 6px;
  border: 3px solid var(--bg-secondary);
}