initial commit

.gitignore

@@ -0,0 +1,2 @@
+vendor/*
+*.old*

README.md

@@ -1,2 +1,58 @@
 # gogs-themes
-A attempt to make my self-hosted gogs dark and responsive
+> A attempt to make my self-hosted gogs ***dark*** and ***responsive***
+
+This is very hacky, we need to overide 3 CSS libraries 😭. But is does the job, at least on my machine 😆. 
+
+Not all page will be *fully* responsive, but main public pages look more frendly. 
+Not all pages have been treated. At this time, maybe missing things, mostly on admin pages.
+
+## Screenshots
+
+![project-commit-desktop](/screenshots/project-commit-desktop.png)
+
+![project-desktop](/screenshots/project-desktop.png)
+
+![project-desktop](/screenshots/project-desktop.png)
+
+![project-desktop](/screenshots/project-list-mobile.png)
+
+![project-desktop](/screenshots/project-list-desktop.png)
+
+Small bonus, you can choose the accent color among the following:
+yellow, red, blue, green magenta.
+
+![themes](/screenshots/themes.png)
+
+## Usage
+
+You need to the follow the instructions [here](https://gogs.io/docs/features/custom_template).
+
+-   First place the `.css` file(s) under the public directory (`custom/public/css/`). 
+
+-   Then link the desired `.css` in your custom template:
+
+    Edit the file `custom/templates/inject/head.tmpl` and add a link to desired stylesheet: 
+
+    ```
+    <link rel="stylesheet" href="/css/kristuff.gogs.dark.min.css">
+    ```
+
+    Or
+
+    ```
+    <link rel="stylesheet" href="/css/kristuff.gogs.dark-accent-blue.min.css">
+    ```
+
+- You need to restart **gogs** to apply changes to template. Then, you don't need to restart to apply changes in `.css`.  
+
+## License
+
+The MIT License (MIT)
+
+Copyright (c) 2022 Christophe Buliard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

dist/kristuff.gogs.dark-accent-blue.css

@@ -0,0 +1,1136 @@
+/*!
+ *   ____
+ *  / ___| ___   __ _ ___    _   _
+ * | |  _ / _ \ / _` / __|  | |_| |_  ___ _ __  ___ ___
+ * | |_| | (_) | (_| \__ \  |  _| ' \/ -_) '  \/ -_|_-<
+ *  \____|\___/ \__, |___/   \__|_||_\___|_|_|_\___/__/
+ *              |___/
+ *
+ * This file is part of kristuff/gogs-themes 
+ * Copyright (c) 2022 Christophe Buliard  
+ */
+:root {
+  --color-active: #195ea9;
+  --color-active-darker: #175699
+}
+.bg-code,
+.repository.file.list #file-content .code-view .lines-code .hljs,
+.repository.file.list #file-content .code-view .lines-code ol,
+.repository.file.list #file-content .code-view .lines-code pre,
+.repository.file.list #file-content .code-view .lines-num .hljs,
+.repository.file.list #file-content .code-view .lines-num ol,
+.repository.file.list #file-content .code-view .lines-num pre {
+  color: #f8f8f2!important;
+  background-color: var(--color-pre-bg)!important
+}
+.repository.file.list #file-content .code-view .lines-num {
+  color: #595959!important;
+  background-color: var(--color-pre-bg)!important
+}
+code[class*=language-],
+pre[class*=language-] {
+  color: #f8f8f2;
+  background: 0 0;
+  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  scrollbar-color: var(--color-pre-scrollbar1) var(--color-pre-scrollbar2)
+}
+pre[class*=language-] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: .3em!important
+}
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background: var(--color-pre-bg)!important
+}
+:not(pre) > code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090!important
+}
+.token.punctuation {
+  color: #f8f8f2!important
+}
+.token.namespace {
+  opacity: .7
+}
+.token.constant,
+.token.deleted,
+.token.symbol,
+.token.tag {
+  color: #5189f4!important
+}
+.token.property {
+  color: #59d7f4!important
+}
+.token.boolean,
+.token.number {
+  color: #5189f4!important
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector {
+  color: #ec586d!important
+}
+.token.attr-value,
+.token.string {
+  color: #ff9267!important
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+  color: #f8f8f2!important
+}
+.token.atrule,
+.token.class-name,
+.token.function {
+  color: #f8f8f2!important
+}
+.token.keyword {
+  color: #5189f4!important
+}
+.token.important,
+.token.regex {
+  color: #5189f4!important
+}
+.XXX_token.bold,
+.XXX_token.important {
+  font-weight: 700
+}
+.token.italic {
+  font-style: italic
+}
+.token.entity {
+  cursor: help
+}
+.hljs-section,
+.hljs-selector-id,
+.hljs-title {
+  color: #f94141!important
+}
+.hljs-comment,
+.hljs-quote {
+  color: #8a8899!important
+}
+:root {
+  --color-bg-primary: #1e2329;
+  --color-bg-secondary: #292e35;
+  --color-text-primary: #8b8b8b;
+  --color-text-light: #424851;
+  --color-icon: #3e4248;
+  --color-text-accent1: #c9c8c8;
+  --color-text-accent2: #ffffff;
+  --color-border: #3b4251;
+  --color-border-light: #343a42;
+  --color-border-xlight: #313a44;
+  --color-badge-bg: #2d333b;
+  --color-input-bg: rgba(0,0,0,.15);
+  --color-bt-light: #2d333b;
+  --color-bt-light-hover: #323841;
+  --color-button-bg: #0c0c0c;
+  --color-button-bg-hover: #000;
+  --color-code: #c6c6c6;
+  --color-code-bg: #191d22;
+  --color-pre-bg: #292d35;
+  --color-pre-scrollbar1: #313137;
+  --color-pre-scrollbar2: #171b20
+}
+* {
+  scrollbar-color: #313137 #171b20
+}
+.home .hero .octicon,
+.home a {
+  color: var(--color-active)
+}
+body:not(.full-width) {
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary)
+}
+a {
+  color: var(--color-text-accent1)
+}
+a:hover {
+  color: var(--color-text-accent2)
+}
+.ui .text.black:hover {
+  color: #fff
+}
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+  color: var(--color-icon)
+}
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+  color: var(--color-text-primary)
+}
+.ui.button:not(.label),
+.ui.header,
+.ui.input input,
+.ui.menu,
+h2,
+h3,
+h4,
+h5 {
+  color: var(--color-text-accent1)
+}
+h1 {
+  color: var(--color-text-accent2)
+}
+.markdown:not(code) h1 .octicon-link,
+.markdown:not(code) h2 .octicon-link,
+.markdown:not(code) h3 .octicon-link,
+.markdown:not(code) h4 .octicon-link,
+.markdown:not(code) h5 .octicon-link,
+.markdown:not(code) h6 .octicon-link {
+  color: var(--color-text-light)
+}
+.ui.card,
+.ui.cards > .card {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  box-shadow: none
+}
+.ui.secondary.pointing.menu {
+  border-color: var(--color-border)
+}
+.ui.secondary.pointing.menu .active.item {
+  border-color: var(--color-active)
+}
+.ui.dropdown .menu > .divider {
+  border-color: var(--color-border)
+}
+.ui.form .field > label {
+  color: var(--color-text-accent1)
+}
+.ui .warning.header {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)
+}
+.settings .hook.list > .item:not(:last-child) {
+  border-color: var(--color-border-light)!important
+}
+.ui.card .content:not(.extra) {
+  color: var(--color-text-accent1);
+  font-weight: 700
+}
+.ui.card .text.black,
+.ui.card > .extra a:not(.ui),
+.ui.cards > .card > .extra a:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.user.list .item .description a {
+  color: var(--color-text-accent1)
+}
+.ui.user.list .item .description a:hover {
+  color: var(--color-text-accent2)
+}
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+  border-color: var(--color-border-xlight)
+}
+.ui .text.black,
+.ui .text.black a,
+.ui.accordion .title:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.label {
+  color: var(--color-text-accent1);
+  background: var(--color-input-bg)
+}
+.ui.labela:hover {
+  color: var(--color-text-accent2)
+}
+.ui.label.basic {
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-border)
+}
+.markdown:not(code) .highlight pre,
+.markdown:not(code) pre {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li.private {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li:not(:last-child) {
+  border-color: var(--color-border-light)
+}
+.dashboard .six.wide.column .menu {
+  border-bottom: 1px solid var(--color-border)
+}
+.ui .info.segment.top {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui[class*="top attached"].segment {
+  border-radius: 7px
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
+  background-color: var(--color-bg-primary)!important;
+  border-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .file-body.file-code .lines-num {
+  background-color: var(--color-bg-primary)!important
+}
+.repository .diff-file-box .code-diff .lines-num,
+.repository .diff-file-box .file-body.file-code .lines-num-old {
+  border-right-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .code-diff tbody tr.add-code td,
+.repository .diff-file-box .code-diff tbody tr.del-code td {
+  background-color: var(--color-bg-secondary)!important;
+  border-color: var(--color-border)!important
+}
+.repository .diff-file-box .code-diff tbody tr .removed-code {
+  background-color: #d72f2f;
+  color: #fff!important
+}
+.repository .diff-file-box .code-diff tbody tr .added-code {
+  background-color: #1fb91f;
+  color: #fff!important
+}
+.ui.grey.label,
+.ui.grey.labels .label {
+  border-color: var(--color-badge-bg)!important
+}
+.ui.menu .item > .label {
+  background-color: var(--color-badge-bg)
+}
+.fitted.item.choose.reference .menu .header .text {
+  padding-bottom: 6px;
+  border-bottom: 2px solid transparent
+}
+.fitted.item.choose.reference .menu .header .text.black {
+  border-color: var(--color-active)
+}
+.ui .text.black {
+  color: #fff
+}
+.ui.selectable.table tbody tr:hover,
+.ui.table tbody tr td.selectable:hover {
+  color: var(--color-text-accent1)
+}
+.ui.blue.button,
+.ui.blue.buttons .button,
+.ui.green.button,
+.ui.green.buttons .button {
+  background-color: var(--color-active-darker)
+}
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
+  background-color: var(--color-active)
+}
+.hljs {
+  color: var(--color-text-primary)!important
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: var(--color-text-accent)!important
+}
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-number,
+.hljs-tag .hljs-attr,
+.hljs-template-variable,
+.hljs-variable {
+  color: #0acccc!important
+}
+.hljs-doctag,
+.hljs-string {
+  color: #fd6d26!important
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary)
+}
+footer {
+  border-top: none;
+  color: var(--color-text-light)!important;
+  background-color: var(--color-bg-primary)
+}
+footer .container .links > * {
+  border-left: 1px solid var(--color-border-xlight)
+}
+.ui.attached.header,
+.ui.segment {
+  background: 0 0;
+  border: none
+}
+.ui.checkbox + label:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-primary)
+}
+.ui.checkbox input:checked ~ .box::after,
+.ui.checkbox input:checked ~ label::after {
+  color: var(--color-text-accent1)
+}
+.ui.checkbox label::before {
+  background: var(--color-input-bg)!important
+}
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label,
+.ui.checkbox .box::after,
+.ui.checkbox label,
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label:hover,
+.ui.checkbox .box::after:hover,
+.ui.checkbox label::after:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-accent2)
+}
+.ui.checkbox input:focus ~ label {
+  color: var(--color-text-accent1)!important
+}
+.ui.checkbox .box::before,
+.ui.checkbox label::before {
+  border-color: var(--color-border)!important
+}
+.ui.form .required.field > .checkbox::after,
+.ui.form .required.field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.fields:not(.grouped) > .field > label::after {
+  color: var(--color-active)
+}
+.ui.form input:not([type]),
+.ui.form input[type=date],
+.ui.form input[type=datetime-local],
+.ui.form input[type=email],
+.ui.form input[type=file],
+.ui.form input[type=number],
+.ui.form input[type=password],
+.ui.form input[type=search],
+.ui.form input[type=tel],
+.ui.form input[type=text],
+.ui.form input[type=time],
+.ui.form input[type=url],
+.ui.form textarea {
+  background-color: var(--color-input-bg);
+  border: 1px solid var(--color-border-light);
+  color: var(--color-text-primary)
+}
+.ui.form input:not([type]):focus,
+.ui.form input[type=date]:focus,
+.ui.form input[type=datetime-local]:focus,
+.ui.form input[type=email]:focus,
+.ui.form input[type=file]:focus,
+.ui.form input[type=number]:focus,
+.ui.form input[type=password]:focus,
+.ui.form input[type=search]:focus,
+.ui.form input[type=tel]:focus,
+.ui.form input[type=text]:focus,
+.ui.form input[type=time]:focus,
+.ui.form input[type=url]:focus,
+.ui.form textarea:focus {
+  background-color: var(--color-input-bg);
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-active)
+}
+.ui.input > input,
+.ui.input > input:focus,
+.ui.input.focus > input {
+  background-color: var(--color-input-bg)
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input,
+.explore.users .ui.action.input:not([class*="left action"]) > input {
+  border-radius: 100em!important;
+  border-right-color: var(--color-border)!important;
+  position: relative;
+  padding-right: 120px;
+  padding-left: 15px;
+  height: 42px;
+  width: 100%!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input.active,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input.active,
+.explore.users .ui.action.input:not([class*="left action"]) > input.active {
+  border-right-color: var(--color-border)!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.users .ui.action.input:not([class*="left action"]) > input + .button {
+  position: absolute;
+  right: 0;
+  height: 42px;
+  border-radius: 100em!important
+}
+.user.signin .ui.form .field:last-child {
+  text-align: center
+}
+.user.signin .ui.form .field:last-child a {
+  color: var(--color-text-primary);
+  font-size: .95rem
+}
+.user.signin .ui.form .field:last-child a:hover {
+  color: var(--color-text-accent2)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  color: var(--color-text-accent1)!important
+}
+.ui.input {
+  color: var(--color-text-primary)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  border-color: var(--color-border)
+}
+.ui.attached.segment {
+  border: none
+}
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.fields > label {
+  color: var(--color-text-accent1)
+}
+body:not(.full-width) {
+  min-width: 100%
+}
+.full.height {
+  margin-bottom: -60px;
+  min-height: calc(100% - 60px)
+}
+.admin,
+.dashboard,
+.explore,
+.organization,
+.repository,
+.user:not(.context):not(.list) {
+  padding-top: 80px
+}
+.home {
+  padding-top: 20px
+}
+.home .stackable {
+  padding-top: 40px
+}
+.home .logo img {
+  max-width: 100%
+}
+footer {
+  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 10px
+}
+footer .container .links > a[target="_blank"] {
+  display: none
+}
+footer > .ui.container {
+  border-top: 1px solid var(--color-border-xlight)
+}
+footer > .ui.container .ui.left::after {
+  display: inline-flex;
+  content: " - Custom Theme by @Kristuff"
+}
+@media only screen and (max-width:767px) {
+  footer > .ui.container {
+    text-align: center!important
+  }
+  footer > .ui.container .ui.left,
+  footer > .ui.container .ui.right {
+    float: initial
+  }
+}
+@media only screen and (max-width:1023px) {
+  footer > .ui.container {
+    width: calc(100% - 24px);
+    margin: 0 auto
+  }
+}
+.ui.card > .image:not(.ui) > img,
+.ui.cards > .card > .image:not(.ui) > img {
+  border-radius: 50%;
+  margin: 12px;
+  width: calc(100% - 24px)
+}
+.user.profile .ui.card .profile-avatar {
+  height: initial;
+  background: 0 0
+}
+@media only screen and (max-width:767px) {
+  .markdown:not(code).file-view {
+    padding: 1em 1em 1em!important
+  }
+  .repository #git-stats + .ui.menu {
+    flex-wrap: wrap
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item {
+    margin-top: 12px;
+    width: 100%
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item #clone-panel {
+    width: 100%;
+    margin: 0
+  }
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 10px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 94px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 94px;
+    top: 50px;
+    right: 12px
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 90px
+  }
+}
+@media only screen and (min-width:768px) and (max-width:1023px) {
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 18px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 204px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 204px;
+    top: 50px;
+    right: 0
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 192px;
+    height: initial
+  }
+}
+@media (max-width:1023px) {
+  .ui.menu {
+    border-radius: 0
+  }
+  .ui.vertical.menu {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto
+  }
+  .ui.vertical.menu .header {
+    display: none
+  }
+  .ui.vertical.menu .item {
+    border: none;
+    border-bottom: 3px solid transparent
+  }
+  .ui.vertical.menu .item:hover {
+    border-bottom-color: var(--color-border-xlight)
+  }
+  .ui.vertical.menu .item.active {
+    border-bottom-color: var(--color-active)
+  }
+  .ui.container:not(.fluid) {
+    width: 100%!important
+  }
+  .ui.column.grid > [class*="eleven wide"].column,
+  .ui.column.grid > [class*="five wide"].column,
+  .ui.column.grid > [class*="four wide"].column,
+  .ui.column.grid > [class*="twelve wide"].column,
+  .ui.grid > .column.row > [class*="eleven wide"].column,
+  .ui.grid > .column.row > [class*="five wide"].column,
+  .ui.grid > .column.row > [class*="four wide"].column,
+  .ui.grid > .column.row > [class*="twelve wide"].column,
+  .ui.grid > .row > [class*="eleven wide"].column,
+  .ui.grid > .row > [class*="five wide"].column,
+  .ui.grid > .row > [class*="four wide"].column,
+  .ui.grid > .row > [class*="twelve wide"].column,
+  .ui.grid > [class*="eleven wide"].column,
+  .ui.grid > [class*="five wide"].column,
+  .ui.grid > [class*="four wide"].column,
+  .ui.grid > [class*="twelve wide"].column {
+    width: 100%!important
+  }
+}
+@media (max-width:767px) {
+  .dashboard.feeds .ui.grid {
+    flex-direction: column-reverse
+  }
+  .dashboard.feeds .ui.grid > [class*="six wide"].column,
+  .dashboard.feeds .ui.grid > [class*="ten wide"].column {
+    width: 100%!important
+  }
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  width: 100%!important;
+  max-width: 380px;
+  border-radius: 7px
+}
+.user.activate form .header,
+.user.forgot.password form .header,
+.user.reset.password form .header,
+.user.signin form .header,
+.user.signup form .header {
+  padding: 15px!important;
+  margin: 0;
+  background: 0 0
+}
+.user.activate form .inline.field > label,
+.user.forgot.password form .inline.field > label,
+.user.reset.password form .inline.field > label,
+.user.signin form .inline.field > label,
+.user.signup form .inline.field > label {
+  display: block;
+  text-align: left;
+  margin-bottom: 6px!important
+}
+.user.activate form input,
+.user.activate form textarea,
+.user.forgot.password form input,
+.user.forgot.password form textarea,
+.user.reset.password form input,
+.user.reset.password form textarea,
+.user.signin form input,
+.user.signin form textarea,
+.user.signup form input,
+.user.signup form textarea {
+  width: 100%!important
+}
+.user.signin .ui.form .ui.button {
+  margin-bottom: 12px;
+  width: 100%;
+  border-radius: 100em;
+  height: 45px
+}
+.following.bar.light {
+  background-color: var(--color-bg-secondary)!important;
+  border-bottom: 1px solid var(--color-bg-secondary);
+  color: var(--color-text-accent1)!important;
+  position: fixed;
+  top: 0
+}
+@media (max-width:767px) {
+  .following.bar .top.menu {
+    display: flex;
+    overflow-x: auto
+  }
+}
+.following.bar .top.menu .octicon {
+  color: var(--color-text-accent1)
+}
+.following.bar .top.menu a.item.brand {
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand) {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand)[target="_blank"] {
+  display: none
+}
+.following.bar .top.menu .dropdown.item.active,
+.following.bar .top.menu .dropdown.item:hover,
+.following.bar .top.menu a.item:not(.brand):hover {
+  background: rgba(0,0,0,.2)!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand).active,
+.ui.secondary.menu .item:not(.brand).active:hover,
+.ui.secondary.menu .item:not(.brand):hover {
+  border-radius: 5px;
+  background: 0 0!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand) {
+  margin: 0
+}
+.following.bar .head.link.item {
+  color: var(--color-text-accent1)!important
+}
+.ui.vertical.menu {
+  background: 0 0
+}
+.ui.secondary.menu .item,
+.ui.vertical.menu .item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  border-radius: 0
+}
+.ui.secondary.menu .item.active,
+.ui.vertical.menu .item.active {
+  background: 0 0;
+  font-weight: 600;
+  color: var(--color-text-accent1)
+}
+.ui.secondary.menu .item:hover,
+.ui.vertical.menu .item:hover {
+  background: 0 0;
+  color: var(--color-text-accent2)
+}
+@media (min-width:1024px) {
+  .ui.vertical.menu {
+    border: 1px solid var(--color-border)
+  }
+  .ui.vertical.menu .active.item {
+    border-left: 3px solid var(--color-active);
+    background: var(--color-bg-secondary)
+  }
+}
+.ui.vertical.menu .header.item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  text-align: center;
+  padding-left: 0
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  border: 1px solid var(--color-border)
+}
+.ui.dropdown .menu,
+.ui.menu .dropdown.item .menu,
+.ui.menu .ui.dropdown .menu > .item:hover {
+  background: var(--color-bg-secondary)!important
+}
+.ui.dropdown .menu .selected.item,
+.ui.dropdown .menu > .header,
+.ui.dropdown .menu > .item,
+.ui.dropdown.selected {
+  color: var(--color-text-accent1)!important
+}
+.ui.dropdown .menu > .item:hover,
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu .ui.dropdown .menu > .active.item,
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item,
+.ui.menu a.item:hover {
+  color: var(--color-text-accent2)!important
+}
+.ui.menu {
+  background: 0 0!important;
+  color: var(--color-text-primary)!important
+}
+.ui.menu .item.active,
+.ui.menu .ui.menu .item.active:hover {
+  font-weight: 700
+}
+.ui.menu .ui.dropdown .menu > .item {
+  color: var(--color-text-primary)!important;
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu .item {
+  border-bottom: 3px solid transparent;
+  color: var(--color-text-accent1)
+}
+.ui.menu .item.active,
+.ui.menu .item.active:hover,
+.ui.menu .item:hover {
+  color: var(--color-text-accent2)
+}
+.ui.menu:not(.vertical) .item.active {
+  border-bottom-color: var(--color-active)
+}
+.ui.fluid.basic.button.center.ajax-load-button {
+  border-radius: 100em
+}
+.ui.fluid.basic.button.center.ajax-load-button:hover {
+  background-color: var(--color-bt-light-hover);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.input > input {
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border)
+}
+#clone-panel .ui.input > input .ui.input > input:focus,
+#clone-panel .ui.input > input .ui.input.focus > input {
+  background: var(--color-input-bg);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.basic.button:first-child {
+  border: none
+}
+#clone-panel .ui.basic.button:last-child {
+  border-left: none
+}
+.ui.buttons > .ui.dropdown:last-child .menu,
+.ui.menu .right.dropdown.item .menu,
+.ui.menu .right.menu .dropdown:last-child .menu {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu > .item:first-child,
+.user.profile .ui.secondary.menu .item:not(.brand).active {
+  border-radius: 0
+}
+.ui.button {
+  background-color: var(--color-button-bg)
+}
+.ui.button:hover {
+  background-color: var(--color-button-bg-hover)
+}
+.ui.selection.dropdown {
+  color: var(--color-text-primary);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-border)
+}
+.ui.selection.dropdown.active {
+  border-color: var(--color-active)
+}
+.repository .header-wrapper {
+  color: var(--color-text-accent1)!important;
+  background-color: transparent;
+  padding-top: 10px
+}
+.repository .head .mega-octicon {
+  width: 24px;
+  font-size: 24px;
+  color: var(--color-icon)
+}
+.ui.breadcrumb .divider {
+  color: var(--color-text-light);
+  margin: 0
+}
+.repository .head .fork-flag {
+  margin-left: 34px;
+  margin-top: 6px;
+  color: var(--color-text-light)
+}
+.ui.repository.list .item:not(:first-child) {
+  border-top: 1px solid var(--color-border-light)
+}
+.repository #clone-panel input {
+  border-bottom: 1px solid var(--color-border-light);
+  border-top: 1px solid var(--color-border-light);
+  border-right: none
+}
+#clone-panel .ui.action.input:not([class*="left action"]) > input:focus {
+  border-left-color: transparent!important;
+  border-right-color: transparent!important
+}
+.repository.file.list #repo-desc {
+  padding: 12px 0
+}
+.repository #git-stats {
+  border: 1px solid var(--color-border-light);
+  background: var(--color-bg-primary)
+}
+.repository #git-stats .ui .text.black {
+  color: var(--color-text-primary)
+}
+.repository #git-stats .ui .text.black:hover {
+  color: var(--color-text-accent2)
+}
+.repository #file-content {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  margin-top: 24px
+}
+.repository .ui.top.attached.header {
+  border-bottom: 1px solid var(--color-border);
+  border-radius: 0
+}
+.repository #repo-files-table tr:hover {
+  background-color: var(--color-bg-secondary)!important
+}
+.repository .ui.header .ui.right {
+  display: flex;
+  align-items: center
+}
+@media only screen and (max-width:767px) {
+  .repository .ui.header .ui.right {
+    margin-top: 18px;
+    float: initial
+  }
+}
+.repository .ui.header .ui.right .ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) {
+  border: 1px solid var(--color-border)!important;
+  background: var(--color-bt-light)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button {
+  height: 32px;
+  border: none!important;
+  line-height: 32px;
+  padding: 0 6px 0 12px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button:hover {
+  background: var(--color-bt-light-hover)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .label {
+  background: rgba(0,0,0,.2);
+  border-radius: 100em;
+  padding: 3px 6px;
+  border: none!important;
+  margin-right: 6px!important
+}
+.repository .ui.secondary.menu {
+  margin: 0
+}
+.markdown:not(code) h1 {
+  border-bottom: 1px solid var(--color-border)
+}
+.markdown:not(code) h2 {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.markdown:not(code) blockquote {
+  border-left: 4px solid var(--color-text-accent1)
+}
+.mega-octicon,
+.octicon {
+  color: var(--color-text-light)
+}
+.ui.secondary.menu .ui.breadcrumb:first-child {
+  margin-left: 12px
+}
+.ui.table {
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: 0 0
+}
+.ui.table thead th {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border)
+}
+.ui.table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.avatar > img,
+.ui img.avatar.image {
+  border-radius: 50%
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  color: var(--color-text-primary)!important
+}
+.ui.basic.button i,
+.ui.basic.buttons .button i {
+  color: var(--color-text-light)!important
+}
+.repository .ui.tabs.container .ui.menu {
+  border-bottom: 1px solid var(--color-border)!important
+}
+.ui.tabular.menu .item {
+  color: var(--color-text-primary)
+}
+.ui.tabular.menu .item i {
+  color: var(--color-text-light)
+}
+.ui.tabular.menu .item::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 3px;
+  border-radius: 100em;
+  background: 0 0;
+  position: absolute;
+  bottom: 0;
+  margin: 0 -1.42857143em
+}
+.ui.tabular.menu .active.item {
+  border: none;
+  background: 0 0;
+  color: var(--color-text-accent1)
+}
+.ui.tabular.menu .active.item::after {
+  background: var(--color-active)
+}
+.menu + #file-content {
+  margin-top: 24px
+}
+.ui.right.file-actions .ui.button {
+  background-color: var(--color-bt-light);
+  color: var(--color-text-accent1)
+}
+.ui.right.file-actions .ui.button:hover {
+  color: var(--color-text-accent2);
+  background-color: var(--color-bt-light-hover)
+}
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-accent1)
+}
+.ui.basic.button:focus,
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.buttons .button:hover {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)!important
+}
+.ui.basic.button:focus i,
+.ui.basic.button:hover i,
+.ui.basic.buttons .button:focus i,
+.ui.basic.buttons .button:hover i {
+  color: var(--color-text-accent1)!important
+}

