Cleanup: CSS and global styling

In the latest releases, Gitea has fixed a lot of the styling issues we
had manually fixed in the past.

Additionally, the recent style adjustments they did look a lot better
so it is better to remove our custom styling as much as possible, and
follow stock Gitea. Making it easier to upgrade in the future.

* Fix broken styling
* Remove custom font
* Cleanup unused variables
* Add code comments

public/assets/css/theme-bthree-dark.css

@@ -2,16 +2,14 @@
 :root {
   --is-dark-theme: true;
 
-  /* Borders. */
-  --border-radius: .33rem;
-  --border-radius-outer: .28571429rem;
-
   /* Colors. */
   /* Some colors must be set as HEX, due to the monaco-editor no supporting
    * conversion of non-hex colors. https: //github.com/microsoft/monaco-editor/issues/1815 */
   color-scheme: dark;
-  --color-primary: hsl(204deg, 90%, 56%);
+  --color-primary: hsl(204deg, 90%, 60%);
-  --color-primary-bg: hsla(204deg, 100%, 36%, .2);
+  --color-primary-hover: hsl(204deg, 90%, 50%);
+  --color-primary-bg: hsla(204deg, 100%, 36%, .6);
+  --color-primary-text: hsl(204deg, 90%, 72%);
 
   --color-primary-contrast: hsl(0, 0%, 100%);
   --color-primary-dark-1: #14a1ff;
@@ -164,8 +162,6 @@
   --color-code-line-bg-hover: hsl(213, 16%, 16%);
   --color-code-sidebar-bg: hsl(213, 15%, 21%);
 
-  --color-timeline: hsl(220, 10%, 33%);
-
   --color-tooltip-text: #fbfdff;
   --color-tooltip-bg: #000017f0;
 
@@ -177,15 +173,6 @@
   --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: #d6dbe6;
   --color-input-background: #17191c;
@@ -201,7 +188,7 @@
   --color-border: var(--color-secondary-alpha-40);
 
   --color-reaction-bg: hsla(0, 0%, 100%, 0.1);
-  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-reaction-active-bg: var(--color-primary-alpha-30);
 
   --color-small-accent: var(--color-primary-light-5);
   --color-active-line: hsl(53.6, 50.9%, 22%);
@@ -220,142 +207,25 @@
 /* Custom styling of individual elements.
  * Using !important is bad, but unfortunately gitea does it already in _base.less. */
 
-/* Buttons. */
+/* Primary button. */
-.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;
+  color: var(--color-primary-text) !important;
 }
 
+a.ui.primary.label:hover,
 .ui.primary.button:hover,
 .ui.primary.buttons .button:hover {
-  background-color: var(--color-primary) !important;
+  background-color: var(--color-primary-hover) !important;
   color: var(--color-primary-contrast) !important;
 }
 
-/* Small buttons
+.ui.primary.label {
- * e.g. HTTP/SSH clone buttons in repo homepage. */
+  background-color: var(--color-primary-bg) !important;
-.ui.basic.primary.button,
+  border-color: var(--color-primary-bg) !important;
-.ui.basic.primary.buttons .button {
+  color: var(--color-primary) !important;
-  box-shadow: none !important;
-}
-
-.ui.menu,
-.ui.vertical.menu {
-  border-color: var(--color-secondary-alpha-30) !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;
-}
-
-/* Top navigation bar.
- * e.g. Issues, Pull Requests, etc. */
-.ui.menu.bar {
-  border-color: var(--color-border);
-}
-
-.ui.menu .item>.label {
-  color: var(--color-label-text);
-}
-
-.ui.tabular.menu {
-  border-color: var(--color-border);
-}
-
-.ui.breadcrumb a {
-  color: var(--color-text);
-}
-
-/* Cards. */
-.ui.cards>.card .meta,
-.ui.card .meta {
-  color: var(--color-text-dark-2);
-}
-
-.ui.card.card-with-icon .icon svg {
-  margin: 0 var(--spacer) 0 0;
-  width: 50px;
-  opacity: .7;
-}
-
-/* Users/Organizations list. */
-/* Fix alignment issue since */
-.ui.user.list img.avatar,
-.ui.user.list img.avatar+.content {
-  display: inline-block;
-}
-
-.ui.user.list img.avatar {
-  position: relative;
-  top: 3px;
-  vertical-align: initial !important;
-}
-
-.ui.user.list .content {
-  margin-left: var(--spacer-2);
-  width: auto;
-}
-
-.ui.user.list .content .description .svg {
-  margin-right: var(--spacer-1);
-  position: relative;
-  top: 2px;
-}
-
-.issue.list>.item+.item {
-  border-color: var(--color-border);
-}
-
-/* Divider. */
-.ui.divider:not(.vertical, .horizontal) {
-  border-top-color: var(--color-border) !important;
-}
-
-/* Homepage. */
-.home a {
-  color: var(--color-accent);
 }
 
 /* (from arc-green)

templates/custom/header.tmpl

@@ -1,33 +1,9 @@
 <style>
-  /* bthree dark theme */
-  @font-face {
-    font-family: "Heebo";
-    src: url("/assets/fonts/Heebo-VariableFont_wght.ttf") format("truetype-variations");
-    font-weight: normal;
-    font-variation-settings: "wght" var(--font-weight);
-    font-style: normal
-  }
-
   :root {
-    /* Spacing. */
-    --spacer: 1rem;
-    --spacer-1: .25rem;
-    --spacer-2: .5rem;
-    --spacer-3: var(--spacer);
-    --spacer-4: 1.5rem;
-    --spacer-5: 3rem;
-
-    /* Override fonts. */
-    --fonts-override: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    --font-weight-thin: 300;
-    --font-weight-bold: 600;
-
     --border-radius: .33rem;
-
-    --color-border: var(--color-secondary);
-
-    /* Transitions. */
     --transition-speed: 150ms;
+
+    --color-timeline: var(--color-secondary);
   }
 
   /* Light-theme specific. */
