blender-projects-gitea-custom/public/css/theme-bthree-dark.css

/* bthree dark theme */
:root {
  --is-dark-theme: true;

  /* Spacing. */
  --spacer: 1rem;
  --spacer-1: .25rem;
  --spacer-2: .5rem;
  --spacer-3: var(--spacer);
  --spacer-4: 1.5rem;
  --spacer-5: 3rem;

  /* Borders. */
  --border-radius: .33rem;
  --border-radius-outer: .28571429rem;

  /* Transitions. */
  --transition-speed: 150ms;

  /* Colors. */
  color-scheme: dark;
  --color-primary: hsl(198deg 90% 56%);
  --color-primary-bg: hsla(198deg, 100%, 36%, .2);

  --color-primary-contrast: hsl(0, 0%, 100%);
  --color-primary-dark-1: hsl(198deg 100% 54%);
  --color-primary-dark-2: hsl(198deg 100% 64%);
  --color-primary-dark-3: hsl(198deg 100% 70%);
  --color-primary-dark-4: hsl(198deg 100% 78%);
  --color-primary-dark-5: hsl(198deg 100% 84%);
  --color-primary-dark-6: hsl(198deg 100% 89%);
  --color-primary-dark-7: hsl(198deg 100% 94%);

  --color-primary-light-1: hsl(198deg 100% 40%);
  --color-primary-light-2: hsl(198deg 100% 36%);
  --color-primary-light-3: hsl(198deg 100% 30%);
  --color-primary-light-4: hsl(198deg 100% 26%);
  --color-primary-light-5: hsl(198deg 100% 20%);
  --color-primary-light-6: hsl(198deg 100% 16%);
  --color-primary-light-7: hsl(198deg 100% 10%);

  --color-primary-alpha-10: hsla(198deg 100% 46% 10%);
  --color-primary-alpha-20: hsla(198deg 100% 46% 20%);
  --color-primary-alpha-30: hsla(198deg 100% 46% 30%);
  --color-primary-alpha-40: hsla(198deg 100% 46% 40%);
  --color-primary-alpha-50: hsla(198deg 100% 46% 50%);
  --color-primary-alpha-60: hsla(198deg 100% 46% 60%);
  --color-primary-alpha-70: hsla(198deg 100% 46% 70%);
  --color-primary-alpha-80: hsla(198deg 100% 46% 80%);
  --color-primary-alpha-90: hsla(198deg 100% 46% 90%);

  --color-secondary: hsl(213, 12%, 30.6%);
  --color-secondary-bg: hsl(213, 16%, 20%);
  --color-secondary-dark-1: hsl(213, 12%, 35.5%);
  --color-secondary-dark-2: hsl(213, 12%, 40%);
  --color-secondary-dark-3: hsl(213, 12%, 50%);
  --color-secondary-dark-4: hsl(213, 12%, 54.9%);
  --color-secondary-dark-5: hsl(213, 12%, 59.6%);
  --color-secondary-dark-6: hsl(213, 12%, 64.5%);
  --color-secondary-dark-7: hsl(213, 12%, 69.4%);
  --color-secondary-dark-8: hsl(213, 12%, 74.3%);
  --color-secondary-dark-9: hsl(213, 11%, 79.2%);
  --color-secondary-dark-10: hsl(213, 11%, 84.1%);
  --color-secondary-dark-11: hsl(213, 12.3%, 89%);
  --color-secondary-dark-12: hsl(213, 12.5%, 93.7%);
  --color-secondary-dark-13: hsl(213, 14.3%, 98.6%);
  --color-secondary-light-1: hsl(213, 12%, 24.5%);
  --color-secondary-light-2: hsl(213, 11.8%, 18.2%);
  --color-secondary-light-3: hsl(213, 11%, 12.4%);
  --color-secondary-light-4: hsl(213, 9.7%, 6.1%);
  --color-secondary-alpha-10: hsla(213, 12%, 30.6%, 0.1);
  --color-secondary-alpha-20: hsla(213, 12%, 30.6%, 0.2);
  --color-secondary-alpha-30: hsla(213, 12%, 30.6%, 0.3);
  --color-secondary-alpha-40: hsla(213, 12%, 30.6%, 0);
  --color-secondary-alpha-50: hsla(213, 12%, 30.6%, 0.5);
  --color-secondary-alpha-60: hsla(213, 12%, 30.6%, 0.6);
  --color-secondary-alpha-70: hsla(213, 12%, 30.6%, 0.7);
  --color-secondary-alpha-80: hsla(213, 12%, 30.6%, 0.8);
  --color-secondary-alpha-90: hsla(213, 12%, 30.6%, 0.9);

  /* Colors for buttons, labels, etc. */
  --color-red: hsl(0, 56.4%, 54.1%);
  --color-red-light: hsl(0, 56.5%, 48.6%);
  --color-orange: hsl(23.8, 88.9%, 42.4%);
  --color-orange-light: hsl(23.6, 88.7%, 38.2%);
  --color-yellow: hsl(44.8, 97.1%, 40.6%);
  --color-yellow-light: hsl(44.8, 96.8%, 37%);
  --color-olive: hsl(67.5, 79.1%, 36%);
  --color-olive-light: hsl(67.4, 79.3%, 32%);
  --color-green: hsl(124deg 41% 35%);
  --color-green-light: hsl(124deg 41% 45%);
  --color-teal: hsl(177.1, 100%, 28.4%);
  --color-teal-light: hsl(176.8, 100%, 26%);
  --color-blue: hsl(206, 56%, 50.2%);
  --color-blue-light: hsl(206, 55%, 45.3%);
  --color-violet: hsl(259.2, 66.5%, 64.9%);
  --color-violet-light: hsl(259.1, 66.2%, 58.2%);
  --color-purple: hsl(284.9, 55.9%, 58.2%);
  --color-purple-light: hsl(284.9, 55.6%, 52.4%);
  --color-pink: hsl(326, 64.6%, 50.2%);
  --color-pink-light: hsl(326.2, 64.5%, 45.3%);
  --color-brown: hsl(23.4, 33.3%, 48.2%);
  --color-brown-light: hsl(23.5, 33.3%, 43.5%);
  --color-grey: hsl(220, 6.6%, 64.3%);
  --color-grey-light: hsl(222.9, 6.5%, 58%);
  --color-black: hsl(213, 21.1%, 14.9%);
  --color-black-light: hsl(222.9, 20.6%, 13.3%);
  --color-gold: hsl(47.3, 50%, 46.3%);

  /* Color: diff */
  --color-diff-removed-word-bg: hsl(0, 37%, 31.8%);
  --color-diff-added-word-bg: hsl(120, 25.5%, 31.6%);
  --color-diff-removed-row-bg: hsl(0, 22.4%, 19%);
  --color-diff-moved-row-bg: hsl(59, 31%, 38.6%);
  --color-diff-added-row-bg: hsl(133.6, 21.6%, 20%);
  --color-diff-removed-row-border: hsl(0, 19%, 32.5%);
  --color-diff-moved-row-border: hsl(69.2, 46%, 61.4%);
  --color-diff-added-row-border: hsl(134.4, 20%, 24%);
  --color-diff-inactive: hsl(229.4, 13.8%, 24%);

  /* Color: messages and status. */
  --color-error-border: hsl(0, 42%, 44.1%);
  --color-error-bg: hsl(0, 42.9%, 23%);
  --color-error-bg-active: hsl(0, 27.3%, 37%);
  --color-error-bg-hover: hsl(0, 33.3%, 30%);
  --color-error-text: hsl(0, 79.3%, 88.6%);
  --color-success-border: hsl(136, 33.3%, 40.6%);
  --color-success-bg: hsl(150, 23%, 20%);
  --color-success-text: hsl(116, 46%, 58.4%);
  --color-warning-border: hsl(50, 100%, 37%);
  --color-warning-bg: hsl(60, 9.4%, 20.8%);
  --color-warning-text: hsl(44.7, 96.8%, 50.8%);
  --color-info-border: hsl(210, 50%, 37.6%);
  --color-info-bg: hsl(216.3, 33.3%, 22.4%);
  --color-info-text: hsl(201.8, 79.3%, 56.5%);

  --color-body: hsl(213, 10%, 14%);

  --color-box-header: hsl(213, 12%, 22%);
  --color-box-body: hsl(213, 12%, 18%);
  --color-box-body-highlight: hsl(213, 12%, 30%);

  --color-text: hsl(220, 12.4%, 76.3%);
  --color-text-dark: hsl(220, 26%, 89%);
  --color-text-light: hsl(224, 9.2%, 68%);
  --color-text-light-1: hsl(224, 7.8%, 62%);
  --color-text-light-2: hsl(224, 6.8%, 57.1%);
  --color-text-light-3: hsl(224.3, 9.3%, 48.4%);

  /* "color-light" is actually a subtle black in dark themes, to darken an element.
   * against different backgrounds.  */
  --color-light: hsla(0, 0%, 0%, 0.2);
  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
  --color-light-border: hsla(0, 0%, 100%, 0.2);

  --color-hover: hsla(213, 18%, 90%, .05);
  --color-active: hsla(213, 18%, 90%, .1);
  --color-shadow: hsla(0, 0%, 0%, 0);

  --color-menu: hsl(213, 15%, 21%);
  --color-card: hsl(213, 15%, 21%);

  --color-markup-table-row: hsla(0, 0%, 100%, 0);
  --color-markup-code-block: hsla(0, 0%, 100%, 0.1);

  --color-code-bg: hsl(213, 16%, 20%);
  --color-code-sidebar-bg: hsl(213, 14.8%, 21%);

  --color-timeline: hsl(220, 10.6%, 33.3%);

  /* Navbar. */
  --color-navbar: hsl(213, 10%, 18%);
  --color-navbar-transparent: hsla(213, 10%, 14%, 0);
  --color-header-bar: hsl(213, 10%, 18%);

  /* Buttons. */
  --color-button: hsl(213, 14%, 24%);
  --color-expand-button: hsl(213.9, 12.4%, 26.9%);

  --color-button-basic-border: hsl(213, 14%, 30%);
  --color-button-basic-bg: hsl(213, 14%, 22%);
  --color-button-basic-bg: var(--color-light);
  --color-button-basic-text: var(--color-text);

  /* Inputs. */
  --color-input-text: hsl(219, 25%, 87%);
  --color-input-background: hsl(213, 14%, 10%);
  --color-input-toggle-background: hsl(213, 11.5%, 30.6%);
  --color-input-border: hsl(213, 11.5%, 30.6%);
  --color-input-border-hover: hsl(224, 13%, 36%);
  --color-placeholder-text: hsl(213, 8.2%, 45.3%);

  --color-editor-line-highlight: var(--color-primary-light-5);
  --color-project-board-bg: var(--color-secondary-light-2);

  --color-caret: var(--color-text);
  --color-border: var(--color-secondary-alpha-50);

  --color-reaction-bg: hsla(0, 0%, 100%, 0.1);
  --color-reaction-active-bg: var(--color-primary-alpha-40);

  --color-small-accent: var(--color-primary-light-5);
  --color-active-line: hsl(53.6, 50.9%, 21.6%);

  /* Labels. e.g. issues count indicator in repo tabs. */
  --color-label-primary-bg: var(--color-secondary);
  --color-label-active-bg: hsl(220, 10.6%, 33.3%);

  /* Footer. */
  --color-footer: hsl(213, 14.8%, 21%);
  --color-footer-text: var(--color-text-light-3);
  --color-footer-links: var(--color-text-light-1);
}

