From 4617bb689b217ae039297ec16124e73b81487b15 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 1 Nov 2020 21:04:26 +0100 Subject: [PATCH] Misc UI fixes, add secondary color (#13378) * Misc UI fixes, add secondary color - Add secondary color, primarily used in arc-green currently - Convert icons on release page to SVG - Improve resolved conversation placeholder - Diff fixes on arc-green - Misc color tweaks * fix comment header, adjust arc-green dropzone * label margin, sidebar margin * flexbox commits table and add primary button styles * tooltip styles * file header fixes Co-authored-by: Lauris BH Co-authored-by: zeripath --- templates/repo/blame.tmpl | 22 +- templates/repo/branch/list.tmpl | 2 +- templates/repo/commits_table.tmpl | 54 +++-- templates/repo/diff/box.tmpl | 12 +- templates/repo/diff/comment_form.tmpl | 4 +- templates/repo/diff/comments.tmpl | 2 +- templates/repo/diff/section_unified.tmpl | 6 +- .../repo/issue/view_content/comments.tmpl | 6 +- .../repo/issue/view_content/sidebar.tmpl | 4 +- templates/repo/release/list.tmpl | 10 +- templates/repo/view_file.tmpl | 46 ++-- web_src/less/_admin.less | 2 +- web_src/less/_base.less | 46 +++- web_src/less/_editor.less | 4 +- web_src/less/_repository.less | 89 ++++--- web_src/less/_review.less | 6 +- web_src/less/themes/theme-arc-green.less | 219 ++++++++++-------- 17 files changed, 300 insertions(+), 234 deletions(-) diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl index 86c0695cb..5d9a17101 100644 --- a/templates/repo/blame.tmpl +++ b/templates/repo/blame.tmpl @@ -1,6 +1,6 @@
-

-
+

+
{{.NumLines}} {{.i18n.Tr (TrN .i18n.Lang .NumLines "repo.line" "repo.lines") }} @@ -8,16 +8,14 @@
{{FileSize .FileSize}}
-
-
-
- {{.i18n.Tr "repo.file_raw"}} - {{if not .IsViewCommit}} - {{.i18n.Tr "repo.file_permalink"}} - {{end}} - {{.i18n.Tr "repo.normal_view"}} - {{.i18n.Tr "repo.file_history"}} -
+
+
+ {{.i18n.Tr "repo.file_raw"}} + {{if not .IsViewCommit}} + {{.i18n.Tr "repo.file_permalink"}} + {{end}} + {{.i18n.Tr "repo.normal_view"}} + {{.i18n.Tr "repo.file_history"}}

diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl index 58cbe10ca..90b3b53d9 100644 --- a/templates/repo/branch/list.tmpl +++ b/templates/repo/branch/list.tmpl @@ -56,7 +56,7 @@ {{svg "octicon-shield-lock"}} {{end}} {{.Name}} -

{{svg "octicon-git-commit"}}{{ShortSha .Commit.ID.String}} · {{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}} · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}

+

{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Commit.ID.String}} · {{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}} · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}

{{end}} diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl index 2ff8d5b4d..89355f065 100644 --- a/templates/repo/commits_table.tmpl +++ b/templates/repo/commits_table.tmpl @@ -1,31 +1,29 @@ -

-
-
- {{if or .PageIsCommits (gt .CommitCount 0)}} - {{.CommitCount}} {{.i18n.Tr "repo.commits.commits"}} {{if .Branch}}({{.Branch}}){{end}} - {{else}} - {{.i18n.Tr "repo.commits.no_commits" $.BaseBranch $.HeadBranch }} {{if .Branch}}({{.Branch}}){{end}} - {{end}} -
-
- {{if .PageIsCommits}} -
-
- -
-   -
- - -
- -
- {{else if .IsDiffCompare}} - {{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}} - ... - {{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}} - {{end}} -
+

