update to be compatible with gitea 1.22

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

@@ -1,34 +1,15 @@
-/* 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;
-}
-
 /* bthree dark theme */
 :root {
 	--is-dark-theme: true;
 
-  /* 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;
-
-  /* Borders. */
-  --border-radius: 0.33rem;
-  --border-radius-outer: 0.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%, 0.2);
+	--color-primary-hover: hsl(204deg, 90%, 50%);
+	--color-primary-bg: hsla(204deg, 100%, 36%, 0.6);
+	--color-primary-text: hsl(204deg, 90%, 72%);
 
 	--color-primary-contrast: hsl(0, 0%, 100%);
 	--color-primary-dark-1: #14a1ff;
@@ -91,6 +72,7 @@
 	/* Colors for buttons, labels, etc. */
 	--color-red: hsl(0, 56.4%, 54.1%);
 	--color-red-light: hsl(0, 56.5%, 48.6%);
+	--color-red-dark-1: hsl(3deg, 75%, 59%);
 	--color-orange: hsl(23.8, 89%, 42.4%);
 	--color-orange-light: hsl(23.6, 88.7%, 38%);
 	--color-yellow: hsl(44.8, 97%, 40.6%);
@@ -103,8 +85,12 @@
 	--color-teal-light: hsl(176.8, 100%, 26%);
 	--color-blue: hsl(206, 56%, 50.2%);
 	--color-blue-light: hsl(206, 55%, 45.3%);
+	--color-blue-dark-1: hsl(213deg, 89%, 64%);
+	--color-blue-dark-bg: hsla(213deg, 89%, 64%, 0.15);
 	--color-violet: hsl(259.2, 66.5%, 65%);
 	--color-violet-light: hsl(259.1, 66.2%, 58%);
+	--color-violet-dark-1: hsl(262deg, 66%, 66%);
+	--color-violet-dark-bg: hsla(262deg, 66%, 66%, 0.15);
 	--color-purple: hsl(285, 55.9%, 58%);
 	--color-purple-light: hsl(285, 55.6%, 52%);
 	--color-pink: hsl(326, 64.6%, 50.2%);
@@ -147,7 +133,7 @@
 	--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-info-text: hsl(213deg, 89%, 64%);
 
 	--color-body: #202327;
 
@@ -181,12 +167,14 @@
 
 	--color-markup-table-row: hsla(0, 0%, 100%, 0);
 	--color-markup-code-block: hsla(0, 0%, 100%, 0.1);
+	--color-markup-code-inline: hsla(0, 0%, 100%, 0.1);
 
 	--color-code-bg: #1e2329;
 	--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;
 
 	/* Navbar. */
 	--color-navbar: hsl(213, 10%, 18%);
@@ -196,15 +184,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;
@@ -216,17 +195,24 @@
 	--color-editor-line-highlight: var(--color-primary-light-5);
 	--color-project-board-bg: var(--color-secondary-light-2);
 
+	--color-highlight-fg: #87651e;
+	--color-highlight-bg: #352c1c;
+	--color-overlay-backdrop: #080808c0;
+
+	--color-button: #282d33;
+
 	--color-caret: var(--color-text);
 	--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%);
 
 	/* Labels. e.g. issues count indicator in repo tabs. */
 	--color-label-text: var(--color-text-light);
+	--color-label-bg: var(--color-secondary-alpha-60);
 	--color-label-active-bg: hsl(220, 10.6%, 33.3%);
 
 	/* Footer. */