/* Custom styling of individual elements.
 * Using !important is bad, but unfortunately gitea does it already in _base.less. */

/* Buttons. */
.ui.basic.button {
  color: var(--color-button-basic-text);
  background: var(--color-button-basic-bg);
  border-color: var(--color-button-basic-border);
}

.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--color-primary-bg) !important;
  border-color: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
}

/* Small buttons
 * e.g. HTTP/SSH clone buttons in repo homepage. */
.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
  box-shadow: none !important;
}

/* Vertical menu.
 * Used in: /issues */
.ui.vertical.menu {
  padding: var(--spacer-1);
  border-radius: var(--border-radius);
}

/* Vertical menu: active item.
 * Gitea adds a "primary" class to what would be the active item. */
.ui.vertical.menu > .item.primary {
  background-color: var(--color-active) !important;
  box-shadow: none !important;
}

/* Dropdown menus.
 * e.g. user menu. */
.ui.dropdown .menu {
  border-radius: var(--border-radius) !important;
  box-shadow: var(--box-shadow-dropdown-menu) !important;
}

/* Replace gitea's hardcoded border-radius with variables. */
.ui.compact.menu {
  border-radius: var(--border-radius-outer);
}

.ui.compact.menu>.item:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.ui.compact.menu>.item:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.ui.menu.new-menu {
  border-color: var(--color-secondary-alpha-50) !important;
}