+
+ {{if or .PageIsCommits (gt .CommitCount 0)}} + {{.CommitCount}} {{.i18n.Tr "repo.commits.commits"}} {{if .Branch}}({{.Branch}}){{end}} + {{else}} + {{.i18n.Tr "repo.commits.no_commits" $.BaseBranch $.HeadBranch }} {{if .Branch}}({{.Branch}}){{end}} + {{end}} +
+
+ {{if .PageIsCommits}} +
+
+ +
+   +
+ + +
+ +
+ {{else if .IsDiffCompare}} + {{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}} + ... + {{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}} + {{end}}

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index f30b81cb9..c2a7ade64 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -173,13 +173,13 @@ {{if and $resolved (eq $line.GetCommentSide "previous")}} -
+
{{$resolveDoer.Name}} {{$.i18n.Tr "repo.issues.review.resolved_by"}} - - @@ -207,15 +207,15 @@ - + {{if and $resolved (eq $line.GetCommentSide "proposed")}}
{{$resolveDoer.Name}} {{$.i18n.Tr "repo.issues.review.resolved_by"}} - - diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl index 6d1d3861a..33626f31d 100644 --- a/templates/repo/diff/comment_form.tmpl +++ b/templates/repo/diff/comment_form.tmpl @@ -1,6 +1,8 @@ {{if and $.root.SignedUserID (not $.Repository.IsArchived)}} {{if $.hidden}} - + {{end}}
{{$.root.CsrfTokenHtml}} diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl index 4785f3a51..cf4bd64cf 100644 --- a/templates/repo/diff/comments.tmpl +++ b/templates/repo/diff/comments.tmpl @@ -27,7 +27,7 @@ {{else}} - + {{.Poster.GetDisplayName}} {{$.root.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}} diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl index 1a461c7ad..3b24cd453 100644 --- a/templates/repo/diff/section_unified.tmpl +++ b/templates/repo/diff/section_unified.tmpl @@ -40,13 +40,13 @@ {{if $resolved}} -
+
{{$resolveDoer.Name}} {{$.root.i18n.Tr "repo.issues.review.resolved_by"}} - - diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 9699371e0..4ea6bd7cc 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -19,15 +19,15 @@ {{end}}
-
-
+
+
{{if .OriginalAuthor }} {{ .OriginalAuthor }} {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}} {{else}} {{.Poster.GetDisplayName}} {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}} {{end}}
-
+
{{if not $.Repository.IsArchived}} {{if eq .PosterID .Issue.PosterID }}
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index e08c47ff5..ed897fa14 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -301,7 +301,7 @@
{{.i18n.Tr "notification.notifications"}} -
+
{{$.CsrfTokenHtml}} @@ -519,7 +519,7 @@
-
{{if .IsTag}}

