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 <lauris@nix.lv>
Co-authored-by: zeripath <art27@cantab.net>

diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl
index 86c0695cbd85edd575ae0b83a372c6d0925727fb..5d9a17101964b4fadcca5fa267f54bccdf4c7921 100644 (file)
--- a/templates/repo/blame.tmpl
+++ b/templates/repo/blame.tmpl
@@ -1,6 +1,6 @@
 <div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
-       <h4 class="file-header ui top attached header">
-               <div class="file-header-left">
+       <h4 class="file-header ui top attached header df ac sb">
+               <div class="file-header-left df ac">
                        <div class="file-info text grey normal mono">
                                <div class="file-info-entry">
                                        {{.NumLines}} {{.i18n.Tr (TrN .i18n.Lang .NumLines "repo.line" "repo.lines") }}
@@ -8,16 +8,14 @@
                                <div class="file-info-entry">{{FileSize .FileSize}}</div>
                        </div>
                </div>
-               <div class="file-header-right">
-                       <div class="ui right file-actions">
-                               <div class="ui buttons">
-                                       <a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
-                                       {{if not .IsViewCommit}}
-                                               <a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
-                                       {{end}}
-                                       <a class="ui button" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.normal_view"}}</a>
-                                       <a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
-                               </div>
+               <div class="file-header-right file-actions df ac">
+                       <div class="ui buttons">
+                               <a class="ui tiny button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
+                               {{if not .IsViewCommit}}
+                                       <a class="ui tiny button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
+                               {{end}}
+                               <a class="ui tiny button" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.normal_view"}}</a>
+                               <a class="ui tiny button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
                        </div>
                </div>
        </h4>

diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 58cbe10ca78845449c71a81cb8e012e374962581..90b3b53d976a8eaf6379f914b9ae9e567c88de81 100644 (file)
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -56,7 +56,7 @@
                                                                                        {{svg "octicon-shield-lock"}}
                                                                                {{end}}
                                                                                <a href="{{$.RepoLink}}/src/branch/{{.Name | EscapePound}}">{{.Name}}</a>
-                                                                               <p class="info">{{svg "octicon-git-commit"}}<a href="{{$.RepoLink}}/commit/{{.Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}</p>
+                                                                               <p class="info df ac my-2">{{svg "octicon-git-commit" 16 "mr-2"}}<a href="{{$.RepoLink}}/commit/{{.Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}</p>
                                                                        {{end}}
                                                                        </td>
                                                                        <td class="three wide ui">

diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl
index 2ff8d5b4d8083cee7b1cd41203f7a3e4bc8d0bcf..89355f06537568fa88f29450a2ffd809e7b37d2e 100644 (file)
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@@ -1,31 +1,29 @@
-<h4 class="ui top attached header">
-       <div class="ui stackable grid">
-               <div class="five wide column">
-                       {{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}}
-               </div>
-               <div class="eleven wide right aligned column">
-                       {{if .PageIsCommits}}
-                               <form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL | EscapePound}}/search">
-                                       <div class="ui tiny search input">
-                                               <input name="q" placeholder="{{.i18n.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus>
-                                       </div>
-                                       &nbsp;
-                                       <div class="ui checkbox">
-                                               <input type="checkbox" name="all" id="all" value="true" {{.All}}>
-                                               <label for="all">{{.i18n.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label>
-                                       </div>
-                                       <button class="ui blue tiny button" data-panel="#add-deploy-key-panel" data-tooltip={{.i18n.Tr "repo.commits.search.tooltip"}}>{{.i18n.Tr "repo.commits.find"}}</button>
-                               </form>
-                       {{else if .IsDiffCompare}}
-                               <a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID}}" class="ui green sha label">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
-                               ...
-                               <a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID}}" class="ui green sha label">{{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}}</a>
-                       {{end}}
-               </div>
+<h4 class="ui top attached header commits-table df ac sb">
+       <div class="commits-table-left df ac">
+               {{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}}
+       </div>
+       <div class="commits-table-right df ac">
+               {{if .PageIsCommits}}
+                       <form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL | EscapePound}}/search">
+                               <div class="ui tiny search input">
+                                       <input name="q" placeholder="{{.i18n.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus>
+                               </div>
+                               &nbsp;
+                               <div class="ui checkbox">
+                                       <input type="checkbox" name="all" id="all" value="true" {{.All}}>
+                                       <label for="all">{{.i18n.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label>
+                               </div>
+                               <button class="ui primary tiny button mr-0" data-panel="#add-deploy-key-panel" data-tooltip={{.i18n.Tr "repo.commits.search.tooltip"}}>{{.i18n.Tr "repo.commits.find"}}</button>
+                       </form>
+               {{else if .IsDiffCompare}}
+                       <a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID}}" class="ui green sha label">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
+                       ...
+                       <a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID}}" class="ui green sha label">{{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}}</a>
+               {{end}}
        </div>
 </h4>
 

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index f30b81cb9ee9b8bf3955e52919997a4a1f98c792..c2a7ade64fe0359ff65b7edc15e4504d35512443 100644 (file)
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -173,13 +173,13 @@
                                                                                                                                <td class="lines-type-marker"></td>
                                                                                                                                <td class="add-comment-left">
                                                                                                                                        {{if and $resolved  (eq $line.GetCommentSide "previous")}}