/* Navigation tabs.
 * e.g. Code, Issues pages in a repository. */
.ui.tabular.menu .item {
  border: none;
  border-bottom: 3px solid transparent;
  transition: border-bottom-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;
}

.ui.tabular.menu .item:hover {
  border-bottom-color: var(--color-text-light-3);
}

.ui.tabular.menu .active.item {
  background: transparent;
  border: none;
  border-bottom: 3px solid currentColor;
  margin-bottom: unset;
}

.ui.tabular.menu .active.item:hover {
  background: transparent;
  border-color: currentColor;
  color: var(--color-primary-contrast);
}

/* Labels. e.g. issues count indicator in repo tabs. */
.ui.tabular.navbar .ui.small.label {
  background-color: var(--color-label-primary-bg) !important;
  border-radius: 999em;
}

/* Top navigation bar.
 * e.g. Issues, Pull Requests, etc. */
.ui.menu.bar {
  border: none;
}

/* Navbar logo. */
.item.brand a {
  opacity: .8;
  transition: opacity var(--transition-speed) ease-in-out;
}

.item.brand a:hover {
  opacity: 1;
}

.item.brand svg {
  height: 21px;
  color: #fff;
}

.ui.breadcrumb a {
  color: var(--color-text);
}

/* Repository page. */
.repository .repo-header a,
.repository .repo-title a {
  color: var(--color-text);
}

.repository .ui.table a {
  color: var(--color-text);
}

.repository .ui.tabs.divider {
  border: none;
}

/* Repository folder icon. */
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill {
  color: currentColor;
}

.ui.repo-topic.label {
  border-radius: 999em;
}

/* Repository stats. */
.repository-summary-language-stats {
  height: unset;
}

.repository .repository-summary .segment.language-stats {
  height: 4px;
}

/* Repository: Activity page. */
.stats-table {
  border-radius: 999em;
  margin-bottom: var(--spacer);
  overflow: hidden;
}

.issue.list>.item+.item {
  border-color: var(--color-border);
}

/* Divider. */
.ui.divider:not(.vertical, .horizontal) {
  border-top-color: var(--color-border);
}

/* Footer. */
footer {
  color: var(--color-footer-text);
}

footer a {
  color: var(--color-footer-links);
}

/* Homepage. */
.home a {
  color: var(--color-accent);
}

/* (from arc-green)
 * invert emojis that are hard to read otherwise */
.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
  filter: invert(100%) hue-rotate(180deg);
}