dist/kristuff.gogs.dark-accent-green.css

@@ -0,0 +1,1136 @@
+/*!
+ *   ____
+ *  / ___| ___   __ _ ___    _   _
+ * | |  _ / _ \ / _` / __|  | |_| |_  ___ _ __  ___ ___
+ * | |_| | (_) | (_| \__ \  |  _| ' \/ -_) '  \/ -_|_-<
+ *  \____|\___/ \__, |___/   \__|_||_\___|_|_|_\___/__/
+ *              |___/
+ *
+ * This file is part of kristuff/gogs-themes 
+ * Copyright (c) 2022 Christophe Buliard  
+ */
+:root {
+  --color-active: #158439;
+  --color-active-darker: #127a33
+}
+.bg-code,
+.repository.file.list #file-content .code-view .lines-code .hljs,
+.repository.file.list #file-content .code-view .lines-code ol,
+.repository.file.list #file-content .code-view .lines-code pre,
+.repository.file.list #file-content .code-view .lines-num .hljs,
+.repository.file.list #file-content .code-view .lines-num ol,
+.repository.file.list #file-content .code-view .lines-num pre {
+  color: #f8f8f2!important;
+  background-color: var(--color-pre-bg)!important
+}
+.repository.file.list #file-content .code-view .lines-num {
+  color: #595959!important;
+  background-color: var(--color-pre-bg)!important
+}
+code[class*=language-],
+pre[class*=language-] {
+  color: #f8f8f2;
+  background: 0 0;
+  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  scrollbar-color: var(--color-pre-scrollbar1) var(--color-pre-scrollbar2)
+}
+pre[class*=language-] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: .3em!important
+}
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background: var(--color-pre-bg)!important
+}
+:not(pre) > code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090!important
+}
+.token.punctuation {
+  color: #f8f8f2!important
+}
+.token.namespace {
+  opacity: .7
+}
+.token.constant,
+.token.deleted,
+.token.symbol,
+.token.tag {
+  color: #5189f4!important
+}
+.token.property {
+  color: #59d7f4!important
+}
+.token.boolean,
+.token.number {
+  color: #5189f4!important
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector {
+  color: #ec586d!important
+}
+.token.attr-value,
+.token.string {
+  color: #ff9267!important
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+  color: #f8f8f2!important
+}
+.token.atrule,
+.token.class-name,
+.token.function {
+  color: #f8f8f2!important
+}
+.token.keyword {
+  color: #5189f4!important
+}
+.token.important,
+.token.regex {
+  color: #5189f4!important
+}
+.XXX_token.bold,
+.XXX_token.important {
+  font-weight: 700
+}
+.token.italic {
+  font-style: italic
+}
+.token.entity {
+  cursor: help
+}
+.hljs-section,
+.hljs-selector-id,
+.hljs-title {
+  color: #f94141!important
+}
+.hljs-comment,
+.hljs-quote {
+  color: #8a8899!important
+}
+:root {
+  --color-bg-primary: #1e2329;
+  --color-bg-secondary: #292e35;
+  --color-text-primary: #8b8b8b;
+  --color-text-light: #424851;
+  --color-icon: #3e4248;
+  --color-text-accent1: #c9c8c8;
+  --color-text-accent2: #ffffff;
+  --color-border: #3b4251;
+  --color-border-light: #343a42;
+  --color-border-xlight: #313a44;
+  --color-badge-bg: #2d333b;
+  --color-input-bg: rgba(0,0,0,.15);
+  --color-bt-light: #2d333b;
+  --color-bt-light-hover: #323841;
+  --color-button-bg: #0c0c0c;
+  --color-button-bg-hover: #000;
+  --color-code: #c6c6c6;
+  --color-code-bg: #191d22;
+  --color-pre-bg: #292d35;
+  --color-pre-scrollbar1: #313137;
+  --color-pre-scrollbar2: #171b20
+}
+* {
+  scrollbar-color: #313137 #171b20
+}
+.home .hero .octicon,
+.home a {
+  color: var(--color-active)
+}
+body:not(.full-width) {
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary)
+}
+a {
+  color: var(--color-text-accent1)
+}
+a:hover {
+  color: var(--color-text-accent2)
+}
+.ui .text.black:hover {
+  color: #fff
+}
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+  color: var(--color-icon)
+}
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+  color: var(--color-text-primary)
+}
+.ui.button:not(.label),
+.ui.header,
+.ui.input input,
+.ui.menu,
+h2,
+h3,
+h4,
+h5 {
+  color: var(--color-text-accent1)
+}
+h1 {
+  color: var(--color-text-accent2)
+}
+.markdown:not(code) h1 .octicon-link,
+.markdown:not(code) h2 .octicon-link,
+.markdown:not(code) h3 .octicon-link,
+.markdown:not(code) h4 .octicon-link,
+.markdown:not(code) h5 .octicon-link,
+.markdown:not(code) h6 .octicon-link {
+  color: var(--color-text-light)
+}
+.ui.card,
+.ui.cards > .card {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  box-shadow: none
+}
+.ui.secondary.pointing.menu {
+  border-color: var(--color-border)
+}
+.ui.secondary.pointing.menu .active.item {
+  border-color: var(--color-active)
+}
+.ui.dropdown .menu > .divider {
+  border-color: var(--color-border)
+}
+.ui.form .field > label {
+  color: var(--color-text-accent1)
+}
+.ui .warning.header {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)
+}
+.settings .hook.list > .item:not(:last-child) {
+  border-color: var(--color-border-light)!important
+}
+.ui.card .content:not(.extra) {
+  color: var(--color-text-accent1);
+  font-weight: 700
+}
+.ui.card .text.black,
+.ui.card > .extra a:not(.ui),
+.ui.cards > .card > .extra a:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.user.list .item .description a {
+  color: var(--color-text-accent1)
+}
+.ui.user.list .item .description a:hover {
+  color: var(--color-text-accent2)
+}
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+  border-color: var(--color-border-xlight)
+}
+.ui .text.black,
+.ui .text.black a,
+.ui.accordion .title:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.label {
+  color: var(--color-text-accent1);
+  background: var(--color-input-bg)
+}
+.ui.labela:hover {
+  color: var(--color-text-accent2)
+}
+.ui.label.basic {
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-border)
+}
+.markdown:not(code) .highlight pre,
+.markdown:not(code) pre {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li.private {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li:not(:last-child) {
+  border-color: var(--color-border-light)
+}
+.dashboard .six.wide.column .menu {
+  border-bottom: 1px solid var(--color-border)
+}
+.ui .info.segment.top {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui[class*="top attached"].segment {
+  border-radius: 7px
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
+  background-color: var(--color-bg-primary)!important;
+  border-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .file-body.file-code .lines-num {
+  background-color: var(--color-bg-primary)!important
+}
+.repository .diff-file-box .code-diff .lines-num,
+.repository .diff-file-box .file-body.file-code .lines-num-old {
+  border-right-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .code-diff tbody tr.add-code td,
+.repository .diff-file-box .code-diff tbody tr.del-code td {
+  background-color: var(--color-bg-secondary)!important;
+  border-color: var(--color-border)!important
+}
+.repository .diff-file-box .code-diff tbody tr .removed-code {
+  background-color: #d72f2f;
+  color: #fff!important
+}
+.repository .diff-file-box .code-diff tbody tr .added-code {
+  background-color: #1fb91f;
+  color: #fff!important
+}
+.ui.grey.label,
+.ui.grey.labels .label {
+  border-color: var(--color-badge-bg)!important
+}
+.ui.menu .item > .label {
+  background-color: var(--color-badge-bg)
+}
+.fitted.item.choose.reference .menu .header .text {
+  padding-bottom: 6px;
+  border-bottom: 2px solid transparent
+}
+.fitted.item.choose.reference .menu .header .text.black {
+  border-color: var(--color-active)
+}
+.ui .text.black {
+  color: #fff
+}
+.ui.selectable.table tbody tr:hover,
+.ui.table tbody tr td.selectable:hover {
+  color: var(--color-text-accent1)
+}
+.ui.blue.button,
+.ui.blue.buttons .button,
+.ui.green.button,
+.ui.green.buttons .button {
+  background-color: var(--color-active-darker)
+}
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
+  background-color: var(--color-active)
+}
+.hljs {
+  color: var(--color-text-primary)!important
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: var(--color-text-accent)!important
+}
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-number,
+.hljs-tag .hljs-attr,
+.hljs-template-variable,
+.hljs-variable {
+  color: #0acccc!important
+}
+.hljs-doctag,
+.hljs-string {
+  color: #fd6d26!important
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary)
+}
+footer {
+  border-top: none;
+  color: var(--color-text-light)!important;
+  background-color: var(--color-bg-primary)
+}
+footer .container .links > * {
+  border-left: 1px solid var(--color-border-xlight)
+}
+.ui.attached.header,
+.ui.segment {
+  background: 0 0;
+  border: none
+}
+.ui.checkbox + label:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-primary)
+}
+.ui.checkbox input:checked ~ .box::after,
+.ui.checkbox input:checked ~ label::after {
+  color: var(--color-text-accent1)
+}
+.ui.checkbox label::before {
+  background: var(--color-input-bg)!important
+}
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label,
+.ui.checkbox .box::after,
+.ui.checkbox label,
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label:hover,
+.ui.checkbox .box::after:hover,
+.ui.checkbox label::after:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-accent2)
+}
+.ui.checkbox input:focus ~ label {
+  color: var(--color-text-accent1)!important
+}
+.ui.checkbox .box::before,
+.ui.checkbox label::before {
+  border-color: var(--color-border)!important
+}
+.ui.form .required.field > .checkbox::after,
+.ui.form .required.field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.fields:not(.grouped) > .field > label::after {
+  color: var(--color-active)
+}
+.ui.form input:not([type]),
+.ui.form input[type=date],
+.ui.form input[type=datetime-local],
+.ui.form input[type=email],
+.ui.form input[type=file],
+.ui.form input[type=number],
+.ui.form input[type=password],
+.ui.form input[type=search],
+.ui.form input[type=tel],
+.ui.form input[type=text],
+.ui.form input[type=time],
+.ui.form input[type=url],
+.ui.form textarea {
+  background-color: var(--color-input-bg);
+  border: 1px solid var(--color-border-light);
+  color: var(--color-text-primary)
+}
+.ui.form input:not([type]):focus,
+.ui.form input[type=date]:focus,
+.ui.form input[type=datetime-local]:focus,
+.ui.form input[type=email]:focus,
+.ui.form input[type=file]:focus,
+.ui.form input[type=number]:focus,
+.ui.form input[type=password]:focus,
+.ui.form input[type=search]:focus,
+.ui.form input[type=tel]:focus,
+.ui.form input[type=text]:focus,
+.ui.form input[type=time]:focus,
+.ui.form input[type=url]:focus,
+.ui.form textarea:focus {
+  background-color: var(--color-input-bg);
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-active)
+}
+.ui.input > input,
+.ui.input > input:focus,
+.ui.input.focus > input {
+  background-color: var(--color-input-bg)
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input,
+.explore.users .ui.action.input:not([class*="left action"]) > input {
+  border-radius: 100em!important;
+  border-right-color: var(--color-border)!important;
+  position: relative;
+  padding-right: 120px;
+  padding-left: 15px;
+  height: 42px;
+  width: 100%!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input.active,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input.active,
+.explore.users .ui.action.input:not([class*="left action"]) > input.active {
+  border-right-color: var(--color-border)!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.users .ui.action.input:not([class*="left action"]) > input + .button {
+  position: absolute;
+  right: 0;
+  height: 42px;
+  border-radius: 100em!important
+}
+.user.signin .ui.form .field:last-child {
+  text-align: center
+}
+.user.signin .ui.form .field:last-child a {
+  color: var(--color-text-primary);
+  font-size: .95rem
+}
+.user.signin .ui.form .field:last-child a:hover {
+  color: var(--color-text-accent2)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  color: var(--color-text-accent1)!important
+}
+.ui.input {
+  color: var(--color-text-primary)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  border-color: var(--color-border)
+}
+.ui.attached.segment {
+  border: none
+}
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.fields > label {
+  color: var(--color-text-accent1)
+}
+body:not(.full-width) {
+  min-width: 100%
+}
+.full.height {
+  margin-bottom: -60px;
+  min-height: calc(100% - 60px)
+}
+.admin,
+.dashboard,
+.explore,
+.organization,
+.repository,
+.user:not(.context):not(.list) {
+  padding-top: 80px
+}
+.home {
+  padding-top: 20px
+}
+.home .stackable {
+  padding-top: 40px
+}
+.home .logo img {
+  max-width: 100%
+}
+footer {
+  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 10px
+}
+footer .container .links > a[target="_blank"] {
+  display: none
+}
+footer > .ui.container {
+  border-top: 1px solid var(--color-border-xlight)
+}
+footer > .ui.container .ui.left::after {
+  display: inline-flex;
+  content: " - Custom Theme by @Kristuff"
+}
+@media only screen and (max-width:767px) {
+  footer > .ui.container {
+    text-align: center!important
+  }
+  footer > .ui.container .ui.left,
+  footer > .ui.container .ui.right {
+    float: initial
+  }
+}
+@media only screen and (max-width:1023px) {
+  footer > .ui.container {
+    width: calc(100% - 24px);
+    margin: 0 auto
+  }
+}
+.ui.card > .image:not(.ui) > img,
+.ui.cards > .card > .image:not(.ui) > img {
+  border-radius: 50%;
+  margin: 12px;
+  width: calc(100% - 24px)
+}
+.user.profile .ui.card .profile-avatar {
+  height: initial;
+  background: 0 0
+}
+@media only screen and (max-width:767px) {
+  .markdown:not(code).file-view {
+    padding: 1em 1em 1em!important
+  }
+  .repository #git-stats + .ui.menu {
+    flex-wrap: wrap
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item {
+    margin-top: 12px;
+    width: 100%
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item #clone-panel {
+    width: 100%;
+    margin: 0
+  }
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 10px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 94px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 94px;
+    top: 50px;
+    right: 12px
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 90px
+  }
+}
+@media only screen and (min-width:768px) and (max-width:1023px) {
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 18px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 204px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 204px;
+    top: 50px;
+    right: 0
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 192px;
+    height: initial
+  }
+}
+@media (max-width:1023px) {
+  .ui.menu {
+    border-radius: 0
+  }
+  .ui.vertical.menu {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto
+  }
+  .ui.vertical.menu .header {
+    display: none
+  }
+  .ui.vertical.menu .item {
+    border: none;
+    border-bottom: 3px solid transparent
+  }
+  .ui.vertical.menu .item:hover {
+    border-bottom-color: var(--color-border-xlight)
+  }
+  .ui.vertical.menu .item.active {
+    border-bottom-color: var(--color-active)
+  }
+  .ui.container:not(.fluid) {
+    width: 100%!important
+  }
+  .ui.column.grid > [class*="eleven wide"].column,
+  .ui.column.grid > [class*="five wide"].column,
+  .ui.column.grid > [class*="four wide"].column,
+  .ui.column.grid > [class*="twelve wide"].column,
+  .ui.grid > .column.row > [class*="eleven wide"].column,
+  .ui.grid > .column.row > [class*="five wide"].column,
+  .ui.grid > .column.row > [class*="four wide"].column,
+  .ui.grid > .column.row > [class*="twelve wide"].column,
+  .ui.grid > .row > [class*="eleven wide"].column,
+  .ui.grid > .row > [class*="five wide"].column,
+  .ui.grid > .row > [class*="four wide"].column,
+  .ui.grid > .row > [class*="twelve wide"].column,
+  .ui.grid > [class*="eleven wide"].column,
+  .ui.grid > [class*="five wide"].column,
+  .ui.grid > [class*="four wide"].column,
+  .ui.grid > [class*="twelve wide"].column {
+    width: 100%!important
+  }
+}
+@media (max-width:767px) {
+  .dashboard.feeds .ui.grid {
+    flex-direction: column-reverse
+  }
+  .dashboard.feeds .ui.grid > [class*="six wide"].column,
+  .dashboard.feeds .ui.grid > [class*="ten wide"].column {
+    width: 100%!important
+  }
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  width: 100%!important;
+  max-width: 380px;
+  border-radius: 7px
+}
+.user.activate form .header,
+.user.forgot.password form .header,
+.user.reset.password form .header,
+.user.signin form .header,
+.user.signup form .header {
+  padding: 15px!important;
+  margin: 0;
+  background: 0 0
+}
+.user.activate form .inline.field > label,
+.user.forgot.password form .inline.field > label,
+.user.reset.password form .inline.field > label,
+.user.signin form .inline.field > label,
+.user.signup form .inline.field > label {
+  display: block;
+  text-align: left;
+  margin-bottom: 6px!important
+}
+.user.activate form input,
+.user.activate form textarea,
+.user.forgot.password form input,
+.user.forgot.password form textarea,
+.user.reset.password form input,
+.user.reset.password form textarea,
+.user.signin form input,
+.user.signin form textarea,
+.user.signup form input,
+.user.signup form textarea {
+  width: 100%!important
+}
+.user.signin .ui.form .ui.button {
+  margin-bottom: 12px;
+  width: 100%;
+  border-radius: 100em;
+  height: 45px
+}
+.following.bar.light {
+  background-color: var(--color-bg-secondary)!important;
+  border-bottom: 1px solid var(--color-bg-secondary);
+  color: var(--color-text-accent1)!important;
+  position: fixed;
+  top: 0
+}
+@media (max-width:767px) {
+  .following.bar .top.menu {
+    display: flex;
+    overflow-x: auto
+  }
+}
+.following.bar .top.menu .octicon {
+  color: var(--color-text-accent1)
+}
+.following.bar .top.menu a.item.brand {
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand) {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand)[target="_blank"] {
+  display: none
+}
+.following.bar .top.menu .dropdown.item.active,
+.following.bar .top.menu .dropdown.item:hover,
+.following.bar .top.menu a.item:not(.brand):hover {
+  background: rgba(0,0,0,.2)!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand).active,
+.ui.secondary.menu .item:not(.brand).active:hover,
+.ui.secondary.menu .item:not(.brand):hover {
+  border-radius: 5px;
+  background: 0 0!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand) {
+  margin: 0
+}
+.following.bar .head.link.item {
+  color: var(--color-text-accent1)!important
+}
+.ui.vertical.menu {
+  background: 0 0
+}
+.ui.secondary.menu .item,
+.ui.vertical.menu .item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  border-radius: 0
+}
+.ui.secondary.menu .item.active,
+.ui.vertical.menu .item.active {
+  background: 0 0;
+  font-weight: 600;
+  color: var(--color-text-accent1)
+}
+.ui.secondary.menu .item:hover,
+.ui.vertical.menu .item:hover {
+  background: 0 0;
+  color: var(--color-text-accent2)
+}
+@media (min-width:1024px) {
+  .ui.vertical.menu {
+    border: 1px solid var(--color-border)
+  }
+  .ui.vertical.menu .active.item {
+    border-left: 3px solid var(--color-active);
+    background: var(--color-bg-secondary)
+  }
+}
+.ui.vertical.menu .header.item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  text-align: center;
+  padding-left: 0
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  border: 1px solid var(--color-border)
+}
+.ui.dropdown .menu,
+.ui.menu .dropdown.item .menu,
+.ui.menu .ui.dropdown .menu > .item:hover {
+  background: var(--color-bg-secondary)!important
+}
+.ui.dropdown .menu .selected.item,
+.ui.dropdown .menu > .header,
+.ui.dropdown .menu > .item,
+.ui.dropdown.selected {
+  color: var(--color-text-accent1)!important
+}
+.ui.dropdown .menu > .item:hover,
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu .ui.dropdown .menu > .active.item,
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item,
+.ui.menu a.item:hover {
+  color: var(--color-text-accent2)!important
+}
+.ui.menu {
+  background: 0 0!important;
+  color: var(--color-text-primary)!important
+}
+.ui.menu .item.active,
+.ui.menu .ui.menu .item.active:hover {
+  font-weight: 700
+}
+.ui.menu .ui.dropdown .menu > .item {
+  color: var(--color-text-primary)!important;
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu .item {
+  border-bottom: 3px solid transparent;
+  color: var(--color-text-accent1)
+}
+.ui.menu .item.active,
+.ui.menu .item.active:hover,
+.ui.menu .item:hover {
+  color: var(--color-text-accent2)
+}
+.ui.menu:not(.vertical) .item.active {
+  border-bottom-color: var(--color-active)
+}
+.ui.fluid.basic.button.center.ajax-load-button {
+  border-radius: 100em
+}
+.ui.fluid.basic.button.center.ajax-load-button:hover {
+  background-color: var(--color-bt-light-hover);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.input > input {
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border)
+}
+#clone-panel .ui.input > input .ui.input > input:focus,
+#clone-panel .ui.input > input .ui.input.focus > input {
+  background: var(--color-input-bg);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.basic.button:first-child {
+  border: none
+}
+#clone-panel .ui.basic.button:last-child {
+  border-left: none
+}
+.ui.buttons > .ui.dropdown:last-child .menu,
+.ui.menu .right.dropdown.item .menu,
+.ui.menu .right.menu .dropdown:last-child .menu {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu > .item:first-child,
+.user.profile .ui.secondary.menu .item:not(.brand).active {
+  border-radius: 0
+}
+.ui.button {
+  background-color: var(--color-button-bg)
+}
+.ui.button:hover {
+  background-color: var(--color-button-bg-hover)
+}
+.ui.selection.dropdown {
+  color: var(--color-text-primary);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-border)
+}
+.ui.selection.dropdown.active {
+  border-color: var(--color-active)
+}
+.repository .header-wrapper {
+  color: var(--color-text-accent1)!important;
+  background-color: transparent;
+  padding-top: 10px
+}
+.repository .head .mega-octicon {
+  width: 24px;
+  font-size: 24px;
+  color: var(--color-icon)
+}
+.ui.breadcrumb .divider {
+  color: var(--color-text-light);
+  margin: 0
+}
+.repository .head .fork-flag {
+  margin-left: 34px;
+  margin-top: 6px;
+  color: var(--color-text-light)
+}
+.ui.repository.list .item:not(:first-child) {
+  border-top: 1px solid var(--color-border-light)
+}
+.repository #clone-panel input {
+  border-bottom: 1px solid var(--color-border-light);
+  border-top: 1px solid var(--color-border-light);
+  border-right: none
+}
+#clone-panel .ui.action.input:not([class*="left action"]) > input:focus {
+  border-left-color: transparent!important;
+  border-right-color: transparent!important
+}
+.repository.file.list #repo-desc {
+  padding: 12px 0
+}
+.repository #git-stats {
+  border: 1px solid var(--color-border-light);
+  background: var(--color-bg-primary)
+}
+.repository #git-stats .ui .text.black {
+  color: var(--color-text-primary)
+}
+.repository #git-stats .ui .text.black:hover {
+  color: var(--color-text-accent2)
+}
+.repository #file-content {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  margin-top: 24px
+}
+.repository .ui.top.attached.header {
+  border-bottom: 1px solid var(--color-border);
+  border-radius: 0
+}
+.repository #repo-files-table tr:hover {
+  background-color: var(--color-bg-secondary)!important
+}
+.repository .ui.header .ui.right {
+  display: flex;
+  align-items: center
+}
+@media only screen and (max-width:767px) {
+  .repository .ui.header .ui.right {
+    margin-top: 18px;
+    float: initial
+  }
+}
+.repository .ui.header .ui.right .ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) {
+  border: 1px solid var(--color-border)!important;
+  background: var(--color-bt-light)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button {
+  height: 32px;
+  border: none!important;
+  line-height: 32px;
+  padding: 0 6px 0 12px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button:hover {
+  background: var(--color-bt-light-hover)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .label {
+  background: rgba(0,0,0,.2);
+  border-radius: 100em;
+  padding: 3px 6px;
+  border: none!important;
+  margin-right: 6px!important
+}
+.repository .ui.secondary.menu {
+  margin: 0
+}
+.markdown:not(code) h1 {
+  border-bottom: 1px solid var(--color-border)
+}
+.markdown:not(code) h2 {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.markdown:not(code) blockquote {
+  border-left: 4px solid var(--color-text-accent1)
+}
+.mega-octicon,
+.octicon {
+  color: var(--color-text-light)
+}
+.ui.secondary.menu .ui.breadcrumb:first-child {
+  margin-left: 12px
+}
+.ui.table {
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: 0 0
+}
+.ui.table thead th {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border)
+}
+.ui.table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.avatar > img,
+.ui img.avatar.image {
+  border-radius: 50%
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  color: var(--color-text-primary)!important
+}
+.ui.basic.button i,
+.ui.basic.buttons .button i {
+  color: var(--color-text-light)!important
+}
+.repository .ui.tabs.container .ui.menu {
+  border-bottom: 1px solid var(--color-border)!important
+}
+.ui.tabular.menu .item {
+  color: var(--color-text-primary)
+}
+.ui.tabular.menu .item i {
+  color: var(--color-text-light)
+}
+.ui.tabular.menu .item::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 3px;
+  border-radius: 100em;
+  background: 0 0;
+  position: absolute;
+  bottom: 0;
+  margin: 0 -1.42857143em
+}
+.ui.tabular.menu .active.item {
+  border: none;
+  background: 0 0;
+  color: var(--color-text-accent1)
+}
+.ui.tabular.menu .active.item::after {
+  background: var(--color-active)
+}
+.menu + #file-content {
+  margin-top: 24px
+}
+.ui.right.file-actions .ui.button {
+  background-color: var(--color-bt-light);
+  color: var(--color-text-accent1)
+}
+.ui.right.file-actions .ui.button:hover {
+  color: var(--color-text-accent2);
+  background-color: var(--color-bt-light-hover)
+}
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-accent1)
+}
+.ui.basic.button:focus,
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.buttons .button:hover {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)!important
+}
+.ui.basic.button:focus i,
+.ui.basic.button:hover i,
+.ui.basic.buttons .button:focus i,
+.ui.basic.buttons .button:hover i {
+  color: var(--color-text-accent1)!important
+}

dist/kristuff.gogs.dark-accent-magenta.css