@@ -238,170 +224,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: 0.7;
-}
-
-.ui.cards-column {
-  /* margin: -0.875em -0.5em;
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center; */
-
-  display: grid;
-  justify-content: stretch;
-  row-gap: 0.5em;
-}
-
-.ui.cards > .card,
-.ui.card {
-  background: var(--color-card);
-  border: 1px solid var(--color-secondary);
-  box-shadow: none;
-  word-wrap: break-word;
-  flex-direction: column;
-  max-width: 100%;
-  min-height: 0;
-  padding: 0;
-  display: flex;
-  width: 100% !important;
-  margin: 0 !important;
-}
-
-/* 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)
@@ -598,460 +439,300 @@
 
 .chroma .bp {
 	color: var(--color-syntax-NameBuiltinPseudo);
-}
+} /* NameBuiltinPseudo */
-
-/* NameBuiltinPseudo */
 .chroma .c {
 	color: var(--color-syntax-Comment);
-}
+} /* Comment */
-
-/* Comment */
 .chroma .c1 {
 	color: var(--color-syntax-CommentSingle);
-}
+} /* CommentSingle */
-
-/* CommentSingle */
 .chroma .ch {
 	color: var(--color-syntax-CommentHashbang);
-}
+} /* CommentHashbang */
-
-/* CommentHashbang */
 .chroma .cm {
 	color: var(--color-syntax-CommentMultiline);
-}
+} /* CommentMultiline */
-
-/* CommentMultiline */
 .chroma .cp {
 	color: var(--color-syntax-CommentPreproc);
-}
+} /* CommentPreproc */
-
-/* CommentPreproc */
 .chroma .cpf {
 	color: var(--color-syntax-CommentPreprocFile);
-}
+} /* CommentPreprocFile */
-
-/* CommentPreprocFile */
 .chroma .cs {
 	color: var(--color-syntax-CommentSpecial);
-}
+} /* CommentSpecial */
-
-/* CommentSpecial */
 .chroma .dl {
 	color: var(--color-syntax-LiteralStringDelimiter);
-}
+} /* LiteralStringDelimiter */
-
-/* LiteralStringDelimiter */
 .chroma .gd {
 	color: var(--color-syntax-GenericDeleted-text);
 	background-color: var(--color-syntax-GenericDeleted-bg);
-}
+} /* GenericDeleted */
-
-/* GenericDeleted */
 .chroma .ge {
 	color: var(--color-syntax-GenericEmph);
-}
+} /* GenericEmph */
-
-/* GenericEmph */
 .chroma .gh {
 	color: var(--color-syntax-GenericHeading);
-}
+} /* GenericHeading */
-
-/* GenericHeading */
 .chroma .gi {
 	color: var(--color-syntax-GenericInserted-text);
 	background-color: var(--color-syntax-GenericInserted-bg);
-}
+} /* GenericInserted */
-
-/* GenericInserted */
 .chroma .go {
 	color: var(--color-syntax-GenericOutput);
-}
+} /* GenericOutput */
-
-/* GenericOutput */
 .chroma .gp {
 	color: var(--color-syntax-GenericPrompt);
-}
+} /* GenericPrompt */
-
-/* GenericPrompt */
 .chroma .gr {
 	color: var(--color-syntax-GenericError);
-}
+} /* GenericError */
-
-/* GenericError */
 .chroma .gs {
 	color: var(--color-syntax-GenericStrong);
-}
+} /* GenericStrong */
-
-/* GenericStrong */
 .chroma .gt {
 	color: var(--color-syntax-GenericTraceback);
-}
+} /* GenericTraceback */
-
-/* GenericTraceback */
 .chroma .gu {
 	color: var(--color-syntax-GenericSubheading);
-}
+} /* GenericSubheading */
-
-/* GenericSubheading */
 .chroma .hl {
 	background-color: var(--color-syntax-LineHighlight);
-}
+} /* LineHighlight */
-
-/* LineHighlight */
 .chroma .il {
 	color: var(--color-syntax-LiteralNumberIntegerLong);
-}
+} /* LiteralNumberIntegerLong */
-
-/* LiteralNumberIntegerLong */
 .chroma .k {
 	color: var(--color-syntax-Keyword);
-}
+} /* Keyword */
-
-/* Keyword */
 .chroma .kc {
 	color: var(--color-syntax-KeywordConstant);
-}
+} /* KeywordConstant */
-
-/* KeywordConstant */
 .chroma .kd {
 	color: var(--color-syntax-KeywordDeclaration);
-}
+} /* KeywordDeclaration */
-
-/* KeywordDeclaration */
 .chroma .kn {
 	color: var(--color-syntax-KeywordNamespace);
-}
+} /* KeywordNamespace */
-
-/* KeywordNamespace */
 .chroma .kp {
 	color: var(--color-syntax-KeywordPseudo);
-}
+} /* KeywordPseudo */
-
-/* KeywordPseudo */
 .chroma .kr {
 	color: var(--color-syntax-KeywordReserved);
-}
+} /* KeywordReserved */
-
-/* KeywordReserved */
 .chroma .kt {
 	color: var(--color-syntax-KeywordType);
-}
+} /* KeywordType */
-
-/* KeywordType */
 .chroma .ln {
 	color: var(--color-syntax-LineNumbers);
-}
+} /* LineNumbers */
-
-/* LineNumbers */
 .chroma .lnt {
 	color: var(--color-syntax-LineNumbersTable);
-}
+} /* LineNumbersTable */
-
-/* LineNumbersTable */
 .chroma .m {
 	color: var(--color-syntax-LiteralNumber);
-}
+} /* LiteralNumber */
-
-/* LiteralNumber */
 .chroma .mb {
 	color: var(--color-syntax-LiteralNumberBin);
-}
+} /* LiteralNumberBin */
-
-/* LiteralNumberBin */
 .chroma .mf {
 	color: var(--color-syntax-LiteralNumberFloat);
-}
+} /* LiteralNumberFloat */
-
-/* LiteralNumberFloat */
 .chroma .mh {
 	color: var(--color-syntax-LiteralNumberHex);
-}
+} /* LiteralNumberHex */
-
-/* LiteralNumberHex */
 .chroma .mi {
 	color: var(--color-syntax-LiteralNumberInteger);
-}
+} /* LiteralNumberInteger */
-
-/* LiteralNumberInteger */
 .chroma .mo {
 	color: var(--color-syntax-LiteralNumberOct);
-}
+} /* LiteralNumberOct */
-
-/* LiteralNumberOct */
 .chroma .n {
 	color: var(--color-syntax-Name);
-}
+} /* Name */
-
-/* Name */
 .chroma .na {
 	color: var(--color-syntax-NameAttribute);
-}
+} /* NameAttribute */
-
-/* NameAttribute */
 .chroma .nb {
 	color: var(--color-syntax-NameBuiltin);
-}
+} /* NameBuiltin */
-
-/* NameBuiltin */
 .chroma .nc {
 	color: var(--color-syntax-NameClass);
-}
+} /* NameClass */
-
-/* NameClass */
 .chroma .nd {
 	color: var(--color-syntax-NameDecorator);
-}
+} /* NameDecorator */
-
-/* NameDecorator */
 .chroma .ne {
 	color: var(--color-syntax-NameException);
-}
+} /* NameException */
-
-/* NameException */
 .chroma .nf {
 	color: var(--color-syntax-NameFunction);
-}
+} /* NameFunction */
-
-/* NameFunction */
 .chroma .ni {
 	color: var(--color-syntax-NameEntity);
-}
+} /* NameEntity */
-
-/* NameEntity */
 .chroma .nl {
 	color: var(--color-syntax-NameLabel);
-}
+} /* NameLabel */
-
-/* NameLabel */
 .chroma .nn {
 	color: var(--color-syntax-NameNamespace);
-}
+} /* NameNamespace */
-
-/* NameNamespace */
 .chroma .no {
 	color: var(--color-syntax-NameConstant);
-}
+} /* NameConstant */
-
-/* NameConstant */
 .chroma .nt {
 	color: var(--color-syntax-NameTag);
-}
+} /* NameTag */
-
-/* NameTag */
 .chroma .nv {
 	color: var(--color-syntax-NameVariable);
-}
+} /* NameVariable */
-
-/* NameVariable */
 .chroma .nx {
 	color: var(--color-syntax-NameOther);
-}
+} /* NameOther */
-
-/* NameOther */
 .chroma .o {
 	color: var(--color-syntax-Operator);
-}
+} /* Operator */
-
-/* Operator */
 .chroma .ow {
 	color: var(--color-syntax-OperatorWord);
-}
+} /* OperatorWord */
-
-/* OperatorWord */
 .chroma .p {
 	color: var(--color-syntax-Punctuation);
-}
+} /* Punctuation */
-
-/* Punctuation */
 .chroma .s {
 	color: var(--color-syntax-LiteralString);
-}
+} /* LiteralString */
-
-/* LiteralString */
 .chroma .s1 {
 	color: var(--color-syntax-LiteralStringSingle);
-}
+} /* LiteralStringSingle */
-
-/* LiteralStringSingle */
 .chroma .s2 {
 	color: var(--color-syntax-LiteralStringDouble);
-}
+} /* LiteralStringDouble */
-
-/* LiteralStringDouble */
 .chroma .sa {
 	color: var(--color-syntax-LiteralStringAffix);
-}
+} /* LiteralStringAffix */
-
-/* LiteralStringAffix */
 .chroma .sb {
 	color: var(--color-syntax-LiteralStringBacktick);
-}
+} /* LiteralStringBacktick */
-
-/* LiteralStringBacktick */
 .chroma .sc {
 	color: var(--color-syntax-LiteralStringChar);
-}
+} /* LiteralStringChar */
-
-/* LiteralStringChar */
 .chroma .sd {
 	color: var(--color-syntax-LiteralStringDoc);
-}
+} /* LiteralStringDoc */
-
-/* LiteralStringDoc */
 .chroma .se {
 	color: var(--color-syntax-LiteralStringEscape);
-}
+} /* LiteralStringEscape */
-
-/* LiteralStringEscape */
 .chroma .sh {
 	color: var(--color-syntax-LiteralStringHeredoc);
-}
+} /* LiteralStringHeredoc */
-
-/* LiteralStringHeredoc */
 .chroma .si {
 	color: var(--color-syntax-LiteralStringInterpol);
-}
+} /* LiteralStringInterpol */
-
-/* LiteralStringInterpol */
 .chroma .sr {
 	color: var(--color-syntax-LiteralStringRegex);
-}
+} /* LiteralStringRegex */
-
-/* LiteralStringRegex */
 .chroma .ss {
 	color: var(--color-syntax-LiteralStringSymbol);
-}
+} /* LiteralStringSymbol */
-
-/* LiteralStringSymbol */
 .chroma .sx {
 	color: var(--color-syntax-LiteralStringOther);
-}
+} /* LiteralStringOther */
-
-/* LiteralStringOther */
 .chroma .vc {
 	color: var(--color-syntax-NameVariableClass);
-}
+} /* NameVariableClass */
-
-/* NameVariableClass */
 .chroma .vg {
 	color: var(--color-syntax-NameVariableGlobal);
-}
+} /* NameVariableGlobal */
-
-/* NameVariableGlobal */
 .chroma .vi {
 	color: var(--color-syntax-NameVariableInstance);
-}
+} /* NameVariableInstance */
-
-/* NameVariableInstance */
 .chroma .w {
 	color: var(--color-syntax-TextWhitespace);
-}
+} /* TextWhitespace */
-
-/* TextWhitespace */
 
 /* From web_src/less/codemirror/dark.less */
 .CodeMirror.cm-s-default .cm-property,
 .CodeMirror.cm-s-paper .cm-property {
 	color: #a0cc75;
 }