- {{.TagName}} + {{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}

{{ if gt .Publisher.ID 0 }} @@ -51,7 +51,7 @@

{{if $.Permission.CanRead $.UnitTypeCode}} - {{ShortSha .Sha1}} + {{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}} {{svg "octicon-file-zip"}} ZIP {{svg "octicon-file-zip"}} TAR.GZ {{end}} @@ -64,7 +64,7 @@

{{if .OriginalAuthor}} - + {{svg "octicon-mark-github"}} {{.OriginalAuthor}} {{else if .Publisher}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 2f4fc12e6..a8d60bd96 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -1,5 +1,5 @@

-

+

{{if .ReadmeInList}} {{svg "octicon-book" 16 "mr-3"}} @@ -31,31 +31,29 @@ {{end}}
{{if not .ReadmeInList}} -
-
-
- {{.i18n.Tr "repo.file_raw"}} - {{if not .IsViewCommit}} - {{.i18n.Tr "repo.file_permalink"}} - {{end}} - {{if .IsTextFile}} - {{.i18n.Tr "repo.blame"}} - {{end}} - {{.i18n.Tr "repo.file_history"}} -
- {{if .Repository.CanEnableEditor}} - {{if .CanEditFile}} - {{svg "octicon-pencil"}} - {{else}} - {{svg "octicon-pencil"}} - {{end}} - {{if .CanDeleteFile}} - {{svg "octicon-trashcan"}} - {{else}} - {{svg "octicon-trashcan"}} - {{end}} +
+
+ {{.i18n.Tr "repo.file_raw"}} + {{if not .IsViewCommit}} + {{.i18n.Tr "repo.file_permalink"}} {{end}} + {{if .IsTextFile}} + {{.i18n.Tr "repo.blame"}} + {{end}} + {{.i18n.Tr "repo.file_history"}}
+ {{if .Repository.CanEnableEditor}} + {{if .CanEditFile}} + {{svg "octicon-pencil"}} + {{else}} + {{svg "octicon-pencil"}} + {{end}} + {{if .CanDeleteFile}} + {{svg "octicon-trashcan"}} + {{else}} + {{svg "octicon-trashcan"}} + {{end}} + {{end}}
{{end}}

diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less index 052c29dd6..337fcad66 100644 --- a/web_src/less/_admin.less +++ b/web_src/less/_admin.less @@ -44,7 +44,7 @@ .ui.header, .ui.segment { - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15); + box-shadow: 0 1px 2px 0 var(--color-secondary); } &.user { diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 93b4fa954..9a22e075f 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -30,6 +30,7 @@ --color-primary-alpha-70: #4183c4b3; --color-primary-alpha-80: #4183c4cc; --color-primary-alpha-90: #4183c4e1; + --color-secondary: rgba(34, 36, 38, .15); --color-body: #fff; } @@ -185,9 +186,12 @@ a:hover, word-break: break-all; } -pre, -code, .mono { + font-family: var(--fonts-monospace); +} + +pre, +code { font: 12px var(--fonts-monospace); &.raw { @@ -781,7 +785,7 @@ code, .scrolling.menu.items { border-radius: 0 !important; box-shadow: none !important; - border-bottom: 1px solid rgba(34, 36, 38, .15); + border-bottom: 1px solid var(--color-secondary); } } } @@ -1227,44 +1231,60 @@ i.icon.centerlock { } .ui.blue.button, -.ui.blue.buttons .button { +.ui.blue.buttons .button, +.ui.primary.button, +.ui.primary.buttons .button { background-color: var(--color-primary) !important; } .ui.blue.button:hover, -.ui.blue.buttons .button:hover { +.ui.blue.buttons .button:hover, +.ui.primary.button:hover, +.ui.primary.buttons .button:hover { background-color: var(--color-primary-dark-2) !important; } .ui.blue.button:focus, -.ui.blue.buttons .button:focus { +.ui.blue.buttons .button:focus, +.ui.primary.button:focus, +.ui.primary.buttons .button:focus { background-color: var(--color-primary-dark-3) !important; } .ui.basic.blue.button, -.ui.basic.blue.buttons .button { +.ui.basic.blue.buttons .button, +.ui.basic.primary.button, +.ui.basic.primary.buttons .button { box-shadow: inset 0 0 0 1px var(--color-primary) !important; color: #fff !important; } .ui.basic.blue.button:hover, -.ui.basic.blue.buttons .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 1px var(--color-primary-dark-2) !important; } .ui.basic.blue.button:focus, -.ui.basic.blue.buttons .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 1px var(--color-primary-dark-3) !important; } .ui.blue.label, -.ui.blue.labels .label { +.ui.blue.labels .label, +.ui.primary.label, +.ui.primary.labels .label { background-color: var(--color-primary) !important; border-color: var(--color-primary-dark-2) !important; } .ui.basic.labels .blue.label, -.ui.ui.ui.basic.blue.label { +.ui.ui.ui.basic.blue.label, +.ui.basic.labels .primary.label, +.ui.ui.ui.basic.primary.label { background: transparent; border-color: var(--color-primary); color: var(--color-primary); @@ -1409,6 +1429,10 @@ table th[data-sortt-desc] { padding: 12px; } +.ui.header .ui.label { + margin-left: .25rem; +} + .ui.header > .ui.label.compact { margin-top: inherit; } diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less index 86890475e..e78326716 100644 --- a/web_src/less/_editor.less +++ b/web_src/less/_editor.less @@ -49,8 +49,8 @@ .edit-diff > div > .ui.table { border-top: none !important; border-bottom: none !important; - border-left: 1px solid #d4d4d5 !important; - border-right: 1px solid #d4d4d5 !important; + border-left: 1px solid var(--color-secondary) !important; + border-right: 1px solid var(--color-secondary) !important; } #edit_area { diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 0c4196cd8..9e8df7b37 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -407,9 +407,11 @@ font-size: .5em; } - .file-actions { - margin-bottom: -5px; + .file-info { + font-size: 13px; + } + .file-actions { .btn-octicon { display: inline-block; padding: 5px; @@ -996,33 +998,6 @@ } .content { - > .header { - #avatar-arrow; - font-weight: normal; - padding: .5rem 1rem; - position: relative; - color: #767676; - background-color: #f7f7f7; - display: flex; - justify-content: space-between; - align-items: center; - - &.arrow-top::before, - &.arrow-top::after { - transform: rotate(90deg); - } - - &.arrow-top::before { - top: -9px; - left: 6px; - } - - &.arrow-top::after { - top: -8px; - left: 7px; - } - } - > .merge-section { background-color: #f7f7f7; @@ -1433,7 +1408,7 @@ .bar { height: 4px; position: absolute; - background-color: #d4d4d5; + background-color: var(--color-secondary); &.bar-behind { right: 0; @@ -1603,12 +1578,17 @@ background: #ffffff; line-height: 30px; + @media only screen and (max-width: 992px) { + flex-direction: column; + align-items: flex-start; + } + &.sticky { position: sticky; top: 0; z-index: 8; margin-bottom: 10px; - border-bottom: 1px solid #d4d4d5; + border-bottom: 1px solid var(--color-secondary); padding-left: 2px; padding-right: 2px; } @@ -2729,7 +2709,7 @@ > .header, .segment { - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15); + box-shadow: 0 1px 2px 0 var(--color-secondary); } } @@ -2793,6 +2773,34 @@ } } +.comment-header { + #avatar-arrow; + font-weight: normal !important; + padding: .5rem 1rem !important; + margin: 0 !important; + position: relative; + color: #767676; + background-color: #f7f7f7; + display: flex; + justify-content: space-between; + align-items: center; + + &.arrow-top::before, + &.arrow-top::after { + transform: rotate(90deg); + } + + &.arrow-top::before { + top: -9px; + left: 6px; + } + + &.arrow-top::after { + top: -8px; + left: 7px; + } +} + .comment-header .actions a { margin-right: 0 !important; padding: .5rem !important; @@ -2871,7 +2879,7 @@ } &:before { - border-right-color: #d3d3d4; + border-right-color: var(--color-secondary); border-width: 9px; margin-top: -9px; } @@ -3080,7 +3088,7 @@ tbody.commit-list { .repo-buttons .disabled-repo-button a.button:hover { background: none !important; color: rgba(0, 0, 0, .6) !important; - box-shadow: 0 0 0 1px rgba(34, 36, 38, .15) inset !important; + box-shadow: 0 0 0 1px var(--color-secondary) inset !important; } .repo-buttons .ui.labeled.button > .label { @@ -3099,6 +3107,17 @@ tbody.commit-list { vertical-align: middle; } +.resolved-placeholder { + font-weight: normal !important; + border: 1px solid var(--color-secondary) !important; + border-radius: var(--border-radius) !important; + margin: 4px !important; +} + +.resolved-placeholder + .comment-code-cloud { + padding-top: 0 !important; +} + .board { display: flex; flex-direction: row; @@ -3109,7 +3128,7 @@ tbody.commit-list { .board-column { background-color: rgba(0, 0, 0, .05) !important; - border: 1px solid rgba(34, 36, 38, .15) !important; + border: 1px solid var(--color-secondary) !important; margin: 0 .5rem !important; padding: .5rem !important; width: 320px; diff --git a/web_src/less/_review.less b/web_src/less/_review.less index fb44eaa6e..26036abaf 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -27,7 +27,7 @@ } .add-comment-left.add-comment-right .ui.attached.header { - border: 1px solid #d4d4d5; + border: 1px solid var(--color-secondary); &:not(.top) { margin-bottom: .5em; @@ -89,10 +89,6 @@ margin: .5em; } - .comment-list { - padding-bottom: 5px; - } - .footer { border-top: 1px solid #f1f1f1; padding: 10px 0; diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 9d18dc2d2..04367e2f6 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -23,6 +23,7 @@ --color-primary-alpha-70: #87ab63b3; --color-primary-alpha-80: #87ab63cc; --color-primary-alpha-90: #87ab63e1; + --color-secondary: #454a57; --color-body: #383c4a; } @@ -417,11 +418,15 @@ } .repository .ui.segment.sub-menu .list .item.active { - background: #404552; + background: var(--color-secondary); } -.ui.segments { - border-color: #454b5a; +.repository.branches .commit-divergence .bar { + background: #6a737d; +} + +.repository.branches .commit-divergence .bar-group:last-child { + border-color: #6a737d; } .ui.horizontal.segments > .segment { @@ -440,6 +445,17 @@ body { color: #7f7f7f !important; } +[data-tooltip]::before, +[data-tooltip]::after { + background: #1b1c1d !important; /* .ui.inverted.popup */ + border-color: #1b1c1d !important; /* .ui.inverted.popup */ + color: #dbdbdb !important; +} + +[data-tooltip]::before { + box-shadow: 1px 1px 0 0 #1b1c1d !important; /* .ui.inverted.popup */ +} + .ui.card > .extra a:not(.ui):hover, .ui.cards > .card > .extra a:not(.ui):hover { color: #a0cc75; @@ -470,7 +486,7 @@ body { } .repository .milestone.list > .item { - border-bottom-color: #4c505c; + border-bottom-color: var(--color-secondary); } .repository .milestone.list > .item > a { @@ -482,7 +498,7 @@ body { } .repository.release #release-list { - border-top-color: #4c505c; + border-top-color: var(--color-secondary); } .repository .milestone.list > .item .operate > a { @@ -519,8 +535,8 @@ body { } .ui.attached.header { - background: #404552; - border: 1px solid #404552; + background: var(--color-secondary); + border: 1px solid var(--color-secondary); color: #dbdbdb; } @@ -602,7 +618,7 @@ footer { } .ui.menu { - background: #404552; + background: var(--color-secondary); border: 1px solid #353945; } @@ -613,14 +629,14 @@ footer { } .ui.input input { - background: #404552; - border: 1px solid #4b505f; + background: var(--color-secondary); + border: 1px solid var(--color-secondary); color: #dbdbdb; } .ui.input input:focus, .ui.input.focus input { - background: #404552; + background: var(--color-secondary); border: 1px solid #6a737d; color: #dbdbdb; } @@ -655,25 +671,27 @@ footer { border-color: #2d693b !important; } +.ui.green.labels a.label:hover, .ui.basic.green.labels a.label:hover, +a.ui.ui.ui.green.label:hover, a.ui.basic.green.label:hover { - background-color: #16ab39 !important; - border-color: #16ab39 !important; + background-color: #3d794b !important; + border-color: #3d794b !important; color: #fff !important; } .issue.list > .item .comment { - color: #129c92; + color: #a5a5a8; } .ui.basic.red.active.button, .ui.basic.red.buttons .active.button { - box-shadow: 0 0 0 1px #c75252 inset !important; - color: #c75252 !important; + box-shadow: 0 0 0 1px #b75252 inset !important; + color: #b75252 !important; } .ui.menu .item { - background: #404552; + background: var(--color-secondary); color: #a5a5a8; } @@ -705,7 +723,7 @@ a.ui.basic.green.label:hover { } .ui.divider:not(.vertical):not(.horizontal) { - border-bottom-color: #4b505f; + border-bottom-color: var(--color-secondary); border-top-color: transparent; } @@ -728,8 +746,8 @@ a.ui.basic.green.label:hover { .ui.form input[type="url"], .ui.selection.dropdown { color: #a5a5a8; - background: #404552; - border: 1px solid #4b505f; + background: var(--color-secondary); + border: 1px solid var(--color-secondary); } .ui.form input:not([type]):hover, @@ -746,8 +764,8 @@ a.ui.basic.green.label:hover { .ui.form input[type="time"]:hover, .ui.form input[type="url"]:hover, .ui.selection.dropdown:hover { - background: #404552; - border: 1px solid #4b505f; + background: var(--color-secondary); + border: 1px solid var(--color-secondary); color: #dbdbdb; } @@ -765,7 +783,7 @@ a.ui.basic.green.label:hover { .ui.form input[type="time"]:focus, .ui.form input[type="url"]:focus, .ui.selection.dropdown:focus { - background: #404552; + background: var(--color-secondary); border: 1px solid #6a737d; color: #dbdbdb; } @@ -837,7 +855,7 @@ a.ui.basic.green.label:hover { .ui.button { background: #353846; - border: 1px solid #4c505c; + border: 1px solid var(--color-secondary); color: #dbdbdb; } @@ -865,24 +883,24 @@ a.ui.basic.green.label:hover { .ui.labeled.button:not([class*="left labeled"]) > .label, .ui[class*="left labeled"].button > .button { - background: #404552; - border: 1px solid #4c505c; + background: var(--color-secondary); + border: 1px solid var(--color-secondary); color: #87ab63; } .ui.button:hover { - background-color: #404552; + background-color: var(--color-secondary); color: #dbdbdb; } .ui.search > .results { background: #383c4a; - border-color: #4c505c; + border-color: var(--color-secondary); } .ui.search > .results .result:hover, .ui.category.search > .results .category .result:hover { - background: #404552; + background: var(--color-secondary); } .ui.search > .results .result .title { @@ -891,7 +909,7 @@ a.ui.basic.green.label:hover { .ui.table thead th, .ui.table > thead > tr > th { - background: #404552; + background: var(--color-secondary); color: #dbdbdb !important; } @@ -905,12 +923,12 @@ a.ui.basic.green.label:hover { .ui.table { color: #a5a5a5 !important; - border-color: #4c505c; + border-color: var(--color-secondary); background: #353945; } .ui.table tbody tr { - border-color: #404552; + border-color: var(--color-secondary); background: #353945; } @@ -928,12 +946,12 @@ a.ui.basic.green.label:hover { } .ui.tabular.menu { - border-bottom-color: #4c505c; + border-bottom-color: var(--color-secondary); .item.active { - border-top-color: #4c505c; - border-left-color: #4c505c; - border-right-color: #4c505c; + border-top-color: var(--color-secondary); + border-left-color: var(--color-secondary); + border-right-color: var(--color-secondary); background: #383c4a; color: #dbdbdb; } @@ -959,7 +977,7 @@ a.ui.basic.green.label:hover { .markdown:not(code) .highlight pre, .markdown:not(code) pre { background-color: #2a2e3a; - border: 1px solid #404552; + border: 1px solid var(--color-secondary); } .markdown:not(code) table tr:nth-child(2n) { @@ -976,7 +994,7 @@ a.ui.basic.green.label:hover { .markdown:not(code) table td, .markdown:not(code) table th { - border-color: #4c505c !important; + border-color: var(--color-secondary) !important; } .repository.file.editor.edit, @@ -1015,7 +1033,12 @@ a.ui.basic.green.label:hover { .ui.segment { background: #353945; color: #a5a5a8 !important; - border: 1px solid #404552; +} + +.ui.segment, +.ui.segments, +.ui.attached.segment { + border: 1px solid var(--color-secondary); } .ui.list > .item > .content { @@ -1049,10 +1072,6 @@ a.ui.basic.green.label:hover { color: #a5a5a8; } -.ui.attached.segment { - border: 1px solid #404552; -} - .repository.view.issue .comment-list .event > .svg.issue-symbol { background: #3b4954; } @@ -1069,32 +1088,32 @@ a.ui.basic.green.label:hover { > .bottom.segment { background: #353945; a { - border: solid 1px #353945; + border-color: var(--color-secondary); background-color: #353945; } } .header { color: #dbdbdb; - background-color: #404552; - border-bottom: 1px solid #353944; + background-color: var(--color-secondary); + border-color: var(--color-secondary); } .merge-section { - background-color: #404552; + background-color: var(--color-secondary); border-color: #505667; } .header:after { - border-right-color: #404552; + border-right-color: var(--color-secondary); } .merge-section.no-header:after { - border-right-color: #404552; + border-right-color: var(--color-secondary); } .header:before { - border-right-color: #404552; + border-right-color: var(--color-secondary); } .merge-section.no-header:before { @@ -1112,12 +1131,12 @@ a.ui.basic.green.label:hover { .repository.view.issue .comment-list:not(.prevent-before-timeline):before, .repository.view.issue .comment-list .timeline:before { - background-color: #4c505c; + background-color: var(--color-secondary); } .repository.view.issue .comment-list .timeline-item .badge { - background-color: #4c505c; - border-color: #4c505c; + background-color: var(--color-secondary); + border-color: var(--color-secondary); color: #ccc; } @@ -1143,11 +1162,15 @@ a.ui.basic.green.label:hover { } .repository .comment.form .content .form:after { - border-right-color: #313c47; + border-right-color: #353945; } .repository .comment.form .content .form:before { - border-right-color: #313c47; + border-right-color: var(--color-secondary); +} + +.repository .comment.form .ui.tabular.menu .item.active { + background: #353945; } .ui .text.grey a:hover { @@ -1156,8 +1179,8 @@ a.ui.basic.green.label:hover { .ui.basic.green.active.button, .ui.basic.green.buttons .active.button { - color: #13ae38 !important; - box-shadow: 0 0 0 1px #13ae38 inset !important; + color: #87ab63 !important; + box-shadow: 0 0 0 1px #87ab63 inset !important; } .ui.green.buttons .active.button, @@ -1168,7 +1191,7 @@ a.ui.basic.green.label:hover { } .ui .info.segment.top { - background-color: #404552 !important; + background-color: var(--color-secondary) !important; } .repository .diff-file-box .code-diff-unified tbody tr.del-code td { @@ -1189,6 +1212,10 @@ a.ui.basic.green.label:hover { background-color: #2c4632 !important; } +.repository .diff-stats li { + border-color: var(--color-secondary); +} + .removed-code { background-color: #5f3737; } @@ -1215,6 +1242,10 @@ td.blob-hunk { background: #2a2e3a; } +.code-diff-split .same-code .lines-type-marker { + background: #353945; +} + .ui.vertical.menu .active.item { background: #4b5162; } @@ -1224,7 +1255,7 @@ td.blob-hunk { } .ui.vertical.menu .header.item { - background: #404552; + background: var(--color-secondary); } .ui.vertical.menu { @@ -1233,19 +1264,19 @@ td.blob-hunk { } .ui.repository.list .item:not(:first-child) { - border-top: 1px solid #4c505c; + border-top: 1px solid var(--color-secondary); } .ui.selection.active.dropdown, .ui.selection.active.dropdown .menu { border-color: #4e5361; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15); + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1); } .ui.selection.active.dropdown:hover, .ui.selection.active.dropdown:hover .menu { border-color: #4e5361; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15); + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1); } .ui.menu .ui.dropdown .menu > .active.item { @@ -1260,7 +1291,7 @@ td.blob-hunk { .ui.card, .ui.cards > .card { background: #353945; - box-shadow: 0 0 0 1px #4c505c; + box-shadow: 0 0 0 1px var(--color-secondary); } .ui.card > .content > .header, @@ -1294,7 +1325,7 @@ td.blob-hunk { } .ui.user.list .item:not(:first-child) { - border-top: 1px solid #4c505c; + border-top: 1px solid var(--color-secondary); } .ui.secondary.pointing.menu .active.item:hover { @@ -1349,7 +1380,7 @@ input { } .settings .key.list .item:not(:first-child) { - border-top: 1px solid #404552; + border-top: 1px solid var(--color-secondary); } .ui.attached.info.message, @@ -1425,7 +1456,7 @@ input { .ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ label:before { - background: #404552; + background: var(--color-secondary); opacity: 1; color: #dbdbdb; border-color: #505667; @@ -1433,25 +1464,25 @@ input { .ui.checkbox .box:before, .ui.checkbox label:before { - background: #404552; + background: var(--color-secondary); border: 1px solid #505667; } .ui.checkbox .box:hover::before, .ui.checkbox label:hover::before { - background: #404552; + background: var(--color-secondary); border-color: #505667; } .ui.checkbox .box:active::before, .ui.checkbox label:active::before { - background: #404552; + background: var(--color-secondary); border-color: #6a737d; } .ui.checkbox input:focus ~ .box:before, .ui.checkbox input:focus ~ label:before { - background: #404552; + background: var(--color-secondary); border-color: #6a737d; } @@ -1460,7 +1491,7 @@ input { .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:before, .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before { border-color: #6a737d; - background: #404552; + background: var(--color-secondary); } .ui.checkbox input:checked:focus ~ .box:after, @@ -1510,11 +1541,11 @@ input { } .user.profile .ui.card .extra.content ul li:not(:last-child) { - border-bottom: 1px solid #4c505c; + border-bottom: 1px solid var(--color-secondary); } .ui.form .dropzone { - border: 1px dashed #7f98ad; + border: 1px dashed var(--color-secondary); background-color: #2e323e; .dz-button { @@ -1567,7 +1598,7 @@ input { .lines-num { color: #a5a5a8 !important; - border-color: #4b505f !important; + border-color: var(--color-secondary) !important; } td.blob-excerpt { @@ -1675,7 +1706,7 @@ a.ui.labels .label:hover { } .repository .label.list .item { - border-bottom: 1px dashed #4c505c; + border-bottom: 1px dashed var(--color-secondary); } .ui.text.yellow, @@ -1715,7 +1746,7 @@ a.ui.labels .label:hover { .organization.teams .members .item:not(:last-child), .organization.teams .detail .item:not(:last-child), .organization.members .list .item { - border-bottom-color: #404552; + border-bottom-color: var(--color-secondary); } .repository .labelspage .item a, @@ -1741,17 +1772,17 @@ a.ui.labels .label:hover { } .ui.dividing.header { - border-bottom: 1px solid #4c505c; + border-bottom: 1px solid var(--color-secondary); } .ui.modal > .header { - background: #404552; + background: var(--color-secondary); color: #dbdbdb; } .ui.modal > .actions { - background: #404552; - border-top: 1px solid #404552; + background: var(--color-secondary); + border-top: 1px solid var(--color-secondary); } .ui.modal > .content { @@ -1759,18 +1790,18 @@ a.ui.labels .label:hover { } .minicolors-panel { - background: #404552 !important; + background: var(--color-secondary) !important; border-color: #6a737d !important; } .editor-toolbar { - background-color: #404552; - border-color: #4b505f; + background-color: var(--color-secondary); + border-color: var(--color-secondary); } .edit-diff > div > .ui.table { - border-left-color: #404552 !important; - border-right-color: #404552 !important; + border-left-color: var(--color-secondary) !important; + border-right-color: var(--color-secondary) !important; } .editor-toolbar a { @@ -1795,7 +1826,7 @@ a.ui.labels .label:hover { } &.sticky { - border-bottom-color: #4c505c; + border-bottom-color: var(--color-secondary); } } @@ -1813,10 +1844,10 @@ a.ui.labels .label:hover { border: none; } - background: #404552; + background: var(--color-secondary); } - border-color: #4c505c; + border-color: var(--color-secondary); } .footer { @@ -1901,7 +1932,7 @@ a.ui.labels .label:hover { .CodeMirror { color: #9daccc; background-color: #2e323e; - border-color: #4b505f; + border-color: var(--color-secondary); border-top: 0; div.CodeMirror-cursor { @@ -2005,7 +2036,7 @@ a.ui.labels .label:hover { .ui.popup { background-color: #383c4a; color: #a5a5a8; - border-color: #4c505c; + border-color: var(--color-secondary); } .ui.popup.top:before, @@ -2015,7 +2046,7 @@ a.ui.labels .label:hover { .ui.bottom.left.popup:before, .ui.bottom.right.popup:before { - box-shadow: -1px -1px 0 0 #4c505c; + box-shadow: -1px -1px 0 0 var(--color-secondary); } .markdown:not(code) h1 { @@ -2040,7 +2071,7 @@ footer .container .links > * { } .repository.release #release-list > li .detail { - border-left-color: #4c505c; + border-left-color: var(--color-secondary); } .repository.release #release-list > li .detail .dot { @@ -2049,11 +2080,11 @@ footer .container .links > * { } .repository.release #release-list > li .detail .download .list { - border-top-color: #404552; + border-top-color: var(--color-secondary); } .repository.release #release-list > li .detail .download .list li { - border-bottom-color: #404552; + border-bottom-color: var(--color-secondary); } .board-column {