@@ -0,0 +1,1136 @@
+/*!
+ *   ____
+ *  / ___| ___   __ _ ___    _   _
+ * | |  _ / _ \ / _` / __|  | |_| |_  ___ _ __  ___ ___
+ * | |_| | (_) | (_| \__ \  |  _| ' \/ -_) '  \/ -_|_-<
+ *  \____|\___/ \__, |___/   \__|_||_\___|_|_|_\___/__/
+ *              |___/
+ *
+ * This file is part of kristuff/gogs-themes 
+ * Copyright (c) 2022 Christophe Buliard  
+ */
+:root {
+  --color-active: #b64aa9;
+  --color-active-darker: #8F3985
+}
+.bg-code,
+.repository.file.list #file-content .code-view .lines-code .hljs,
+.repository.file.list #file-content .code-view .lines-code ol,
+.repository.file.list #file-content .code-view .lines-code pre,
+.repository.file.list #file-content .code-view .lines-num .hljs,
+.repository.file.list #file-content .code-view .lines-num ol,
+.repository.file.list #file-content .code-view .lines-num pre {
+  color: #f8f8f2!important;
+  background-color: var(--color-pre-bg)!important
+}
+.repository.file.list #file-content .code-view .lines-num {
+  color: #595959!important;
+  background-color: var(--color-pre-bg)!important
+}
+code[class*=language-],
+pre[class*=language-] {
+  color: #f8f8f2;
+  background: 0 0;
+  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  scrollbar-color: var(--color-pre-scrollbar1) var(--color-pre-scrollbar2)
+}
+pre[class*=language-] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: .3em!important
+}
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background: var(--color-pre-bg)!important
+}
+:not(pre) > code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090!important
+}
+.token.punctuation {
+  color: #f8f8f2!important
+}
+.token.namespace {
+  opacity: .7
+}
+.token.constant,
+.token.deleted,
+.token.symbol,
+.token.tag {
+  color: #5189f4!important
+}
+.token.property {
+  color: #59d7f4!important
+}
+.token.boolean,
+.token.number {
+  color: #5189f4!important
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector {
+  color: #ec586d!important
+}
+.token.attr-value,
+.token.string {
+  color: #ff9267!important
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+  color: #f8f8f2!important
+}
+.token.atrule,
+.token.class-name,
+.token.function {
+  color: #f8f8f2!important
+}
+.token.keyword {
+  color: #5189f4!important
+}
+.token.important,
+.token.regex {
+  color: #5189f4!important
+}
+.XXX_token.bold,
+.XXX_token.important {
+  font-weight: 700
+}
+.token.italic {
+  font-style: italic
+}
+.token.entity {
+  cursor: help
+}
+.hljs-section,
+.hljs-selector-id,
+.hljs-title {
+  color: #f94141!important
+}
+.hljs-comment,
+.hljs-quote {
+  color: #8a8899!important
+}
+:root {
+  --color-bg-primary: #1e2329;
+  --color-bg-secondary: #292e35;
+  --color-text-primary: #8b8b8b;
+  --color-text-light: #424851;
+  --color-icon: #3e4248;
+  --color-text-accent1: #c9c8c8;
+  --color-text-accent2: #ffffff;
+  --color-border: #3b4251;
+  --color-border-light: #343a42;
+  --color-border-xlight: #313a44;
+  --color-badge-bg: #2d333b;
+  --color-input-bg: rgba(0,0,0,.15);
+  --color-bt-light: #2d333b;
+  --color-bt-light-hover: #323841;
+  --color-button-bg: #0c0c0c;
+  --color-button-bg-hover: #000;
+  --color-code: #c6c6c6;
+  --color-code-bg: #191d22;
+  --color-pre-bg: #292d35;
+  --color-pre-scrollbar1: #313137;
+  --color-pre-scrollbar2: #171b20
+}
+* {
+  scrollbar-color: #313137 #171b20
+}
+.home .hero .octicon,
+.home a {
+  color: var(--color-active)
+}
+body:not(.full-width) {
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary)
+}
+a {
+  color: var(--color-text-accent1)
+}
+a:hover {
+  color: var(--color-text-accent2)
+}
+.ui .text.black:hover {
+  color: #fff
+}
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+  color: var(--color-icon)
+}
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+  color: var(--color-text-primary)
+}
+.ui.button:not(.label),
+.ui.header,
+.ui.input input,
+.ui.menu,
+h2,
+h3,
+h4,
+h5 {
+  color: var(--color-text-accent1)
+}
+h1 {
+  color: var(--color-text-accent2)
+}
+.markdown:not(code) h1 .octicon-link,
+.markdown:not(code) h2 .octicon-link,
+.markdown:not(code) h3 .octicon-link,
+.markdown:not(code) h4 .octicon-link,
+.markdown:not(code) h5 .octicon-link,
+.markdown:not(code) h6 .octicon-link {
+  color: var(--color-text-light)
+}
+.ui.card,
+.ui.cards > .card {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  box-shadow: none
+}
+.ui.secondary.pointing.menu {
+  border-color: var(--color-border)
+}
+.ui.secondary.pointing.menu .active.item {
+  border-color: var(--color-active)
+}
+.ui.dropdown .menu > .divider {
+  border-color: var(--color-border)
+}
+.ui.form .field > label {
+  color: var(--color-text-accent1)
+}
+.ui .warning.header {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)
+}
+.settings .hook.list > .item:not(:last-child) {
+  border-color: var(--color-border-light)!important
+}
+.ui.card .content:not(.extra) {
+  color: var(--color-text-accent1);
+  font-weight: 700
+}
+.ui.card .text.black,
+.ui.card > .extra a:not(.ui),
+.ui.cards > .card > .extra a:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.user.list .item .description a {
+  color: var(--color-text-accent1)
+}
+.ui.user.list .item .description a:hover {
+  color: var(--color-text-accent2)
+}
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+  border-color: var(--color-border-xlight)
+}
+.ui .text.black,
+.ui .text.black a,
+.ui.accordion .title:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.label {
+  color: var(--color-text-accent1);
+  background: var(--color-input-bg)
+}
+.ui.labela:hover {
+  color: var(--color-text-accent2)
+}
+.ui.label.basic {
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-border)
+}
+.markdown:not(code) .highlight pre,
+.markdown:not(code) pre {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li.private {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li:not(:last-child) {
+  border-color: var(--color-border-light)
+}
+.dashboard .six.wide.column .menu {
+  border-bottom: 1px solid var(--color-border)
+}
+.ui .info.segment.top {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui[class*="top attached"].segment {
+  border-radius: 7px
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
+  background-color: var(--color-bg-primary)!important;
+  border-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .file-body.file-code .lines-num {
+  background-color: var(--color-bg-primary)!important
+}
+.repository .diff-file-box .code-diff .lines-num,
+.repository .diff-file-box .file-body.file-code .lines-num-old {
+  border-right-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .code-diff tbody tr.add-code td,
+.repository .diff-file-box .code-diff tbody tr.del-code td {
+  background-color: var(--color-bg-secondary)!important;
+  border-color: var(--color-border)!important
+}
+.repository .diff-file-box .code-diff tbody tr .removed-code {
+  background-color: #d72f2f;
+  color: #fff!important
+}
+.repository .diff-file-box .code-diff tbody tr .added-code {
+  background-color: #1fb91f;
+  color: #fff!important
+}
+.ui.grey.label,
+.ui.grey.labels .label {
+  border-color: var(--color-badge-bg)!important
+}
+.ui.menu .item > .label {
+  background-color: var(--color-badge-bg)
+}
+.fitted.item.choose.reference .menu .header .text {
+  padding-bottom: 6px;
+  border-bottom: 2px solid transparent
+}
+.fitted.item.choose.reference .menu .header .text.black {
+  border-color: var(--color-active)
+}
+.ui .text.black {
+  color: #fff
+}
+.ui.selectable.table tbody tr:hover,
+.ui.table tbody tr td.selectable:hover {
+  color: var(--color-text-accent1)
+}
+.ui.blue.button,
+.ui.blue.buttons .button,
+.ui.green.button,
+.ui.green.buttons .button {
+  background-color: var(--color-active-darker)
+}
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
+  background-color: var(--color-active)
+}
+.hljs {
+  color: var(--color-text-primary)!important
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: var(--color-text-accent)!important
+}
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-number,
+.hljs-tag .hljs-attr,
+.hljs-template-variable,
+.hljs-variable {
+  color: #0acccc!important
+}
+.hljs-doctag,
+.hljs-string {
+  color: #fd6d26!important
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary)
+}
+footer {
+  border-top: none;
+  color: var(--color-text-light)!important;
+  background-color: var(--color-bg-primary)
+}
+footer .container .links > * {
+  border-left: 1px solid var(--color-border-xlight)
+}
+.ui.attached.header,
+.ui.segment {
+  background: 0 0;
+  border: none
+}
+.ui.checkbox + label:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-primary)
+}
+.ui.checkbox input:checked ~ .box::after,
+.ui.checkbox input:checked ~ label::after {
+  color: var(--color-text-accent1)
+}
+.ui.checkbox label::before {
+  background: var(--color-input-bg)!important
+}
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label,
+.ui.checkbox .box::after,
+.ui.checkbox label,
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label:hover,
+.ui.checkbox .box::after:hover,
+.ui.checkbox label::after:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-accent2)
+}
+.ui.checkbox input:focus ~ label {
+  color: var(--color-text-accent1)!important
+}
+.ui.checkbox .box::before,
+.ui.checkbox label::before {
+  border-color: var(--color-border)!important
+}
+.ui.form .required.field > .checkbox::after,
+.ui.form .required.field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.fields:not(.grouped) > .field > label::after {
+  color: var(--color-active)
+}
+.ui.form input:not([type]),
+.ui.form input[type=date],
+.ui.form input[type=datetime-local],
+.ui.form input[type=email],
+.ui.form input[type=file],
+.ui.form input[type=number],
+.ui.form input[type=password],
+.ui.form input[type=search],
+.ui.form input[type=tel],
+.ui.form input[type=text],
+.ui.form input[type=time],
+.ui.form input[type=url],
+.ui.form textarea {
+  background-color: var(--color-input-bg);
+  border: 1px solid var(--color-border-light);
+  color: var(--color-text-primary)
+}
+.ui.form input:not([type]):focus,
+.ui.form input[type=date]:focus,
+.ui.form input[type=datetime-local]:focus,
+.ui.form input[type=email]:focus,
+.ui.form input[type=file]:focus,
+.ui.form input[type=number]:focus,
+.ui.form input[type=password]:focus,
+.ui.form input[type=search]:focus,
+.ui.form input[type=tel]:focus,
+.ui.form input[type=text]:focus,
+.ui.form input[type=time]:focus,
+.ui.form input[type=url]:focus,
+.ui.form textarea:focus {
+  background-color: var(--color-input-bg);
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-active)
+}
+.ui.input > input,
+.ui.input > input:focus,
+.ui.input.focus > input {
+  background-color: var(--color-input-bg)
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input,
+.explore.users .ui.action.input:not([class*="left action"]) > input {
+  border-radius: 100em!important;
+  border-right-color: var(--color-border)!important;
+  position: relative;
+  padding-right: 120px;
+  padding-left: 15px;
+  height: 42px;
+  width: 100%!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input.active,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input.active,
+.explore.users .ui.action.input:not([class*="left action"]) > input.active {
+  border-right-color: var(--color-border)!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.users .ui.action.input:not([class*="left action"]) > input + .button {
+  position: absolute;
+  right: 0;
+  height: 42px;
+  border-radius: 100em!important
+}
+.user.signin .ui.form .field:last-child {
+  text-align: center
+}
+.user.signin .ui.form .field:last-child a {
+  color: var(--color-text-primary);
+  font-size: .95rem
+}
+.user.signin .ui.form .field:last-child a:hover {
+  color: var(--color-text-accent2)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  color: var(--color-text-accent1)!important
+}
+.ui.input {
+  color: var(--color-text-primary)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  border-color: var(--color-border)
+}
+.ui.attached.segment {
+  border: none
+}
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.fields > label {
+  color: var(--color-text-accent1)
+}
+body:not(.full-width) {
+  min-width: 100%
+}
+.full.height {
+  margin-bottom: -60px;
+  min-height: calc(100% - 60px)
+}
+.admin,
+.dashboard,
+.explore,
+.organization,
+.repository,
+.user:not(.context):not(.list) {
+  padding-top: 80px
+}
+.home {
+  padding-top: 20px
+}
+.home .stackable {
+  padding-top: 40px
+}
+.home .logo img {
+  max-width: 100%
+}
+footer {
+  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 10px
+}
+footer .container .links > a[target="_blank"] {
+  display: none
+}
+footer > .ui.container {
+  border-top: 1px solid var(--color-border-xlight)
+}
+footer > .ui.container .ui.left::after {
+  display: inline-flex;
+  content: " - Custom Theme by @Kristuff"
+}
+@media only screen and (max-width:767px) {
+  footer > .ui.container {
+    text-align: center!important
+  }
+  footer > .ui.container .ui.left,
+  footer > .ui.container .ui.right {
+    float: initial
+  }
+}
+@media only screen and (max-width:1023px) {
+  footer > .ui.container {
+    width: calc(100% - 24px);
+    margin: 0 auto
+  }
+}
+.ui.card > .image:not(.ui) > img,
+.ui.cards > .card > .image:not(.ui) > img {
+  border-radius: 50%;
+  margin: 12px;
+  width: calc(100% - 24px)
+}
+.user.profile .ui.card .profile-avatar {
+  height: initial;
+  background: 0 0
+}
+@media only screen and (max-width:767px) {
+  .markdown:not(code).file-view {
+    padding: 1em 1em 1em!important
+  }
+  .repository #git-stats + .ui.menu {
+    flex-wrap: wrap
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item {
+    margin-top: 12px;
+    width: 100%
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item #clone-panel {
+    width: 100%;
+    margin: 0
+  }
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 10px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 94px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 94px;
+    top: 50px;
+    right: 12px
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 90px
+  }
+}
+@media only screen and (min-width:768px) and (max-width:1023px) {
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 18px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 204px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 204px;
+    top: 50px;
+    right: 0
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 192px;
+    height: initial
+  }
+}
+@media (max-width:1023px) {
+  .ui.menu {
+    border-radius: 0
+  }
+  .ui.vertical.menu {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto
+  }
+  .ui.vertical.menu .header {
+    display: none
+  }
+  .ui.vertical.menu .item {
+    border: none;
+    border-bottom: 3px solid transparent
+  }
+  .ui.vertical.menu .item:hover {
+    border-bottom-color: var(--color-border-xlight)
+  }
+  .ui.vertical.menu .item.active {
+    border-bottom-color: var(--color-active)
+  }
+  .ui.container:not(.fluid) {
+    width: 100%!important
+  }
+  .ui.column.grid > [class*="eleven wide"].column,
+  .ui.column.grid > [class*="five wide"].column,
+  .ui.column.grid > [class*="four wide"].column,
+  .ui.column.grid > [class*="twelve wide"].column,
+  .ui.grid > .column.row > [class*="eleven wide"].column,
+  .ui.grid > .column.row > [class*="five wide"].column,
+  .ui.grid > .column.row > [class*="four wide"].column,
+  .ui.grid > .column.row > [class*="twelve wide"].column,
+  .ui.grid > .row > [class*="eleven wide"].column,
+  .ui.grid > .row > [class*="five wide"].column,
+  .ui.grid > .row > [class*="four wide"].column,
+  .ui.grid > .row > [class*="twelve wide"].column,
+  .ui.grid > [class*="eleven wide"].column,
+  .ui.grid > [class*="five wide"].column,
+  .ui.grid > [class*="four wide"].column,
+  .ui.grid > [class*="twelve wide"].column {
+    width: 100%!important
+  }
+}
+@media (max-width:767px) {
+  .dashboard.feeds .ui.grid {
+    flex-direction: column-reverse
+  }
+  .dashboard.feeds .ui.grid > [class*="six wide"].column,
+  .dashboard.feeds .ui.grid > [class*="ten wide"].column {
+    width: 100%!important
+  }
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  width: 100%!important;
+  max-width: 380px;
+  border-radius: 7px
+}
+.user.activate form .header,
+.user.forgot.password form .header,
+.user.reset.password form .header,
+.user.signin form .header,
+.user.signup form .header {
+  padding: 15px!important;
+  margin: 0;
+  background: 0 0
+}
+.user.activate form .inline.field > label,
+.user.forgot.password form .inline.field > label,
+.user.reset.password form .inline.field > label,
+.user.signin form .inline.field > label,
+.user.signup form .inline.field > label {
+  display: block;
+  text-align: left;
+  margin-bottom: 6px!important
+}
+.user.activate form input,
+.user.activate form textarea,
+.user.forgot.password form input,
+.user.forgot.password form textarea,
+.user.reset.password form input,
+.user.reset.password form textarea,
+.user.signin form input,
+.user.signin form textarea,
+.user.signup form input,
+.user.signup form textarea {
+  width: 100%!important
+}
+.user.signin .ui.form .ui.button {
+  margin-bottom: 12px;
+  width: 100%;
+  border-radius: 100em;
+  height: 45px
+}
+.following.bar.light {
+  background-color: var(--color-bg-secondary)!important;
+  border-bottom: 1px solid var(--color-bg-secondary);
+  color: var(--color-text-accent1)!important;
+  position: fixed;
+  top: 0
+}
+@media (max-width:767px) {
+  .following.bar .top.menu {
+    display: flex;
+    overflow-x: auto
+  }
+}
+.following.bar .top.menu .octicon {
+  color: var(--color-text-accent1)
+}
+.following.bar .top.menu a.item.brand {
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand) {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand)[target="_blank"] {
+  display: none
+}
+.following.bar .top.menu .dropdown.item.active,
+.following.bar .top.menu .dropdown.item:hover,
+.following.bar .top.menu a.item:not(.brand):hover {
+  background: rgba(0,0,0,.2)!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand).active,
+.ui.secondary.menu .item:not(.brand).active:hover,
+.ui.secondary.menu .item:not(.brand):hover {
+  border-radius: 5px;
+  background: 0 0!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand) {
+  margin: 0
+}
+.following.bar .head.link.item {
+  color: var(--color-text-accent1)!important
+}
+.ui.vertical.menu {
+  background: 0 0
+}
+.ui.secondary.menu .item,
+.ui.vertical.menu .item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  border-radius: 0
+}
+.ui.secondary.menu .item.active,
+.ui.vertical.menu .item.active {
+  background: 0 0;
+  font-weight: 600;
+  color: var(--color-text-accent1)
+}
+.ui.secondary.menu .item:hover,
+.ui.vertical.menu .item:hover {
+  background: 0 0;
+  color: var(--color-text-accent2)
+}
+@media (min-width:1024px) {
+  .ui.vertical.menu {
+    border: 1px solid var(--color-border)
+  }
+  .ui.vertical.menu .active.item {
+    border-left: 3px solid var(--color-active);
+    background: var(--color-bg-secondary)
+  }
+}
+.ui.vertical.menu .header.item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  text-align: center;
+  padding-left: 0
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  border: 1px solid var(--color-border)
+}
+.ui.dropdown .menu,
+.ui.menu .dropdown.item .menu,
+.ui.menu .ui.dropdown .menu > .item:hover {
+  background: var(--color-bg-secondary)!important
+}
+.ui.dropdown .menu .selected.item,
+.ui.dropdown .menu > .header,
+.ui.dropdown .menu > .item,
+.ui.dropdown.selected {
+  color: var(--color-text-accent1)!important
+}
+.ui.dropdown .menu > .item:hover,
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu .ui.dropdown .menu > .active.item,
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item,
+.ui.menu a.item:hover {
+  color: var(--color-text-accent2)!important
+}
+.ui.menu {
+  background: 0 0!important;
+  color: var(--color-text-primary)!important
+}
+.ui.menu .item.active,
+.ui.menu .ui.menu .item.active:hover {
+  font-weight: 700
+}
+.ui.menu .ui.dropdown .menu > .item {
+  color: var(--color-text-primary)!important;
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu .item {
+  border-bottom: 3px solid transparent;
+  color: var(--color-text-accent1)
+}
+.ui.menu .item.active,
+.ui.menu .item.active:hover,
+.ui.menu .item:hover {
+  color: var(--color-text-accent2)
+}
+.ui.menu:not(.vertical) .item.active {
+  border-bottom-color: var(--color-active)
+}
+.ui.fluid.basic.button.center.ajax-load-button {
+  border-radius: 100em
+}
+.ui.fluid.basic.button.center.ajax-load-button:hover {
+  background-color: var(--color-bt-light-hover);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.input > input {
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border)
+}
+#clone-panel .ui.input > input .ui.input > input:focus,
+#clone-panel .ui.input > input .ui.input.focus > input {
+  background: var(--color-input-bg);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.basic.button:first-child {
+  border: none
+}
+#clone-panel .ui.basic.button:last-child {
+  border-left: none
+}
+.ui.buttons > .ui.dropdown:last-child .menu,
+.ui.menu .right.dropdown.item .menu,
+.ui.menu .right.menu .dropdown:last-child .menu {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu > .item:first-child,
+.user.profile .ui.secondary.menu .item:not(.brand).active {
+  border-radius: 0
+}
+.ui.button {
+  background-color: var(--color-button-bg)
+}
+.ui.button:hover {
+  background-color: var(--color-button-bg-hover)
+}
+.ui.selection.dropdown {
+  color: var(--color-text-primary);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-border)
+}
+.ui.selection.dropdown.active {
+  border-color: var(--color-active)
+}
+.repository .header-wrapper {
+  color: var(--color-text-accent1)!important;
+  background-color: transparent;
+  padding-top: 10px
+}
+.repository .head .mega-octicon {
+  width: 24px;
+  font-size: 24px;
+  color: var(--color-icon)
+}
+.ui.breadcrumb .divider {
+  color: var(--color-text-light);
+  margin: 0
+}
+.repository .head .fork-flag {
+  margin-left: 34px;
+  margin-top: 6px;
+  color: var(--color-text-light)
+}
+.ui.repository.list .item:not(:first-child) {
+  border-top: 1px solid var(--color-border-light)
+}
+.repository #clone-panel input {
+  border-bottom: 1px solid var(--color-border-light);
+  border-top: 1px solid var(--color-border-light);
+  border-right: none
+}
+#clone-panel .ui.action.input:not([class*="left action"]) > input:focus {
+  border-left-color: transparent!important;
+  border-right-color: transparent!important
+}
+.repository.file.list #repo-desc {
+  padding: 12px 0
+}
+.repository #git-stats {
+  border: 1px solid var(--color-border-light);
+  background: var(--color-bg-primary)
+}
+.repository #git-stats .ui .text.black {
+  color: var(--color-text-primary)
+}
+.repository #git-stats .ui .text.black:hover {
+  color: var(--color-text-accent2)
+}
+.repository #file-content {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  margin-top: 24px
+}
+.repository .ui.top.attached.header {
+  border-bottom: 1px solid var(--color-border);
+  border-radius: 0
+}
+.repository #repo-files-table tr:hover {
+  background-color: var(--color-bg-secondary)!important
+}
+.repository .ui.header .ui.right {
+  display: flex;
+  align-items: center
+}
+@media only screen and (max-width:767px) {
+  .repository .ui.header .ui.right {
+    margin-top: 18px;
+    float: initial
+  }
+}
+.repository .ui.header .ui.right .ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) {
+  border: 1px solid var(--color-border)!important;
+  background: var(--color-bt-light)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button {
+  height: 32px;
+  border: none!important;
+  line-height: 32px;
+  padding: 0 6px 0 12px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button:hover {
+  background: var(--color-bt-light-hover)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .label {
+  background: rgba(0,0,0,.2);
+  border-radius: 100em;
+  padding: 3px 6px;
+  border: none!important;
+  margin-right: 6px!important
+}
+.repository .ui.secondary.menu {
+  margin: 0
+}
+.markdown:not(code) h1 {
+  border-bottom: 1px solid var(--color-border)
+}
+.markdown:not(code) h2 {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.markdown:not(code) blockquote {
+  border-left: 4px solid var(--color-text-accent1)
+}
+.mega-octicon,
+.octicon {
+  color: var(--color-text-light)
+}
+.ui.secondary.menu .ui.breadcrumb:first-child {
+  margin-left: 12px
+}
+.ui.table {
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: 0 0
+}
+.ui.table thead th {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border)
+}
+.ui.table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.avatar > img,
+.ui img.avatar.image {
+  border-radius: 50%
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  color: var(--color-text-primary)!important
+}
+.ui.basic.button i,
+.ui.basic.buttons .button i {
+  color: var(--color-text-light)!important
+}
+.repository .ui.tabs.container .ui.menu {
+  border-bottom: 1px solid var(--color-border)!important
+}
+.ui.tabular.menu .item {
+  color: var(--color-text-primary)
+}
+.ui.tabular.menu .item i {
+  color: var(--color-text-light)
+}
+.ui.tabular.menu .item::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 3px;
+  border-radius: 100em;
+  background: 0 0;
+  position: absolute;
+  bottom: 0;
+  margin: 0 -1.42857143em
+}
+.ui.tabular.menu .active.item {
+  border: none;
+  background: 0 0;
+  color: var(--color-text-accent1)
+}
+.ui.tabular.menu .active.item::after {
+  background: var(--color-active)
+}
+.menu + #file-content {
+  margin-top: 24px
+}
+.ui.right.file-actions .ui.button {
+  background-color: var(--color-bt-light);
+  color: var(--color-text-accent1)
+}
+.ui.right.file-actions .ui.button:hover {
+  color: var(--color-text-accent2);
+  background-color: var(--color-bt-light-hover)
+}
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-accent1)
+}
+.ui.basic.button:focus,
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.buttons .button:hover {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)!important
+}
+.ui.basic.button:focus i,
+.ui.basic.button:hover i,
+.ui.basic.buttons .button:focus i,
+.ui.basic.buttons .button:hover i {
+  color: var(--color-text-accent1)!important
+}

dist/kristuff.gogs.dark-accent-orange.css