-
 .CodeMirror.cm-s-default .cm-header,
 .CodeMirror.cm-s-paper .cm-header {
 	color: #9daccc;
 }
-
 .CodeMirror.cm-s-default .cm-quote,
 .CodeMirror.cm-s-paper .cm-quote {
 	color: #009900;
 }
-
 .CodeMirror.cm-s-default .cm-keyword,
 .CodeMirror.cm-s-paper .cm-keyword {
 	color: #cc8a61;
 }
-
 .CodeMirror.cm-s-default .cm-atom,
 .CodeMirror.cm-s-paper .cm-atom {
 	color: #ef5e77;
 }
-
 .CodeMirror.cm-s-default .cm-number,
 .CodeMirror.cm-s-paper .cm-number {
 	color: #ff5656;
 }
-
 .CodeMirror.cm-s-default .cm-def,
 .CodeMirror.cm-s-paper .cm-def {
 	color: #e4e4e4;
 }
-
 .CodeMirror.cm-s-default .cm-variable-2,
 .CodeMirror.cm-s-paper .cm-variable-2 {
 	color: #00bdbf;
 }
-
 .CodeMirror.cm-s-default .cm-variable-3,
 .CodeMirror.cm-s-paper .cm-variable-3 {
 	color: #008855;
 }
-
 .CodeMirror.cm-s-default .cm-comment,
 .CodeMirror.cm-s-paper .cm-comment {
 	color: #8e9ab3;
 }
