Dark mode fixes (#7)
I found that my last PR #6 did not address all issues with the dark theme on GItea 1.21, as there were still some unstyled (bright) elements and conflicts with obsolete styling rules. Changes: - Corrections on issue and pull request pages: status labels, buttons, timeline items and sidebar spacing - Highlighting colors in the diff view and code view - Message box colors - Modal colors - Minor corrections of various elements Let me know if you find any other issues. Reviewed-on: https://codeberg.org/pat-s/gitea-github-theme/pulls/7 Co-authored-by: Neon <1169307+neon-dev@users.noreply.github.com> Co-committed-by: Neon <1169307+neon-dev@users.noreply.github.com>
This commit is contained in:
Neon
Patrick Schratz
parent
974d4e3304
commit
3bb00e9c8a
@ -441,11 +441,14 @@
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--is-dark-theme: true;
|
||||
--border-radius: 6px;
|
||||
--color-white: #e6edf3;
|
||||
--color-red: #da3633;
|
||||
--color-orange: #c9510c;
|
||||
--color-yellow: #d29922;
|
||||
--color-blue: #4493f8;
|
||||
--color-purple: #8957e5;
|
||||
--color-green: #238636;
|
||||
--color-green-light: #16ab39;
|
||||
--color-primary: var(--color-green);
|
||||
@ -455,20 +458,23 @@
|
||||
--color-primary-light-2: #006d32;
|
||||
--color-primary-dark-2: #26a641;
|
||||
--color-primary-dark-4: #39d353;
|
||||
--color-primary-contrast: #ffffff;
|
||||
--color-secondary: #30363d;
|
||||
--color-secondary-alpha-60: #161b22;
|
||||
--color-secondary-alpha-40: rgba(48, 54, 61, 0.4);
|
||||
--color-secondary-bg: #30363d;
|
||||
--border-radius: 6px;
|
||||
--color-light-border: var(--color-secondary);
|
||||
--color-body: #0d1117;
|
||||
--color-card: var(--color-body);
|
||||
--color-navbar: #010409;
|
||||
--color-footer: #161b22;
|
||||
--color-text: #bbc0ca;
|
||||
--color-text-dark: #bbc0ca;
|
||||
--color-text-light: #a6aab5;
|
||||
--color-text-light-1: #848d97;
|
||||
--color-text-light-2: #adbac7;
|
||||
--color-text-light-2: #a6aab5;
|
||||
--color-timeline: #21262d;
|
||||
--color-grey-light: var(--color-text-light);
|
||||
--color-text: #bbc0ca;
|
||||
--color-box-body: #22272e;
|
||||
--color-markup-code-block: #636e7b66;
|
||||
--color-light: #22272e;
|
||||
@ -479,12 +485,9 @@
|
||||
--color-input-text: #adbac7;
|
||||
--color-box-header: #22272e;
|
||||
--color-active: #22272e;
|
||||
--color-active-line: #272114;
|
||||
--color-menu: #161b22;
|
||||
--color-caret: var(--color-text);
|
||||
--is-dark-theme: true;
|
||||
--color-input-background: #22272e;
|
||||
--color-primary-contrast: #ffffff;
|
||||
--color-text-light-2: #a6aab5;
|
||||
--color-box-body: var(--color-body);
|
||||
--color-box-header: #161b22;
|
||||
--color-nav-bg: #010409;
|
||||
@ -500,6 +503,12 @@
|
||||
--color-success-bg: #122117;
|
||||
--color-success-border: #2ea04366;
|
||||
--color-success-text: var(--color-green);
|
||||
--color-info-bg: rgba(56, 139, 253, 0.1);
|
||||
--color-info-border: rgba(56, 139, 253, 0.4);
|
||||
--color-info-text: var(--color-blue);
|
||||
--color-warning-bg: rgba(187, 128, 9, 0.1);
|
||||
--color-warning-border: rgba(187, 128, 9, 0.4);
|
||||
--color-warning-text: var(--color-yellow);
|
||||
|
||||
/* code editor colors are set in https://github.com/go-gitea/gitea/blob/f5b300ea77081a1b78ac044cb1c0f9225538d091/web_src/js/features/codeeditor.js#L82-L97. */
|
||||
/* monaco editor dark theme is toggled via variable `--is-dark-theme` */
|
||||
@ -508,18 +517,35 @@
|
||||
--color-code-bg: var(--color-body);
|
||||
|
||||
--color-diff-removed-row-bg: rgba(248, 81, 73, 0.15);
|
||||
--color-diff-removed-row-border: rgba(248, 81, 73, 0.3);
|
||||
--color-diff-removed-word-bg: rgba(248, 81, 73, 0.4);
|
||||
--color-diff-added-row-bg: rgba(46, 160, 67, 0.15);
|
||||
--color-diff-added-row-border: rgba(46, 160, 67, 0.3);
|
||||
--color-diff-added-word-bg: rgba(46, 160, 67, 0.4);
|
||||
--color-diff-inactive: var(--color-secondary-alpha-60);
|
||||
}
|
||||
|
||||
.text.primary,
|
||||
.flex-item a:not(.label, .button):hover,
|
||||
.combo-markdown-editor .markdown-toolbar-button:hover {
|
||||
.flex-item a:not(.label, .button):hover {
|
||||
color: var(--color-blue) !important;
|
||||
}
|
||||
.text.primary.svg {
|
||||
color: var(--color-text) !important;
|
||||
|
||||
.svg:not(.text) {
|
||||
fill: var(--color-text-light-1);
|
||||
}
|
||||
.label > .svg,
|
||||
.btn > .svg,
|
||||
.button > .svg,
|
||||
.badge.gt-text-white > .svg,
|
||||
.card > .svg,
|
||||
a:not(.item):hover > .svg,
|
||||
.dropdown:hover .svg,
|
||||
.ui.attached.menu:not(.new-menu) .item .svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
.markdown-toolbar-button:hover {
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.page-content.dashboard,
|
||||
@ -555,18 +581,8 @@
|
||||
color: #636e7b;
|
||||
}
|
||||
|
||||
.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;
|
||||
background: var(--color-body) !important;
|
||||
}
|
||||
|
||||
.ui.green.buttons .button,
|
||||
@ -588,18 +604,22 @@
|
||||
a.muted:hover,
|
||||
.ui.breadcrumb a:hover,
|
||||
.ui.floating.jump.select-label.dropdown:hover,
|
||||
.ui.floating.jump.select-milestone.dropdown:hover,
|
||||
.ui.floating.jump.select-project.dropdown:hover,
|
||||
.ui.floating.jump.select-assignees.dropdown:hover,
|
||||
.muted-links a:hover {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
a.text:hover,
|
||||
a.text:not(.primary):hover,
|
||||
a.muted.text:hover,
|
||||
.ui.breadcrumb a.text:hover,
|
||||
.muted-links a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.flex-item .flex-item-title a,
|
||||
.repo-title a {
|
||||
color: var(--color-white) !important;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.repo-icon {
|
||||
@ -624,30 +644,14 @@
|
||||
.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: #cdd9e5 !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;
|
||||
background-color: var(--color-button);
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.basic.red.buttons .button,
|
||||
@ -680,16 +684,20 @@
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.issue-state-label {
|
||||
border-radius: 2em !important;
|
||||
}
|
||||
|
||||
.issue-content-right {
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
padding: 8px 0 0 8px !important;
|
||||
}
|
||||
|
||||
.issue-content-right .ui.button,
|
||||
.issue-content-right .ui.input,
|
||||
.issue-content-right .ui.input input,
|
||||
.issue-content-right .ui.dropdown,
|
||||
.issue-content-right .ui.dropdown input,
|
||||
.issue-content-right .ui.search.selection.dropdown,
|
||||
.issue-content-right .ui.search.selection.dropdown > input.search {
|
||||
padding: 0 8px !important;
|
||||
min-height: 28px;
|
||||
@ -699,14 +707,10 @@
|
||||
margin-top: .5rem !important;
|
||||
}
|
||||
|
||||
.ui.menu .item {
|
||||
background-color: #22272e;
|
||||
}
|
||||
|
||||
.ui.top.attached.header {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
.ui.top.attached.header + .ui.attached.segment:not(.grid):not(.repos-search) {
|
||||
.ui.top.attached.header + .ui.attached.segment:not(.grid):not(.repos-search):not(.teams) {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
@ -718,43 +722,19 @@
|
||||
background-color: var(--color-body);
|
||||
}
|
||||
|
||||
.markup h1,
|
||||
.markup h2,
|
||||
.markup h3,
|
||||
.markup h4,
|
||||
.markup h5,
|
||||
.markup h6 {
|
||||
color: #adbac7;
|
||||
}
|
||||
|
||||
.markup,
|
||||
.markup code,
|
||||
.markup tt {
|
||||
color: #adbac7;
|
||||
}
|
||||
|
||||
.markup p,
|
||||
.markup blockquote,
|
||||
.markup details,
|
||||
.markup ul,
|
||||
.markup ol,
|
||||
.markup dl,
|
||||
.markup table,
|
||||
.markup pre {
|
||||
color: #adbac7;
|
||||
.markup tt,
|
||||
#org-info a,
|
||||
.repo-description,
|
||||
.repository-menu .item {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.repo-list-link {
|
||||
color: var(--color-blue) !important;
|
||||
}
|
||||
|
||||
#org-info a {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.repo-description {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.ui.label:not(.basic) {
|
||||
border-radius: 2em;
|
||||
}
|
||||
@ -804,6 +784,7 @@
|
||||
.ui.menu,
|
||||
.ui.segment,
|
||||
.ui.segments,
|
||||
.ui.segments:not(.horizontal) > .segment:only-child,
|
||||
.ui.secondary.menu .dropdown.item>.menu,
|
||||
.ui.selection.dropdown,
|
||||
.ui.selection.dropdown .menu,
|
||||
@ -840,18 +821,24 @@
|
||||
}
|
||||
|
||||
/* default top border radius */
|
||||
.repository.view.issue .comment-list .comment>.content>div:first-child,
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.secondary.pointing.menu .active.item,
|
||||
.ui.secondary.pointing.menu .item:hover {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
.ui.tabular.menu .active.item,
|
||||
.repository.view.issue .comment-list .comment > .content > div:first-child {
|
||||
border-top-left-radius: var(--border-radius) !important;
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
/* default bottom border radius */
|
||||
.repository.view.issue .comment-list .comment>.content>div:last-child,
|
||||
.ui.segment[class*="bottom attached"] {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
.repository.view.issue .comment-list .comment > .content > div:last-child {
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.table>thead>tr:first-child>th:first-child {
|
||||
border-radius: var(--border-radius) 0 0;
|
||||
@ -1004,8 +991,14 @@
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.ui.container .ui.tabular.menu .active.item,
|
||||
.ui.container .ui.tabular.menu .active.item:hover {
|
||||
color: var(--color-white);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.header-wrapper .ui.tabular.menu,
|
||||
.ui.secondary.menu {
|
||||
.ui.secondary.menu:not(.filter) {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.header-wrapper .ui.tabular.menu {
|
||||
@ -1016,8 +1009,7 @@
|
||||
.page-content > .ui.menu .item {
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
.ui.menu .item .svg {
|
||||
fill: var(--color-text-light-1);
|
||||
.page-content .ui.menu .item .svg {
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
.header-wrapper .ui.tabular.menu:not(.new-menu) .item,
|
||||
@ -1084,35 +1076,13 @@
|
||||
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;
|
||||
}
|
||||
|
||||
/* background emoji reactions */
|
||||
.repository .segment.reactions .ui.label.basic.blue {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ui.positive.message:not(.flash-success) {
|
||||
background-color: #22272e;
|
||||
color: #cdd9e5;
|
||||
}
|
||||
|
||||
.ui.positive.message,
|
||||
.ui.attached.positive.message {
|
||||
box-shadow: 0 0 0 1px #347d39 inset, 0 0 #0000;
|
||||
.diff-toggle-file-tree-button:hover {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
.diff-file-body .file-body.code-diff table tbody tr td {
|
||||
@ -1123,12 +1093,6 @@
|
||||
background: var(--color-body);
|
||||
}
|
||||
|
||||
/* PR open label */
|
||||
.ui.green.labels .label,
|
||||
.ui.ui.ui.green.label {
|
||||
background-color: #347d39;
|
||||
}
|
||||
|
||||
.comment-code-cloud {
|
||||
background-color: var(--color-navbar);
|
||||
}
|
||||
@ -1202,35 +1166,21 @@
|
||||
border-bottom: 0px solid #a3c293;
|
||||
}
|
||||
|
||||
/* info message banner colors */
|
||||
.ui.info.message {
|
||||
background-color: var(--color-navbar);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* PR timelines colors */
|
||||
.repository.view.issue .comment-list .timeline-item .badge {
|
||||
background-color: #21262d;
|
||||
color: var(--color-text);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: -31px;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline-item .badge.badge-commit {
|
||||
border-color: var(--color-navbar);
|
||||
background: var(--color-navbar);
|
||||
.repository.view.issue .pull-desc code {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline:before {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline-item .badge .svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 3px;
|
||||
fill: var(--color-text-light-1);
|
||||
.repository.view.issue .pull-desc code a {
|
||||
background-color: var(--color-label-bg);
|
||||
padding: 0 4px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.top.attached.header.comment-header {
|
||||
@ -1238,19 +1188,19 @@
|
||||
}
|
||||
|
||||
.comment:target .header:before {
|
||||
border-right-color: rgba(56, 139, 253, 0.4) !important;
|
||||
border-right-color: var(--color-info-border) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.comment:target .comment-container {
|
||||
border-color: rgba(56, 139, 253, 0.4) !important;
|
||||
border-color: var(--color-info-border) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.comment:target .comment-container {
|
||||
background: var(--color-body);
|
||||
}
|
||||
.comment:target .comment-container .comment-header {
|
||||
background: rgba(56, 139, 253, 0.1);
|
||||
border-bottom-color: rgba(56, 139, 253, 0.4) !important;
|
||||
background: var(--color-info-bg);
|
||||
border-bottom-color: var(--color-info-border) !important;
|
||||
}
|
||||
|
||||
/* review - pending label */
|
||||
@ -1269,24 +1219,6 @@
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
span.green .svg {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* highlight color bg for highlighted lines */
|
||||
.lines-code.active,
|
||||
.lines-code .active {
|
||||
border-radius: 6px;
|
||||
background: #000000 !important;
|
||||
}
|
||||
|
||||
.ui.ui.ui.ui.table tr.active,
|
||||
.ui.ui.table td.active {
|
||||
box-shadow: 0 0 #000000de inset;
|
||||
background: #e0e0e0;
|
||||
color: --var(--color-text);
|
||||
}
|
||||
|
||||
.following.bar #navbar {
|
||||
width: 100vw;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
@ -1367,24 +1299,6 @@
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.ui.green.labels .label,
|
||||
.ui.ui.ui.green.label {
|
||||
padding: 2px 5px;
|
||||
line-height: 20px;
|
||||
color: #cdd9e5 !important;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
/* repository icon for files and directories */
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-symlink,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .item > .circular.label {
|
||||
line-height: 10px;
|
||||
}
|
||||
@ -1401,12 +1315,6 @@
|
||||
|
||||
/* borders -------------------------------------------------------------------*/
|
||||
|
||||
// border width of active item in repo view
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.tabular.menu .active.item:hover {
|
||||
border-width: initial;
|
||||
}
|
||||
|
||||
.following.bar.light {
|
||||
border-bottom: 0px solid var(--color-secondary);
|
||||
}
|
||||
@ -1415,10 +1323,6 @@
|
||||
border-width: inherit;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-width: inherit;
|
||||
}
|
||||
|
||||
.repo-buttons .ui.labeled.button > .label {
|
||||
border-width: inherit;
|
||||
border: 1px solid var(--color-secondary) !important;
|
||||
@ -1445,12 +1349,6 @@
|
||||
border-top-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.basic.primary.button,
|
||||
.ui.basic.primary.buttons .button {
|
||||
color: #adbac7 !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.ui.labeled.button.disabled>.button,
|
||||
.ui.basic.buttons .button,
|
||||
.ui.basic.button,
|
||||
@ -1523,8 +1421,9 @@
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
|
||||
// list in Pull requests view
|
||||
.issue.list > .item .desc {
|
||||
color: var(--color-text);
|
||||
.vch__day__square,
|
||||
.vch__legend__wrapper rect {
|
||||
rx: 2px;
|
||||
ry: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
:root {
|
||||
--is-dark-theme: true;
|
||||
--border-radius: 6px;
|
||||
--color-white: #e6edf3;
|
||||
--color-red: #da3633;
|
||||
--color-orange: #c9510c;
|
||||
--color-yellow: #d29922;
|
||||
--color-blue: #4493f8;
|
||||
--color-purple: #8957e5;
|
||||
--color-green: #238636;
|
||||
--color-green-light: #16ab39;
|
||||
--color-primary: var(--color-green);
|
||||
@ -13,20 +16,23 @@
|
||||
--color-primary-light-2: #006d32;
|
||||
--color-primary-dark-2: #26a641;
|
||||
--color-primary-dark-4: #39d353;
|
||||
--color-primary-contrast: #ffffff;
|
||||
--color-secondary: #30363d;
|
||||
--color-secondary-alpha-60: #161b22;
|
||||
--color-secondary-alpha-40: rgba(48, 54, 61, 0.4);
|
||||
--color-secondary-bg: #30363d;
|
||||
--border-radius: 6px;
|
||||
--color-light-border: var(--color-secondary);
|
||||
--color-body: #0d1117;
|
||||
--color-card: var(--color-body);
|
||||
--color-navbar: #010409;
|
||||
--color-footer: #161b22;
|
||||
--color-text: #bbc0ca;
|
||||
--color-text-dark: #bbc0ca;
|
||||
--color-text-light: #a6aab5;
|
||||
--color-text-light-1: #848d97;
|
||||
--color-text-light-2: #adbac7;
|
||||
--color-text-light-2: #a6aab5;
|
||||
--color-timeline: #21262d;
|
||||
--color-grey-light: var(--color-text-light);
|
||||
--color-text: #bbc0ca;
|
||||
--color-box-body: #22272e;
|
||||
--color-markup-code-block: #636e7b66;
|
||||
--color-light: #22272e;
|
||||
@ -37,12 +43,9 @@
|
||||
--color-input-text: #adbac7;
|
||||
--color-box-header: #22272e;
|
||||
--color-active: #22272e;
|
||||
--color-active-line: #272114;
|
||||
--color-menu: #161b22;
|
||||
--color-caret: var(--color-text);
|
||||
--is-dark-theme: true;
|
||||
--color-input-background: #22272e;
|
||||
--color-primary-contrast: #ffffff;
|
||||
--color-text-light-2: #a6aab5;
|
||||
--color-box-body: var(--color-body);
|
||||
--color-box-header: #161b22;
|
||||
--color-nav-bg: #010409;
|
||||
@ -58,6 +61,12 @@
|
||||
--color-success-bg: #122117;
|
||||
--color-success-border: #2ea04366;
|
||||
--color-success-text: var(--color-green);
|
||||
--color-info-bg: rgba(56, 139, 253, 0.1);
|
||||
--color-info-border: rgba(56, 139, 253, 0.4);
|
||||
--color-info-text: var(--color-blue);
|
||||
--color-warning-bg: rgba(187, 128, 9, 0.1);
|
||||
--color-warning-border: rgba(187, 128, 9, 0.4);
|
||||
--color-warning-text: var(--color-yellow);
|
||||
|
||||
/* code editor colors are set in https://github.com/go-gitea/gitea/blob/f5b300ea77081a1b78ac044cb1c0f9225538d091/web_src/js/features/codeeditor.js#L82-L97. */
|
||||
/* monaco editor dark theme is toggled via variable `--is-dark-theme` */
|
||||
@ -66,18 +75,35 @@
|
||||
--color-code-bg: var(--color-body);
|
||||
|
||||
--color-diff-removed-row-bg: rgba(248, 81, 73, 0.15);
|
||||
--color-diff-removed-row-border: rgba(248, 81, 73, 0.3);
|
||||
--color-diff-removed-word-bg: rgba(248, 81, 73, 0.4);
|
||||
--color-diff-added-row-bg: rgba(46, 160, 67, 0.15);
|
||||
--color-diff-added-row-border: rgba(46, 160, 67, 0.3);
|
||||
--color-diff-added-word-bg: rgba(46, 160, 67, 0.4);
|
||||
--color-diff-inactive: var(--color-secondary-alpha-60);
|
||||
}
|
||||
|
||||
.text.primary,
|
||||
.flex-item a:not(.label, .button):hover,
|
||||
.combo-markdown-editor .markdown-toolbar-button:hover {
|
||||
.flex-item a:not(.label, .button):hover {
|
||||
color: var(--color-blue) !important;
|
||||
}
|
||||
.text.primary.svg {
|
||||
color: var(--color-text) !important;
|
||||
|
||||
.svg:not(.text) {
|
||||
fill: var(--color-text-light-1);
|
||||
}
|
||||
.label > .svg,
|
||||
.btn > .svg,
|
||||
.button > .svg,
|
||||
.badge.gt-text-white > .svg,
|
||||
.card > .svg,
|
||||
a:not(.item):hover > .svg,
|
||||
.dropdown:hover .svg,
|
||||
.ui.attached.menu:not(.new-menu) .item .svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
.markdown-toolbar-button:hover {
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.page-content.dashboard,
|
||||
@ -113,18 +139,8 @@
|
||||
color: #636e7b;
|
||||
}
|
||||
|
||||
.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;
|
||||
background: var(--color-body) !important;
|
||||
}
|
||||
|
||||
.ui.green.buttons .button,
|
||||
@ -146,18 +162,22 @@ a:hover,
|
||||
a.muted:hover,
|
||||
.ui.breadcrumb a:hover,
|
||||
.ui.floating.jump.select-label.dropdown:hover,
|
||||
.ui.floating.jump.select-milestone.dropdown:hover,
|
||||
.ui.floating.jump.select-project.dropdown:hover,
|
||||
.ui.floating.jump.select-assignees.dropdown:hover,
|
||||
.muted-links a:hover {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
a.text:hover,
|
||||
a.text:not(.primary):hover,
|
||||
a.muted.text:hover,
|
||||
.ui.breadcrumb a.text:hover,
|
||||
.muted-links a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.flex-item .flex-item-title a,
|
||||
.repo-title a {
|
||||
color: var(--color-white) !important;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.repo-icon {
|
||||
@ -182,30 +202,14 @@ a.muted.text:hover,
|
||||
.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: #cdd9e5 !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;
|
||||
background-color: var(--color-button);
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.basic.red.buttons .button,
|
||||
@ -238,16 +242,20 @@ a.muted.text:hover,
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.issue-state-label {
|
||||
border-radius: 2em !important;
|
||||
}
|
||||
|
||||
.issue-content-right {
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
padding: 8px 0 0 8px !important;
|
||||
}
|
||||
|
||||
.issue-content-right .ui.button,
|
||||
.issue-content-right .ui.input,
|
||||
.issue-content-right .ui.input input,
|
||||
.issue-content-right .ui.dropdown,
|
||||
.issue-content-right .ui.dropdown input,
|
||||
.issue-content-right .ui.search.selection.dropdown,
|
||||
.issue-content-right .ui.search.selection.dropdown > input.search {
|
||||
padding: 0 8px !important;
|
||||
min-height: 28px;
|
||||
@ -257,14 +265,10 @@ a.muted.text:hover,
|
||||
margin-top: .5rem !important;
|
||||
}
|
||||
|
||||
.ui.menu .item {
|
||||
background-color: #22272e;
|
||||
}
|
||||
|
||||
.ui.top.attached.header {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
.ui.top.attached.header + .ui.attached.segment:not(.grid):not(.repos-search) {
|
||||
.ui.top.attached.header + .ui.attached.segment:not(.grid):not(.repos-search):not(.teams) {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
@ -276,43 +280,19 @@ a.muted.text:hover,
|
||||
background-color: var(--color-body);
|
||||
}
|
||||
|
||||
.markup h1,
|
||||
.markup h2,
|
||||
.markup h3,
|
||||
.markup h4,
|
||||
.markup h5,
|
||||
.markup h6 {
|
||||
color: #adbac7;
|
||||
}
|
||||
|
||||
.markup,
|
||||
.markup code,
|
||||
.markup tt {
|
||||
color: #adbac7;
|
||||
}
|
||||
|
||||
.markup p,
|
||||
.markup blockquote,
|
||||
.markup details,
|
||||
.markup ul,
|
||||
.markup ol,
|
||||
.markup dl,
|
||||
.markup table,
|
||||
.markup pre {
|
||||
color: #adbac7;
|
||||
.markup tt,
|
||||
#org-info a,
|
||||
.repo-description,
|
||||
.repository-menu .item {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.repo-list-link {
|
||||
color: var(--color-blue) !important;
|
||||
}
|
||||
|
||||
#org-info a {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.repo-description {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.ui.label:not(.basic) {
|
||||
border-radius: 2em;
|
||||
}
|
||||
@ -362,6 +342,7 @@ a.ui.label:hover {
|
||||
.ui.menu,
|
||||
.ui.segment,
|
||||
.ui.segments,
|
||||
.ui.segments:not(.horizontal) > .segment:only-child,
|
||||
.ui.secondary.menu .dropdown.item>.menu,
|
||||
.ui.selection.dropdown,
|
||||
.ui.selection.dropdown .menu,
|
||||
@ -398,18 +379,24 @@ a.ui.label:hover {
|
||||
}
|
||||
|
||||
/* default top border radius */
|
||||
.repository.view.issue .comment-list .comment>.content>div:first-child,
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.secondary.pointing.menu .active.item,
|
||||
.ui.secondary.pointing.menu .item:hover {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
.ui.tabular.menu .active.item,
|
||||
.repository.view.issue .comment-list .comment > .content > div:first-child {
|
||||
border-top-left-radius: var(--border-radius) !important;
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
/* default bottom border radius */
|
||||
.repository.view.issue .comment-list .comment>.content>div:last-child,
|
||||
.ui.segment[class*="bottom attached"] {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
.repository.view.issue .comment-list .comment > .content > div:last-child {
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.table>thead>tr:first-child>th:first-child {
|
||||
border-radius: var(--border-radius) 0 0;
|
||||
@ -562,8 +549,14 @@ textarea,
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.ui.container .ui.tabular.menu .active.item,
|
||||
.ui.container .ui.tabular.menu .active.item:hover {
|
||||
color: var(--color-white);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.header-wrapper .ui.tabular.menu,
|
||||
.ui.secondary.menu {
|
||||
.ui.secondary.menu:not(.filter) {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.header-wrapper .ui.tabular.menu {
|
||||
@ -574,8 +567,7 @@ textarea,
|
||||
.page-content > .ui.menu .item {
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
.ui.menu .item .svg {
|
||||
fill: var(--color-text-light-1);
|
||||
.page-content .ui.menu .item .svg {
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
.header-wrapper .ui.tabular.menu:not(.new-menu) .item,
|
||||
@ -642,35 +634,13 @@ textarea,
|
||||
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;
|
||||
}
|
||||
|
||||
/* background emoji reactions */
|
||||
.repository .segment.reactions .ui.label.basic.blue {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ui.positive.message:not(.flash-success) {
|
||||
background-color: #22272e;
|
||||
color: #cdd9e5;
|
||||
}
|
||||
|
||||
.ui.positive.message,
|
||||
.ui.attached.positive.message {
|
||||
box-shadow: 0 0 0 1px #347d39 inset, 0 0 #0000;
|
||||
.diff-toggle-file-tree-button:hover {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
.diff-file-body .file-body.code-diff table tbody tr td {
|
||||
@ -681,12 +651,6 @@ a.blob-excerpt {
|
||||
background: var(--color-body);
|
||||
}
|
||||
|
||||
/* PR open label */
|
||||
.ui.green.labels .label,
|
||||
.ui.ui.ui.green.label {
|
||||
background-color: #347d39;
|
||||
}
|
||||
|
||||
.comment-code-cloud {
|
||||
background-color: var(--color-navbar);
|
||||
}
|
||||
@ -760,35 +724,21 @@ a.ui.card:hover {
|
||||
border-bottom: 0px solid #a3c293;
|
||||
}
|
||||
|
||||
/* info message banner colors */
|
||||
.ui.info.message {
|
||||
background-color: var(--color-navbar);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* PR timelines colors */
|
||||
.repository.view.issue .comment-list .timeline-item .badge {
|
||||
background-color: #21262d;
|
||||
color: var(--color-text);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: -31px;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline-item .badge.badge-commit {
|
||||
border-color: var(--color-navbar);
|
||||
background: var(--color-navbar);
|
||||
.repository.view.issue .pull-desc code {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline:before {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline-item .badge .svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 3px;
|
||||
fill: var(--color-text-light-1);
|
||||
.repository.view.issue .pull-desc code a {
|
||||
background-color: var(--color-label-bg);
|
||||
padding: 0 4px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.top.attached.header.comment-header {
|
||||
@ -796,19 +746,19 @@ a.ui.card:hover {
|
||||
}
|
||||
|
||||
.comment:target .header:before {
|
||||
border-right-color: rgba(56, 139, 253, 0.4) !important;
|
||||
border-right-color: var(--color-info-border) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.comment:target .comment-container {
|
||||
border-color: rgba(56, 139, 253, 0.4) !important;
|
||||
border-color: var(--color-info-border) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.comment:target .comment-container {
|
||||
background: var(--color-body);
|
||||
}
|
||||
.comment:target .comment-container .comment-header {
|
||||
background: rgba(56, 139, 253, 0.1);
|
||||
border-bottom-color: rgba(56, 139, 253, 0.4) !important;
|
||||
background: var(--color-info-bg);
|
||||
border-bottom-color: var(--color-info-border) !important;
|
||||
}
|
||||
|
||||
/* review - pending label */
|
||||
@ -827,24 +777,6 @@ i.green.icon.icon.icon.icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
span.green .svg {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* highlight color bg for highlighted lines */
|
||||
.lines-code.active,
|
||||
.lines-code .active {
|
||||
border-radius: 6px;
|
||||
background: #000000 !important;
|
||||
}
|
||||
|
||||
.ui.ui.ui.ui.table tr.active,
|
||||
.ui.ui.table td.active {
|
||||
box-shadow: 0 0 #000000de inset;
|
||||
background: #e0e0e0;
|
||||
color: --var(--color-text);
|
||||
}
|
||||
|
||||
.following.bar #navbar {
|
||||
width: 100vw;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
@ -925,24 +857,6 @@ textarea:focus,
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.ui.green.labels .label,
|
||||
.ui.ui.ui.green.label {
|
||||
padding: 2px 5px;
|
||||
line-height: 20px;
|
||||
color: #cdd9e5 !important;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
/* repository icon for files and directories */
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-symlink,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory,
|
||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .item > .circular.label {
|
||||
line-height: 10px;
|
||||
}
|
||||
@ -959,12 +873,6 @@ textarea:focus,
|
||||
|
||||
/* borders -------------------------------------------------------------------*/
|
||||
|
||||
// border width of active item in repo view
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.tabular.menu .active.item:hover {
|
||||
border-width: initial;
|
||||
}
|
||||
|
||||
.following.bar.light {
|
||||
border-bottom: 0px solid var(--color-secondary);
|
||||
}
|
||||
@ -973,10 +881,6 @@ textarea:focus,
|
||||
border-width: inherit;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-width: inherit;
|
||||
}
|
||||
|
||||
.repo-buttons .ui.labeled.button > .label {
|
||||
border-width: inherit;
|
||||
border: 1px solid var(--color-secondary) !important;
|
||||
@ -1003,12 +907,6 @@ footer {
|
||||
border-top-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.basic.primary.button,
|
||||
.ui.basic.primary.buttons .button {
|
||||
color: #adbac7 !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.ui.labeled.button.disabled>.button,
|
||||
.ui.basic.buttons .button,
|
||||
.ui.basic.button,
|
||||
@ -1081,7 +979,8 @@ background: var(--color-hover);
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
|
||||
// list in Pull requests view
|
||||
.issue.list > .item .desc {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.vch__day__square,
|
||||
.vch__legend__wrapper rect {
|
||||
rx: 2px;
|
||||
ry: 2px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user