@@ -0,0 +1,1136 @@
+/*!
+ *   ____
+ *  / ___| ___   __ _ ___    _   _
+ * | |  _ / _ \ / _` / __|  | |_| |_  ___ _ __  ___ ___
+ * | |_| | (_) | (_| \__ \  |  _| ' \/ -_) '  \/ -_|_-<
+ *  \____|\___/ \__, |___/   \__|_||_\___|_|_|_\___/__/
+ *              |___/
+ *
+ * This file is part of kristuff/gogs-themes 
+ * Copyright (c) 2022 Christophe Buliard  
+ */
+:root {
+  --color-active: #f26522;
+  --color-active-darker: #d35921
+}
+.bg-code,
+.repository.file.list #file-content .code-view .lines-code .hljs,
+.repository.file.list #file-content .code-view .lines-code ol,
+.repository.file.list #file-content .code-view .lines-code pre,
+.repository.file.list #file-content .code-view .lines-num .hljs,
+.repository.file.list #file-content .code-view .lines-num ol,
+.repository.file.list #file-content .code-view .lines-num pre {
+  color: #f8f8f2!important;
+  background-color: var(--color-pre-bg)!important
+}
+.repository.file.list #file-content .code-view .lines-num {
+  color: #595959!important;
+  background-color: var(--color-pre-bg)!important
+}
+code[class*=language-],
+pre[class*=language-] {
+  color: #f8f8f2;
+  background: 0 0;
+  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  scrollbar-color: var(--color-pre-scrollbar1) var(--color-pre-scrollbar2)
+}
+pre[class*=language-] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: .3em!important
+}
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background: var(--color-pre-bg)!important
+}
+:not(pre) > code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090!important
+}
+.token.punctuation {
+  color: #f8f8f2!important
+}
+.token.namespace {
+  opacity: .7
+}
+.token.constant,
+.token.deleted,
+.token.symbol,
+.token.tag {
+  color: #5189f4!important
+}
+.token.property {
+  color: #59d7f4!important
+}
+.token.boolean,
+.token.number {
+  color: #5189f4!important
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector {
+  color: #ec586d!important
+}
+.token.attr-value,
+.token.string {
+  color: #ff9267!important
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+  color: #f8f8f2!important
+}
+.token.atrule,
+.token.class-name,
+.token.function {
+  color: #f8f8f2!important
+}
+.token.keyword {
+  color: #5189f4!important
+}
+.token.important,
+.token.regex {
+  color: #5189f4!important
+}
+.XXX_token.bold,
+.XXX_token.important {
+  font-weight: 700
+}
+.token.italic {
+  font-style: italic
+}
+.token.entity {
+  cursor: help
+}
+.hljs-section,
+.hljs-selector-id,
+.hljs-title {
+  color: #f94141!important
+}
+.hljs-comment,
+.hljs-quote {
+  color: #8a8899!important
+}
+:root {
+  --color-bg-primary: #1e2329;
+  --color-bg-secondary: #292e35;
+  --color-text-primary: #8b8b8b;
+  --color-text-light: #424851;
+  --color-icon: #3e4248;
+  --color-text-accent1: #c9c8c8;
+  --color-text-accent2: #ffffff;
+  --color-border: #3b4251;
+  --color-border-light: #343a42;
+  --color-border-xlight: #313a44;
+  --color-badge-bg: #2d333b;
+  --color-input-bg: rgba(0,0,0,.15);
+  --color-bt-light: #2d333b;
+  --color-bt-light-hover: #323841;
+  --color-button-bg: #0c0c0c;
+  --color-button-bg-hover: #000;
+  --color-code: #c6c6c6;
+  --color-code-bg: #191d22;
+  --color-pre-bg: #292d35;
+  --color-pre-scrollbar1: #313137;
+  --color-pre-scrollbar2: #171b20
+}
+* {
+  scrollbar-color: #313137 #171b20
+}
+.home .hero .octicon,
+.home a {
+  color: var(--color-active)
+}
+body:not(.full-width) {
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary)
+}
+a {
+  color: var(--color-text-accent1)
+}
+a:hover {
+  color: var(--color-text-accent2)
+}
+.ui .text.black:hover {
+  color: #fff
+}
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+  color: var(--color-icon)
+}
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+  color: var(--color-text-primary)
+}
+.ui.button:not(.label),
+.ui.header,
+.ui.input input,
+.ui.menu,
+h2,
+h3,
+h4,
+h5 {
+  color: var(--color-text-accent1)
+}
+h1 {
+  color: var(--color-text-accent2)
+}
+.markdown:not(code) h1 .octicon-link,
+.markdown:not(code) h2 .octicon-link,
+.markdown:not(code) h3 .octicon-link,
+.markdown:not(code) h4 .octicon-link,
+.markdown:not(code) h5 .octicon-link,
+.markdown:not(code) h6 .octicon-link {
+  color: var(--color-text-light)
+}
+.ui.card,
+.ui.cards > .card {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  box-shadow: none
+}
+.ui.secondary.pointing.menu {
+  border-color: var(--color-border)
+}
+.ui.secondary.pointing.menu .active.item {
+  border-color: var(--color-active)
+}
+.ui.dropdown .menu > .divider {
+  border-color: var(--color-border)
+}
+.ui.form .field > label {
+  color: var(--color-text-accent1)
+}
+.ui .warning.header {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)
+}
+.settings .hook.list > .item:not(:last-child) {
+  border-color: var(--color-border-light)!important
+}
+.ui.card .content:not(.extra) {
+  color: var(--color-text-accent1);
+  font-weight: 700
+}
+.ui.card .text.black,
+.ui.card > .extra a:not(.ui),
+.ui.cards > .card > .extra a:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.user.list .item .description a {
+  color: var(--color-text-accent1)
+}
+.ui.user.list .item .description a:hover {
+  color: var(--color-text-accent2)
+}
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+  border-color: var(--color-border-xlight)
+}
+.ui .text.black,
+.ui .text.black a,
+.ui.accordion .title:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.label {
+  color: var(--color-text-accent1);
+  background: var(--color-input-bg)
+}
+.ui.labela:hover {
+  color: var(--color-text-accent2)
+}
+.ui.label.basic {
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-border)
+}
+.markdown:not(code) .highlight pre,
+.markdown:not(code) pre {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li.private {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li:not(:last-child) {
+  border-color: var(--color-border-light)
+}
+.dashboard .six.wide.column .menu {
+  border-bottom: 1px solid var(--color-border)
+}
+.ui .info.segment.top {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui[class*="top attached"].segment {
+  border-radius: 7px
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
+  background-color: var(--color-bg-primary)!important;
+  border-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .file-body.file-code .lines-num {
+  background-color: var(--color-bg-primary)!important
+}
+.repository .diff-file-box .code-diff .lines-num,
+.repository .diff-file-box .file-body.file-code .lines-num-old {
+  border-right-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .code-diff tbody tr.add-code td,
+.repository .diff-file-box .code-diff tbody tr.del-code td {
+  background-color: var(--color-bg-secondary)!important;
+  border-color: var(--color-border)!important
+}
+.repository .diff-file-box .code-diff tbody tr .removed-code {
+  background-color: #d72f2f;
+  color: #fff!important
+}
+.repository .diff-file-box .code-diff tbody tr .added-code {
+  background-color: #1fb91f;
+  color: #fff!important
+}
+.ui.grey.label,
+.ui.grey.labels .label {
+  border-color: var(--color-badge-bg)!important
+}
+.ui.menu .item > .label {
+  background-color: var(--color-badge-bg)
+}
+.fitted.item.choose.reference .menu .header .text {
+  padding-bottom: 6px;
+  border-bottom: 2px solid transparent
+}
+.fitted.item.choose.reference .menu .header .text.black {
+  border-color: var(--color-active)
+}
+.ui .text.black {
+  color: #fff
+}
+.ui.selectable.table tbody tr:hover,
+.ui.table tbody tr td.selectable:hover {
+  color: var(--color-text-accent1)
+}
+.ui.blue.button,
+.ui.blue.buttons .button,
+.ui.green.button,
+.ui.green.buttons .button {
+  background-color: var(--color-active-darker)
+}
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
+  background-color: var(--color-active)
+}
+.hljs {
+  color: var(--color-text-primary)!important
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: var(--color-text-accent)!important
+}
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-number,
+.hljs-tag .hljs-attr,
+.hljs-template-variable,
+.hljs-variable {
+  color: #0acccc!important
+}
+.hljs-doctag,
+.hljs-string {
+  color: #fd6d26!important
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary)
+}
+footer {
+  border-top: none;
+  color: var(--color-text-light)!important;
+  background-color: var(--color-bg-primary)
+}
+footer .container .links > * {
+  border-left: 1px solid var(--color-border-xlight)
+}
+.ui.attached.header,
+.ui.segment {
+  background: 0 0;
+  border: none
+}
+.ui.checkbox + label:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-primary)
+}
+.ui.checkbox input:checked ~ .box::after,
+.ui.checkbox input:checked ~ label::after {
+  color: var(--color-text-accent1)
+}
+.ui.checkbox label::before {
+  background: var(--color-input-bg)!important
+}
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label,
+.ui.checkbox .box::after,
+.ui.checkbox label,
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label:hover,
+.ui.checkbox .box::after:hover,
+.ui.checkbox label::after:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-accent2)
+}
+.ui.checkbox input:focus ~ label {
+  color: var(--color-text-accent1)!important
+}
+.ui.checkbox .box::before,
+.ui.checkbox label::before {
+  border-color: var(--color-border)!important
+}
+.ui.form .required.field > .checkbox::after,
+.ui.form .required.field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.fields:not(.grouped) > .field > label::after {
+  color: var(--color-active)
+}
+.ui.form input:not([type]),
+.ui.form input[type=date],
+.ui.form input[type=datetime-local],
+.ui.form input[type=email],
+.ui.form input[type=file],
+.ui.form input[type=number],
+.ui.form input[type=password],
+.ui.form input[type=search],
+.ui.form input[type=tel],
+.ui.form input[type=text],
+.ui.form input[type=time],
+.ui.form input[type=url],
+.ui.form textarea {
+  background-color: var(--color-input-bg);
+  border: 1px solid var(--color-border-light);
+  color: var(--color-text-primary)
+}
+.ui.form input:not([type]):focus,
+.ui.form input[type=date]:focus,
+.ui.form input[type=datetime-local]:focus,
+.ui.form input[type=email]:focus,
+.ui.form input[type=file]:focus,
+.ui.form input[type=number]:focus,
+.ui.form input[type=password]:focus,
+.ui.form input[type=search]:focus,
+.ui.form input[type=tel]:focus,
+.ui.form input[type=text]:focus,
+.ui.form input[type=time]:focus,
+.ui.form input[type=url]:focus,
+.ui.form textarea:focus {
+  background-color: var(--color-input-bg);
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-active)
+}
+.ui.input > input,
+.ui.input > input:focus,
+.ui.input.focus > input {
+  background-color: var(--color-input-bg)
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input,
+.explore.users .ui.action.input:not([class*="left action"]) > input {
+  border-radius: 100em!important;
+  border-right-color: var(--color-border)!important;
+  position: relative;
+  padding-right: 120px;
+  padding-left: 15px;
+  height: 42px;
+  width: 100%!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input.active,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input.active,
+.explore.users .ui.action.input:not([class*="left action"]) > input.active {
+  border-right-color: var(--color-border)!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.users .ui.action.input:not([class*="left action"]) > input + .button {
+  position: absolute;
+  right: 0;
+  height: 42px;
+  border-radius: 100em!important
+}
+.user.signin .ui.form .field:last-child {
+  text-align: center
+}
+.user.signin .ui.form .field:last-child a {
+  color: var(--color-text-primary);
+  font-size: .95rem
+}
+.user.signin .ui.form .field:last-child a:hover {
+  color: var(--color-text-accent2)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  color: var(--color-text-accent1)!important
+}
+.ui.input {
+  color: var(--color-text-primary)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  border-color: var(--color-border)
+}
+.ui.attached.segment {
+  border: none
+}
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.fields > label {
+  color: var(--color-text-accent1)
+}
+body:not(.full-width) {
+  min-width: 100%
+}
+.full.height {
+  margin-bottom: -60px;
+  min-height: calc(100% - 60px)
+}
+.admin,
+.dashboard,
+.explore,
+.organization,
+.repository,
+.user:not(.context):not(.list) {
+  padding-top: 80px
+}
+.home {
+  padding-top: 20px
+}
+.home .stackable {
+  padding-top: 40px
+}
+.home .logo img {
+  max-width: 100%
+}
+footer {
+  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 10px
+}
+footer .container .links > a[target="_blank"] {
+  display: none
+}
+footer > .ui.container {
+  border-top: 1px solid var(--color-border-xlight)
+}
+footer > .ui.container .ui.left::after {
+  display: inline-flex;
+  content: " - Custom Theme by @Kristuff"
+}
+@media only screen and (max-width:767px) {
+  footer > .ui.container {
+    text-align: center!important
+  }
+  footer > .ui.container .ui.left,
+  footer > .ui.container .ui.right {
+    float: initial
+  }
+}
+@media only screen and (max-width:1023px) {
+  footer > .ui.container {
+    width: calc(100% - 24px);
+    margin: 0 auto
+  }
+}
+.ui.card > .image:not(.ui) > img,
+.ui.cards > .card > .image:not(.ui) > img {
+  border-radius: 50%;
+  margin: 12px;
+  width: calc(100% - 24px)
+}
+.user.profile .ui.card .profile-avatar {
+  height: initial;
+  background: 0 0
+}
+@media only screen and (max-width:767px) {
+  .markdown:not(code).file-view {
+    padding: 1em 1em 1em!important
+  }
+  .repository #git-stats + .ui.menu {
+    flex-wrap: wrap
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item {
+    margin-top: 12px;
+    width: 100%
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item #clone-panel {
+    width: 100%;
+    margin: 0
+  }
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 10px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 94px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 94px;
+    top: 50px;
+    right: 12px
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 90px
+  }
+}
+@media only screen and (min-width:768px) and (max-width:1023px) {
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 18px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 204px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 204px;
+    top: 50px;
+    right: 0
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 192px;
+    height: initial
+  }
+}
+@media (max-width:1023px) {
+  .ui.menu {
+    border-radius: 0
+  }
+  .ui.vertical.menu {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto
+  }
+  .ui.vertical.menu .header {
+    display: none
+  }
+  .ui.vertical.menu .item {
+    border: none;
+    border-bottom: 3px solid transparent
+  }
+  .ui.vertical.menu .item:hover {
+    border-bottom-color: var(--color-border-xlight)
+  }
+  .ui.vertical.menu .item.active {
+    border-bottom-color: var(--color-active)
+  }
+  .ui.container:not(.fluid) {
+    width: 100%!important
+  }
+  .ui.column.grid > [class*="eleven wide"].column,
+  .ui.column.grid > [class*="five wide"].column,
+  .ui.column.grid > [class*="four wide"].column,
+  .ui.column.grid > [class*="twelve wide"].column,
+  .ui.grid > .column.row > [class*="eleven wide"].column,
+  .ui.grid > .column.row > [class*="five wide"].column,
+  .ui.grid > .column.row > [class*="four wide"].column,
+  .ui.grid > .column.row > [class*="twelve wide"].column,
+  .ui.grid > .row > [class*="eleven wide"].column,
+  .ui.grid > .row > [class*="five wide"].column,
+  .ui.grid > .row > [class*="four wide"].column,
+  .ui.grid > .row > [class*="twelve wide"].column,
+  .ui.grid > [class*="eleven wide"].column,
+  .ui.grid > [class*="five wide"].column,
+  .ui.grid > [class*="four wide"].column,
+  .ui.grid > [class*="twelve wide"].column {
+    width: 100%!important
+  }
+}
+@media (max-width:767px) {
+  .dashboard.feeds .ui.grid {
+    flex-direction: column-reverse
+  }
+  .dashboard.feeds .ui.grid > [class*="six wide"].column,
+  .dashboard.feeds .ui.grid > [class*="ten wide"].column {
+    width: 100%!important
+  }
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  width: 100%!important;
+  max-width: 380px;
+  border-radius: 7px
+}
+.user.activate form .header,
+.user.forgot.password form .header,
+.user.reset.password form .header,
+.user.signin form .header,
+.user.signup form .header {
+  padding: 15px!important;
+  margin: 0;
+  background: 0 0
+}
+.user.activate form .inline.field > label,
+.user.forgot.password form .inline.field > label,
+.user.reset.password form .inline.field > label,
+.user.signin form .inline.field > label,
+.user.signup form .inline.field > label {
+  display: block;
+  text-align: left;
+  margin-bottom: 6px!important
+}
+.user.activate form input,
+.user.activate form textarea,
+.user.forgot.password form input,
+.user.forgot.password form textarea,
+.user.reset.password form input,
+.user.reset.password form textarea,
+.user.signin form input,
+.user.signin form textarea,
+.user.signup form input,
+.user.signup form textarea {
+  width: 100%!important
+}
+.user.signin .ui.form .ui.button {
+  margin-bottom: 12px;
+  width: 100%;
+  border-radius: 100em;
+  height: 45px
+}
+.following.bar.light {
+  background-color: var(--color-bg-secondary)!important;
+  border-bottom: 1px solid var(--color-bg-secondary);
+  color: var(--color-text-accent1)!important;
+  position: fixed;
+  top: 0
+}
+@media (max-width:767px) {
+  .following.bar .top.menu {
+    display: flex;
+    overflow-x: auto
+  }
+}
+.following.bar .top.menu .octicon {
+  color: var(--color-text-accent1)
+}
+.following.bar .top.menu a.item.brand {
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand) {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand)[target="_blank"] {
+  display: none
+}
+.following.bar .top.menu .dropdown.item.active,
+.following.bar .top.menu .dropdown.item:hover,
+.following.bar .top.menu a.item:not(.brand):hover {
+  background: rgba(0,0,0,.2)!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand).active,
+.ui.secondary.menu .item:not(.brand).active:hover,
+.ui.secondary.menu .item:not(.brand):hover {
+  border-radius: 5px;
+  background: 0 0!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand) {
+  margin: 0
+}
+.following.bar .head.link.item {
+  color: var(--color-text-accent1)!important
+}
+.ui.vertical.menu {
+  background: 0 0
+}
+.ui.secondary.menu .item,
+.ui.vertical.menu .item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  border-radius: 0
+}
+.ui.secondary.menu .item.active,
+.ui.vertical.menu .item.active {
+  background: 0 0;
+  font-weight: 600;
+  color: var(--color-text-accent1)
+}
+.ui.secondary.menu .item:hover,
+.ui.vertical.menu .item:hover {
+  background: 0 0;
+  color: var(--color-text-accent2)
+}
+@media (min-width:1024px) {
+  .ui.vertical.menu {
+    border: 1px solid var(--color-border)
+  }
+  .ui.vertical.menu .active.item {
+    border-left: 3px solid var(--color-active);
+    background: var(--color-bg-secondary)
+  }
+}
+.ui.vertical.menu .header.item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  text-align: center;
+  padding-left: 0
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  border: 1px solid var(--color-border)
+}
+.ui.dropdown .menu,
+.ui.menu .dropdown.item .menu,
+.ui.menu .ui.dropdown .menu > .item:hover {
+  background: var(--color-bg-secondary)!important
+}
+.ui.dropdown .menu .selected.item,
+.ui.dropdown .menu > .header,
+.ui.dropdown .menu > .item,
+.ui.dropdown.selected {
+  color: var(--color-text-accent1)!important
+}
+.ui.dropdown .menu > .item:hover,
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu .ui.dropdown .menu > .active.item,
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item,
+.ui.menu a.item:hover {
+  color: var(--color-text-accent2)!important
+}
+.ui.menu {
+  background: 0 0!important;
+  color: var(--color-text-primary)!important
+}
+.ui.menu .item.active,
+.ui.menu .ui.menu .item.active:hover {
+  font-weight: 700
+}
+.ui.menu .ui.dropdown .menu > .item {
+  color: var(--color-text-primary)!important;
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu .item {
+  border-bottom: 3px solid transparent;
+  color: var(--color-text-accent1)
+}
+.ui.menu .item.active,
+.ui.menu .item.active:hover,
+.ui.menu .item:hover {
+  color: var(--color-text-accent2)
+}
+.ui.menu:not(.vertical) .item.active {
+  border-bottom-color: var(--color-active)
+}
+.ui.fluid.basic.button.center.ajax-load-button {
+  border-radius: 100em
+}
+.ui.fluid.basic.button.center.ajax-load-button:hover {
+  background-color: var(--color-bt-light-hover);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.input > input {
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border)
+}
+#clone-panel .ui.input > input .ui.input > input:focus,
+#clone-panel .ui.input > input .ui.input.focus > input {
+  background: var(--color-input-bg);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.basic.button:first-child {
+  border: none
+}
+#clone-panel .ui.basic.button:last-child {
+  border-left: none
+}
+.ui.buttons > .ui.dropdown:last-child .menu,
+.ui.menu .right.dropdown.item .menu,
+.ui.menu .right.menu .dropdown:last-child .menu {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu > .item:first-child,
+.user.profile .ui.secondary.menu .item:not(.brand).active {
+  border-radius: 0
+}
+.ui.button {
+  background-color: var(--color-button-bg)
+}
+.ui.button:hover {
+  background-color: var(--color-button-bg-hover)
+}
+.ui.selection.dropdown {
+  color: var(--color-text-primary);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-border)
+}
+.ui.selection.dropdown.active {
+  border-color: var(--color-active)
+}
+.repository .header-wrapper {
+  color: var(--color-text-accent1)!important;
+  background-color: transparent;
+  padding-top: 10px
+}
+.repository .head .mega-octicon {
+  width: 24px;
+  font-size: 24px;
+  color: var(--color-icon)
+}
+.ui.breadcrumb .divider {
+  color: var(--color-text-light);
+  margin: 0
+}
+.repository .head .fork-flag {
+  margin-left: 34px;
+  margin-top: 6px;
+  color: var(--color-text-light)
+}
+.ui.repository.list .item:not(:first-child) {
+  border-top: 1px solid var(--color-border-light)
+}
+.repository #clone-panel input {
+  border-bottom: 1px solid var(--color-border-light);
+  border-top: 1px solid var(--color-border-light);
+  border-right: none
+}
+#clone-panel .ui.action.input:not([class*="left action"]) > input:focus {
+  border-left-color: transparent!important;
+  border-right-color: transparent!important
+}
+.repository.file.list #repo-desc {
+  padding: 12px 0
+}
+.repository #git-stats {
+  border: 1px solid var(--color-border-light);
+  background: var(--color-bg-primary)
+}
+.repository #git-stats .ui .text.black {
+  color: var(--color-text-primary)
+}
+.repository #git-stats .ui .text.black:hover {
+  color: var(--color-text-accent2)
+}
+.repository #file-content {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  margin-top: 24px
+}
+.repository .ui.top.attached.header {
+  border-bottom: 1px solid var(--color-border);
+  border-radius: 0
+}
+.repository #repo-files-table tr:hover {
+  background-color: var(--color-bg-secondary)!important
+}
+.repository .ui.header .ui.right {
+  display: flex;
+  align-items: center
+}
+@media only screen and (max-width:767px) {
+  .repository .ui.header .ui.right {
+    margin-top: 18px;
+    float: initial
+  }
+}
+.repository .ui.header .ui.right .ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) {
+  border: 1px solid var(--color-border)!important;
+  background: var(--color-bt-light)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button {
+  height: 32px;
+  border: none!important;
+  line-height: 32px;
+  padding: 0 6px 0 12px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button:hover {
+  background: var(--color-bt-light-hover)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .label {
+  background: rgba(0,0,0,.2);
+  border-radius: 100em;
+  padding: 3px 6px;
+  border: none!important;
+  margin-right: 6px!important
+}
+.repository .ui.secondary.menu {
+  margin: 0
+}
+.markdown:not(code) h1 {
+  border-bottom: 1px solid var(--color-border)
+}
+.markdown:not(code) h2 {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.markdown:not(code) blockquote {
+  border-left: 4px solid var(--color-text-accent1)
+}
+.mega-octicon,
+.octicon {
+  color: var(--color-text-light)
+}
+.ui.secondary.menu .ui.breadcrumb:first-child {
+  margin-left: 12px
+}
+.ui.table {
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: 0 0
+}
+.ui.table thead th {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border)
+}
+.ui.table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.avatar > img,
+.ui img.avatar.image {
+  border-radius: 50%
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  color: var(--color-text-primary)!important
+}
+.ui.basic.button i,
+.ui.basic.buttons .button i {
+  color: var(--color-text-light)!important
+}
+.repository .ui.tabs.container .ui.menu {
+  border-bottom: 1px solid var(--color-border)!important
+}
+.ui.tabular.menu .item {
+  color: var(--color-text-primary)
+}
+.ui.tabular.menu .item i {
+  color: var(--color-text-light)
+}
+.ui.tabular.menu .item::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 3px;
+  border-radius: 100em;
+  background: 0 0;
+  position: absolute;
+  bottom: 0;
+  margin: 0 -1.42857143em
+}
+.ui.tabular.menu .active.item {
+  border: none;
+  background: 0 0;
+  color: var(--color-text-accent1)
+}
+.ui.tabular.menu .active.item::after {
+  background: var(--color-active)
+}
+.menu + #file-content {
+  margin-top: 24px
+}
+.ui.right.file-actions .ui.button {
+  background-color: var(--color-bt-light);
+  color: var(--color-text-accent1)
+}
+.ui.right.file-actions .ui.button:hover {
+  color: var(--color-text-accent2);
+  background-color: var(--color-bt-light-hover)
+}
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-accent1)
+}
+.ui.basic.button:focus,
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.buttons .button:hover {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)!important
+}
+.ui.basic.button:focus i,
+.ui.basic.button:hover i,
+.ui.basic.buttons .button:focus i,
+.ui.basic.buttons .button:hover i {
+  color: var(--color-text-accent1)!important
+}

dist/kristuff.gogs.dark-accent-red.css