-
 .CodeMirror.cm-s-default .cm-string,
 .CodeMirror.cm-s-paper .cm-string {
 	color: #a77272;
 }
-
 .CodeMirror.cm-s-default .cm-string-2,
 .CodeMirror.cm-s-paper .cm-string-2 {
 	color: #ff5500;
 }
-
 .CodeMirror.cm-s-default .cm-meta,
 .CodeMirror.cm-s-default .cm-qualifier,
 .CodeMirror.cm-s-paper .cm-meta,
 .CodeMirror.cm-s-paper .cm-qualifier {
 	color: #ffb176;
 }
-
 .CodeMirror.cm-s-default .cm-builtin,
 .CodeMirror.cm-s-paper .cm-builtin {
 	color: #b7c951;
 }
-
 .CodeMirror.cm-s-default .cm-bracket,
 .CodeMirror.cm-s-paper .cm-bracket {
 	color: #999977;
 }
-
 .CodeMirror.cm-s-default .cm-tag,
 .CodeMirror.cm-s-paper .cm-tag {
 	color: #f1d273;
 }
-
 .CodeMirror.cm-s-default .cm-attribute,
 .CodeMirror.cm-s-paper .cm-attribute {
 	color: #bfcc70;
 }
-
 .CodeMirror.cm-s-default .cm-hr,
 .CodeMirror.cm-s-paper .cm-hr {
 	color: #999999;
 }