-                                                                                                                                               <div class="ui top attached header">
+                                                                                                                                               <div class="ui top attached header resolved-placeholder">
                                                                                                                                                        <span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
-                                                                                                                                                       <button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui compact right labeled button show-outdated">
+                                                                                                                                                       <button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui tiny right labeled button show-outdated">
                                                                                                                                                                {{svg "octicon-unfold"}}
                                                                                                                                                                {{$.i18n.Tr "repo.issues.review.show_resolved"}}
                                                                                                                                                        </button>
-                                                                                                                                                       <button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui compact right labeled button hide-outdated">
+                                                                                                                                                       <button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated">
                                                                                                                                                                {{svg "octicon-fold"}}
                                                                                                                                                                {{$.i18n.Tr "repo.issues.review.hide_resolved"}}
                                                                                                                                                        </button>
@@ -207,15 +207,15 @@
                                                                                                                                </td>
                                                                                                                                <td class="lines-num"></td>
                                                                                                                                <td class="lines-type-marker"></td>
-                                                                                                                               <td class="add-comment-right">
+                                                                                                                               <td class="add-comment-right resolved-placeholder">
                                                                                                                                        {{if and $resolved (eq $line.GetCommentSide "proposed")}}
                                                                                                                                                <div class="ui top attached header">
                                                                                                                                                        <span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
-                                                                                                                                                       <button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui compact right labeled button show-outdated">
+                                                                                                                                                       <button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui tiny right labeled button show-outdated">
                                                                                                                                                                {{svg "octicon-unfold"}}
                                                                                                                                                                {{$.i18n.Tr "repo.issues.review.show_resolved"}}
                                                                                                                                                        </button>
-                                                                                                                                                       <button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui compact right labeled button hide-outdated">
+                                                                                                                                                       <button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated">
                                                                                                                                                                {{svg "octicon-fold"}}
                                                                                                                                                                {{$.i18n.Tr "repo.issues.review.hide_resolved"}}
                                                                                                                                                        </button>

diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
index 6d1d3861a00309756cc7c1dee8ae7d1f82b0b940..33626f31d360af4757560977399786c7cb86972e 100644 (file)
--- 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}}
-               <button class="comment-form-reply ui green labeled icon tiny button"><i class="reply icon"></i> {{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
+               <button class="comment-form-reply ui green labeled icon tiny button">
+                       {{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.root.i18n.Tr "repo.diff.comment.reply"}}
+               </button>
        {{end}}
        <form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
        {{$.root.CsrfTokenHtml}}

diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index 4785f3a513452219d0f3c661c153654247c61d93..cf4bd64cf99a2a1d533557f198781056c6a826b9 100644 (file)
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -27,7 +27,7 @@
                                        </span>
                                {{else}}
                                        <span class="text grey">
-                                               <a class="mr-2" {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>
+                                               <a {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>
                                                        {{.Poster.GetDisplayName}}
                                                </a>
                                                {{$.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 1a461c7ad77481534c7892bb414486b5e71649bf..3b24cd453c69e586bd4de54ef5b361450d1b58e1 100644 (file)
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -40,13 +40,13 @@
                                        <td colspan="2" class="lines-num"></td>
                                        <td class="add-comment-left add-comment-right" colspan="2">
                                                {{if $resolved}}
-                                                       <div class = "ui attached header">
+                                                       <div class="ui attached header resolved-placeholder">
                                                                <span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.root.i18n.Tr "repo.issues.review.resolved_by"}}</span>
-                                                               <button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui compact right labeled button show-outdated">
+                                                               <button id="show-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="ui tiny right labeled button show-outdated">
                                                                        {{svg "octicon-unfold"}}
                                                                        {{$.root.i18n.Tr "repo.issues.review.show_resolved"}}
                                                                </button>
-                                                               <button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui compact right labeled button hide-outdated">
+                                                               <button id="hide-outdated-{{(index $line.Comments 0).ID}}" data-comment="{{(index $line.Comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated">
                                                                        {{svg "octicon-fold"}}
                                                                        {{$.root.i18n.Tr "repo.issues.review.hide_resolved"}}
                                                                </button>

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 9699371e0002be91a143f14abaf7d45107f00efa..4ea6bd7cca6716d55e3f45fea1d0f44058c30954 100644 (file)
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -19,15 +19,15 @@
                        </a>
                {{end}}
                        <div class="content">
-                               <div class="ui top attached header">
-                                       <div class="header-left df ac">
+                               <div class="ui top attached header comment-header df ac sb">
+                                       <div class="comment-header-left df ac">
                                                {{if .OriginalAuthor }}
                                                        <span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
                                                {{else}}
                                                        <span class="text grey"><a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}</span>
                                                {{end}}
                                        </div>
-                                       <div class="header-right actions df ac">
+                                       <div class="comment-header-right actions df ac">
                                                {{if not $.Repository.IsArchived}}
                                                        {{if eq .PosterID .Issue.PosterID }}
                                                                <div class="ui basic label">

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index e08c47ff535e3549505c9a2a82ac7ce2f291f384..ed897fa14e6255d73ee072874c9483409137b427 100644 (file)
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -301,7 +301,7 @@
 
                        <div class="ui watching">
                                <span class="text"><strong>{{.i18n.Tr "notification.notifications"}}</strong></span>
-                               <div>
+                               <div class="mt-3">
                                        <form method="POST" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/watch">
                                                <input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}" />
                                                {{$.CsrfTokenHtml}}
@@ -519,7 +519,7 @@
                        <div class="ui divider"></div>
                        <div class="ui watching">
                                <div>
-                                       <button class="fluid ui  show-modal button {{if .Issue.IsLocked }} negative {{ end }}" data-modal="#lock">
+                                       <button class="fluid ui show-modal button {{if .Issue.IsLocked }} negative {{ end }}" data-modal="#lock">
                                                        {{if .Issue.IsLocked}}
                                                                {{svg "octicon-key"}}
                                                                {{.i18n.Tr "repo.issues.unlock"}}

diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index c353cc7627fea54aa1f045910b79680f989b2b9d..36bac57c424a8cb3cf50ce07504937e875aa4281 100644 (file)
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -28,17 +28,17 @@
                                                                <span class="ui green label">{{$.i18n.Tr "repo.release.stable"}}</span>
                                                        {{end}}
                                                        <span class="tag text blue">
-                                                               <a href="{{$.RepoLink}}/src/tag/{{.TagName | EscapePound}}" rel="nofollow"><i class="tag icon"></i> {{.TagName}}</a>
+                                                               <a href="{{$.RepoLink}}/src/tag/{{.TagName | EscapePound}}" rel="nofollow">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</a>
                                                        </span>
                                                        <span class="commit">
-                                                               <a href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow"><i class="code icon"></i> {{ShortSha .Sha1}}</a>
+                                                               <a class="mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
                                                        </span>
                                                {{end}}
                                        </div>
                                        <div class="ui twelve wide column detail">
                                                {{if .IsTag}}
                                                        <h4>
-                                                               <a href="{{$.RepoLink}}/src/tag/{{.TagName | EscapePound}}" rel="nofollow"><i class="tag icon"></i> {{.TagName}}</a>
+                                                               <a href="{{$.RepoLink}}/src/tag/{{.TagName | EscapePound}}" rel="nofollow">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</a>
                                                        </h4>
                                                        <p class="text grey">
                                                                {{ if gt .Publisher.ID 0 }}
@@ -51,7 +51,7 @@
                                                        </p>
                                                        <div class="download">
                                                        {{if $.Permission.CanRead $.UnitTypeCode}}
-                                                               <a href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow"><i class="code icon"></i> {{ShortSha .Sha1}}</a>
+                                                               <a class="mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
                                                                <a href="{{$.RepoLink}}/archive/{{.TagName | EscapePound}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
                                                                <a href="{{$.RepoLink}}/archive/{{.TagName | EscapePound}}.tar.gz">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
                                                        {{end}}
@@ -64,7 +64,7 @@
                                                        <p class="text grey">
                                                                <span class="author">
                                                                {{if .OriginalAuthor}}
-                                                                       <i class="fa fa-github" aria-hidden="true"></i>
+                                                                       {{svg "octicon-mark-github"}}
                                                                        {{.OriginalAuthor}}
                                                                {{else if .Publisher}}
                                                                        <img class="img-10" src="{{.Publisher.RelAvatarLink}}">

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 2f4fc12e622b72a07c70b1f51db6a347f39d4bf9..a8d60bd96ee1aa0a74d5edc780f273ee5863c786 100644 (file)
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -1,5 +1,5 @@
 <div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
-       <h4 class="file-header ui top attached header">
+       <h4 class="file-header ui top attached header df ac sb">
                <div class="file-header-left df ac">
                        {{if .ReadmeInList}}
                                {{svg "octicon-book" 16 "mr-3"}}
@@ -31,31 +31,29 @@
                        {{end}}
                </div>
                {{if not .ReadmeInList}}
-               <div class="file-header-right df ac">
-                       <div class="ui right file-actions">
-                               <div class="ui buttons">
-                                       <a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
-                                       {{if not .IsViewCommit}}
-                                               <a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
-                                       {{end}}
-                                       {{if .IsTextFile}}
-                                               <a class="ui button" href="{{.RepoLink}}/blame/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.blame"}}</a>
-                                       {{end}}
-                                       <a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
-                               </div>
-                               {{if .Repository.CanEnableEditor}}
-                                       {{if .CanEditFile}}
-                                               <a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon poping up"  data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil"}}</span></a>
-                                       {{else}}
-                                               <span class="btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil"}}</span>
-                                       {{end}}
-                                       {{if .CanDeleteFile}}
-                                               <a href="{{.RepoLink}}/_delete/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon btn-octicon-danger poping up"  data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan"}}</span></a>
-                                       {{else}}
-                                               <span class="btn-octicon poping up disabled" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan"}}</span>
-                                       {{end}}
+               <div class="file-header-right file-actions df ac">
+                       <div class="ui buttons">
+                               <a class="ui tiny button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
+                               {{if not .IsViewCommit}}
+                                       <a class="ui tiny button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
                                {{end}}