@@ -0,0 +1,1136 @@
+/*!
+ *   ____
+ *  / ___| ___   __ _ ___    _   _
+ * | |  _ / _ \ / _` / __|  | |_| |_  ___ _ __  ___ ___
+ * | |_| | (_) | (_| \__ \  |  _| ' \/ -_) '  \/ -_|_-<
+ *  \____|\___/ \__, |___/   \__|_||_\___|_|_|_\___/__/
+ *              |___/
+ *
+ * This file is part of kristuff/gogs-themes 
+ * Copyright (c) 2022 Christophe Buliard  
+ */
+:root {
+  --color-active: #d9453d;
+  --color-active-darker: #cf3d35
+}
+.bg-code,
+.repository.file.list #file-content .code-view .lines-code .hljs,
+.repository.file.list #file-content .code-view .lines-code ol,
+.repository.file.list #file-content .code-view .lines-code pre,
+.repository.file.list #file-content .code-view .lines-num .hljs,
+.repository.file.list #file-content .code-view .lines-num ol,
+.repository.file.list #file-content .code-view .lines-num pre {
+  color: #f8f8f2!important;
+  background-color: var(--color-pre-bg)!important
+}
+.repository.file.list #file-content .code-view .lines-num {
+  color: #595959!important;
+  background-color: var(--color-pre-bg)!important
+}
+code[class*=language-],
+pre[class*=language-] {
+  color: #f8f8f2;
+  background: 0 0;
+  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  scrollbar-color: var(--color-pre-scrollbar1) var(--color-pre-scrollbar2)
+}
+pre[class*=language-] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: .3em!important
+}
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background: var(--color-pre-bg)!important
+}
+:not(pre) > code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090!important
+}
+.token.punctuation {
+  color: #f8f8f2!important
+}
+.token.namespace {
+  opacity: .7
+}
+.token.constant,
+.token.deleted,
+.token.symbol,
+.token.tag {
+  color: #5189f4!important
+}
+.token.property {
+  color: #59d7f4!important
+}
+.token.boolean,
+.token.number {
+  color: #5189f4!important
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector {
+  color: #ec586d!important
+}
+.token.attr-value,
+.token.string {
+  color: #ff9267!important
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+  color: #f8f8f2!important
+}
+.token.atrule,
+.token.class-name,
+.token.function {
+  color: #f8f8f2!important
+}
+.token.keyword {
+  color: #5189f4!important
+}
+.token.important,
+.token.regex {
+  color: #5189f4!important
+}
+.XXX_token.bold,
+.XXX_token.important {
+  font-weight: 700
+}
+.token.italic {
+  font-style: italic
+}
+.token.entity {
+  cursor: help
+}
+.hljs-section,
+.hljs-selector-id,
+.hljs-title {
+  color: #f94141!important
+}
+.hljs-comment,
+.hljs-quote {
+  color: #8a8899!important
+}
+:root {
+  --color-bg-primary: #1e2329;
+  --color-bg-secondary: #292e35;
+  --color-text-primary: #8b8b8b;
+  --color-text-light: #424851;
+  --color-icon: #3e4248;
+  --color-text-accent1: #c9c8c8;
+  --color-text-accent2: #ffffff;
+  --color-border: #3b4251;
+  --color-border-light: #343a42;
+  --color-border-xlight: #313a44;
+  --color-badge-bg: #2d333b;
+  --color-input-bg: rgba(0,0,0,.15);
+  --color-bt-light: #2d333b;
+  --color-bt-light-hover: #323841;
+  --color-button-bg: #0c0c0c;
+  --color-button-bg-hover: #000;
+  --color-code: #c6c6c6;
+  --color-code-bg: #191d22;
+  --color-pre-bg: #292d35;
+  --color-pre-scrollbar1: #313137;
+  --color-pre-scrollbar2: #171b20
+}
+* {
+  scrollbar-color: #313137 #171b20
+}
+.home .hero .octicon,
+.home a {
+  color: var(--color-active)
+}
+body:not(.full-width) {
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary)
+}
+a {
+  color: var(--color-text-accent1)
+}
+a:hover {
+  color: var(--color-text-accent2)
+}
+.ui .text.black:hover {
+  color: #fff
+}
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+  color: var(--color-icon)
+}
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+  color: var(--color-text-primary)
+}
+.ui.button:not(.label),
+.ui.header,
+.ui.input input,
+.ui.menu,
+h2,
+h3,
+h4,
+h5 {
+  color: var(--color-text-accent1)
+}
+h1 {
+  color: var(--color-text-accent2)
+}
+.markdown:not(code) h1 .octicon-link,
+.markdown:not(code) h2 .octicon-link,
+.markdown:not(code) h3 .octicon-link,
+.markdown:not(code) h4 .octicon-link,
+.markdown:not(code) h5 .octicon-link,
+.markdown:not(code) h6 .octicon-link {
+  color: var(--color-text-light)
+}
+.ui.card,
+.ui.cards > .card {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  box-shadow: none
+}
+.ui.secondary.pointing.menu {
+  border-color: var(--color-border)
+}
+.ui.secondary.pointing.menu .active.item {
+  border-color: var(--color-active)
+}
+.ui.dropdown .menu > .divider {
+  border-color: var(--color-border)
+}
+.ui.form .field > label {
+  color: var(--color-text-accent1)
+}
+.ui .warning.header {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)
+}
+.settings .hook.list > .item:not(:last-child) {
+  border-color: var(--color-border-light)!important
+}
+.ui.card .content:not(.extra) {
+  color: var(--color-text-accent1);
+  font-weight: 700
+}
+.ui.card .text.black,
+.ui.card > .extra a:not(.ui),
+.ui.cards > .card > .extra a:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.user.list .item .description a {
+  color: var(--color-text-accent1)
+}
+.ui.user.list .item .description a:hover {
+  color: var(--color-text-accent2)
+}
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+  border-color: var(--color-border-xlight)
+}
+.ui .text.black,
+.ui .text.black a,
+.ui.accordion .title:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.label {
+  color: var(--color-text-accent1);
+  background: var(--color-input-bg)
+}
+.ui.labela:hover {
+  color: var(--color-text-accent2)
+}
+.ui.label.basic {
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-border)
+}
+.markdown:not(code) .highlight pre,
+.markdown:not(code) pre {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li.private {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li:not(:last-child) {
+  border-color: var(--color-border-light)
+}
+.dashboard .six.wide.column .menu {
+  border-bottom: 1px solid var(--color-border)
+}
+.ui .info.segment.top {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui[class*="top attached"].segment {
+  border-radius: 7px
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
+  background-color: var(--color-bg-primary)!important;
+  border-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .file-body.file-code .lines-num {
+  background-color: var(--color-bg-primary)!important
+}
+.repository .diff-file-box .code-diff .lines-num,
+.repository .diff-file-box .file-body.file-code .lines-num-old {
+  border-right-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .code-diff tbody tr.add-code td,
+.repository .diff-file-box .code-diff tbody tr.del-code td {
+  background-color: var(--color-bg-secondary)!important;
+  border-color: var(--color-border)!important
+}
+.repository .diff-file-box .code-diff tbody tr .removed-code {
+  background-color: #d72f2f;
+  color: #fff!important
+}
+.repository .diff-file-box .code-diff tbody tr .added-code {
+  background-color: #1fb91f;
+  color: #fff!important
+}
+.ui.grey.label,
+.ui.grey.labels .label {
+  border-color: var(--color-badge-bg)!important
+}
+.ui.menu .item > .label {
+  background-color: var(--color-badge-bg)
+}
+.fitted.item.choose.reference .menu .header .text {
+  padding-bottom: 6px;
+  border-bottom: 2px solid transparent
+}
+.fitted.item.choose.reference .menu .header .text.black {
+  border-color: var(--color-active)
+}
+.ui .text.black {
+  color: #fff
+}
+.ui.selectable.table tbody tr:hover,
+.ui.table tbody tr td.selectable:hover {
+  color: var(--color-text-accent1)
+}
+.ui.blue.button,
+.ui.blue.buttons .button,
+.ui.green.button,
+.ui.green.buttons .button {
+  background-color: var(--color-active-darker)
+}
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
+  background-color: var(--color-active)
+}
+.hljs {
+  color: var(--color-text-primary)!important
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: var(--color-text-accent)!important
+}
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-number,
+.hljs-tag .hljs-attr,
+.hljs-template-variable,
+.hljs-variable {
+  color: #0acccc!important
+}
+.hljs-doctag,
+.hljs-string {
+  color: #fd6d26!important
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary)
+}
+footer {
+  border-top: none;
+  color: var(--color-text-light)!important;
+  background-color: var(--color-bg-primary)
+}
+footer .container .links > * {
+  border-left: 1px solid var(--color-border-xlight)
+}
+.ui.attached.header,
+.ui.segment {
+  background: 0 0;
+  border: none
+}
+.ui.checkbox + label:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-primary)
+}
+.ui.checkbox input:checked ~ .box::after,
+.ui.checkbox input:checked ~ label::after {
+  color: var(--color-text-accent1)
+}
+.ui.checkbox label::before {
+  background: var(--color-input-bg)!important
+}
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label,
+.ui.checkbox .box::after,
+.ui.checkbox label,
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label:hover,
+.ui.checkbox .box::after:hover,
+.ui.checkbox label::after:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-accent2)
+}
+.ui.checkbox input:focus ~ label {
+  color: var(--color-text-accent1)!important
+}
+.ui.checkbox .box::before,
+.ui.checkbox label::before {
+  border-color: var(--color-border)!important
+}
+.ui.form .required.field > .checkbox::after,
+.ui.form .required.field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.fields:not(.grouped) > .field > label::after {
+  color: var(--color-active)
+}
+.ui.form input:not([type]),
+.ui.form input[type=date],
+.ui.form input[type=datetime-local],
+.ui.form input[type=email],
+.ui.form input[type=file],
+.ui.form input[type=number],
+.ui.form input[type=password],
+.ui.form input[type=search],
+.ui.form input[type=tel],
+.ui.form input[type=text],
+.ui.form input[type=time],
+.ui.form input[type=url],
+.ui.form textarea {
+  background-color: var(--color-input-bg);
+  border: 1px solid var(--color-border-light);
+  color: var(--color-text-primary)
+}
+.ui.form input:not([type]):focus,
+.ui.form input[type=date]:focus,
+.ui.form input[type=datetime-local]:focus,
+.ui.form input[type=email]:focus,
+.ui.form input[type=file]:focus,
+.ui.form input[type=number]:focus,
+.ui.form input[type=password]:focus,
+.ui.form input[type=search]:focus,
+.ui.form input[type=tel]:focus,
+.ui.form input[type=text]:focus,
+.ui.form input[type=time]:focus,
+.ui.form input[type=url]:focus,
+.ui.form textarea:focus {
+  background-color: var(--color-input-bg);
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-active)
+}
+.ui.input > input,
+.ui.input > input:focus,
+.ui.input.focus > input {
+  background-color: var(--color-input-bg)
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input,
+.explore.users .ui.action.input:not([class*="left action"]) > input {
+  border-radius: 100em!important;
+  border-right-color: var(--color-border)!important;
+  position: relative;
+  padding-right: 120px;
+  padding-left: 15px;
+  height: 42px;
+  width: 100%!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input.active,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input.active,
+.explore.users .ui.action.input:not([class*="left action"]) > input.active {
+  border-right-color: var(--color-border)!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.users .ui.action.input:not([class*="left action"]) > input + .button {
+  position: absolute;
+  right: 0;
+  height: 42px;
+  border-radius: 100em!important
+}
+.user.signin .ui.form .field:last-child {
+  text-align: center
+}
+.user.signin .ui.form .field:last-child a {
+  color: var(--color-text-primary);
+  font-size: .95rem
+}
+.user.signin .ui.form .field:last-child a:hover {
+  color: var(--color-text-accent2)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  color: var(--color-text-accent1)!important
+}
+.ui.input {
+  color: var(--color-text-primary)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  border-color: var(--color-border)
+}
+.ui.attached.segment {
+  border: none
+}
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.fields > label {
+  color: var(--color-text-accent1)
+}
+body:not(.full-width) {
+  min-width: 100%
+}
+.full.height {
+  margin-bottom: -60px;
+  min-height: calc(100% - 60px)
+}
+.admin,
+.dashboard,
+.explore,
+.organization,
+.repository,
+.user:not(.context):not(.list) {
+  padding-top: 80px
+}
+.home {
+  padding-top: 20px
+}
+.home .stackable {
+  padding-top: 40px
+}
+.home .logo img {
+  max-width: 100%
+}
+footer {
+  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 10px
+}
+footer .container .links > a[target="_blank"] {
+  display: none
+}
+footer > .ui.container {
+  border-top: 1px solid var(--color-border-xlight)
+}
+footer > .ui.container .ui.left::after {
+  display: inline-flex;
+  content: " - Custom Theme by @Kristuff"
+}
+@media only screen and (max-width:767px) {
+  footer > .ui.container {
+    text-align: center!important
+  }
+  footer > .ui.container .ui.left,
+  footer > .ui.container .ui.right {
+    float: initial
+  }
+}
+@media only screen and (max-width:1023px) {
+  footer > .ui.container {
+    width: calc(100% - 24px);
+    margin: 0 auto
+  }
+}
+.ui.card > .image:not(.ui) > img,
+.ui.cards > .card > .image:not(.ui) > img {
+  border-radius: 50%;
+  margin: 12px;
+  width: calc(100% - 24px)
+}
+.user.profile .ui.card .profile-avatar {
+  height: initial;
+  background: 0 0
+}
+@media only screen and (max-width:767px) {
+  .markdown:not(code).file-view {
+    padding: 1em 1em 1em!important
+  }
+  .repository #git-stats + .ui.menu {
+    flex-wrap: wrap
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item {
+    margin-top: 12px;
+    width: 100%
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item #clone-panel {
+    width: 100%;
+    margin: 0
+  }
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 10px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 94px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 94px;
+    top: 50px;
+    right: 12px
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 90px
+  }
+}
+@media only screen and (min-width:768px) and (max-width:1023px) {
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 18px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 204px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 204px;
+    top: 50px;
+    right: 0
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 192px;
+    height: initial
+  }
+}
+@media (max-width:1023px) {
+  .ui.menu {
+    border-radius: 0
+  }
+  .ui.vertical.menu {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto
+  }
+  .ui.vertical.menu .header {
+    display: none
+  }
+  .ui.vertical.menu .item {
+    border: none;
+    border-bottom: 3px solid transparent
+  }
+  .ui.vertical.menu .item:hover {
+    border-bottom-color: var(--color-border-xlight)
+  }
+  .ui.vertical.menu .item.active {
+    border-bottom-color: var(--color-active)
+  }
+  .ui.container:not(.fluid) {
+    width: 100%!important
+  }
+  .ui.column.grid > [class*="eleven wide"].column,
+  .ui.column.grid > [class*="five wide"].column,
+  .ui.column.grid > [class*="four wide"].column,
+  .ui.column.grid > [class*="twelve wide"].column,
+  .ui.grid > .column.row > [class*="eleven wide"].column,
+  .ui.grid > .column.row > [class*="five wide"].column,
+  .ui.grid > .column.row > [class*="four wide"].column,
+  .ui.grid > .column.row > [class*="twelve wide"].column,
+  .ui.grid > .row > [class*="eleven wide"].column,
+  .ui.grid > .row > [class*="five wide"].column,
+  .ui.grid > .row > [class*="four wide"].column,
+  .ui.grid > .row > [class*="twelve wide"].column,
+  .ui.grid > [class*="eleven wide"].column,
+  .ui.grid > [class*="five wide"].column,
+  .ui.grid > [class*="four wide"].column,
+  .ui.grid > [class*="twelve wide"].column {
+    width: 100%!important
+  }
+}
+@media (max-width:767px) {
+  .dashboard.feeds .ui.grid {
+    flex-direction: column-reverse
+  }
+  .dashboard.feeds .ui.grid > [class*="six wide"].column,
+  .dashboard.feeds .ui.grid > [class*="ten wide"].column {
+    width: 100%!important
+  }
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  width: 100%!important;
+  max-width: 380px;
+  border-radius: 7px
+}
+.user.activate form .header,
+.user.forgot.password form .header,
+.user.reset.password form .header,
+.user.signin form .header,
+.user.signup form .header {
+  padding: 15px!important;
+  margin: 0;
+  background: 0 0
+}
+.user.activate form .inline.field > label,
+.user.forgot.password form .inline.field > label,
+.user.reset.password form .inline.field > label,
+.user.signin form .inline.field > label,
+.user.signup form .inline.field > label {
+  display: block;
+  text-align: left;
+  margin-bottom: 6px!important
+}
+.user.activate form input,
+.user.activate form textarea,
+.user.forgot.password form input,
+.user.forgot.password form textarea,
+.user.reset.password form input,
+.user.reset.password form textarea,
+.user.signin form input,
+.user.signin form textarea,
+.user.signup form input,
+.user.signup form textarea {
+  width: 100%!important
+}
+.user.signin .ui.form .ui.button {
+  margin-bottom: 12px;
+  width: 100%;
+  border-radius: 100em;
+  height: 45px
+}
+.following.bar.light {
+  background-color: var(--color-bg-secondary)!important;
+  border-bottom: 1px solid var(--color-bg-secondary);
+  color: var(--color-text-accent1)!important;
+  position: fixed;
+  top: 0
+}
+@media (max-width:767px) {
+  .following.bar .top.menu {
+    display: flex;
+    overflow-x: auto
+  }
+}
+.following.bar .top.menu .octicon {
+  color: var(--color-text-accent1)
+}
+.following.bar .top.menu a.item.brand {
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand) {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand)[target="_blank"] {
+  display: none
+}
+.following.bar .top.menu .dropdown.item.active,
+.following.bar .top.menu .dropdown.item:hover,
+.following.bar .top.menu a.item:not(.brand):hover {
+  background: rgba(0,0,0,.2)!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand).active,
+.ui.secondary.menu .item:not(.brand).active:hover,
+.ui.secondary.menu .item:not(.brand):hover {
+  border-radius: 5px;
+  background: 0 0!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand) {
+  margin: 0
+}
+.following.bar .head.link.item {
+  color: var(--color-text-accent1)!important
+}
+.ui.vertical.menu {
+  background: 0 0
+}
+.ui.secondary.menu .item,
+.ui.vertical.menu .item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  border-radius: 0
+}
+.ui.secondary.menu .item.active,
+.ui.vertical.menu .item.active {
+  background: 0 0;
+  font-weight: 600;
+  color: var(--color-text-accent1)
+}
+.ui.secondary.menu .item:hover,
+.ui.vertical.menu .item:hover {
+  background: 0 0;
+  color: var(--color-text-accent2)
+}
+@media (min-width:1024px) {
+  .ui.vertical.menu {
+    border: 1px solid var(--color-border)
+  }
+  .ui.vertical.menu .active.item {
+    border-left: 3px solid var(--color-active);
+    background: var(--color-bg-secondary)
+  }
+}
+.ui.vertical.menu .header.item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  text-align: center;
+  padding-left: 0
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  border: 1px solid var(--color-border)
+}
+.ui.dropdown .menu,
+.ui.menu .dropdown.item .menu,
+.ui.menu .ui.dropdown .menu > .item:hover {
+  background: var(--color-bg-secondary)!important
+}
+.ui.dropdown .menu .selected.item,
+.ui.dropdown .menu > .header,
+.ui.dropdown .menu > .item,
+.ui.dropdown.selected {
+  color: var(--color-text-accent1)!important
+}
+.ui.dropdown .menu > .item:hover,
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu .ui.dropdown .menu > .active.item,
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item,
+.ui.menu a.item:hover {
+  color: var(--color-text-accent2)!important
+}
+.ui.menu {
+  background: 0 0!important;
+  color: var(--color-text-primary)!important
+}
+.ui.menu .item.active,
+.ui.menu .ui.menu .item.active:hover {
+  font-weight: 700
+}
+.ui.menu .ui.dropdown .menu > .item {
+  color: var(--color-text-primary)!important;
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu .item {
+  border-bottom: 3px solid transparent;
+  color: var(--color-text-accent1)
+}
+.ui.menu .item.active,
+.ui.menu .item.active:hover,
+.ui.menu .item:hover {
+  color: var(--color-text-accent2)
+}
+.ui.menu:not(.vertical) .item.active {
+  border-bottom-color: var(--color-active)
+}
+.ui.fluid.basic.button.center.ajax-load-button {
+  border-radius: 100em
+}
+.ui.fluid.basic.button.center.ajax-load-button:hover {
+  background-color: var(--color-bt-light-hover);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.input > input {
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border)
+}
+#clone-panel .ui.input > input .ui.input > input:focus,
+#clone-panel .ui.input > input .ui.input.focus > input {
+  background: var(--color-input-bg);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.basic.button:first-child {
+  border: none
+}
+#clone-panel .ui.basic.button:last-child {
+  border-left: none
+}
+.ui.buttons > .ui.dropdown:last-child .menu,
+.ui.menu .right.dropdown.item .menu,
+.ui.menu .right.menu .dropdown:last-child .menu {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu > .item:first-child,
+.user.profile .ui.secondary.menu .item:not(.brand).active {
+  border-radius: 0
+}
+.ui.button {
+  background-color: var(--color-button-bg)
+}
+.ui.button:hover {
+  background-color: var(--color-button-bg-hover)
+}
+.ui.selection.dropdown {
+  color: var(--color-text-primary);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-border)
+}
+.ui.selection.dropdown.active {
+  border-color: var(--color-active)
+}
+.repository .header-wrapper {
+  color: var(--color-text-accent1)!important;
+  background-color: transparent;
+  padding-top: 10px
+}
+.repository .head .mega-octicon {
+  width: 24px;
+  font-size: 24px;
+  color: var(--color-icon)
+}
+.ui.breadcrumb .divider {
+  color: var(--color-text-light);
+  margin: 0
+}
+.repository .head .fork-flag {
+  margin-left: 34px;
+  margin-top: 6px;
+  color: var(--color-text-light)
+}
+.ui.repository.list .item:not(:first-child) {
+  border-top: 1px solid var(--color-border-light)
+}
+.repository #clone-panel input {
+  border-bottom: 1px solid var(--color-border-light);
+  border-top: 1px solid var(--color-border-light);
+  border-right: none
+}
+#clone-panel .ui.action.input:not([class*="left action"]) > input:focus {
+  border-left-color: transparent!important;
+  border-right-color: transparent!important
+}
+.repository.file.list #repo-desc {
+  padding: 12px 0
+}
+.repository #git-stats {
+  border: 1px solid var(--color-border-light);
+  background: var(--color-bg-primary)
+}
+.repository #git-stats .ui .text.black {
+  color: var(--color-text-primary)
+}
+.repository #git-stats .ui .text.black:hover {
+  color: var(--color-text-accent2)
+}
+.repository #file-content {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  margin-top: 24px
+}
+.repository .ui.top.attached.header {
+  border-bottom: 1px solid var(--color-border);
+  border-radius: 0
+}
+.repository #repo-files-table tr:hover {
+  background-color: var(--color-bg-secondary)!important
+}
+.repository .ui.header .ui.right {
+  display: flex;
+  align-items: center
+}
+@media only screen and (max-width:767px) {
+  .repository .ui.header .ui.right {
+    margin-top: 18px;
+    float: initial
+  }
+}
+.repository .ui.header .ui.right .ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) {
+  border: 1px solid var(--color-border)!important;
+  background: var(--color-bt-light)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button {
+  height: 32px;
+  border: none!important;
+  line-height: 32px;
+  padding: 0 6px 0 12px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button:hover {
+  background: var(--color-bt-light-hover)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .label {
+  background: rgba(0,0,0,.2);
+  border-radius: 100em;
+  padding: 3px 6px;
+  border: none!important;
+  margin-right: 6px!important
+}
+.repository .ui.secondary.menu {
+  margin: 0
+}
+.markdown:not(code) h1 {
+  border-bottom: 1px solid var(--color-border)
+}
+.markdown:not(code) h2 {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.markdown:not(code) blockquote {
+  border-left: 4px solid var(--color-text-accent1)
+}
+.mega-octicon,
+.octicon {
+  color: var(--color-text-light)
+}
+.ui.secondary.menu .ui.breadcrumb:first-child {
+  margin-left: 12px
+}
+.ui.table {
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: 0 0
+}
+.ui.table thead th {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border)
+}
+.ui.table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.avatar > img,
+.ui img.avatar.image {
+  border-radius: 50%
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  color: var(--color-text-primary)!important
+}
+.ui.basic.button i,
+.ui.basic.buttons .button i {
+  color: var(--color-text-light)!important
+}
+.repository .ui.tabs.container .ui.menu {
+  border-bottom: 1px solid var(--color-border)!important
+}
+.ui.tabular.menu .item {
+  color: var(--color-text-primary)
+}
+.ui.tabular.menu .item i {
+  color: var(--color-text-light)
+}
+.ui.tabular.menu .item::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 3px;
+  border-radius: 100em;
+  background: 0 0;
+  position: absolute;
+  bottom: 0;
+  margin: 0 -1.42857143em
+}
+.ui.tabular.menu .active.item {
+  border: none;
+  background: 0 0;
+  color: var(--color-text-accent1)
+}
+.ui.tabular.menu .active.item::after {
+  background: var(--color-active)
+}
+.menu + #file-content {
+  margin-top: 24px
+}
+.ui.right.file-actions .ui.button {
+  background-color: var(--color-bt-light);
+  color: var(--color-text-accent1)
+}
+.ui.right.file-actions .ui.button:hover {
+  color: var(--color-text-accent2);
+  background-color: var(--color-bt-light-hover)
+}
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-accent1)
+}
+.ui.basic.button:focus,
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.buttons .button:hover {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)!important
+}
+.ui.basic.button:focus i,
+.ui.basic.button:hover i,
+.ui.basic.buttons .button:focus i,
+.ui.basic.buttons .button:hover i {
+  color: var(--color-text-accent1)!important
+}

dist/kristuff.gogs.dark-accent-yellow.css