-
 .CodeMirror.cm-s-default .cm-url,
 .CodeMirror.cm-s-paper .cm-url {
 	color: #c5cfd0;
 }
-
 .CodeMirror.cm-s-default .cm-link,
 .CodeMirror.cm-s-paper .cm-link {
 	color: #d8c792;
 }
-
 .CodeMirror.cm-s-default .cm-error,
 .CodeMirror.cm-s-paper .cm-error {
 	color: #dbdbeb;

templates/components/card_repos.tmpl

@@ -1,41 +1,136 @@
+<style>
+	.ui.cards-column {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		width: 100%;
+		max-width: 700px;
+		margin: auto;
+		padding: 2rem 1rem;
+	}
+
+	.ui.card {
+		width: 100%;
+		margin: 0 !important;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		transition: transform 0.2s, box-shadow 0.2s;
+		background-color: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.1);
+	}
+
+	.ui.card:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+		background-color: rgba(255, 255, 255, 0.05);
+	}
+
+	.ui.card .content {
+		padding: 1.5rem;
+	}
+
+	.ui.card h3 {
+		color: #2185d0;
+		margin-bottom: 1rem;
+		font-size: 1.5rem;
+	}
+
+	.ui.card .description {
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 1.1rem;
+	}
+
+	.ui.card .description p {
+		margin: 0;
+		line-height: 1.6;
+	}
+
+	.button-container {
+		text-align: center;
+		margin: 3rem 0;
+	}
+
+	.ui.button.primary {
+		background-color: #2185d0;
+		color: white;
+		padding: 1em 2em;
+		border-radius: 4px;
+		border: none;
+		cursor: pointer;
+		width: auto;
+		display: inline-block;
+		font-size: 1.1rem;
+	}
+
+	.ui.button.primary:hover {
+		background-color: #1678c2;
+	}
+
+	.ui.button.primary a {
+		color: white;
+		text-decoration: none;
+		display: block;
+	}
+
+	@media (max-width: 768px) {
+		.ui.cards-column {
+			padding: 2rem 1rem;
+		}
+
+		.ui.card .content {
+			padding: 1.25rem;
+		}
+
+		.ui.card h3 {
+			font-size: 1.25rem;
+		}
+
+		.ui.card .description {
+			font-size: 1rem;
+		}
+
+		.ui.button.primary {
+			font-size: 1rem;
+			padding: 0.8em 1.5em;
+		}
+	}
+</style>
+
 <div class="ui cards-column stackable">
 	<div class="ui card">
 		<div class="content">
