right border of profile search bar

README.md

@@ -1,5 +1,5 @@
 # gitea-github-theme
-An opinionated GitHub-based theme for Gitea
+Opinionated GitHub-based light and dark themes for Gitea
 
 Created and tested with Gitea v1.15.
 The theme might work with future versions though Gitea devs might change some CSS classes in the meantime and things might potentially look odd - just try yourself :)
@@ -23,7 +23,7 @@ I might update the theme over time to fix oversights and other issues - no guara
 
 ## Screenshots
 
-|                           |                           |
-| :-----------------------: | :-----------------------: |
-| ![](figs/screenshot1.png) | ![](figs/screenshot2.png) |
-|                           |                           |
+|                                |                                |
+| :----------------------------: | :----------------------------: |
+|   ![](figs/screenshot1.png)    |   ![](figs/screenshot2.png)    |
+| ![](figs/screenshot-dark1.png) | ![](figs/screenshot-dark2.png) |

theme-github-dark.css

@@ -0,0 +1,462 @@
+:root {
+  --color-primary: #347d39;
+  --border-radius: 6px;
+  --color-body: #373e47;
+  --color-navbar: #22272e;
+  --color-footer: #22272e;
+  --color-text-light: #a6aab5;
+  --color-text-light-2: #adbac7;
+  --color-text: #bbc0ca;
+  --color-box-body: #22272e;
+  --color-markup-code-block: #636e7b66;
+  --color-light: #22272e;
+  --color-button: #22272e;
+  --color-input-background: #22272e;
+  --color-input-text: #adbac7;
+  --color-box-header: #22272e;
+  --color-active: #22272e;
+  --color-menu: #22272e;
+  --color-secondary: #454a57;
+}
+
+.ui.list .list > .item > .content,
+.ui.list > .item > .content {
+  color: unset;
+}
+
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+  color: var(--color-text);
+}
+
+.ui.repository.list,
+.ui.user.list {
+  background: var(--color-box-body);
+  padding: 1em;
+  border-radius: 0.75em;
+}
+
+.ui.header .sub.header {
+  color: #636e7b;
+}
+
+.ui .error.header {
+  border-color: var(--color-red) !important;
+  background-color: var(--color-red) !important;
+  color: #ffffff !important;
+}
+
+.ui.modal > .header {
+  background: var(--color-secondary);
+  color: #dbdbdb;
+}
+
+.ui.modal > .actions {
+  background: var(--color-secondary);
+  border-color: var(--color-secondary);
+}
+
+.ui.modal > .content {
+  background: #383c4a;
+}
+
+.ui.green.buttons .button,
+.ui.green.button {
+  background-color: #347d39;
+  color: #fff !important;
+}
+.repository.file.list #repo-files-table tbody .svg.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
+  color: #768390;
+}
+a,
+.ui.breadcrumb a {
+  /* color: var(--color-text); */
+  color: #539bf5;
+}
+.repo-title a {
+  color: #539bf5 !important;
+}
+
+.ui.table > thead > tr > th {
+  background: #636e7b1a;
+  color: #dbdbdb !important;
+}
+.repository.file.list #repo-files-table tr {
+  background: #22272e;
+}
+.repo-icon {
+  display: inline-block;
+  transform: scale(0.75);
+  margin-right: -0.05rem !important;
+}
+
+.repository.file.list #file-buttons .ui.button {
+  color: #fff !important;
+}
+
+.ui.basic.green.button,
+.ui.basic.green.buttons .button,
+.ui.basic.primary.button,
+.ui.basic.primary.buttons .button {
+  background-color: #22272e !important;
+  box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.15) !important;
+  color: #dbdbdb !important;
+}
+.ui.basic.green.button:focus,
+.ui.basic.green.buttons .button:focus,
+.ui.basic.primary.button:focus,
+.ui.basic.primary.buttons .button:focus {
+  box-shadow: inset 0 0 0 0px #808080 !important;
+}
+.ui.basic.green.button:hover,
+.ui.basic.green.buttons .button:hover,
+.ui.basic.primary.button:hover,
+.ui.basic.primary.buttons .button:hover {
+  background-color: #22272e !important;
+}
+.ui.basic.green.button:hover,
+.ui.basic.green.buttons .button:hover,
+.ui.basic.primary.button:hover,
+.ui.basic.primary.buttons .button:hover {
+  box-shadow: inset 0 0 0 0px #808080 !important;
+}
+.issue.list {
+  list-style: none;
+  margin-top: 1rem;
+  background-color: #22272e;
+  border-radius: 6px;
+  padding: 3px 10px 3px 10px;
+}
+.ui.menu .item {
+  background-color: #22272e;
+}
+.ui.horizontal.segments > .segment {
+  background-color: #22272e;
+  border-radius: 6px;
+}
+.ui.attached.header {
+  border-radius: 6px;
+}
+.repository.file.list .repo-description {
+  color: #adbac7;
+}
+.commit-summary a.default-link {
+  color: #adbac7 !important;
+}
+.markup h1,
+.markup h2,
+.markup h3,
+.markup h4,
+.markup h5,
+.markup h6 {
+  color: #adbac7;
+}
+.markup code,
+.markup tt {
+  color: #adbac7;
+}
+.markup p,
+.markup blockquote,
+.markup details,
+.markup ul,
+.markup ol,
+.markup dl,
+.markup table,
+.markup pre {
+  color: #adbac7;
+}
+.repo-list-link {
+  color: #539bf5 !important;
+}
+.ui.menu.two.item .item {
+  border: 1px solid var(--color-secondary);
+}
+a,
+.push.news {
+  color: null;
+}
+.ui.header {
+  color: #a6aab5;
+}
+.repo-description {
+  color: #a6aab5 !important;
+}
+a.ui.label {
+  /* color: #adbac7 !important; */
+  border-color: var(--color-secondary) !important;
+}
+.ui.label {
+  border-color: var(--color-secondary) !important;
+}
+.ui.menu .item {
+  color: #adbac7;
+}
+.ui .sha.label {
+  padding: 6px 10px 6px;
+}
+
+/* repo list dashboard */
+.feeds .list ul li.private {
+  background-color: #22272e;
+}
+
+/* ssh and search repository fields */
+input,
+textarea,
+.ui.input > input,
+.ui.form input:not([type]),
+.ui.form select,
+.ui.form textarea,
+.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.selection.dropdown,
+.ui.checkbox label:before,
+.ui.checkbox input:checked ~ label:before,
+.ui.checkbox input:not([type="radio"]):indeterminate ~ label:before {
+  border-color: var(--color-input-background);
+}
+
+/* hover repository rows */
+.repository.file.list #repo-files-table tr:hover {
+  background-color: var(--color-hover);
+}
+
+/* due date boxes */
+.repository .metas #deadlineForm input {
+  border-color: var(--color-secondary);
+}
+
+/* border color dependencies block in issues */
+#new-dependency-drop-list.ui.selection.dropdown {
+  border-color: var(--color-secondary);
+}
+
+.page-content .ui.button {
+  border-color: var(--color-secondary);
+}
+
+/* border color form fields settings page */
+input,
+textarea,
+.ui.input > input,
+.ui.form input:not([type]),
+.ui.form select,
+.ui.form textarea,
+.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.selection.dropdown,
+.ui.checkbox label:before,
+.ui.checkbox input:checked ~ label:before,
+.ui.checkbox input:not([type="radio"]):indeterminate ~ label:before {
+  border-color: var(--color-secondary);
+}
+
+/* right border of "find repository" field */
+.ui.action.input:not([class*="left action"]) > input {
+  border-right-color: var(--color-input-border-hover);
+}
+
+/* background color of code display */
+.lines-code {
+  background-color: #22272e;
+}
+.code-diff-unified .add-code,
+.code-diff-unified .add-code td,
+.code-diff-split .add-code .lines-num-new,
+.code-diff-split .add-code .lines-type-marker-new,
+.code-diff-split .add-code .lines-code-new,
+.code-diff-split .del-code .add-code.lines-num-new,
+.code-diff-split .del-code .add-code.lines-type-marker-new,
+.code-diff-split .del-code .add-code.lines-code-new {
+  background: #224035;
+}
+.tag-code,
+.tag-code td {
+  background-color: var(--color-body);
+}
+
+/* green code color dark theme */
+.chroma .s2 {
+  color: #8ddb8c;
+}
+
+.chroma .k {
+  color: #f47067;
+}
+
+.chroma .m {
+  color: #6cb6ff;
+}
+
+.chroma .nf {
+  color: #96d0ff;
+}
+
+/* border color repo files */
+.repository.file.list #repo-files-table td {
+  border-bottom: 1px solid #373e47;
+}
+
+/* text color repo files */
+.repository.file.list #repo-files-table td {
+  color: #7f8699;
+}
+
+.repository.file.list #repo-files-table td a {
+  color: #7f8699 !important;
+}
+
+/* gpg commit label  */
+.repository #commits-table td.sha .sha.label.isSigned.isVerified,
+.repository #repo-files-table .sha.label.isSigned.isVerified,
+.repository #rev-list .sha.label.isSigned.isVerified,
+.repository
+  .timeline-item.commits-list
+  .singular-commit
+  .sha.label.isSigned.isVerified {
+  border: 1px solid #21ba45 !important;
+  background: transparent;
+  border-radius: 6px;
+}
+
+/* color of active tabular item, e.g. in PR view (conversations, commits, files changed) */
+.ui.tabular.menu .active.item,
+.ui.tabular.menu .active.item:hover {
+  background: var(--color-navbar);
+}
+
+/* repo watch and fork counters */
+.ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label,
+.ui.basic.label:not(.tag):not(.image):not(.ribbon) {
+  color: #adbac7;
+}
+.repo-buttons .ui.labeled.button.disabled > .label {
+  color: #adbac7;
+}
+
+/* border color of warning message */
+.ui.warning.message {
+  background-color: #22272e;
+  color: var(--color-text);
+}
+.ui.warning.message,
+.ui.attached.warning.message {
+  box-shadow: null;
+}
+.ui.warning.message,
+.ui.attached.warning.message {
+  box-shadow: 0 0 0 0px #c9ba9b inset, 0 0 #0000;
+}
+
+/* repo svg icons */
+.repository.view.issue .comment-list .timeline-item .badge .svg {
+  fill: white;
+}
+
+/* background emoji reactions */
+.repository .segment.reactions .ui.label.basic.blue {
+  background-color: transparent;
+}
+
+.ui.positive.message {
+  background-color: #22272e;
+  color: #fff;
+}
+.ui.positive.message,
+.ui.attached.positive.message {
+  box-shadow: 0 0 0 1px #2c662d inset, 0 0 #0000;
+}
+
+/* diff color deletion */
+.code-diff-unified .del-code,
+.code-diff-unified .del-code td,
+.code-diff-split .del-code .lines-num-old,
+.code-diff-split .del-code .lines-type-marker-old,
+.code-diff-split .del-code .lines-code-old {
+  background: #7a341e;
+}
+
+/* diff color neutral */
+.lines-num,
+.lines-code {
+  background-color: var(--color-navbar);
+}
+
+.lines-type-marker {
+  background-color: var(--color-navbar);
+}
+a.blob-excerpt {
+  background: var(--color-body);
+}
+
+/* PR open label */
+.ui.green.labels .label,
+.ui.ui.ui.green.label {
+  background-color: #347d39;
+}
+
+/* bg color of PR comment form */
+.ui.form,
+.ui.form .field .dropdown,
+.ui.form .field .dropdown .menu > .item {
+  background-color: var(--color-navbar);
+}
+.comment-code-cloud {
+  background-color: var(--color-navbar);
+}
+
+/* remove border of "new file" button */
+.ui.buttons .button:first-child {
+  border-left: 0px solid var(--color-light-border);
+}
+
+/* border color of dropdown svg */
+.ui.form,
+.ui.form .field .dropdown,
+.ui.form .field .dropdown .menu > .item {
+  background-color: var(--color-border);
+}
+
+/* hover font color */
+.ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .link.item:hover, .ui.secondary.pointing.menu a.item:hover {
+  color: var(--color-text);
+}
+
+/* user avatar background */
+.user.profile .ui.card #profile-avatar {
+  background: var(--color-navbar);
+}
+.ui.cards>.card>.content, .ui.card>.content {
+  background: var(--color-navbar);
+}
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+  border-bottom: 1px solid var(--color-secondary);
+  background-color: var(--color-navbar);
+}
+.user.profile .ui.card .extra.content ul li {
+  background-color: var(--color-navbar);
+}
+
+/* right border of profile search bar */
+.ui.action.input:not([class*="left action"]) > input {
+  border-right-color: var(--color-text);
+}