@@ -0,0 +1,1136 @@
+/*!
+ *   ____
+ *  / ___| ___   __ _ ___    _   _
+ * | |  _ / _ \ / _` / __|  | |_| |_  ___ _ __  ___ ___
+ * | |_| | (_) | (_| \__ \  |  _| ' \/ -_) '  \/ -_|_-<
+ *  \____|\___/ \__, |___/   \__|_||_\___|_|_|_\___/__/
+ *              |___/
+ *
+ * This file is part of kristuff/gogs-themes 
+ * Copyright (c) 2022 Christophe Buliard  
+ */
+:root {
+  --color-active: #e4c515;
+  --color-active-darker: #d4b712
+}
+.bg-code,
+.repository.file.list #file-content .code-view .lines-code .hljs,
+.repository.file.list #file-content .code-view .lines-code ol,
+.repository.file.list #file-content .code-view .lines-code pre,
+.repository.file.list #file-content .code-view .lines-num .hljs,
+.repository.file.list #file-content .code-view .lines-num ol,
+.repository.file.list #file-content .code-view .lines-num pre {
+  color: #f8f8f2!important;
+  background-color: var(--color-pre-bg)!important
+}
+.repository.file.list #file-content .code-view .lines-num {
+  color: #595959!important;
+  background-color: var(--color-pre-bg)!important
+}
+code[class*=language-],
+pre[class*=language-] {
+  color: #f8f8f2;
+  background: 0 0;
+  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  scrollbar-color: var(--color-pre-scrollbar1) var(--color-pre-scrollbar2)
+}
+pre[class*=language-] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: .3em!important
+}
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background: var(--color-pre-bg)!important
+}
+:not(pre) > code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090!important
+}
+.token.punctuation {
+  color: #f8f8f2!important
+}
+.token.namespace {
+  opacity: .7
+}
+.token.constant,
+.token.deleted,
+.token.symbol,
+.token.tag {
+  color: #5189f4!important
+}
+.token.property {
+  color: #59d7f4!important
+}
+.token.boolean,
+.token.number {
+  color: #5189f4!important
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector {
+  color: #ec586d!important
+}
+.token.attr-value,
+.token.string {
+  color: #ff9267!important
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+  color: #f8f8f2!important
+}
+.token.atrule,
+.token.class-name,
+.token.function {
+  color: #f8f8f2!important
+}
+.token.keyword {
+  color: #5189f4!important
+}
+.token.important,
+.token.regex {
+  color: #5189f4!important
+}
+.XXX_token.bold,
+.XXX_token.important {
+  font-weight: 700
+}
+.token.italic {
+  font-style: italic
+}
+.token.entity {
+  cursor: help
+}
+.hljs-section,
+.hljs-selector-id,
+.hljs-title {
+  color: #f94141!important
+}
+.hljs-comment,
+.hljs-quote {
+  color: #8a8899!important
+}
+:root {
+  --color-bg-primary: #1e2329;
+  --color-bg-secondary: #292e35;
+  --color-text-primary: #8b8b8b;
+  --color-text-light: #424851;
+  --color-icon: #3e4248;
+  --color-text-accent1: #c9c8c8;
+  --color-text-accent2: #ffffff;
+  --color-border: #3b4251;
+  --color-border-light: #343a42;
+  --color-border-xlight: #313a44;
+  --color-badge-bg: #2d333b;
+  --color-input-bg: rgba(0,0,0,.15);
+  --color-bt-light: #2d333b;
+  --color-bt-light-hover: #323841;
+  --color-button-bg: #0c0c0c;
+  --color-button-bg-hover: #000;
+  --color-code: #c6c6c6;
+  --color-code-bg: #191d22;
+  --color-pre-bg: #292d35;
+  --color-pre-scrollbar1: #313137;
+  --color-pre-scrollbar2: #171b20
+}
+* {
+  scrollbar-color: #313137 #171b20
+}
+.home .hero .octicon,
+.home a {
+  color: var(--color-active)
+}
+body:not(.full-width) {
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary)
+}
+a {
+  color: var(--color-text-accent1)
+}
+a:hover {
+  color: var(--color-text-accent2)
+}
+.ui .text.black:hover {
+  color: #fff
+}
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+  color: var(--color-icon)
+}
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+  color: var(--color-text-primary)
+}
+.ui.button:not(.label),
+.ui.header,
+.ui.input input,
+.ui.menu,
+h2,
+h3,
+h4,
+h5 {
+  color: var(--color-text-accent1)
+}
+h1 {
+  color: var(--color-text-accent2)
+}
+.markdown:not(code) h1 .octicon-link,
+.markdown:not(code) h2 .octicon-link,
+.markdown:not(code) h3 .octicon-link,
+.markdown:not(code) h4 .octicon-link,
+.markdown:not(code) h5 .octicon-link,
+.markdown:not(code) h6 .octicon-link {
+  color: var(--color-text-light)
+}
+.ui.card,
+.ui.cards > .card {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  box-shadow: none
+}
+.ui.secondary.pointing.menu {
+  border-color: var(--color-border)
+}
+.ui.secondary.pointing.menu .active.item {
+  border-color: var(--color-active)
+}
+.ui.dropdown .menu > .divider {
+  border-color: var(--color-border)
+}
+.ui.form .field > label {
+  color: var(--color-text-accent1)
+}
+.ui .warning.header {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)
+}
+.settings .hook.list > .item:not(:last-child) {
+  border-color: var(--color-border-light)!important
+}
+.ui.card .content:not(.extra) {
+  color: var(--color-text-accent1);
+  font-weight: 700
+}
+.ui.card .text.black,
+.ui.card > .extra a:not(.ui),
+.ui.cards > .card > .extra a:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.user.list .item .description a {
+  color: var(--color-text-accent1)
+}
+.ui.user.list .item .description a:hover {
+  color: var(--color-text-accent2)
+}
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+  border-color: var(--color-border-xlight)
+}
+.ui .text.black,
+.ui .text.black a,
+.ui.accordion .title:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.label {
+  color: var(--color-text-accent1);
+  background: var(--color-input-bg)
+}
+.ui.labela:hover {
+  color: var(--color-text-accent2)
+}
+.ui.label.basic {
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-border)
+}
+.markdown:not(code) .highlight pre,
+.markdown:not(code) pre {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li.private {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li:not(:last-child) {
+  border-color: var(--color-border-light)
+}
+.dashboard .six.wide.column .menu {
+  border-bottom: 1px solid var(--color-border)
+}
+.ui .info.segment.top {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui[class*="top attached"].segment {
+  border-radius: 7px
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
+  background-color: var(--color-bg-primary)!important;
+  border-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .file-body.file-code .lines-num {
+  background-color: var(--color-bg-primary)!important
+}
+.repository .diff-file-box .code-diff .lines-num,
+.repository .diff-file-box .file-body.file-code .lines-num-old {
+  border-right-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .code-diff tbody tr.add-code td,
+.repository .diff-file-box .code-diff tbody tr.del-code td {
+  background-color: var(--color-bg-secondary)!important;
+  border-color: var(--color-border)!important
+}
+.repository .diff-file-box .code-diff tbody tr .removed-code {
+  background-color: #d72f2f;
+  color: #fff!important
+}
+.repository .diff-file-box .code-diff tbody tr .added-code {
+  background-color: #1fb91f;
+  color: #fff!important
+}
+.ui.grey.label,
+.ui.grey.labels .label {
+  border-color: var(--color-badge-bg)!important
+}
+.ui.menu .item > .label {
+  background-color: var(--color-badge-bg)
+}
+.fitted.item.choose.reference .menu .header .text {
+  padding-bottom: 6px;
+  border-bottom: 2px solid transparent
+}
+.fitted.item.choose.reference .menu .header .text.black {
+  border-color: var(--color-active)
+}
+.ui .text.black {
+  color: #fff
+}
+.ui.selectable.table tbody tr:hover,
+.ui.table tbody tr td.selectable:hover {
+  color: var(--color-text-accent1)
+}
+.ui.blue.button,
+.ui.blue.buttons .button,
+.ui.green.button,
+.ui.green.buttons .button {
+  background-color: var(--color-active-darker)
+}
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
+  background-color: var(--color-active)
+}
+.hljs {
+  color: var(--color-text-primary)!important
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: var(--color-text-accent)!important
+}
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-number,
+.hljs-tag .hljs-attr,
+.hljs-template-variable,
+.hljs-variable {
+  color: #0acccc!important
+}
+.hljs-doctag,
+.hljs-string {
+  color: #fd6d26!important
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary)
+}
+footer {
+  border-top: none;
+  color: var(--color-text-light)!important;
+  background-color: var(--color-bg-primary)
+}
+footer .container .links > * {
+  border-left: 1px solid var(--color-border-xlight)
+}
+.ui.attached.header,
+.ui.segment {
+  background: 0 0;
+  border: none
+}
+.ui.checkbox + label:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-primary)
+}
+.ui.checkbox input:checked ~ .box::after,
+.ui.checkbox input:checked ~ label::after {
+  color: var(--color-text-accent1)
+}
+.ui.checkbox label::before {
+  background: var(--color-input-bg)!important
+}
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label,
+.ui.checkbox .box::after,
+.ui.checkbox label,
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label:hover,
+.ui.checkbox .box::after:hover,
+.ui.checkbox label::after:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-accent2)
+}
+.ui.checkbox input:focus ~ label {
+  color: var(--color-text-accent1)!important
+}
+.ui.checkbox .box::before,
+.ui.checkbox label::before {
+  border-color: var(--color-border)!important
+}
+.ui.form .required.field > .checkbox::after,
+.ui.form .required.field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.fields:not(.grouped) > .field > label::after {
+  color: var(--color-active)
+}
+.ui.form input:not([type]),
+.ui.form input[type=date],
+.ui.form input[type=datetime-local],
+.ui.form input[type=email],
+.ui.form input[type=file],
+.ui.form input[type=number],
+.ui.form input[type=password],
+.ui.form input[type=search],
+.ui.form input[type=tel],
+.ui.form input[type=text],
+.ui.form input[type=time],
+.ui.form input[type=url],
+.ui.form textarea {
+  background-color: var(--color-input-bg);
+  border: 1px solid var(--color-border-light);
+  color: var(--color-text-primary)
+}
+.ui.form input:not([type]):focus,
+.ui.form input[type=date]:focus,
+.ui.form input[type=datetime-local]:focus,
+.ui.form input[type=email]:focus,
+.ui.form input[type=file]:focus,
+.ui.form input[type=number]:focus,
+.ui.form input[type=password]:focus,
+.ui.form input[type=search]:focus,
+.ui.form input[type=tel]:focus,
+.ui.form input[type=text]:focus,
+.ui.form input[type=time]:focus,
+.ui.form input[type=url]:focus,
+.ui.form textarea:focus {
+  background-color: var(--color-input-bg);
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-active)
+}
+.ui.input > input,
+.ui.input > input:focus,
+.ui.input.focus > input {
+  background-color: var(--color-input-bg)
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input,
+.explore.users .ui.action.input:not([class*="left action"]) > input {
+  border-radius: 100em!important;
+  border-right-color: var(--color-border)!important;
+  position: relative;
+  padding-right: 120px;
+  padding-left: 15px;
+  height: 42px;
+  width: 100%!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input.active,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input.active,
+.explore.users .ui.action.input:not([class*="left action"]) > input.active {
+  border-right-color: var(--color-border)!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.users .ui.action.input:not([class*="left action"]) > input + .button {
+  position: absolute;
+  right: 0;
+  height: 42px;
+  border-radius: 100em!important
+}
+.user.signin .ui.form .field:last-child {
+  text-align: center
+}
+.user.signin .ui.form .field:last-child a {
+  color: var(--color-text-primary);
+  font-size: .95rem
+}
+.user.signin .ui.form .field:last-child a:hover {
+  color: var(--color-text-accent2)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  color: var(--color-text-accent1)!important
+}
+.ui.input {
+  color: var(--color-text-primary)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  border-color: var(--color-border)
+}
+.ui.attached.segment {
+  border: none
+}
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.fields > label {
+  color: var(--color-text-accent1)
+}
+body:not(.full-width) {
+  min-width: 100%
+}
+.full.height {
+  margin-bottom: -60px;
+  min-height: calc(100% - 60px)
+}
+.admin,
+.dashboard,
+.explore,
+.organization,
+.repository,
+.user:not(.context):not(.list) {
+  padding-top: 80px
+}
+.home {
+  padding-top: 20px
+}
+.home .stackable {
+  padding-top: 40px
+}
+.home .logo img {
+  max-width: 100%
+}
+footer {
+  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 10px
+}
+footer .container .links > a[target="_blank"] {
+  display: none
+}
+footer > .ui.container {
+  border-top: 1px solid var(--color-border-xlight)
+}
+footer > .ui.container .ui.left::after {
+  display: inline-flex;
+  content: " - Custom Theme by @Kristuff"
+}
+@media only screen and (max-width:767px) {
+  footer > .ui.container {
+    text-align: center!important
+  }
+  footer > .ui.container .ui.left,
+  footer > .ui.container .ui.right {
+    float: initial
+  }
+}
+@media only screen and (max-width:1023px) {
+  footer > .ui.container {
+    width: calc(100% - 24px);
+    margin: 0 auto
+  }
+}
+.ui.card > .image:not(.ui) > img,
+.ui.cards > .card > .image:not(.ui) > img {
+  border-radius: 50%;
+  margin: 12px;
+  width: calc(100% - 24px)
+}
+.user.profile .ui.card .profile-avatar {
+  height: initial;
+  background: 0 0
+}
+@media only screen and (max-width:767px) {
+  .markdown:not(code).file-view {
+    padding: 1em 1em 1em!important
+  }
+  .repository #git-stats + .ui.menu {
+    flex-wrap: wrap
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item {
+    margin-top: 12px;
+    width: 100%
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item #clone-panel {
+    width: 100%;
+    margin: 0
+  }
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 10px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 94px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 94px;
+    top: 50px;
+    right: 12px
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 90px
+  }
+}
+@media only screen and (min-width:768px) and (max-width:1023px) {
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 18px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 204px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 204px;
+    top: 50px;
+    right: 0
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 192px;
+    height: initial
+  }
+}
+@media (max-width:1023px) {
+  .ui.menu {
+    border-radius: 0
+  }
+  .ui.vertical.menu {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto
+  }
+  .ui.vertical.menu .header {
+    display: none
+  }
+  .ui.vertical.menu .item {
+    border: none;
+    border-bottom: 3px solid transparent
+  }
+  .ui.vertical.menu .item:hover {
+    border-bottom-color: var(--color-border-xlight)
+  }
+  .ui.vertical.menu .item.active {
+    border-bottom-color: var(--color-active)
+  }
+  .ui.container:not(.fluid) {
+    width: 100%!important
+  }
+  .ui.column.grid > [class*="eleven wide"].column,
+  .ui.column.grid > [class*="five wide"].column,
+  .ui.column.grid > [class*="four wide"].column,
+  .ui.column.grid > [class*="twelve wide"].column,
+  .ui.grid > .column.row > [class*="eleven wide"].column,
+  .ui.grid > .column.row > [class*="five wide"].column,
+  .ui.grid > .column.row > [class*="four wide"].column,
+  .ui.grid > .column.row > [class*="twelve wide"].column,
+  .ui.grid > .row > [class*="eleven wide"].column,
+  .ui.grid > .row > [class*="five wide"].column,
+  .ui.grid > .row > [class*="four wide"].column,
+  .ui.grid > .row > [class*="twelve wide"].column,
+  .ui.grid > [class*="eleven wide"].column,
+  .ui.grid > [class*="five wide"].column,
+  .ui.grid > [class*="four wide"].column,
+  .ui.grid > [class*="twelve wide"].column {
+    width: 100%!important
+  }
+}
+@media (max-width:767px) {
+  .dashboard.feeds .ui.grid {
+    flex-direction: column-reverse
+  }
+  .dashboard.feeds .ui.grid > [class*="six wide"].column,
+  .dashboard.feeds .ui.grid > [class*="ten wide"].column {
+    width: 100%!important
+  }
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  width: 100%!important;
+  max-width: 380px;
+  border-radius: 7px
+}
+.user.activate form .header,
+.user.forgot.password form .header,
+.user.reset.password form .header,
+.user.signin form .header,
+.user.signup form .header {
+  padding: 15px!important;
+  margin: 0;
+  background: 0 0
+}
+.user.activate form .inline.field > label,
+.user.forgot.password form .inline.field > label,
+.user.reset.password form .inline.field > label,
+.user.signin form .inline.field > label,
+.user.signup form .inline.field > label {
+  display: block;
+  text-align: left;
+  margin-bottom: 6px!important
+}
+.user.activate form input,
+.user.activate form textarea,
+.user.forgot.password form input,
+.user.forgot.password form textarea,
+.user.reset.password form input,
+.user.reset.password form textarea,
+.user.signin form input,
+.user.signin form textarea,
+.user.signup form input,
+.user.signup form textarea {
+  width: 100%!important
+}
+.user.signin .ui.form .ui.button {
+  margin-bottom: 12px;
+  width: 100%;
+  border-radius: 100em;
+  height: 45px
+}
+.following.bar.light {
+  background-color: var(--color-bg-secondary)!important;
+  border-bottom: 1px solid var(--color-bg-secondary);
+  color: var(--color-text-accent1)!important;
+  position: fixed;
+  top: 0
+}
+@media (max-width:767px) {
+  .following.bar .top.menu {
+    display: flex;
+    overflow-x: auto
+  }
+}
+.following.bar .top.menu .octicon {
+  color: var(--color-text-accent1)
+}
+.following.bar .top.menu a.item.brand {
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand) {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand)[target="_blank"] {
+  display: none
+}
+.following.bar .top.menu .dropdown.item.active,
+.following.bar .top.menu .dropdown.item:hover,
+.following.bar .top.menu a.item:not(.brand):hover {
+  background: rgba(0,0,0,.2)!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand).active,
+.ui.secondary.menu .item:not(.brand).active:hover,
+.ui.secondary.menu .item:not(.brand):hover {
+  border-radius: 5px;
+  background: 0 0!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand) {
+  margin: 0
+}
+.following.bar .head.link.item {
+  color: var(--color-text-accent1)!important
+}
+.ui.vertical.menu {
+  background: 0 0
+}
+.ui.secondary.menu .item,
+.ui.vertical.menu .item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  border-radius: 0
+}
+.ui.secondary.menu .item.active,
+.ui.vertical.menu .item.active {
+  background: 0 0;
+  font-weight: 600;
+  color: var(--color-text-accent1)
+}
+.ui.secondary.menu .item:hover,
+.ui.vertical.menu .item:hover {
+  background: 0 0;
+  color: var(--color-text-accent2)
+}
+@media (min-width:1024px) {
+  .ui.vertical.menu {
+    border: 1px solid var(--color-border)
+  }
+  .ui.vertical.menu .active.item {
+    border-left: 3px solid var(--color-active);
+    background: var(--color-bg-secondary)
+  }
+}
+.ui.vertical.menu .header.item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  text-align: center;
+  padding-left: 0
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  border: 1px solid var(--color-border)
+}
+.ui.dropdown .menu,
+.ui.menu .dropdown.item .menu,
+.ui.menu .ui.dropdown .menu > .item:hover {
+  background: var(--color-bg-secondary)!important
+}
+.ui.dropdown .menu .selected.item,
+.ui.dropdown .menu > .header,
+.ui.dropdown .menu > .item,
+.ui.dropdown.selected {
+  color: var(--color-text-accent1)!important
+}
+.ui.dropdown .menu > .item:hover,
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu .ui.dropdown .menu > .active.item,
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item,
+.ui.menu a.item:hover {
+  color: var(--color-text-accent2)!important
+}
+.ui.menu {
+  background: 0 0!important;
+  color: var(--color-text-primary)!important
+}
+.ui.menu .item.active,
+.ui.menu .ui.menu .item.active:hover {
+  font-weight: 700
+}
+.ui.menu .ui.dropdown .menu > .item {
+  color: var(--color-text-primary)!important;
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu .item {
+  border-bottom: 3px solid transparent;
+  color: var(--color-text-accent1)
+}
+.ui.menu .item.active,
+.ui.menu .item.active:hover,
+.ui.menu .item:hover {
+  color: var(--color-text-accent2)
+}
+.ui.menu:not(.vertical) .item.active {
+  border-bottom-color: var(--color-active)
+}
+.ui.fluid.basic.button.center.ajax-load-button {
+  border-radius: 100em
+}
+.ui.fluid.basic.button.center.ajax-load-button:hover {
+  background-color: var(--color-bt-light-hover);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.input > input {
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border)
+}
+#clone-panel .ui.input > input .ui.input > input:focus,
+#clone-panel .ui.input > input .ui.input.focus > input {
+  background: var(--color-input-bg);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.basic.button:first-child {
+  border: none
+}
+#clone-panel .ui.basic.button:last-child {
+  border-left: none
+}
+.ui.buttons > .ui.dropdown:last-child .menu,
+.ui.menu .right.dropdown.item .menu,
+.ui.menu .right.menu .dropdown:last-child .menu {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu > .item:first-child,
+.user.profile .ui.secondary.menu .item:not(.brand).active {
+  border-radius: 0
+}
+.ui.button {
+  background-color: var(--color-button-bg)
+}
+.ui.button:hover {
+  background-color: var(--color-button-bg-hover)
+}
+.ui.selection.dropdown {
+  color: var(--color-text-primary);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-border)
+}
+.ui.selection.dropdown.active {
+  border-color: var(--color-active)
+}
+.repository .header-wrapper {
+  color: var(--color-text-accent1)!important;
+  background-color: transparent;
+  padding-top: 10px
+}
+.repository .head .mega-octicon {
+  width: 24px;
+  font-size: 24px;
+  color: var(--color-icon)
+}
+.ui.breadcrumb .divider {
+  color: var(--color-text-light);
+  margin: 0
+}
+.repository .head .fork-flag {
+  margin-left: 34px;
+  margin-top: 6px;
+  color: var(--color-text-light)
+}
+.ui.repository.list .item:not(:first-child) {
+  border-top: 1px solid var(--color-border-light)
+}
+.repository #clone-panel input {
+  border-bottom: 1px solid var(--color-border-light);
+  border-top: 1px solid var(--color-border-light);
+  border-right: none
+}
+#clone-panel .ui.action.input:not([class*="left action"]) > input:focus {
+  border-left-color: transparent!important;
+  border-right-color: transparent!important
+}
+.repository.file.list #repo-desc {
+  padding: 12px 0
+}
+.repository #git-stats {
+  border: 1px solid var(--color-border-light);
+  background: var(--color-bg-primary)
+}
+.repository #git-stats .ui .text.black {
+  color: var(--color-text-primary)
+}
+.repository #git-stats .ui .text.black:hover {
+  color: var(--color-text-accent2)
+}
+.repository #file-content {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  margin-top: 24px
+}
+.repository .ui.top.attached.header {
+  border-bottom: 1px solid var(--color-border);
+  border-radius: 0
+}
+.repository #repo-files-table tr:hover {
+  background-color: var(--color-bg-secondary)!important
+}
+.repository .ui.header .ui.right {
+  display: flex;
+  align-items: center
+}
+@media only screen and (max-width:767px) {
+  .repository .ui.header .ui.right {
+    margin-top: 18px;
+    float: initial
+  }
+}
+.repository .ui.header .ui.right .ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) {
+  border: 1px solid var(--color-border)!important;
+  background: var(--color-bt-light)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button {
+  height: 32px;
+  border: none!important;
+  line-height: 32px;
+  padding: 0 6px 0 12px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button:hover {
+  background: var(--color-bt-light-hover)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .label {
+  background: rgba(0,0,0,.2);
+  border-radius: 100em;
+  padding: 3px 6px;
+  border: none!important;
+  margin-right: 6px!important
+}
+.repository .ui.secondary.menu {
+  margin: 0
+}
+.markdown:not(code) h1 {
+  border-bottom: 1px solid var(--color-border)
+}
+.markdown:not(code) h2 {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.markdown:not(code) blockquote {
+  border-left: 4px solid var(--color-text-accent1)
+}
+.mega-octicon,
+.octicon {
+  color: var(--color-text-light)
+}
+.ui.secondary.menu .ui.breadcrumb:first-child {
+  margin-left: 12px
+}
+.ui.table {
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: 0 0
+}
+.ui.table thead th {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border)
+}
+.ui.table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.avatar > img,
+.ui img.avatar.image {
+  border-radius: 50%
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  color: var(--color-text-primary)!important
+}
+.ui.basic.button i,
+.ui.basic.buttons .button i {
+  color: var(--color-text-light)!important
+}
+.repository .ui.tabs.container .ui.menu {
+  border-bottom: 1px solid var(--color-border)!important
+}
+.ui.tabular.menu .item {
+  color: var(--color-text-primary)
+}
+.ui.tabular.menu .item i {
+  color: var(--color-text-light)
+}
+.ui.tabular.menu .item::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 3px;
+  border-radius: 100em;
+  background: 0 0;
+  position: absolute;
+  bottom: 0;
+  margin: 0 -1.42857143em
+}
+.ui.tabular.menu .active.item {
+  border: none;
+  background: 0 0;
+  color: var(--color-text-accent1)
+}
+.ui.tabular.menu .active.item::after {
+  background: var(--color-active)
+}
+.menu + #file-content {
+  margin-top: 24px
+}
+.ui.right.file-actions .ui.button {
+  background-color: var(--color-bt-light);
+  color: var(--color-text-accent1)
+}
+.ui.right.file-actions .ui.button:hover {
+  color: var(--color-text-accent2);
+  background-color: var(--color-bt-light-hover)
+}
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-accent1)
+}
+.ui.basic.button:focus,
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.buttons .button:hover {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)!important
+}
+.ui.basic.button:focus i,
+.ui.basic.button:hover i,
+.ui.basic.buttons .button:focus i,
+.ui.basic.buttons .button:hover i {
+  color: var(--color-text-accent1)!important
+}

dist/kristuff.gogs.dark.css