+                               {{if .IsTextFile}}
+                                       <a class="ui tiny button" href="{{.RepoLink}}/blame/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.blame"}}</a>
+                               {{end}}
+                               <a class="ui tiny button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
                        </div>
+                       {{if .Repository.CanEnableEditor}}
+                               {{if .CanEditFile}}
+                                       <a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon poping up"  data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil"}}</span></a>
+                               {{else}}
+                                       <span class="btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil"}}</span>
+                               {{end}}
+                               {{if .CanDeleteFile}}
+                                       <a href="{{.RepoLink}}/_delete/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon btn-octicon-danger poping up"  data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan"}}</span></a>
+                               {{else}}
+                                       <span class="btn-octicon poping up disabled" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan"}}</span>
+                               {{end}}
+                       {{end}}
                </div>
                {{end}}
        </h4>

diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less
index 052c29dd62558a841800f59a29dabf1aeef949af..337fcad66b81347228dd1b8b8e3c22738cadf4b1 100644 (file)
--- 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 93b4fa954f7e6ed7838a16961703c3ca0bee3ad6..9a22e075f5ba598a17f78dfc298be716aabd2244 100644 (file)
--- 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 86890475e2549d6cf3e0cc2438aaf9ba65de3c20..e783267167add3f568530a5ecc86d91240f82a42 100644 (file)
--- 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 0c4196cd85f9136b25434a529b578db3fc76fa3d..9e8df7b37f6e7ddbf83f7f533f1b4567de69306f 100644 (file)
--- 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 fb44eaa6e2ed3dd4164422ff3a73dd9025c83aca..26036abaf53401015c292b61a51a4b944f444c5b 100644 (file)
--- 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 9d18dc2d29fabf274e5ea9304ddc7f5d9064940d..04367e2f6680ae3afc26268ba7263ee30c5b6728 100644 (file)
--- 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 {