theme-github.css

@@ -8,7 +8,7 @@
   --color-purple: #8250df;
 }
 .ui.label {
-  padding: .3em .5em;
+  padding: 0.3em 0.5em;
   background: var(--color-light);
   color: var(--color-text-light);
   border-radius: 6px;
@@ -17,35 +17,35 @@
 .ui.blue.labels .label,
 .ui.primary.label,
 .ui.primary.labels .label {
-  border-color: var(--color-light)!important;
-  background-color: #afb8c133!important;
+  border-color: var(--color-light) !important;
+  background-color: #afb8c133 !important;
   border-radius: 6px;
-  color: #24292f!important;
+  color: #24292f !important;
 }
 .ui.blue.button,
 .ui.blue.buttons .button,
 .ui.primary.button,
 .ui.primary.buttons .button {
-  background-color: #f6f8fa!important;
-  color: #24292f!important;
+  background-color: #f6f8fa !important;
+  color: #24292f !important;
 }
 .repo-icon {
   display: inline-block;
   transform: scale(0.75);
-  margin-right: -0.05rem!important;
+  margin-right: -0.05rem !important;
 }
 .ui.green.buttons .button,
 .ui.green.button {
   background-color: #2da44e;
-  color: #fff!important
+  color: #fff !important;
 }
 .ui.green.labels .label,
 .ui.ui.ui.green.label {
   background-color: #2da44e;
-  color: #fff!important
+  color: #fff !important;
 }
 .ui.label {
-  padding: .5em .5em;
+  padding: 0.5em 0.5em;
 }
 .ui.basic.green.buttons .button,
 .ui.basic.green.button {
@@ -60,100 +60,131 @@
 }
 a,
 .ui.breadcrumb a {
-  color: var(--color-text)!important;
+  color: var(--color-text) !important;
 }
 .repo-title a {
-  color: var(--color-primary)!important
+  color: var(--color-primary) !important;
 }
 .ui.basic.blue.button,
 .ui.basic.blue.buttons .button,
 .ui.basic.primary.button,
 .ui.basic.primary.buttons .button {
-  background-color: #fff!important;
-  box-shadow: inset 0 0 0 1px rgba(34, 36, 38, .15)!important;
-  color: var(--color-text)!important;
-}
+  background-color: #fff !important;
+  box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.15) !important;
+  color: var(--color-text) !important;
 }
 .ui.basic.blue.button:focus,
 .ui.basic.blue.buttons .button:focus,
 .ui.basic.primary.button:focus,
 .ui.basic.primary.buttons .button:focus {
-box-shadow: inset 0 0 0 0px #808080!important;
+  box-shadow: inset 0 0 0 0px #808080 !important;
 }
 .ui.basic.blue.button:hover,
 .ui.basic.blue.buttons .button:hover,
 .ui.basic.primary.button:hover,
 .ui.basic.primary.buttons .button:hover {
-background-color: #fff!important;
+  background-color: #fff !important;
 }
 ui.basic.blue.button:hover,
 .ui.basic.blue.buttons .button:hover,
 .ui.basic.primary.button:hover,
 .ui.basic.primary.buttons .button:hover {
-box-shadow: inset 0 0 0 0px #808080!important;
+  box-shadow: inset 0 0 0 0px #808080 !important;
 }
 a:hover,
 a.muted:hover,
 .ui.breadcrumb a:hover {
-color: none;
+  color: none;
 }
 .ui.tabular.menu .item:hover {
-color: none;
+  color: none;
 }
 .ui.basic.labels .label,
 .ui.basic.label {
-background-color: #fff;
+  background-color: #fff;
 }
 .ui.labeled.button.disabled > .button,
 .ui.basic.buttons .button,
 .ui.basic.button {
-background-color: #f6f8fa;
+  background-color: #f6f8fa;
 }
 .ui.blue.button:hover,
 .ui.blue.buttons .button:hover,
 .ui.primary.button:hover,
 .ui.primary.buttons .button:hover {
-background-color: var(--color-hover)!important;
+  background-color: var(--color-hover) !important;
 }
 .repository .ui.segment.sub-menu .list .item a:hover {
-color: var(--color-text)!important;
+  color: var(--color-text) !important;
 }
 .repo-buttons .ui.labeled.button > .label:hover {
-color: var(--color-text)!important;
+  color: var(--color-text) !important;
 }
 .repository.file.list #repo-files-table tr:hover {