@@ -35,80 +11,33 @@
     --color-primary: hsl(204deg, 90%, 52%);
   }
 
-  /* Set weight variations. */
+  /* Revert the red color in dashboard header buttons. */
-  strong, b, h1, h2, h3, h4, h5, h6, .bold,
-  a.issue-title,
-  .ui.tabular.menu .active.item {
-    font-weight: normal !important;
-    font-variation-settings: "wght" var(--font-weight-bold);
-  }
-
-  /* Bold is excessive on issue title when shown without details. */
-  .issue-card-title {
-    font-variation-settings: normal !important;
-    font-size: 16px;
-  }
-
-  .repository.view.issue .title .issue-title h1 {
-    font-variation-settings: "wght" var(--font-weight-thin);
-  }
-
-  @media (min-width: 1200px) {
-    /* Limit navbar width on large screens. */
-    .dashboard-navbar {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 1170px;
-    }
-  }
-
-  /* Revert the red color in dashboard eader buttons. */
   .dashboard.feeds .right.stackable.menu>.item.active,
   .dashboard.issues .right.stackable.menu>.item.active {
     color: unset;
   }
 
   /* Global tweaks (all themes) */
-  .ui.avatar {
+  /* Buttons. */
+  .ui.button,
+  a.ui.label {
+    transition: background-color var(--transition-speed), color var(--transition-speed);
+  }
+
+  /* Avatars. */
+  img.ui.avatar {
     border-radius: 50%;
   }
 
-  .ui.user.list .ui.avatar,
-  .ui.user.list .ui.avatar+.content {
-    display: inline-block;
-  }
-
-  /* Fix alignment and margin issues in avatars. */
-  .user.list img.avatar,
-  .comment-list .code-comment img.avatar,
-  .comment-list .comment img.avatar {
-    vertical-align: unset !important;
-  }
-
-  .user.list img.avatar,
-  .commit-list img.avatar,
-  .comment-list .code-comment img.avatar,
-  .comment-list .comment img.avatar,
-  .comment-list .timeline-item img.avatar {
-    margin-right: var(--spacer-2) !important;
-  }
-
-  .commit-list .author img.avatar {
-    margin-right: var(--spacer-3) !important;
-  }
-
-  /* Labels. e.g. issues count indicator in repo tabs. */
-  .ui.small.label {
-    border-radius: 2em;
-  }
-
   /* Hide the app logo (first link in "brand" div). */
   .following.bar #navbar .brand > a:first-child {
     display: none;
   }
 
-  .following.bar #navbar .brand #navbar-expand-toggle {
+  /* Homepage. */
-    margin-left: var(--spacer-4);
+  /* By default Gitea colors links green */
+  .home a {
+    color: var(--color-primary);
   }
 
   /* Hide brand navbar completely when not in mobile. */
@@ -123,56 +52,7 @@
     display: none;
   }
 
-  /* Notifications indicator. */
-  .notification_count {
-    border-radius: 0.6em;
-    font-size: 12px;
-    font-weight: normal !important;
-    font-variation-settings: "wght" var(--font-weight-bold);
-    line-height: unset;
-    margin-left: var(--spacer-1);
-    padding: 2px 4px;
-  }
-
-  /* Navigation tabs.
-  * e.g. Code, Issues pages in a repository. */
-  .ui.tabular.menu .item {
-    border: none;
-    border-bottom: 3px solid transparent;
-    border-radius: 0;
-    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-dark);
-  }
-
-  .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: var(--color-text-dark);
-    color: var(--color-text-dark);
-  }
-
   /* Repository page. */
-  .repository .repo-title .repo-icon svg {
-    max-width: 22px;
-  }
-
-  .ui.table {
-    background: transparent;
-  }
-
-  .repository .ui.table a {
-    color: var(--color-text);
-  }
-
   .repository .file-view.markdown a {
     color: var(--color-primary);
   }
@@ -186,10 +66,6 @@
     color: currentColor;
   }
 
-  .ui.repo-topic.label {
-    border-radius: 2em;
-  }
-
   /* Repository stats. */
   .repository-summary-language-stats {
     height: unset;
@@ -201,18 +77,7 @@
 
   /* Repository: Activity page. */
   .stats-table {
-    border-radius: 2em;
     margin-bottom: var(--spacer);
-    overflow: hidden;
-  }
-
-  .issue.list {
-    border-radius: var(--border-radius);
-    border: thin solid var(--color-border);
-  }
-
-  .issue.list > .item {
-    padding: var(--spacer-2) var(--spacer) !important;
   }
 
   /* Hide branches from PR list. */
@@ -220,25 +85,6 @@
     display: none !important;
   }
 
-  .issue.list a.project,
-  .issue.list a.milestone {
-    margin-inline: var(--spacer-2) !important;
-  }
-
-  .issue.list a.project svg {
-    margin-right: var(--spacer-2) !important;
-    position: relative;
-    top: 2px;
-  }
-
-  /* Labels (badges) */
-  /* Hardcoded label color to make it look like a module,
-   * so it can be used in other contexts (e.g. static homepage content). */
-  .ui.label.is-module {
-    background-color: #514b3c !important;
-    color: #eee !important;
-  }
-
   /* Footer. */
   footer {
     color: var(--color-footer-text);