@@ -0,0 +1,1136 @@
+/*!
+ *   ____
+ *  / ___| ___   __ _ ___    _   _
+ * | |  _ / _ \ / _` / __|  | |_| |_  ___ _ __  ___ ___
+ * | |_| | (_) | (_| \__ \  |  _| ' \/ -_) '  \/ -_|_-<
+ *  \____|\___/ \__, |___/   \__|_||_\___|_|_|_\___/__/
+ *              |___/
+ *
+ * This file is part of kristuff/gogs-themes 
+ * Copyright (c) 2022 Christophe Buliard  
+ */
+:root {
+  --color-active: #d9453d;
+  --color-active-darker: #cf3d35
+}
+.bg-code,
+.repository.file.list #file-content .code-view .lines-code .hljs,
+.repository.file.list #file-content .code-view .lines-code ol,
+.repository.file.list #file-content .code-view .lines-code pre,
+.repository.file.list #file-content .code-view .lines-num .hljs,
+.repository.file.list #file-content .code-view .lines-num ol,
+.repository.file.list #file-content .code-view .lines-num pre {
+  color: #f8f8f2!important;
+  background-color: var(--color-pre-bg)!important
+}
+.repository.file.list #file-content .code-view .lines-num {
+  color: #595959!important;
+  background-color: var(--color-pre-bg)!important
+}
+code[class*=language-],
+pre[class*=language-] {
+  color: #f8f8f2;
+  background: 0 0;
+  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  scrollbar-color: var(--color-pre-scrollbar1) var(--color-pre-scrollbar2)
+}
+pre[class*=language-] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: .3em!important
+}
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background: var(--color-pre-bg)!important
+}
+:not(pre) > code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090!important
+}
+.token.punctuation {
+  color: #f8f8f2!important
+}
+.token.namespace {
+  opacity: .7
+}
+.token.constant,
+.token.deleted,
+.token.symbol,
+.token.tag {
+  color: #5189f4!important
+}
+.token.property {
+  color: #59d7f4!important
+}
+.token.boolean,
+.token.number {
+  color: #5189f4!important
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector {
+  color: #ec586d!important
+}
+.token.attr-value,
+.token.string {
+  color: #ff9267!important
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+  color: #f8f8f2!important
+}
+.token.atrule,
+.token.class-name,
+.token.function {
+  color: #f8f8f2!important
+}
+.token.keyword {
+  color: #5189f4!important
+}
+.token.important,
+.token.regex {
+  color: #5189f4!important
+}
+.XXX_token.bold,
+.XXX_token.important {
+  font-weight: 700
+}
+.token.italic {
+  font-style: italic
+}
+.token.entity {
+  cursor: help
+}
+.hljs-section,
+.hljs-selector-id,
+.hljs-title {
+  color: #f94141!important
+}
+.hljs-comment,
+.hljs-quote {
+  color: #8a8899!important
+}
+:root {
+  --color-bg-primary: #1e2329;
+  --color-bg-secondary: #292e35;
+  --color-text-primary: #8b8b8b;
+  --color-text-light: #424851;
+  --color-icon: #3e4248;
+  --color-text-accent1: #c9c8c8;
+  --color-text-accent2: #ffffff;
+  --color-border: #3b4251;
+  --color-border-light: #343a42;
+  --color-border-xlight: #313a44;
+  --color-badge-bg: #2d333b;
+  --color-input-bg: rgba(0,0,0,.15);
+  --color-bt-light: #2d333b;
+  --color-bt-light-hover: #323841;
+  --color-button-bg: #0c0c0c;
+  --color-button-bg-hover: #000;
+  --color-code: #c6c6c6;
+  --color-code-bg: #191d22;
+  --color-pre-bg: #292d35;
+  --color-pre-scrollbar1: #313137;
+  --color-pre-scrollbar2: #171b20
+}
+* {
+  scrollbar-color: #313137 #171b20
+}
+.home .hero .octicon,
+.home a {
+  color: var(--color-active)
+}
+body:not(.full-width) {
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary)
+}
+a {
+  color: var(--color-text-accent1)
+}
+a:hover {
+  color: var(--color-text-accent2)
+}
+.ui .text.black:hover {
+  color: #fff
+}
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+  color: var(--color-icon)
+}
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+  color: var(--color-text-primary)
+}
+.ui.button:not(.label),
+.ui.header,
+.ui.input input,
+.ui.menu,
+h2,
+h3,
+h4,
+h5 {
+  color: var(--color-text-accent1)
+}
+h1 {
+  color: var(--color-text-accent2)
+}
+.markdown:not(code) h1 .octicon-link,
+.markdown:not(code) h2 .octicon-link,
+.markdown:not(code) h3 .octicon-link,
+.markdown:not(code) h4 .octicon-link,
+.markdown:not(code) h5 .octicon-link,
+.markdown:not(code) h6 .octicon-link {
+  color: var(--color-text-light)
+}
+.ui.card,
+.ui.cards > .card {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  box-shadow: none
+}
+.ui.secondary.pointing.menu {
+  border-color: var(--color-border)
+}
+.ui.secondary.pointing.menu .active.item {
+  border-color: var(--color-active)
+}
+.ui.dropdown .menu > .divider {
+  border-color: var(--color-border)
+}
+.ui.form .field > label {
+  color: var(--color-text-accent1)
+}
+.ui .warning.header {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)
+}
+.settings .hook.list > .item:not(:last-child) {
+  border-color: var(--color-border-light)!important
+}
+.ui.card .content:not(.extra) {
+  color: var(--color-text-accent1);
+  font-weight: 700
+}
+.ui.card .text.black,
+.ui.card > .extra a:not(.ui),
+.ui.cards > .card > .extra a:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.user.list .item .description a {
+  color: var(--color-text-accent1)
+}
+.ui.user.list .item .description a:hover {
+  color: var(--color-text-accent2)
+}
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+  border-color: var(--color-border-xlight)
+}
+.ui .text.black,
+.ui .text.black a,
+.ui.accordion .title:not(.ui) {
+  color: var(--color-text-primary)
+}
+.ui.label {
+  color: var(--color-text-accent1);
+  background: var(--color-input-bg)
+}
+.ui.labela:hover {
+  color: var(--color-text-accent2)
+}
+.ui.label.basic {
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-border)
+}
+.markdown:not(code) .highlight pre,
+.markdown:not(code) pre {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li.private {
+  background-color: var(--color-bg-secondary)
+}
+.feeds .list ul li:not(:last-child) {
+  border-color: var(--color-border-light)
+}
+.dashboard .six.wide.column .menu {
+  border-bottom: 1px solid var(--color-border)
+}
+.ui .info.segment.top {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui[class*="top attached"].segment {
+  border-radius: 7px
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
+  background-color: var(--color-bg-primary)!important;
+  border-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .file-body.file-code .lines-num {
+  background-color: var(--color-bg-primary)!important
+}
+.repository .diff-file-box .code-diff .lines-num,
+.repository .diff-file-box .file-body.file-code .lines-num-old {
+  border-right-color: var(--color-border-light)!important
+}
+.repository .diff-file-box .code-diff tbody tr.add-code td,
+.repository .diff-file-box .code-diff tbody tr.del-code td {
+  background-color: var(--color-bg-secondary)!important;
+  border-color: var(--color-border)!important
+}
+.repository .diff-file-box .code-diff tbody tr .removed-code {
+  background-color: #d72f2f;
+  color: #fff!important
+}
+.repository .diff-file-box .code-diff tbody tr .added-code {
+  background-color: #1fb91f;
+  color: #fff!important
+}
+.ui.grey.label,
+.ui.grey.labels .label {
+  border-color: var(--color-badge-bg)!important
+}
+.ui.menu .item > .label {
+  background-color: var(--color-badge-bg)
+}
+.fitted.item.choose.reference .menu .header .text {
+  padding-bottom: 6px;
+  border-bottom: 2px solid transparent
+}
+.fitted.item.choose.reference .menu .header .text.black {
+  border-color: var(--color-active)
+}
+.ui .text.black {
+  color: #fff
+}
+.ui.selectable.table tbody tr:hover,
+.ui.table tbody tr td.selectable:hover {
+  color: var(--color-text-accent1)
+}
+.ui.blue.button,
+.ui.blue.buttons .button,
+.ui.green.button,
+.ui.green.buttons .button {
+  background-color: var(--color-active-darker)
+}
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover,
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
+  background-color: var(--color-active)
+}
+.hljs {
+  color: var(--color-text-primary)!important
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: var(--color-text-accent)!important
+}
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-number,
+.hljs-tag .hljs-attr,
+.hljs-template-variable,
+.hljs-variable {
+  color: #0acccc!important
+}
+.hljs-doctag,
+.hljs-string {
+  color: #fd6d26!important
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary)
+}
+footer {
+  border-top: none;
+  color: var(--color-text-light)!important;
+  background-color: var(--color-bg-primary)
+}
+footer .container .links > * {
+  border-left: 1px solid var(--color-border-xlight)
+}
+.ui.attached.header,
+.ui.segment {
+  background: 0 0;
+  border: none
+}
+.ui.checkbox + label:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-primary)
+}
+.ui.checkbox input:checked ~ .box::after,
+.ui.checkbox input:checked ~ label::after {
+  color: var(--color-text-accent1)
+}
+.ui.checkbox label::before {
+  background: var(--color-input-bg)!important
+}
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label,
+.ui.checkbox .box::after,
+.ui.checkbox label,
+.ui.checkbox label::after {
+  color: var(--color-text-primary)
+}
+.ui.checkbox + label:hover,
+.ui.checkbox .box::after:hover,
+.ui.checkbox label::after:hover,
+.ui.checkbox label:hover {
+  color: var(--color-text-accent2)
+}
+.ui.checkbox input:focus ~ label {
+  color: var(--color-text-accent1)!important
+}
+.ui.checkbox .box::before,
+.ui.checkbox label::before {
+  border-color: var(--color-border)!important
+}
+.ui.form .required.field > .checkbox::after,
+.ui.form .required.field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.fields:not(.grouped) > .field > label::after {
+  color: var(--color-active)
+}
+.ui.form input:not([type]),
+.ui.form input[type=date],
+.ui.form input[type=datetime-local],
+.ui.form input[type=email],
+.ui.form input[type=file],
+.ui.form input[type=number],
+.ui.form input[type=password],
+.ui.form input[type=search],
+.ui.form input[type=tel],
+.ui.form input[type=text],
+.ui.form input[type=time],
+.ui.form input[type=url],
+.ui.form textarea {
+  background-color: var(--color-input-bg);
+  border: 1px solid var(--color-border-light);
+  color: var(--color-text-primary)
+}
+.ui.form input:not([type]):focus,
+.ui.form input[type=date]:focus,
+.ui.form input[type=datetime-local]:focus,
+.ui.form input[type=email]:focus,
+.ui.form input[type=file]:focus,
+.ui.form input[type=number]:focus,
+.ui.form input[type=password]:focus,
+.ui.form input[type=search]:focus,
+.ui.form input[type=tel]:focus,
+.ui.form input[type=text]:focus,
+.ui.form input[type=time]:focus,
+.ui.form input[type=url]:focus,
+.ui.form textarea:focus {
+  background-color: var(--color-input-bg);
+  color: var(--color-text-accent1);
+  border: 1px solid var(--color-active)
+}
+.ui.input > input,
+.ui.input > input:focus,
+.ui.input.focus > input {
+  background-color: var(--color-input-bg)
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input,
+.explore.users .ui.action.input:not([class*="left action"]) > input {
+  border-radius: 100em!important;
+  border-right-color: var(--color-border)!important;
+  position: relative;
+  padding-right: 120px;
+  padding-left: 15px;
+  height: 42px;
+  width: 100%!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input.active,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input.active,
+.explore.users .ui.action.input:not([class*="left action"]) > input.active {
+  border-right-color: var(--color-border)!important;
+  border-radius: 100em
+}
+.admin.user .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input + .button,
+.explore.users .ui.action.input:not([class*="left action"]) > input + .button {
+  position: absolute;
+  right: 0;
+  height: 42px;
+  border-radius: 100em!important
+}
+.user.signin .ui.form .field:last-child {
+  text-align: center
+}
+.user.signin .ui.form .field:last-child a {
+  color: var(--color-text-primary);
+  font-size: .95rem
+}
+.user.signin .ui.form .field:last-child a:hover {
+  color: var(--color-text-accent2)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  color: var(--color-text-accent1)!important
+}
+.ui.input {
+  color: var(--color-text-primary)
+}
+.ui.input > input:focus,
+.ui.input.focus > input {
+  border-color: var(--color-border)
+}
+.ui.attached.segment {
+  border: none
+}
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.fields > label {
+  color: var(--color-text-accent1)
+}
+body:not(.full-width) {
+  min-width: 100%
+}
+.full.height {
+  margin-bottom: -60px;
+  min-height: calc(100% - 60px)
+}
+.admin,
+.dashboard,
+.explore,
+.organization,
+.repository,
+.user:not(.context):not(.list) {
+  padding-top: 80px
+}
+.home {
+  padding-top: 20px
+}
+.home .stackable {
+  padding-top: 40px
+}
+.home .logo img {
+  max-width: 100%
+}
+footer {
+  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 10px
+}
+footer .container .links > a[target="_blank"] {
+  display: none
+}
+footer > .ui.container {
+  border-top: 1px solid var(--color-border-xlight)
+}
+footer > .ui.container .ui.left::after {
+  display: inline-flex;
+  content: " - Custom Theme by @Kristuff"
+}
+@media only screen and (max-width:767px) {
+  footer > .ui.container {
+    text-align: center!important
+  }
+  footer > .ui.container .ui.left,
+  footer > .ui.container .ui.right {
+    float: initial
+  }
+}
+@media only screen and (max-width:1023px) {
+  footer > .ui.container {
+    width: calc(100% - 24px);
+    margin: 0 auto
+  }
+}
+.ui.card > .image:not(.ui) > img,
+.ui.cards > .card > .image:not(.ui) > img {
+  border-radius: 50%;
+  margin: 12px;
+  width: calc(100% - 24px)
+}
+.user.profile .ui.card .profile-avatar {
+  height: initial;
+  background: 0 0
+}
+@media only screen and (max-width:767px) {
+  .markdown:not(code).file-view {
+    padding: 1em 1em 1em!important
+  }
+  .repository #git-stats + .ui.menu {
+    flex-wrap: wrap
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item {
+    margin-top: 12px;
+    width: 100%
+  }
+  .repository #git-stats + .ui.menu .right.fitted.item #clone-panel {
+    width: 100%;
+    margin: 0
+  }
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 10px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 94px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 94px;
+    top: 50px;
+    right: 12px
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 90px
+  }
+}
+@media only screen and (min-width:768px) and (max-width:1023px) {
+  .ui.container {
+    width: auto!important;
+    margin-left: 0!important;
+    margin-right: 0!important;
+    padding: 0 18px
+  }
+  .ui.card,
+  .ui.cards > .card {
+    width: 100%;
+    height: 192px
+  }
+  .ui.card .content,
+  .ui.cards > .card .content {
+    position: absolute;
+    left: 204px;
+    right: 0
+  }
+  .ui.card .content .center,
+  .ui.cards > .card .content .center {
+    text-align: left
+  }
+  .ui.card .extra.content,
+  .ui.cards > .card .extra.content {
+    position: absolute;
+    left: 204px;
+    top: 50px;
+    right: 0
+  }
+  .user.profile .ui.card .profile-avatar {
+    width: 192px;
+    height: initial
+  }
+}
+@media (max-width:1023px) {
+  .ui.menu {
+    border-radius: 0
+  }
+  .ui.vertical.menu {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto
+  }
+  .ui.vertical.menu .header {
+    display: none
+  }
+  .ui.vertical.menu .item {
+    border: none;
+    border-bottom: 3px solid transparent
+  }
+  .ui.vertical.menu .item:hover {
+    border-bottom-color: var(--color-border-xlight)
+  }
+  .ui.vertical.menu .item.active {
+    border-bottom-color: var(--color-active)
+  }
+  .ui.container:not(.fluid) {
+    width: 100%!important
+  }
+  .ui.column.grid > [class*="eleven wide"].column,
+  .ui.column.grid > [class*="five wide"].column,
+  .ui.column.grid > [class*="four wide"].column,
+  .ui.column.grid > [class*="twelve wide"].column,
+  .ui.grid > .column.row > [class*="eleven wide"].column,
+  .ui.grid > .column.row > [class*="five wide"].column,
+  .ui.grid > .column.row > [class*="four wide"].column,
+  .ui.grid > .column.row > [class*="twelve wide"].column,
+  .ui.grid > .row > [class*="eleven wide"].column,
+  .ui.grid > .row > [class*="five wide"].column,
+  .ui.grid > .row > [class*="four wide"].column,
+  .ui.grid > .row > [class*="twelve wide"].column,
+  .ui.grid > [class*="eleven wide"].column,
+  .ui.grid > [class*="five wide"].column,
+  .ui.grid > [class*="four wide"].column,
+  .ui.grid > [class*="twelve wide"].column {
+    width: 100%!important
+  }
+}
+@media (max-width:767px) {
+  .dashboard.feeds .ui.grid {
+    flex-direction: column-reverse
+  }
+  .dashboard.feeds .ui.grid > [class*="six wide"].column,
+  .dashboard.feeds .ui.grid > [class*="ten wide"].column {
+    width: 100%!important
+  }
+}
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.signin form,
+.user.signup form {
+  width: 100%!important;
+  max-width: 380px;
+  border-radius: 7px
+}
+.user.activate form .header,
+.user.forgot.password form .header,
+.user.reset.password form .header,
+.user.signin form .header,
+.user.signup form .header {
+  padding: 15px!important;
+  margin: 0;
+  background: 0 0
+}
+.user.activate form .inline.field > label,
+.user.forgot.password form .inline.field > label,
+.user.reset.password form .inline.field > label,
+.user.signin form .inline.field > label,
+.user.signup form .inline.field > label {
+  display: block;
+  text-align: left;
+  margin-bottom: 6px!important
+}
+.user.activate form input,
+.user.activate form textarea,
+.user.forgot.password form input,
+.user.forgot.password form textarea,
+.user.reset.password form input,
+.user.reset.password form textarea,
+.user.signin form input,
+.user.signin form textarea,
+.user.signup form input,
+.user.signup form textarea {
+  width: 100%!important
+}
+.user.signin .ui.form .ui.button {
+  margin-bottom: 12px;
+  width: 100%;
+  border-radius: 100em;
+  height: 45px
+}
+.following.bar.light {
+  background-color: var(--color-bg-secondary)!important;
+  border-bottom: 1px solid var(--color-bg-secondary);
+  color: var(--color-text-accent1)!important;
+  position: fixed;
+  top: 0
+}
+@media (max-width:767px) {
+  .following.bar .top.menu {
+    display: flex;
+    overflow-x: auto
+  }
+}
+.following.bar .top.menu .octicon {
+  color: var(--color-text-accent1)
+}
+.following.bar .top.menu a.item.brand {
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand) {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: var(--color-text-accent1)!important
+}
+.following.bar .top.menu > a.item:not(.brand)[target="_blank"] {
+  display: none
+}
+.following.bar .top.menu .dropdown.item.active,
+.following.bar .top.menu .dropdown.item:hover,
+.following.bar .top.menu a.item:not(.brand):hover {
+  background: rgba(0,0,0,.2)!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand).active,
+.ui.secondary.menu .item:not(.brand).active:hover,
+.ui.secondary.menu .item:not(.brand):hover {
+  border-radius: 5px;
+  background: 0 0!important;
+  color: var(--color-text-accent2)!important
+}
+.ui.secondary.menu .item:not(.brand) {
+  margin: 0
+}
+.following.bar .head.link.item {
+  color: var(--color-text-accent1)!important
+}
+.ui.vertical.menu {
+  background: 0 0
+}
+.ui.secondary.menu .item,
+.ui.vertical.menu .item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  border-radius: 0
+}
+.ui.secondary.menu .item.active,
+.ui.vertical.menu .item.active {
+  background: 0 0;
+  font-weight: 600;
+  color: var(--color-text-accent1)
+}
+.ui.secondary.menu .item:hover,
+.ui.vertical.menu .item:hover {
+  background: 0 0;
+  color: var(--color-text-accent2)
+}
+@media (min-width:1024px) {
+  .ui.vertical.menu {
+    border: 1px solid var(--color-border)
+  }
+  .ui.vertical.menu .active.item {
+    border-left: 3px solid var(--color-active);
+    background: var(--color-bg-secondary)
+  }
+}
+.ui.vertical.menu .header.item {
+  background: 0 0;
+  color: var(--color-text-accent1);
+  text-align: center;
+  padding-left: 0
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  border: 1px solid var(--color-border)
+}
+.ui.dropdown .menu,
+.ui.menu .dropdown.item .menu,
+.ui.menu .ui.dropdown .menu > .item:hover {
+  background: var(--color-bg-secondary)!important
+}
+.ui.dropdown .menu .selected.item,
+.ui.dropdown .menu > .header,
+.ui.dropdown .menu > .item,
+.ui.dropdown.selected {
+  color: var(--color-text-accent1)!important
+}
+.ui.dropdown .menu > .item:hover,
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu .ui.dropdown .menu > .active.item,
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item,
+.ui.menu a.item:hover {
+  color: var(--color-text-accent2)!important
+}
+.ui.menu {
+  background: 0 0!important;
+  color: var(--color-text-primary)!important
+}
+.ui.menu .item.active,
+.ui.menu .ui.menu .item.active:hover {
+  font-weight: 700
+}
+.ui.menu .ui.dropdown .menu > .item {
+  color: var(--color-text-primary)!important;
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu .item {
+  border-bottom: 3px solid transparent;
+  color: var(--color-text-accent1)
+}
+.ui.menu .item.active,
+.ui.menu .item.active:hover,
+.ui.menu .item:hover {
+  color: var(--color-text-accent2)
+}
+.ui.menu:not(.vertical) .item.active {
+  border-bottom-color: var(--color-active)
+}
+.ui.fluid.basic.button.center.ajax-load-button {
+  border-radius: 100em
+}
+.ui.fluid.basic.button.center.ajax-load-button:hover {
+  background-color: var(--color-bt-light-hover);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.input > input {
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border)
+}
+#clone-panel .ui.input > input .ui.input > input:focus,
+#clone-panel .ui.input > input .ui.input.focus > input {
+  background: var(--color-input-bg);
+  color: var(--color-text-accent1)
+}
+#clone-panel .ui.basic.button:first-child {
+  border: none
+}
+#clone-panel .ui.basic.button:last-child {
+  border-left: none
+}
+.ui.buttons > .ui.dropdown:last-child .menu,
+.ui.menu .right.dropdown.item .menu,
+.ui.menu .right.menu .dropdown:last-child .menu {
+  background-color: var(--color-bg-secondary)!important
+}
+.ui.menu > .item:first-child,
+.user.profile .ui.secondary.menu .item:not(.brand).active {
+  border-radius: 0
+}
+.ui.button {
+  background-color: var(--color-button-bg)
+}
+.ui.button:hover {
+  background-color: var(--color-button-bg-hover)
+}
+.ui.selection.dropdown {
+  color: var(--color-text-primary);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-border)
+}
+.ui.selection.dropdown.active {
+  border-color: var(--color-active)
+}
+.repository .header-wrapper {
+  color: var(--color-text-accent1)!important;
+  background-color: transparent;
+  padding-top: 10px
+}
+.repository .head .mega-octicon {
+  width: 24px;
+  font-size: 24px;
+  color: var(--color-icon)
+}
+.ui.breadcrumb .divider {
+  color: var(--color-text-light);
+  margin: 0
+}
+.repository .head .fork-flag {
+  margin-left: 34px;
+  margin-top: 6px;
+  color: var(--color-text-light)
+}
+.ui.repository.list .item:not(:first-child) {
+  border-top: 1px solid var(--color-border-light)
+}
+.repository #clone-panel input {
+  border-bottom: 1px solid var(--color-border-light);
+  border-top: 1px solid var(--color-border-light);
+  border-right: none
+}
+#clone-panel .ui.action.input:not([class*="left action"]) > input:focus {
+  border-left-color: transparent!important;
+  border-right-color: transparent!important
+}
+.repository.file.list #repo-desc {
+  padding: 12px 0
+}
+.repository #git-stats {
+  border: 1px solid var(--color-border-light);
+  background: var(--color-bg-primary)
+}
+.repository #git-stats .ui .text.black {
+  color: var(--color-text-primary)
+}
+.repository #git-stats .ui .text.black:hover {
+  color: var(--color-text-accent2)
+}
+.repository #file-content {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  margin-top: 24px
+}
+.repository .ui.top.attached.header {
+  border-bottom: 1px solid var(--color-border);
+  border-radius: 0
+}
+.repository #repo-files-table tr:hover {
+  background-color: var(--color-bg-secondary)!important
+}
+.repository .ui.header .ui.right {
+  display: flex;
+  align-items: center
+}
+@media only screen and (max-width:767px) {
+  .repository .ui.header .ui.right {
+    margin-top: 18px;
+    float: initial
+  }
+}
+.repository .ui.header .ui.right .ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) {
+  border: 1px solid var(--color-border)!important;
+  background: var(--color-bt-light)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button {
+  height: 32px;
+  border: none!important;
+  line-height: 32px;
+  padding: 0 6px 0 12px
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .button:hover {
+  background: var(--color-bt-light-hover)!important
+}
+.repository .ui.header .ui.right .ui.labeled.button:not([class*="left labeled"]) > .label {
+  background: rgba(0,0,0,.2);
+  border-radius: 100em;
+  padding: 3px 6px;
+  border: none!important;
+  margin-right: 6px!important
+}
+.repository .ui.secondary.menu {
+  margin: 0
+}
+.markdown:not(code) h1 {
+  border-bottom: 1px solid var(--color-border)
+}
+.markdown:not(code) h2 {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.markdown:not(code) blockquote {
+  border-left: 4px solid var(--color-text-accent1)
+}
+.mega-octicon,
+.octicon {
+  color: var(--color-text-light)
+}
+.ui.secondary.menu .ui.breadcrumb:first-child {
+  margin-left: 12px
+}
+.ui.table {
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: 0 0
+}
+.ui.table thead th {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border)
+}
+.ui.table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid var(--color-border-light)
+}
+.avatar > img,
+.ui img.avatar.image {
+  border-radius: 50%
+}
+.ui.basic.button,
+.ui.basic.buttons .button {
+  color: var(--color-text-primary)!important
+}
+.ui.basic.button i,
+.ui.basic.buttons .button i {
+  color: var(--color-text-light)!important
+}
+.repository .ui.tabs.container .ui.menu {
+  border-bottom: 1px solid var(--color-border)!important
+}
+.ui.tabular.menu .item {
+  color: var(--color-text-primary)
+}
+.ui.tabular.menu .item i {
+  color: var(--color-text-light)
+}
+.ui.tabular.menu .item::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 3px;
+  border-radius: 100em;
+  background: 0 0;
+  position: absolute;
+  bottom: 0;
+  margin: 0 -1.42857143em
+}
+.ui.tabular.menu .active.item {
+  border: none;
+  background: 0 0;
+  color: var(--color-text-accent1)
+}
+.ui.tabular.menu .active.item::after {
+  background: var(--color-active)
+}
+.menu + #file-content {
+  margin-top: 24px
+}
+.ui.right.file-actions .ui.button {
+  background-color: var(--color-bt-light);
+  color: var(--color-text-accent1)
+}
+.ui.right.file-actions .ui.button:hover {
+  color: var(--color-text-accent2);
+  background-color: var(--color-bt-light-hover)
+}
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-accent1)
+}
+.ui.basic.button:focus,
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.buttons .button:hover {
+  background-color: var(--color-bg-secondary)!important;
+  color: var(--color-text-accent1)!important
+}
+.ui.basic.button:focus i,
+.ui.basic.button:hover i,
+.ui.basic.buttons .button:focus i,
+.ui.basic.buttons .button:hover i {
+  color: var(--color-text-accent1)!important
+}

gulpfile.js

@@ -0,0 +1,47 @@
+/**
+ *   ____
+ *  / ___| ___   __ _ ___    _   _
+ * | |  _ / _ \ / _` / __|  | |_| |_  ___ _ __  ___ ___
+ * | |_| | (_) | (_| \__ \  |  _| ' \/ -_) '  \/ -_|_-<
+ *  \____|\___/ \__, |___/   \__|_||_\___|_|_|_\___/__/
+ *              |___/
+ *
+ * This file is part of kristuff/gogs-themes 
+ * Copyright (c) 2022 Christophe Buliard  
+ */
+
+var gulp            = require('gulp');
+var cleanCSS        = require('gulp-clean-css');
+var sass            = require('gulp-sass');
+var rename          = require('gulp-rename');
+var globImporter    = require('sass-glob-importer');
+var autoprefixer    = require('gulp-autoprefixer');
+var del             = require('del');
+var runSequence     = require('gulp4-run-sequence');
+
+gulp.task('clean-dist', function() {
+    return del(['dist/**', '!dist'], {force: true})
+});
+
+gulp.task('build-css-gogs', function () {
+    return gulp.src([
+        'src/themes/*.scss', 
+    ])
+    .pipe(sass({ importer: globImporter() }).on('error', sass.logError))
+    .pipe(autoprefixer())    
+    .pipe(cleanCSS({compatibility: '*', format: 'beautify'}))
+    .pipe(rename({prefix:'kristuff.'}))
+    .pipe(gulp.dest('dist'))
+    .pipe(cleanCSS({compatibility: '*'}))
+    .pipe(rename({extname: ".min.css"}))
+    .pipe(gulp.dest('dist'));
+});
+
+gulp.task('build', function(err) {
+    runSequence(
+        ['clean-dist'], 
+        ['build-css-gogs'],
+        err
+    );
+});
+

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "gogs-themes",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "del": "^6.0.0",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^7.0.1",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^4.1.0",
+    "gulp4-run-sequence": "^1.0.1",
+    "merge-stream": "^2.0.0",
+    "caniuse-lite": "^1.0.30001199",
+    "sass-glob-importer": "^1.0.1"
+  }
+}

src/_header.scss

@@ -0,0 +1,11 @@
+/*!
+ *   ____
+ *  / ___| ___   __ _ ___    _   _
+ * | |  _ / _ \ / _` / __|  | |_| |_  ___ _ __  ___ ___
+ * | |_| | (_) | (_| \__ \  |  _| ' \/ -_) '  \/ -_|_-<
+ *  \____|\___/ \__, |___/   \__|_||_\___|_|_|_\___/__/
+ *              |___/
+ *
+ * This file is part of kristuff/gogs-themes 
+ * Copyright (c) 2022 Christophe Buliard  
+ */

src/_helper.scss

@@ -0,0 +1,6 @@
+@mixin themeColor($color, $colorDarker) {
+    :root {
+        --color-active          : #{$color};
+        --color-active-darker   : #{$colorDarker};
+    }        
+}

src/elements/code.scss