-      <a href="{{AppSubUrl}}/zeldon/mineping">
+			<a href="{{ AppSubUrl }}/zeldon/mineping">
 				<h3>Mineping</h3>
 			</a>
 			<div class="description">
-        <p>Javascript library for pinging Minecraft servers</p>
+				<p>Javascript library for pinging Minecraft servers.</p>
 			</div>
 		</div>
 	</div>
-
 	<div class="ui card">
 		<div class="content">
-      <a href="{{AppSubUrl}}/zeldon/zeldon-site">
+			<a href="{{ AppSubUrl }}/zeldon/razer-battery-report">
+				<h3>Razer Battery Report</h3>
+			</a>
+			<div class="description">
+				<p>Razer Mouse Battery Level Tray Indicator.</p>
+			</div>
+		</div>
+	</div>
+	<div class="ui card">
+		<div class="content">
+			<a href="{{ AppSubUrl }}/zeldon/zeldon-site">
 				<h3>Website</h3>
 			</a>
 			<div class="description">
-        <p>Sources of my personal website</a></p>
+				<p>Sources of my personal website.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="ui card">
-    <div class="content">
-      <a href="{{AppSubUrl}}/zeldon/http-proxy-server">
-        <h3>http-proxy-server</h3>
-      </a>
-      <div class="description">
-        <p>Simple http proxy server implemented in Go</p>
 			</div>
 		</div>
 	</div>
 </div>
-
+<div class="button-container">
-<div class="ui center stackable">
 	<button class="ui button primary">
-    <a class="item" rel="nofollow" style="text-decoration: none;color: inherit;"
+		<a class="item" rel="nofollow" href="{{ AppSubUrl }}/explore/repos">
-      href="{{AppSubUrl}}/explore/repos">Explore other!</a>
+			Explore other!
+		</a>
 	</button>
 </div>

templates/custom/header.tmpl