-background-color: #f6f8fa!important
+  background-color: #f6f8fa !important;
 }
 .ui .error.header {
-background-color: #cf222e!important;
-color: #fff!important;
+  background-color: #cf222e !important;
+  color: #fff !important;
 }
 .ui.red.buttons .button,
 .ui.red.button {
-color: #fff!important;
+  color: #fff !important;
 }
 .ui.basic.red.buttons .button,
 .ui.basic.red.button {
-color: #cf222e!important;
+  color: #cf222e !important;
 }
 * {
-scrollbar-width: thin;
-scrollbar-color: #f6f8fa transparent !important;
+  scrollbar-width: thin;
+  scrollbar-color: #f6f8fa transparent !important;
 }
 ::-webkit-scrollbar-thumb {
-box-shadow: inset 0 0 0 6px #808080 !important;
+  box-shadow: inset 0 0 0 6px #808080 !important;
 }
 .ui.purple.labels .label,
 .ui.ui.ui.purple.label {
-background-color: #8250df!important;
+  background-color: #8250df !important;
 }
 .repository #clone-panel input {
-background-color: #f6f8fa
+  background-color: #f6f8fa;
 }
 .ui.basic.green.buttons .button,
 .ui.basic.green.button {
-color: var(--color-text)!important;
+  color: var(--color-text) !important;
 }
 ul.repo-owner-name-list {
-font-size: 13px;
+  font-size: 13px;
+}
+a.ui.label {
+  color: #fff !important;
+}
+.ui .sha.label {
+  color: var(--color-text) !important;
+  padding: 6px 10px 6px;
+}
+.ui.basic.green.buttons .button,
+.ui.basic.green.button {
+  color: #2da44e !important;
+}
+.ui.basic.labels .label,
+.ui.basic.label {
+  color: var(--color-text) !important;
+}
+
+.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon, .repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, .repository #rev-list .sha.label.isSigned.isVerified .detail.icon, .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon {
+  border-left: 1px solid #2da44e;
+  color: #2da44e;
+}
+
+.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified {
+  border: 1px solid #2da44e;
+}
+
+.ui.labeled.icon.buttons>.button>.icon, .ui.labeled.icon.button>.icon {
+  border-right: 1px solid var(--color-secondary);
+}
+
+.ui.buttons:not(.basic):not(.inverted)>.button:not(.basic):not(.inverted) {
+  border-left: 1px solid var(--color-secondary);
 }