@@ -0,0 +1,129 @@
+.repository.file.list #file-content .code-view .lines-code .hljs, 
+.repository.file.list #file-content .code-view .lines-code ol,
+.repository.file.list #file-content .code-view .lines-code pre, 
+.repository.file.list #file-content .code-view .lines-num .hljs, 
+.repository.file.list #file-content .code-view .lines-num ol, 
+.repository.file.list #file-content .code-view .lines-num pre,
+.bg-code {
+    color: #f8f8f2!important;
+    background-color: var(--color-pre-bg)!important
+}    
+
+.repository.file.list #file-content .code-view .lines-num {
+    color:#595959 !important;
+    background-color: var(--color-pre-bg)!important
+}
+code[class*=language-],
+pre[class*=language-] {
+  color: #f8f8f2;
+  background: 0 0;
+  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  scrollbar-color:var(--color-pre-scrollbar1) var(--color-pre-scrollbar2);
+}
+pre[class*=language-] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: .3em!important;
+}
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background:  var(--color-pre-bg)!important
+}
+:not(pre) > code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090!important
+}
+.token.punctuation {
+  color: #f8f8f2!important
+}
+.token.namespace {
+  opacity: .7
+}
+.token.constant,
+.token.deleted,
+.token.symbol,
+.token.tag {
+  color: #5189f4!important
+}
+.token.property{
+    color:#59d7f4!important
+}
+
+.token.boolean,
+.token.number {
+  color: #5189f4!important
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector{
+    color: #ec586d!important
+}
+.token.attr-value,
+.token.string {
+  color: #ff9267!important
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+  color: #f8f8f2!important
+}
+.token.atrule,
+.token.class-name,
+.token.function {
+  color: #f8f8f2!important
+}
+.token.keyword {
+  color: #5189f4!important
+}
+.token.important,
+.token.regex {
+  color: #5189f4!important;
+}
+.XXX_token.bold,
+.XXX_token.important {
+  font-weight: 700
+}
+.token.italic {
+  font-style: italic
+}
+.token.entity {
+  cursor: help
+}
+
+.hljs-title, 
+.hljs-section, 
+.hljs-selector-id {
+    color:#f94141!important;
+}
+
+.hljs-comment, 
+.hljs-quote {
+    color: #8a8899!important;
+}  

src/elements/colors.scss

@@ -0,0 +1,304 @@
+:root {
+    --color-bg-primary      : #1e2329;  
+    --color-bg-secondary    : #292e35;  
+
+    --color-text-primary    : #8b8b8b;
+    --color-text-light      : #424851;
+    --color-icon            : #3e4248;
+  
+    --color-text-accent1    : #c9c8c8;
+    --color-text-accent2    : #ffffff;
+
+    --color-border          : #3b4251;
+    --color-border-light    : #343a42;
+    --color-border-xlight   : #313a44;
+    
+    --color-badge-bg        : #2d333b;  
+    --color-input-bg        : rgba(0,0,0,.15);  
+    --color-bt-light        : #2d333b;  
+    --color-bt-light-hover  : #323841;  
+
+    --color-button-bg       : #0c0c0c;  
+    --color-button-bg-hover : #000;  
+
+
+    // code
+    --color-code            : #c6c6c6;
+    --color-code-bg         : #191d22;
+    --color-pre-bg          : #292d35;
+    --color-pre-scrollbar1  : #313137;
+    --color-pre-scrollbar2  : #171b20;
+}
+
+* {
+    scrollbar-color: #313137 #171b20;
+}
+
+.home .hero .octicon,
+.home a {
+    color:var(--color-active);
+}
+
+body:not(.full-width) {
+    background-color: var(--color-bg-primary);
+    color: var(--color-text-primary);
+}
+
+a {
+    color: var(--color-text-accent1);
+
+    &:hover {
+        color: var(--color-text-accent2);
+    }
+}
+
+.ui .text.black:hover {
+    color: #fff;
+}
+
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory, 
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+    color:var(--color-icon);
+}
+
+.ui.list .list > .item .description, 
+.ui.list > .item .description {
+    color:var(--color-text-primary);
+}
+
+h2,
+h3,
+h4,
+h5,
+.ui.header,
+.ui.menu,
+.ui.input input,
+.ui.button:not(.label) {
+    color: var(--color-text-accent1);
+}
+
+h1 {
+    color: var(--color-text-accent2);
+}
+
+.markdown:not(code) h1 .octicon-link, 
+.markdown:not(code) h2 .octicon-link, 
+.markdown:not(code) h3 .octicon-link, 
+.markdown:not(code) h4 .octicon-link, 
+.markdown:not(code) h5 .octicon-link, 
+.markdown:not(code) h6 .octicon-link {
+    color: var(--color-text-light);
+
+}
+
+.ui.card, 
+.ui.cards > .card {
+    background:var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+    box-shadow:none;
+}
+.ui.secondary.pointing.menu {
+    border-color: var(--color-border);
+}
+.ui.secondary.pointing.menu .active.item {
+    border-color: var(--color-active);
+}
+
+.ui.dropdown .menu > .divider {
+    border-color: var(--color-border);    
+}
+.ui.form .field > label {
+    color:var(--color-text-accent1);
+}
+.ui .warning.header {
+    background-color: var(--color-bg-secondary) !important;
+    color:var(--color-text-accent1);
+}
+.settings .hook.list > .item:not(:last-child) {
+    border-color: var(--color-border-light) !important;
+}
+
+.ui.card .content:not(.extra) {
+    color:var(--color-text-accent1);
+    font-weight: bold;
+}
+
+.ui.card > .extra a:not(.ui),
+.ui.cards > .card > .extra a:not(.ui),
+.ui.card .text.black{
+    color:var(--color-text-primary);
+}
+
+.ui.user.list .item .description a {
+    color:var(--color-text-accent1);
+
+    &:hover{
+        color:var(--color-text-accent2);
+    }
+
+}
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+    border-color: var(--color-border-xlight);
+}
+
+.ui.accordion .title:not(.ui),
+.ui .text.black,
+.ui .text.black a {
+    color: var(--color-text-primary);
+}
+
+.ui.label {
+    color: var(--color-text-accent1);
+    background: var(--color-input-bg);
+
+    &a:hover {
+        color: var(--color-text-accent2);
+    }
+
+    &.basic {
+        color: var(--color-text-accent1);
+        border: 1px solid var(--color-border);
+    }
+
+
+}
+.markdown:not(code) .highlight pre, .markdown:not(code) pre {
+    background-color: var(--color-bg-secondary);
+}
+
+.feeds .list ul li.private {
+    background-color: var(--color-bg-secondary);
+}
+.feeds .list ul li:not(:last-child) {
+    border-color: var(--color-border-light);    
+}
+.dashboard .six.wide.column .menu {
+    border-bottom: 1px solid var(--color-border);
+}
+
+.ui .info.segment.top {
+    background-color: var(--color-bg-secondary) !important;
+}
+.ui[class*="top attached"].segment {
+    border-radius: 7px;
+}
+.repository .diff-file-box .code-diff tbody tr.tag-code td {
+    background-color: var(--color-bg-primary) !important;
+    border-color: var(--color-border-light) !important;
+}
+.repository .diff-file-box .file-body.file-code .lines-num {
+    background-color: var(--color-bg-primary) !important;
+
+}
+.repository .diff-file-box .code-diff .lines-num,
+.repository .diff-file-box .file-body.file-code .lines-num-old {
+    border-right-color: var(--color-border-light)!important;
+}
+.repository .diff-file-box .code-diff tbody tr.add-code td,
+.repository .diff-file-box .code-diff tbody tr.del-code td {
+    background-color: var(--color-bg-secondary) !important;
+    border-color: var(--color-border) !important;
+}
+
+.repository .diff-file-box .code-diff tbody tr .removed-code {
+    background-color: rgb(215, 47, 47);
+    color: #fff!important;
+}
+.repository .diff-file-box .code-diff tbody tr .added-code {
+    background-color: rgb(31, 185, 31);
+    color: #fff !important;
+}
+
+
+
+.ui.grey.label, 
+.ui.grey.labels .label {
+    border-color: var(--color-badge-bg)!important;
+}
+.ui.menu .item > .label {
+    background-color: var(--color-badge-bg);
+}
+
+.fitted.item.choose.reference .menu .header .text {
+    padding-bottom: 6px;
+    border-bottom: 2px solid transparent;
+
+    &.black {
+        border-color: var(--color-active);
+    }
+} 
+
+.ui .text.black {
+    color:#fff;
+}
+
+.ui.selectable.table tbody tr:hover, 
+.ui.table tbody tr td.selectable:hover {
+    color:var(--color-text-accent1);
+}
+
+// buttons 
+.ui.blue.button, 
+.ui.blue.buttons .button,
+.ui.green.button, 
+.ui.green.buttons .button {
+    background-color: var(--color-active-darker);
+
+    &:hover {
+        background-color: var(--color-active);
+    }
+}
+
+
+// code 
+.hljs {
+    color:var(--color-text-primary)!important;
+}
+.hljs-keyword, 
+.hljs-selector-tag, 
+.hljs-subst{
+    color:var(--color-text-accent)!important;
+}
+
+.hljs-built_in, 
+.hljs-builtin-name,
+.hljs-number, 
+.hljs-literal, 
+.hljs-variable, 
+.hljs-template-variable, 
+.hljs-tag .hljs-attr {
+    color: #0acccc!important;
+}
+
+.hljs-string, 
+.hljs-doctag {
+    color: #fd6d26!important;
+}
+
+// login/... forms
+.user.activate form, 
+.user.forgot.password form, 
+.user.reset.password form, 
+.user.signin form, 
+.user.signup form {
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-secondary);
+}
+
+// footer
+footer {
+    border-top: none;
+    color: var(--color-text-light) !important;
+    background-color: var(--color-bg-primary);
+
+    .container .links > * {
+        border-left: 1px solid var(--color-border-xlight);
+    }
+}
+
+// ?
+.ui.segment,
+.ui.attached.header {
+    background: none;
+    border: none;
+}

src/elements/form.scss

@@ -0,0 +1,143 @@
+
+// check box
+.ui.checkbox label:hover, 
+.ui.checkbox + label:hover {
+    color: var(--color-text-primary);    
+}
+
+.ui.checkbox input:checked ~ .box::after, 
+.ui.checkbox input:checked ~ label::after {
+    color: var(--color-text-accent1);
+}
+.ui.checkbox label::before {
+    background: var(--color-input-bg)!important;
+}
+
+.ui.checkbox label::after {
+    color: var(--color-text-primary);
+}
+.ui.checkbox label, 
+.ui.checkbox + label,
+.ui.checkbox .box::after, 
+.ui.checkbox label::after {
+    color: var(--color-text-primary);
+
+    &:hover {
+        color: var(--color-text-accent2);
+    }
+}
+.ui.checkbox input:focus ~ label {
+    color: var(--color-text-accent1)!important;    
+}
+
+.ui.checkbox .box::before, .ui.checkbox label::before {
+    border-color: var(--color-border)!important;
+}
+
+// required marker
+.ui.form .required.field > .checkbox::after, 
+.ui.form .required.field > label::after, 
+.ui.form .required.fields.grouped > label::after, 
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after, 
+.ui.form .required.fields:not(.grouped) > .field > label::after {
+    color: var(--color-active);    
+}
+
+// input style
+.ui.form textarea,
+.ui.form input:not([type]), 
+.ui.form input[type="date"], 
+.ui.form input[type="datetime-local"], 
+.ui.form input[type="email"], 
+.ui.form input[type="file"], 
+.ui.form input[type="number"],
+.ui.form input[type="password"], 
+.ui.form input[type="search"], 
+.ui.form input[type="tel"],
+.ui.form input[type="text"],
+.ui.form input[type="time"], 
+.ui.form input[type="url"] {
+    background-color: var(--color-input-bg);
+    border: 1px solid var(--color-border-light);
+    color: var(--color-text-primary);
+
+    &:focus {
+        background-color: var(--color-input-bg);
+        color: var(--color-text-accent1);
+        border: 1px solid var(--color-active);
+    }
+}
+
+.ui.input.focus > input, 
+.ui.input > input:focus,
+.ui.input > input {
+    background-color: var(--color-input-bg);
+}
+
+
+
+// search bar 
+.admin.user .ui.action.input:not([class*="left action"]) > input,
+.explore.users .ui.action.input:not([class*="left action"]) > input,
+.explore.repositories .ui.action.input:not([class*="left action"]) > input {
+    border-radius: 100em!important ;
+    border-right-color: var(--color-border)!important;
+    position: relative;
+    padding-right: 120px;
+    padding-left: 15px;
+    height: 42px;
+    width: 100%!important;
+    border-radius: 100em;
+    
+    &.active {
+        border-right-color: var(--color-border)!important;
+        border-radius: 100em;
+    }
+
+    + .button {
+        position: absolute;
+        right: 0;
+        height: 42px;
+        border-radius: 100em!important;
+    }
+}
+
+
+.user.signin .ui.form .field:last-child {
+    text-align: center;
+
+    a {
+        color: var(--color-text-primary);
+        font-size: .95rem;
+
+        &:hover {
+            color: var(--color-text-accent2);
+        }
+    }
+}
+
+.ui.input.focus > input, 
+.ui.input > input:focus {
+    color: var(--color-text-accent1)!important;
+}
+
+.ui.input {
+    color: var(--color-text-primary);
+}
+
+.ui.input.focus > input, 
+.ui.input > input:focus {
+    border-color: var(--color-border);
+}
+
+.ui.attached.segment {
+    border: none;
+}
+
+.ui.form .inline.field > label, 
+.ui.form .inline.field > p, 
+.ui.form .inline.fields .field > label, 
+.ui.form .inline.fields .field > p, 
+.ui.form .inline.fields > label {
+    color:var(--color-text-accent1);
+}

src/elements/layout.scss

@@ -0,0 +1,279 @@
+
+// full size layout
+body:not(.full-width) {
+    min-width:100%;
+}
+.full.height {
+    margin-bottom: -60px;
+    min-height: calc(100% - 60px);
+}
+
+// fix top padding due to fixed header
+.explore, 
+.organization,
+.repository,
+.dashboard,
+.admin,
+.user:not(.context):not(.list) {
+    padding-top: 80px;
+}
+
+.home {
+    padding-top: 20px;
+
+    .stackable {
+        padding-top: 40px;
+    }
+
+    // for mobile 
+    .logo img {
+        max-width: 100%;
+    }
+}
+
+footer {
+    height: 60px;
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: 10px;
+
+    // hide external links
+    .container .links > a[target="_blank"]{
+        display: none;
+    } 
+
+
+    > .ui.container {
+        border-top: 1px solid var(--color-border-xlight);
+
+        
+    .ui.left::after {
+        display: inline-flex;
+        content: " - Custom Theme by @Kristuff";
+    }
+        @media only screen and (max-width: 767px){
+            text-align: center!important;
+
+            .ui.right,
+            .ui.left {
+                float: initial;
+            }
+        }
+
+        @media only screen and (max-width: 1023px){
+            width: calc(100% - 24px);
+            margin: 0 auto;
+        }
+
+    }
+}
+
+.ui.card > .image:not(.ui) > img, 
+.ui.cards > .card > .image:not(.ui) > img {
+    border-radius: 50%;
+    margin: 12px;
+    width: calc(100% - 24px);
+}
+
+.user.profile .ui.card .profile-avatar {
+    height: initial;
+    background: none;
+}
+
+@media only screen and (max-width: 767px){
+
+    .markdown:not(code).file-view {
+        padding: 1em 1em 1em !important;
+    }
+    
+   .repository #git-stats + .ui.menu {
+        flex-wrap: wrap;
+
+        .right.fitted.item{
+            margin-top: 12px;
+            width: 100%;
+
+            #clone-panel {
+                width: 100%;
+                margin: 0;
+            }
+        }
+    }
+
+    .ui.container {
+        width: auto !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        padding: 0 10px;
+    }
+
+
+    .ui.card, .ui.cards > .card {
+        width: 100%;
+        height: 192px;
+
+        .content{
+            position: absolute;
+            left: 94px;
+            right: 0;
+
+            .center {
+                text-align: left;
+            }
+        }
+        .extra.content {
+            position: absolute;
+            left: 94px;
+            top: 50px;
+            right: 12px;
+        }
+
+    }
+    .user.profile .ui.card .profile-avatar {
+        width: 90px;
+    }
+}
+
+
+@media only screen and (min-width: 768px) and (max-width: 1023px){
+    .ui.container {
+        width: auto !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        padding: 0 18px;
+    }
+
+    .ui.card, .ui.cards > .card {
+        width: 100%;
+        height: 192px;
+
+        .content{
+            position: absolute;
+            left: 204px;
+            right: 0;
+
+            .center {
+                text-align: left;
+            }
+
+        }
+        .extra.content {
+            position: absolute;
+            left: 204px;
+            top: 50px;
+            right: 0;
+        }
+
+    }
+    .user.profile .ui.card .profile-avatar {
+        width: 192px;
+        height: initial;
+    }
+
+}
+
+// *vertical* menu display horizontaly on mobile/tab 
+@media (max-width: 1023px) {
+
+    .ui.menu {
+        border-radius: 0;
+    }
+
+    .ui.vertical.menu {
+        display: flex;
+        flex-direction:row ;
+        width: 100%;
+        border-bottom: 1px solid var(--color-border);
+        overflow-x: auto;
+
+        .header {
+            display: none;
+        }
+
+        .item {
+            border: none;
+            border-bottom: 3px solid transparent;
+
+            &:hover {
+                border-bottom-color: var(--color-border-xlight);
+            }
+
+            &.active {
+                border-bottom-color: var(--color-active);
+            }
+        }
+    }
+
+    .ui.container:not(.fluid) {
+        width: 100% !important;
+    }
+    .ui.column.grid > [class*="eleven wide"].column, 
+    .ui.grid > .column.row > [class*="eleven wide"].column, 
+    .ui.grid > .row > [class*="eleven wide"].column, 
+    .ui.grid > [class*="eleven wide"].column,
+    .ui.column.grid > [class*="five wide"].column, 
+    .ui.grid > .column.row > [class*="five wide"].column, 
+    .ui.grid > .row > [class*="five wide"].column, 
+    .ui.grid > [class*="five wide"].column,
+    .ui.column.grid > [class*="four wide"].column, 
+    .ui.grid > .column.row > [class*="four wide"].column, 
+    .ui.grid > .row > [class*="four wide"].column, 
+    .ui.grid > [class*="four wide"].column,
+    .ui.column.grid > [class*="twelve wide"].column,
+    .ui.grid > .column.row > [class*="twelve wide"].column, 
+    .ui.grid > .row > [class*="twelve wide"].column, 
+    .ui.grid > [class*="twelve wide"].column {
+        width: 100% !important;
+    }
+
+}
+
+// fix dashboard feeds diplay on mobile 
+@media (max-width: 767px) {
+
+    .dashboard.feeds .ui.grid {
+        flex-direction: column-reverse;
+
+        & > [class*="ten wide"].column,
+        & > [class*="six wide"].column {
+            width: 100%!important;
+        }
+    }
+}
+
+// fix login form layout
+.user.activate form, 
+.user.forgot.password form, 
+.user.reset.password form, 
+.user.signin form, 
+.user.signup form {
+    width: 100%!important;
+    max-width: 380px;
+    border-radius: 7px;
+
+    .header {
+        padding: 15px!important;
+        margin: 0;
+        background: none;
+    }
+
+    .inline.field > label {
+        display: block;
+        text-align: left;
+        margin-bottom: 6px!important;
+    }
+
+    input, 
+    textarea {
+        width: 100%!important;
+    }
+}
+
+// full-width on login form button
+.user.signin .ui.form .ui.button {
+    margin-bottom: 12px;
+    width: 100%;
+    border-radius: 100em;
+    height: 45px;
+}
+

src/elements/menu.scss

@@ -0,0 +1,222 @@
+// Fixed top header 
+.following.bar {
+
+    &.light {
+        background-color: var(--color-bg-secondary) !important;
+        border-bottom: 1px solid var(--color-bg-secondary);
+        color: var(--color-text-accent1) !important;
+        position: fixed;
+        top: 0;
+    }
+
+    .top.menu {
+
+        @media (max-width: 767px) {
+            display: flex;
+            overflow-x: auto;
+        }
+
+
+        .octicon {
+            color: var(--color-text-accent1);
+        }
+
+        a.item.brand {
+           color: var(--color-text-accent1) !important;
+        }   
+        > a.item:not(.brand) {
+            padding-left: 20px;
+            padding-right: 20px;
+            color: var(--color-text-accent1) !important;
+
+            // hide help menu
+            &[target="_blank"]{
+                display: none;
+            }
+        }
+        a.item:not(.brand):hover,
+        .dropdown.item:hover,
+        .dropdown.item.active {
+            background: rgba(0,0,0,.20)!important;
+            color: var(--color-text-accent2)!important;
+        }
+    }
+}
+
+.ui.secondary.menu .item {
+    
+    &:not(.brand).active,
+    &:not(.brand):hover,
+    &:not(.brand).active:hover {
+        border-radius: 5px;
+        background: none!important;
+        color:var(--color-text-accent2)!important;
+    }
+
+    &:not(.brand){
+        margin: 0;
+    }
+}
+
+.following.bar .head.link.item {
+    color: var(--color-text-accent1) !important;
+}
+
+
+.ui.vertical.menu {
+    background: none;
+}
+
+.ui.vertical.menu .item,
+.ui.secondary.menu .item {
+    background: none;
+    color: var(--color-text-accent1);
+    border-radius: 0;
+
+    &.active {
+        background:none;
+        font-weight: 600;
+        color: var(--color-text-accent1);
+    }
+    &:hover {
+        background: none;
+        color: var(--color-text-accent2);
+    }
+}
+
+@media (min-width: 1024px) {
+   .ui.vertical.menu {
+       border: 1px solid var(--color-border);
+
+        .active.item {
+            border-left: 3px solid var(--color-active);
+            background: var(--color-bg-secondary);
+        }
+    }
+}
+   
+
+.ui.vertical.menu .header.item {
+    background: none;
+    color: var(--color-text-accent1);
+    text-align: center;
+    padding-left: 0;
+}
+
+.ui.basic.button, 
+.ui.basic.buttons .button {
+    border: 1px solid var(--color-border);
+}
+
+.ui.dropdown .menu,
+.ui.menu .dropdown.item .menu,
+.ui.menu .ui.dropdown .menu > .item:hover {
+    background: var(--color-bg-secondary)!important;
+}
+
+.ui.dropdown .menu .selected.item, 
+.ui.dropdown.selected,
+.ui.dropdown .menu > .header,
+.ui.dropdown .menu > .item {
+    color: var(--color-text-accent1)!important;
+}
+
+.ui.menu .ui.dropdown .menu > .active.item,
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item,
+.ui.dropdown .menu > .item:hover,
+.ui.link.menu .item:hover, 
+.ui.menu .dropdown.item:hover, 
+.ui.menu .link.item:hover, 
+.ui.menu a.item:hover{
+    color:var(--color-text-accent2)!important;
+}
+
+.ui.menu {
+
+    .item.active, 
+    .ui.menu .item.active:hover {
+        font-weight: bold;
+    }
+
+    background: none !important;
+    color: var(--color-text-primary) !important;
+
+    .ui.dropdown .menu>.item {
+        color: var(--color-text-primary) !important;
+        background-color: var(--color-bg-secondary) !important;
+    }
+
+    .item {
+        border-bottom: 3px solid transparent; 
+        color:var(--color-text-accent1);
+
+        &.active,
+        &.active:hover,
+        &:hover {
+            color:var(--color-text-accent2);
+        }
+    }
+
+    &:not(.vertical) .item.active {
+        border-bottom-color: var(--color-active) ;
+    }
+}
+
+.ui.fluid.basic.button.center.ajax-load-button {
+    border-radius: 100em;
+    
+    &:hover {
+        background-color: var(--color-bt-light-hover);
+        color:var(--color-text-accent1)
+    }
+}
+
+#clone-panel  {
+    .ui.input > input {
+        border-top: 1px solid var(--color-border);
+        border-bottom: 1px solid var(--color-border);
+
+        .ui.input.focus > input, 
+        .ui.input > input:focus {
+            background: var(--color-input-bg);
+            color: var(--color-text-accent1);
+        }
+    }
+    .ui.basic.button:first-child {
+        border: none;
+    }
+    .ui.basic.button:last-child {
+        border-left: none;
+    }
+}
+
+.ui.buttons>.ui.dropdown:last-child .menu,
+.ui.menu .right.dropdown.item .menu,
+.ui.menu .right.menu .dropdown:last-child .menu {
+    background-color: var(--color-bg-secondary) !important;
+}
+
+.ui.menu > .item:first-child,
+.user.profile .ui.secondary.menu .item:not(.brand).active {
+    border-radius: 0;
+} 
+
+
+.ui.button {
+    background-color: var(--color-button-bg);
+
+    &:hover {
+        background-color: var(--color-button-bg-hover);
+    }
+}
+
+.ui.selection.dropdown {
+    color:var(--color-text-primary);
+    background-color: var(--color-input-bg);
+    border-color: var(--color-border);
+
+    &.active {
+        border-color: var(--color-active);
+    }
+}

src/elements/repo.scss

@@ -0,0 +1,249 @@
+
+.repository .header-wrapper {
+    color: var(--color-text-accent1) !important;
+    background-color: transparent;
+    padding-top: 10px;
+}
+
+.repository .head .mega-octicon {
+    width: 24px;
+    font-size: 24px;
+    color: var(--color-icon);
+}
+.ui.breadcrumb .divider {
+    color: var(--color-text-light);
+    margin: 0;
+}
+.repository .head .fork-flag {
+    margin-left: 34px;
+    margin-top: 6px;
+    color: var(--color-text-light);
+}
+
+.ui.repository.list .item:not(:first-child) {
+    border-top: 1px solid var(--color-border-light);
+}
+
+.repository #clone-panel input {
+    border-bottom: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-light);
+    border-right: none;
+}
+
+#clone-panel .ui.action.input:not([class*="left action"]) > input:focus {
+    border-left-color: transparent!important;
+    border-right-color: transparent!important;
+}
+
+
+.repository.file.list #repo-desc {
+    padding: 12px 0;
+}
+
+.repository {
+    
+    #git-stats {
+        border: 1px solid var(--color-border-light);
+        background: var(--color-bg-primary);
+
+        .ui .text.black {
+            color:var(--color-text-primary);
+
+            &:hover {
+                color:var(--color-text-accent2);
+            }
+        }
+    }
+
+    #file-content {
+        border: 1px solid var(--color-border);
+        border-radius: 8px;
+        margin-top: 24px;
+    }
+
+    .ui.top.attached.header {
+        border-bottom: 1px solid var(--color-border);
+        border-radius:0;
+    }
+
+    #repo-files-table tr:hover {
+        background-color: var(--color-bg-secondary)!important;
+    }
+
+    .ui.header {
+
+        .ui.right {
+            display: flex;
+            align-items: center;
+
+            @media only screen and (max-width: 767px){
+                margin-top: 18px;
+                float: initial;
+            }
+
+            .ui.labeled.button:not(.icon){
+                display: inline-flex;
+                align-items: center;
+                gap:6px
+            }
+
+            .ui.labeled.button:not([class*="left labeled"]){
+                border: 1px solid var(--color-border)!important;
+                background: var(--color-bt-light)!important;
+            
+
+                > .button  {
+                    height: 32px;
+                    border: none!important;
+                    line-height: 32px;
+                    padding: 0 6px 0 12px;
+
+                    &:hover {
+                        background: var(--color-bt-light-hover)!important;
+                    }
+                }
+           
+                > .label {
+                    background: rgba(0,0,0,.2);
+                    border-radius: 100em;
+                    padding: 3px 6px;
+                    border: none!important;
+                    margin-right:6px!important;
+                }
+            }
+        }
+    }
+
+    .ui.secondary.menu {
+        margin: 0;
+    }
+    //.repository #clone-panel input
+}
+
+
+.markdown:not(code) {
+
+    h1 {
+        border-bottom: 1px solid var(--color-border);
+    }   
+    
+    h2 {
+        border-bottom: 1px solid var(--color-border-light);
+    }
+    blockquote {
+        border-left: 4px solid var(--color-text-accent1);
+    }
+}
+
+.mega-octicon, 
+.octicon {
+    color: var(--color-text-light);
+}
+
+.ui.secondary.menu .ui.breadcrumb:first-child {
+    margin-left: 12px;
+}
+
+.ui.table {
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    background: none;
+ 
+    thead th {
+        background: var(--color-bg-secondary);
+        color: var(--color-text-primary);
+        border-bottom: 1px solid var(--color-border);
+    }
+    tbody tr:not(:last-child) td {
+        border-bottom: 1px solid var(--color-border-light);
+    }
+
+}
+
+// circle avatar
+.ui img.avatar.image,
+.avatar > img {
+    border-radius: 50%;
+}
+
+
+.ui.basic.button, 
+.ui.basic.buttons .button {
+    color: var(--color-text-primary)!important;
+
+    i {
+        color: var(--color-text-light) !important;
+
+    }
+}
+
+.repository .ui.tabs.container .ui.menu {
+    border-bottom: 1px solid var(--color-border) !important;
+}
+
+// secondary menu
+.ui.tabular.menu .item {
+    color: var(--color-text-primary);
+
+    i {
+        color: var(--color-text-light);
+    }
+
+    &::after {
+        display: block;
+        content: '';
+        width: 100%;
+        height: 3px;
+        border-radius: 100em;
+        background:transparent;
+        position: absolute;
+        bottom: 0;
+        margin: 0 -1.42857143em;
+    }
+}
+.ui.tabular.menu .active.item {
+    border:none;
+    background: none;
+    color: var(--color-text-accent1);
+
+    &::after {
+        background: var(--color-active);
+    }
+}
+
+// fix space
+.menu + #file-content {
+    margin-top: 24px;
+}
+
+
+.ui.right.file-actions {
+    .ui.button {
+        background-color: var( --color-bt-light);
+        color: var( --color-text-accent1);
+ 
+        &:hover {
+            color: var( --color-text-accent2);
+            background-color: var( --color-bt-light-hover);
+        }
+    
+    }
+}
+
+
+.ui.tabular.menu .item:hover {
+    color:var(--color-text-accent1);
+}
+
+.ui.basic.button:focus, 
+.ui.basic.buttons .button:focus,
+.ui.basic.button:hover, 
+.ui.basic.buttons .button:hover {
+    background-color: var(--color-bg-secondary)!important;
+    color: var(--color-text-accent1)!important;
+
+    i {
+        color: var(--color-text-accent1)!important;
+    }
+}

src/themes/gogs.dark-accent-blue.scss

@@ -0,0 +1,4 @@
+@import '../_header.scss';
+@import '../_helper.scss';
+@include themeColor(#195ea9, #175699);
+@import '../elements/*.scss';

src/themes/gogs.dark-accent-green.scss

@@ -0,0 +1,4 @@
+@import '../_header.scss';
+@import '../_helper.scss';
+@include themeColor(#158439, #127a33);
+@import '../elements/*.scss';

src/themes/gogs.dark-accent-magenta.scss

@@ -0,0 +1,4 @@
+@import '../_header.scss';
+@import '../_helper.scss';
+@include themeColor(#b64aa9, #8F3985);
+@import '../elements/*.scss';

src/themes/gogs.dark-accent-orange.scss

@@ -0,0 +1,4 @@
+@import '../_header.scss';
+@import '../_helper.scss';
+@include themeColor(#f26522, #d35921);
+@import '../elements/*.scss';

src/themes/gogs.dark-accent-red.scss

@@ -0,0 +1,4 @@
+@import '../_header.scss';
+@import '../_helper.scss';
+@include themeColor( #d9453d, #cf3d35);
+@import '../elements/*.scss';

src/themes/gogs.dark-accent-yellow.scss

@@ -0,0 +1,4 @@
+@import '../_header.scss';
+@import '../_helper.scss';
+@include themeColor(#e4c515, #d4b712);
+@import '../elements/*.scss';

src/themes/gogs.dark.scss

@@ -0,0 +1,5 @@
+@import '../_header.scss';
+@import '../_helper.scss';
+@include themeColor( #d9453d, #cf3d35);
+@import '../elements/*.scss';
+