@@ -0,0 +1,170 @@
+<style>
+	:root {
+		--border-radius: 0.33rem;
+		--transition-speed: 150ms;
+
+		--color-timeline: var(--color-secondary);
+	}
+
+	/* Light-theme specific. */
+	.theme-gitea {
+		--color-primary: hsl(204deg, 90%, 52%);
+	}
+
+	/* Revert the red color in dashboard header buttons. */
+	.dashboard.feeds .right.stackable.menu > .item.active,
+	.dashboard.issues .right.stackable.menu > .item.active {
+		color: unset;
+	}
+
+	/* Global tweaks (all themes) */
+	/* Buttons. */
+	.ui.button,
+	a.ui.label {
+		transition: background-color var(--transition-speed),
+			color var(--transition-speed);
+	}
+
+	/* Avatars. */
+	img.ui.avatar {
+		border-radius: 50%;
+	}
+
+	/* Dim the "header" of sections in dropdown menus. */
+	.ui.dropdown .menu > .header:not(.ui) {
+		color: var(--color-text-light-3);
+	}
+
+	/* Homepage. */
+	/* By default Gitea colors links green */
+	.home a {
+		color: var(--color-primary);
+	}
+
+	/* Hide brand navbar completely when not in mobile. */
+	@media (min-width: 768px) {
+		.following.bar #navbar .brand {
+			display: none;
+		}
+	}
+
+	/* Repository page. */
+	.repository .file-view.markdown a {
+		color: var(--color-primary);
+	}
+
+	.repository .file-view .markup img {
+		border-radius: var(--border-radius);
+	}
+
+	/* Repository folder icon. */
+	.repository.file.list
+		#repo-files-table
+		tbody
+		.svg.octicon-file-directory-fill {
+		color: currentColor;
+	}
+
+	/* Repository stats. */
+	.repository-summary-language-stats {
+		height: unset;
+	}
+
+	.repository .repository-summary .segment.language-stats {
+		height: 4px;
+	}
+
+	/* Repository: Activity page. */
+	.stats-table {
+		margin-bottom: var(--spacer);
+	}
+
+	/* Hide branches from PR list. */
+	.issue.list .branches {
+		display: none !important;
+	}
+
+	/* Footer. */
+	footer {
+		color: var(--color-footer-text);
+	}
+
+	footer a {
+		color: var(--color-footer-links);
+	}
+
+	/* Manual preview tweaks. */
+	.restructuredtext a {
+		color: var(--color-accent) !important;
+	}
+	.restructuredtext :is(section, dd) > div {
+		background-color: var(--color-markup-code-block);
+		padding-bottom: 8px;
+		margin-bottom: 16px;
+		padding: 0;
+		border-radius: 5px;
+	}
+	.restructuredtext section div > p:first-child {
+		font-weight: 700;
+	}
+	.restructuredtext section div * {
+		margin: 0 !important;
+	}
+	.restructuredtext section div > :is(p, dl) {
+		padding: 8px 12px;
+	}
+	.restructuredtext section div > ul {
+		padding-bottom: 12px;
+	}
+	.restructuredtext section dl dt {
+		font-style: normal;
+	}
+
+	/* Alert blocks. */
+	blockquote.attention-note {
+		background-color: var(--color-info-bg);
+		border-left-color: var(--color-blue-dark-1);
+	}
+	strong.attention-note,
+	span.attention-note {
+		color: var(--color-blue-dark-1);
+	}
+
+	blockquote.attention-tip {
+		background-color: var(--color-success-bg);
+		border-left-color: var(--color-success-text);
+	}
+	strong.attention-tip,
+	span.attention-tip {
+		color: var(--color-success-text);
+	}
+
+	blockquote.attention-important {
+		background-color: var(--color-violet-dark-bg);
+		border-left-color: var(--color-violet-dark-1);
+	}
+
+	strong.attention-important,
+	span.attention-important {
+		color: var(--color-violet-dark-1);
+	}
+
+	blockquote.attention-warning {
+		background-color: var(--color-warning-bg);
+		border-left-color: var(--color-warning-text);
+	}
+
+	strong.attention-warning,
+	span.attention-warning {
+		color: var(--color-warning-text);
+	}
+
+	blockquote.attention-caution {
+		background-color: var(--color-error-bg);
+		border-left-color: var(--color-red-dark-1);
+	}
+	strong.attention-caution,
+	span.attention-caution {
+		color: var(--color-red-dark-1);
+	}
+</style>

templates/home.tmpl

@@ -1,26 +1,66 @@
 {{template "base/head" .}}
+<style>
+	.page-content.home {
+		max-width: 850px;
+		margin: 0 auto;
+	}
+
+	.hero {
+		text-align: center;
+		margin-bottom: 3rem;
+	}
+
+	.hero .title {
+		color: #2185d0;
+		margin-bottom: 1.5rem;
+		font-size: 3rem;
+	}
+
+	.hero p {
+		font-size: 1.25rem;
+	}
+
+	.intro-text {
+		text-align: center;
+		font-size: 1.25rem;
+	}
+
+	@media (max-width: 768px) {
+		.page-content.home {
+			padding: 1rem;
+		}
+
+		.hero .title {
+			font-size: 2rem;
+		}
+
+		.hero p,
+		.intro-text {
+			font-size: 1rem;
+		}
+	}
+</style>
 
 <div class="page-content home">
 	<div class="ui stackable middle very relaxed page grid">
 		<div class="sixteen wide aligned column">
 			<div class="hero">
 				<h2 class="ui header title">
-          {{AppName}}
+					{{ AppName }}
 				</h2>
 				<p>
-          Welcome to the Zeldon's Projects portal!
+					Welcome to the Zeldon's Projects portal! This is where all the
-          This is where all the codebases are coordinated and managed.
+					codebases are coordinated and managed.
 				</p>
 			</div>
-
+			<div class="intro-text">
-      <div class="ui stackable twelve column mb-4">
+				<p>
-        <p>This portal hosts more than just the project sources, bug and patch tracker. Explore the other repositories!
+					This portal hosts more than just the project sources, bug and patch
+					tracker. Explore the other repositories!
 				</p>
 			</div>
-
 			{{template "components/card_repos" .}}
 		</div>
 	</div>
 </div>
-
 {{template "base/footer" .}}