serv/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-29 15:13:53 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Misc UI fixes, add secondary color (#13378)

Browse source 
* 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>
This commit is contained in:
silverwind 2020-11-01 21:04:26 +01:00 committed by GitHub
parent 543697e61e
commit 4617bb689b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 300 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
templates/repo/blame.tmpl
View file

@ -1,6 +1,6 @@
<div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content"> <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"> <div class="file-header-left df ac">
<div class="file-info text grey normal mono"> <div class="file-info text grey normal mono">
<div class="file-info-entry"> <div class="file-info-entry">
{{.NumLines}} {{.i18n.Tr (TrN .i18n.Lang .NumLines "repo.line" "repo.lines") }} {{.NumLines}} {{.i18n.Tr (TrN .i18n.Lang .NumLines "repo.line" "repo.lines") }}
@ -8,16 +8,14 @@
<div class="file-info-entry">{{FileSize .FileSize}}</div> <div class="file-info-entry">{{FileSize .FileSize}}</div>
</div> </div>
</div> </div>
<div class="file-header-right"> <div class="file-header-right file-actions df ac">
<div class="ui right file-actions"> <div class="ui buttons">
<div class="ui buttons"> <a class="ui tiny button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a> {{if not .IsViewCommit}}
{{if not .IsViewCommit}} <a class="ui tiny button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
<a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a> {{end}}
{{end}} <a class="ui tiny button" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.normal_view"}}</a>
<a class="ui 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>
<a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
</div>
</div> </div>
</div> </div>
</h4> </h4>

2
templates/repo/branch/list.tmpl
View file

@ -56,7 +56,7 @@
{{svg "octicon-shield-lock"}} {{svg "octicon-shield-lock"}}
{{end}} {{end}}
<a href="{{$.RepoLink}}/src/branch/{{.Name | EscapePound}}">{{.Name}}</a> <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}} {{end}}
</td> </td>
<td class="three wide ui"> <td class="three wide ui">

54
templates/repo/commits_table.tmpl
View file

@ -1,31 +1,29 @@
<h4 class="ui top attached header"> <h4 class="ui top attached header commits-table df ac sb">
<div class="ui stackable grid"> <div class="commits-table-left df ac">
<div class="five wide column"> {{if or .PageIsCommits (gt .CommitCount 0)}}
{{if or .PageIsCommits (gt .CommitCount 0)}} {{.CommitCount}} {{.i18n.Tr "repo.commits.commits"}} {{if .Branch}}({{.Branch}}){{end}}
{{.CommitCount}} {{.i18n.Tr "repo.commits.commits"}} {{if .Branch}}({{.Branch}}){{end}} {{else}}
{{else}} {{.i18n.Tr "repo.commits.no_commits" $.BaseBranch $.HeadBranch }} {{if .Branch}}({{.Branch}}){{end}}
{{.i18n.Tr "repo.commits.no_commits" $.BaseBranch $.HeadBranch }} {{if .Branch}}({{.Branch}}){{end}} {{end}}
{{end}} </div>
</div> <div class="commits-table-right df ac">
<div class="eleven wide right aligned column"> {{if .PageIsCommits}}
{{if .PageIsCommits}} <form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL | EscapePound}}/search">
<form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL | EscapePound}}/search"> <div class="ui tiny search input">
<div class="ui tiny search input"> <input name="q" placeholder="{{.i18n.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus>
<input name="q" placeholder="{{.i18n.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus> </div>
</div> &nbsp;
&nbsp; <div class="ui checkbox">
<div class="ui checkbox"> <input type="checkbox" name="all" id="all" value="true" {{.All}}>
<input type="checkbox" name="all" id="all" value="true" {{.All}}> <label for="all">{{.i18n.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label>
<label for="all">{{.i18n.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label> </div>
</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>
<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>
</form> {{else if .IsDiffCompare}}
{{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/{{.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>
<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}}
{{end}}
</div>
</div> </div>
</h4> </h4>

12
templates/repo/diff/box.tmpl
View file

@ -173,13 +173,13 @@
<td class="lines-type-marker"></td> <td class="lines-type-marker"></td>
<td class="add-comment-left"> <td class="add-comment-left">
{{if and $resolved (eq $line.GetCommentSide "previous")}} {{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> <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"}} {{svg "octicon-unfold"}}
{{$.i18n.Tr "repo.issues.review.show_resolved"}} {{$.i18n.Tr "repo.issues.review.show_resolved"}}
</button> </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"}} {{svg "octicon-fold"}}
{{$.i18n.Tr "repo.issues.review.hide_resolved"}} {{$.i18n.Tr "repo.issues.review.hide_resolved"}}
</button> </button>
@ -207,15 +207,15 @@
</td> </td>
<td class="lines-num"></td> <td class="lines-num"></td>
<td class="lines-type-marker"></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")}} {{if and $resolved (eq $line.GetCommentSide "proposed")}}
<div class="ui top attached header"> <div class="ui top attached header">
<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span> <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"}} {{svg "octicon-unfold"}}
{{$.i18n.Tr "repo.issues.review.show_resolved"}} {{$.i18n.Tr "repo.issues.review.show_resolved"}}
</button> </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"}} {{svg "octicon-fold"}}
{{$.i18n.Tr "repo.issues.review.hide_resolved"}} {{$.i18n.Tr "repo.issues.review.hide_resolved"}}
</button> </button>

4
templates/repo/diff/comment_form.tmpl
View file

@ -1,6 +1,8 @@
{{if and $.root.SignedUserID (not $.Repository.IsArchived)}} {{if and $.root.SignedUserID (not $.Repository.IsArchived)}}
{{if $.hidden}} {{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}} {{end}}
<form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post"> <form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
{{$.root.CsrfTokenHtml}} {{$.root.CsrfTokenHtml}}

2
templates/repo/diff/comments.tmpl
View file

@ -27,7 +27,7 @@
</span> </span>
{{else}} {{else}}
<span class="text grey"> <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}} {{.Poster.GetDisplayName}}
</a> </a>
{{$.root.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}} {{$.root.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}

6
templates/repo/diff/section_unified.tmpl
View file

@ -40,13 +40,13 @@
<td colspan="2" class="lines-num"></td> <td colspan="2" class="lines-num"></td>
<td class="add-comment-left add-comment-right" colspan="2"> <td class="add-comment-left add-comment-right" colspan="2">
{{if $resolved}} {{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> <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"}} {{svg "octicon-unfold"}}
{{$.root.i18n.Tr "repo.issues.review.show_resolved"}} {{$.root.i18n.Tr "repo.issues.review.show_resolved"}}
</button> </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"}} {{svg "octicon-fold"}}
{{$.root.i18n.Tr "repo.issues.review.hide_resolved"}} {{$.root.i18n.Tr "repo.issues.review.hide_resolved"}}
</button> </button>

6
templates/repo/issue/view_content/comments.tmpl
View file

@ -19,15 +19,15 @@
</a> </a>
{{end}} {{end}}
<div class="content"> <div class="content">
<div class="ui top attached header"> <div class="ui top attached header comment-header df ac sb">
<div class="header-left df ac"> <div class="comment-header-left df ac">
{{if .OriginalAuthor }} {{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> <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}} {{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> <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}} {{end}}
</div> </div>
<div class="header-right actions df ac"> <div class="comment-header-right actions df ac">
{{if not $.Repository.IsArchived}} {{if not $.Repository.IsArchived}}
{{if eq .PosterID .Issue.PosterID }} {{if eq .PosterID .Issue.PosterID }}
<div class="ui basic label"> <div class="ui basic label">

4
templates/repo/issue/view_content/sidebar.tmpl
View file

@ -301,7 +301,7 @@
<div class="ui watching"> <div class="ui watching">
<span class="text"><strong>{{.i18n.Tr "notification.notifications"}}</strong></span> <span class="text"><strong>{{.i18n.Tr "notification.notifications"}}</strong></span>
<div> <div class="mt-3">
<form method="POST" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/watch"> <form method="POST" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/watch">
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}" /> <input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}" />
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
@ -519,7 +519,7 @@
<div class="ui divider"></div> <div class="ui divider"></div>
<div class="ui watching"> <div class="ui watching">
<div> <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}} {{if .Issue.IsLocked}}
{{svg "octicon-key"}} {{svg "octicon-key"}}
{{.i18n.Tr "repo.issues.unlock"}} {{.i18n.Tr "repo.issues.unlock"}}

10
templates/repo/release/list.tmpl
View file

@ -28,17 +28,17 @@
<span class="ui green label">{{$.i18n.Tr "repo.release.stable"}}</span> <span class="ui green label">{{$.i18n.Tr "repo.release.stable"}}</span>
{{end}} {{end}}
<span class="tag text blue"> <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>
<span class="commit"> <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> </span>
{{end}} {{end}}
</div> </div>
<div class="ui twelve wide column detail"> <div class="ui twelve wide column detail">
{{if .IsTag}} {{if .IsTag}}
<h4> <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> </h4>
<p class="text grey"> <p class="text grey">
{{ if gt .Publisher.ID 0 }} {{ if gt .Publisher.ID 0 }}
@ -51,7 +51,7 @@
</p> </p>
<div class="download"> <div class="download">
{{if $.Permission.CanRead $.UnitTypeCode}} {{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}}.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> <a href="{{$.RepoLink}}/archive/{{.TagName | EscapePound}}.tar.gz">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
{{end}} {{end}}
@ -64,7 +64,7 @@
<p class="text grey"> <p class="text grey">
<span class="author"> <span class="author">
{{if .OriginalAuthor}} {{if .OriginalAuthor}}
<i class="fa fa-github" aria-hidden="true"></i> {{svg "octicon-mark-github"}}
{{.OriginalAuthor}} {{.OriginalAuthor}}
{{else if .Publisher}} {{else if .Publisher}}
<img class="img-10" src="{{.Publisher.RelAvatarLink}}"> <img class="img-10" src="{{.Publisher.RelAvatarLink}}">

46
templates/repo/view_file.tmpl
View file

@ -1,5 +1,5 @@
<div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content"> <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"> <div class="file-header-left df ac">
{{if .ReadmeInList}} {{if .ReadmeInList}}
{{svg "octicon-book" 16 "mr-3"}} {{svg "octicon-book" 16 "mr-3"}}
@ -31,31 +31,29 @@
{{end}} {{end}}
</div> </div>
{{if not .ReadmeInList}} {{if not .ReadmeInList}}
<div class="file-header-right df ac"> <div class="file-header-right file-actions df ac">
<div class="ui right file-actions"> <div class="ui buttons">
<div class="ui buttons"> <a class="ui tiny button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a> {{if not .IsViewCommit}}
{{if not .IsViewCommit}} <a class="ui tiny button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
<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}}
{{end}} {{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> </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> </div>
{{end}} {{end}}
</h4> </h4>

2
web_src/less/_admin.less
View file

@ -44,7 +44,7 @@
.ui.header, .ui.header,
.ui.segment { .ui.segment {
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15); box-shadow: 0 1px 2px 0 var(--color-secondary);
} }
&.user { &.user {

46
web_src/less/_base.less
View file

@ -30,6 +30,7 @@
--color-primary-alpha-70: #4183c4b3; --color-primary-alpha-70: #4183c4b3;
--color-primary-alpha-80: #4183c4cc; --color-primary-alpha-80: #4183c4cc;
--color-primary-alpha-90: #4183c4e1; --color-primary-alpha-90: #4183c4e1;
--color-secondary: rgba(34, 36, 38, .15);
--color-body: #fff; --color-body: #fff;
} }
@ -185,9 +186,12 @@ a:hover,
word-break: break-all; word-break: break-all;
} }
pre,
code,
.mono { .mono {
font-family: var(--fonts-monospace);
}
pre,
code {
font: 12px var(--fonts-monospace); font: 12px var(--fonts-monospace);
&.raw { &.raw {
@ -781,7 +785,7 @@ code,
.scrolling.menu.items { .scrolling.menu.items {
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none !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.button,
.ui.blue.buttons .button { .ui.blue.buttons .button,
.ui.primary.button,
.ui.primary.buttons .button {
background-color: var(--color-primary) !important; background-color: var(--color-primary) !important;
} }
.ui.blue.button:hover, .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; background-color: var(--color-primary-dark-2) !important;
} }
.ui.blue.button:focus, .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; background-color: var(--color-primary-dark-3) !important;
} }
.ui.basic.blue.button, .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; box-shadow: inset 0 0 0 1px var(--color-primary) !important;
color: #fff !important; color: #fff !important;
} }
.ui.basic.blue.button:hover, .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; box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important;
} }
.ui.basic.blue.button:focus, .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; box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important;
} }
.ui.blue.label, .ui.blue.label,
.ui.blue.labels .label { .ui.blue.labels .label,
.ui.primary.label,
.ui.primary.labels .label {
background-color: var(--color-primary) !important; background-color: var(--color-primary) !important;
border-color: var(--color-primary-dark-2) !important; border-color: var(--color-primary-dark-2) !important;
} }
.ui.basic.labels .blue.label, .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; background: transparent;
border-color: var(--color-primary); border-color: var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
@ -1409,6 +1429,10 @@ table th[data-sortt-desc] {
padding: 12px; padding: 12px;
} }
.ui.header .ui.label {
margin-left: .25rem;
}
.ui.header > .ui.label.compact { .ui.header > .ui.label.compact {
margin-top: inherit; margin-top: inherit;
} }

4
web_src/less/_editor.less
View file

@ -49,8 +49,8 @@
.edit-diff > div > .ui.table { .edit-diff > div > .ui.table {
border-top: none !important; border-top: none !important;
border-bottom: none !important; border-bottom: none !important;
border-left: 1px solid #d4d4d5 !important; border-left: 1px solid var(--color-secondary) !important;
border-right: 1px solid #d4d4d5 !important; border-right: 1px solid var(--color-secondary) !important;
} }
#edit_area { #edit_area {

89
web_src/less/_repository.less
View file

@ -407,9 +407,11 @@
font-size: .5em; font-size: .5em;
} }
.file-actions { .file-info {
margin-bottom: -5px; font-size: 13px;
}
.file-actions {
.btn-octicon { .btn-octicon {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
@ -996,33 +998,6 @@
} }
.content { .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 { > .merge-section {
background-color: #f7f7f7; background-color: #f7f7f7;
@ -1433,7 +1408,7 @@
.bar { .bar {
height: 4px; height: 4px;
position: absolute; position: absolute;
background-color: #d4d4d5; background-color: var(--color-secondary);
&.bar-behind { &.bar-behind {
right: 0; right: 0;
@ -1603,12 +1578,17 @@
background: #ffffff; background: #ffffff;
line-height: 30px; line-height: 30px;
@media only screen and (max-width: 992px) {
flex-direction: column;
align-items: flex-start;
}
&.sticky { &.sticky {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 8; z-index: 8;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid #d4d4d5; border-bottom: 1px solid var(--color-secondary);
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
} }
@ -2729,7 +2709,7 @@
> .header, > .header,
.segment { .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 { .comment-header .actions a {
margin-right: 0 !important; margin-right: 0 !important;
padding: .5rem !important; padding: .5rem !important;
@ -2871,7 +2879,7 @@
} }
&:before { &:before {
border-right-color: #d3d3d4; border-right-color: var(--color-secondary);
border-width: 9px; border-width: 9px;
margin-top: -9px; margin-top: -9px;
} }
@ -3080,7 +3088,7 @@ tbody.commit-list {
.repo-buttons .disabled-repo-button a.button:hover { .repo-buttons .disabled-repo-button a.button:hover {
background: none !important; background: none !important;
color: rgba(0, 0, 0, .6) !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 { .repo-buttons .ui.labeled.button > .label {
@ -3099,6 +3107,17 @@ tbody.commit-list {
vertical-align: middle; 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 { .board {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -3109,7 +3128,7 @@ tbody.commit-list {
.board-column { .board-column {
background-color: rgba(0, 0, 0, .05) !important; 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; margin: 0 .5rem !important;
padding: .5rem !important; padding: .5rem !important;
width: 320px; width: 320px;

6
web_src/less/_review.less
View file

@ -27,7 +27,7 @@
} }
.add-comment-left.add-comment-right .ui.attached.header { .add-comment-left.add-comment-right .ui.attached.header {
border: 1px solid #d4d4d5; border: 1px solid var(--color-secondary);
&:not(.top) { &:not(.top) {
margin-bottom: .5em; margin-bottom: .5em;
@ -89,10 +89,6 @@
margin: .5em; margin: .5em;
} }
.comment-list {
padding-bottom: 5px;
}
.footer { .footer {
border-top: 1px solid #f1f1f1; border-top: 1px solid #f1f1f1;
padding: 10px 0; padding: 10px 0;

219
web_src/less/themes/theme-arc-green.less
View file

@ -23,6 +23,7 @@
--color-primary-alpha-70: #87ab63b3; --color-primary-alpha-70: #87ab63b3;
--color-primary-alpha-80: #87ab63cc; --color-primary-alpha-80: #87ab63cc;
--color-primary-alpha-90: #87ab63e1; --color-primary-alpha-90: #87ab63e1;
--color-secondary: #454a57;
--color-body: #383c4a; --color-body: #383c4a;
} }
@ -417,11 +418,15 @@
} }
.repository .ui.segment.sub-menu .list .item.active { .repository .ui.segment.sub-menu .list .item.active {
background: #404552; background: var(--color-secondary);
} }
.ui.segments { .repository.branches .commit-divergence .bar {
border-color: #454b5a; background: #6a737d;
}
.repository.branches .commit-divergence .bar-group:last-child {
border-color: #6a737d;
} }
.ui.horizontal.segments > .segment { .ui.horizontal.segments > .segment {
@ -440,6 +445,17 @@ body {
color: #7f7f7f !important; 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.card > .extra a:not(.ui):hover,
.ui.cards > .card > .extra a:not(.ui):hover { .ui.cards > .card > .extra a:not(.ui):hover {
color: #a0cc75; color: #a0cc75;
@ -470,7 +486,7 @@ body {
} }
.repository .milestone.list > .item { .repository .milestone.list > .item {
border-bottom-color: #4c505c; border-bottom-color: var(--color-secondary);
} }
.repository .milestone.list > .item > a { .repository .milestone.list > .item > a {
@ -482,7 +498,7 @@ body {
} }
.repository.release #release-list { .repository.release #release-list {
border-top-color: #4c505c; border-top-color: var(--color-secondary);
} }
.repository .milestone.list > .item .operate > a { .repository .milestone.list > .item .operate > a {
@ -519,8 +535,8 @@ body {
} }
.ui.attached.header { .ui.attached.header {
background: #404552; background: var(--color-secondary);
border: 1px solid #404552; border: 1px solid var(--color-secondary);
color: #dbdbdb; color: #dbdbdb;
} }
@ -602,7 +618,7 @@ footer {
} }
.ui.menu { .ui.menu {
background: #404552; background: var(--color-secondary);
border: 1px solid #353945; border: 1px solid #353945;
} }
@ -613,14 +629,14 @@ footer {
} }
.ui.input input { .ui.input input {
background: #404552; background: var(--color-secondary);
border: 1px solid #4b505f; border: 1px solid var(--color-secondary);
color: #dbdbdb; color: #dbdbdb;
} }
.ui.input input:focus, .ui.input input:focus,
.ui.input.focus input { .ui.input.focus input {
background: #404552; background: var(--color-secondary);
border: 1px solid #6a737d; border: 1px solid #6a737d;
color: #dbdbdb; color: #dbdbdb;
} }
@ -655,25 +671,27 @@ footer {
border-color: #2d693b !important; border-color: #2d693b !important;
} }
.ui.green.labels a.label:hover,
.ui.basic.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 { a.ui.basic.green.label:hover {
background-color: #16ab39 !important; background-color: #3d794b !important;
border-color: #16ab39 !important; border-color: #3d794b !important;
color: #fff !important; color: #fff !important;
} }
.issue.list > .item .comment { .issue.list > .item .comment {
color: #129c92; color: #a5a5a8;
} }
.ui.basic.red.active.button, .ui.basic.red.active.button,
.ui.basic.red.buttons .active.button { .ui.basic.red.buttons .active.button {
box-shadow: 0 0 0 1px #c75252 inset !important; box-shadow: 0 0 0 1px #b75252 inset !important;
color: #c75252 !important; color: #b75252 !important;
} }
.ui.menu .item { .ui.menu .item {
background: #404552; background: var(--color-secondary);
color: #a5a5a8; color: #a5a5a8;
} }
@ -705,7 +723,7 @@ a.ui.basic.green.label:hover {
} }
.ui.divider:not(.vertical):not(.horizontal) { .ui.divider:not(.vertical):not(.horizontal) {
border-bottom-color: #4b505f; border-bottom-color: var(--color-secondary);
border-top-color: transparent; border-top-color: transparent;
} }
@ -728,8 +746,8 @@ a.ui.basic.green.label:hover {
.ui.form input[type="url"], .ui.form input[type="url"],
.ui.selection.dropdown { .ui.selection.dropdown {
color: #a5a5a8; color: #a5a5a8;
background: #404552; background: var(--color-secondary);
border: 1px solid #4b505f; border: 1px solid var(--color-secondary);
} }
.ui.form input:not([type]):hover, .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="time"]:hover,
.ui.form input[type="url"]:hover, .ui.form input[type="url"]:hover,
.ui.selection.dropdown:hover { .ui.selection.dropdown:hover {
background: #404552; background: var(--color-secondary);
border: 1px solid #4b505f; border: 1px solid var(--color-secondary);
color: #dbdbdb; color: #dbdbdb;
} }
@ -765,7 +783,7 @@ a.ui.basic.green.label:hover {
.ui.form input[type="time"]:focus, .ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus, .ui.form input[type="url"]:focus,
.ui.selection.dropdown:focus { .ui.selection.dropdown:focus {
background: #404552; background: var(--color-secondary);
border: 1px solid #6a737d; border: 1px solid #6a737d;
color: #dbdbdb; color: #dbdbdb;
} }
@ -837,7 +855,7 @@ a.ui.basic.green.label:hover {
.ui.button { .ui.button {
background: #353846; background: #353846;
border: 1px solid #4c505c; border: 1px solid var(--color-secondary);
color: #dbdbdb; color: #dbdbdb;
} }
@ -865,24 +883,24 @@ a.ui.basic.green.label:hover {
.ui.labeled.button:not([class*="left labeled"]) > .label, .ui.labeled.button:not([class*="left labeled"]) > .label,
.ui[class*="left labeled"].button > .button { .ui[class*="left labeled"].button > .button {
background: #404552; background: var(--color-secondary);
border: 1px solid #4c505c; border: 1px solid var(--color-secondary);
color: #87ab63; color: #87ab63;
} }
.ui.button:hover { .ui.button:hover {
background-color: #404552; background-color: var(--color-secondary);
color: #dbdbdb; color: #dbdbdb;
} }
.ui.search > .results { .ui.search > .results {
background: #383c4a; background: #383c4a;
border-color: #4c505c; border-color: var(--color-secondary);
} }
.ui.search > .results .result:hover, .ui.search > .results .result:hover,
.ui.category.search > .results .category .result:hover { .ui.category.search > .results .category .result:hover {
background: #404552; background: var(--color-secondary);
} }
.ui.search > .results .result .title { .ui.search > .results .result .title {
@ -891,7 +909,7 @@ a.ui.basic.green.label:hover {
.ui.table thead th, .ui.table thead th,
.ui.table > thead > tr > th { .ui.table > thead > tr > th {
background: #404552; background: var(--color-secondary);
color: #dbdbdb !important; color: #dbdbdb !important;
} }
@ -905,12 +923,12 @@ a.ui.basic.green.label:hover {
.ui.table { .ui.table {
color: #a5a5a5 !important; color: #a5a5a5 !important;
border-color: #4c505c; border-color: var(--color-secondary);
background: #353945; background: #353945;
} }
.ui.table tbody tr { .ui.table tbody tr {
border-color: #404552; border-color: var(--color-secondary);
background: #353945; background: #353945;
} }
@ -928,12 +946,12 @@ a.ui.basic.green.label:hover {
} }
.ui.tabular.menu { .ui.tabular.menu {
border-bottom-color: #4c505c; border-bottom-color: var(--color-secondary);
.item.active { .item.active {
border-top-color: #4c505c; border-top-color: var(--color-secondary);
border-left-color: #4c505c; border-left-color: var(--color-secondary);
border-right-color: #4c505c; border-right-color: var(--color-secondary);
background: #383c4a; background: #383c4a;
color: #dbdbdb; color: #dbdbdb;
} }
@ -959,7 +977,7 @@ a.ui.basic.green.label:hover {
.markdown:not(code) .highlight pre, .markdown:not(code) .highlight pre,
.markdown:not(code) pre { .markdown:not(code) pre {
background-color: #2a2e3a; background-color: #2a2e3a;
border: 1px solid #404552; border: 1px solid var(--color-secondary);
} }
.markdown:not(code) table tr:nth-child(2n) { .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 td,
.markdown:not(code) table th { .markdown:not(code) table th {
border-color: #4c505c !important; border-color: var(--color-secondary) !important;
} }
.repository.file.editor.edit, .repository.file.editor.edit,
@ -1015,7 +1033,12 @@ a.ui.basic.green.label:hover {
.ui.segment { .ui.segment {
background: #353945; background: #353945;
color: #a5a5a8 !important; color: #a5a5a8 !important;
border: 1px solid #404552; }
.ui.segment,
.ui.segments,
.ui.attached.segment {
border: 1px solid var(--color-secondary);
} }
.ui.list > .item > .content { .ui.list > .item > .content {
@ -1049,10 +1072,6 @@ a.ui.basic.green.label:hover {
color: #a5a5a8; color: #a5a5a8;
} }
.ui.attached.segment {
border: 1px solid #404552;
}
.repository.view.issue .comment-list .event > .svg.issue-symbol { .repository.view.issue .comment-list .event > .svg.issue-symbol {
background: #3b4954; background: #3b4954;
} }
@ -1069,32 +1088,32 @@ a.ui.basic.green.label:hover {
> .bottom.segment { > .bottom.segment {
background: #353945; background: #353945;
a { a {
border: solid 1px #353945; border-color: var(--color-secondary);
background-color: #353945; background-color: #353945;
} }
} }
.header { .header {
color: #dbdbdb; color: #dbdbdb;
background-color: #404552; background-color: var(--color-secondary);
border-bottom: 1px solid #353944; border-color: var(--color-secondary);
} }
.merge-section { .merge-section {
background-color: #404552; background-color: var(--color-secondary);
border-color: #505667; border-color: #505667;
} }
.header:after { .header:after {
border-right-color: #404552; border-right-color: var(--color-secondary);
} }
.merge-section.no-header:after { .merge-section.no-header:after {
border-right-color: #404552; border-right-color: var(--color-secondary);
} }
.header:before { .header:before {
border-right-color: #404552; border-right-color: var(--color-secondary);
} }
.merge-section.no-header:before { .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:not(.prevent-before-timeline):before,
.repository.view.issue .comment-list .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 { .repository.view.issue .comment-list .timeline-item .badge {
background-color: #4c505c; background-color: var(--color-secondary);
border-color: #4c505c; border-color: var(--color-secondary);
color: #ccc; color: #ccc;
} }
@ -1143,11 +1162,15 @@ a.ui.basic.green.label:hover {
} }
.repository .comment.form .content .form:after { .repository .comment.form .content .form:after {
border-right-color: #313c47; border-right-color: #353945;
} }
.repository .comment.form .content .form:before { .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 { .ui .text.grey a:hover {
@ -1156,8 +1179,8 @@ a.ui.basic.green.label:hover {
.ui.basic.green.active.button, .ui.basic.green.active.button,
.ui.basic.green.buttons .active.button { .ui.basic.green.buttons .active.button {
color: #13ae38 !important; color: #87ab63 !important;
box-shadow: 0 0 0 1px #13ae38 inset !important; box-shadow: 0 0 0 1px #87ab63 inset !important;
} }
.ui.green.buttons .active.button, .ui.green.buttons .active.button,
@ -1168,7 +1191,7 @@ a.ui.basic.green.label:hover {
} }
.ui .info.segment.top { .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 { .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; background-color: #2c4632 !important;
} }
.repository .diff-stats li {
border-color: var(--color-secondary);
}
.removed-code { .removed-code {
background-color: #5f3737; background-color: #5f3737;
} }
@ -1215,6 +1242,10 @@ td.blob-hunk {
background: #2a2e3a; background: #2a2e3a;
} }
.code-diff-split .same-code .lines-type-marker {
background: #353945;
}
.ui.vertical.menu .active.item { .ui.vertical.menu .active.item {
background: #4b5162; background: #4b5162;
} }
@ -1224,7 +1255,7 @@ td.blob-hunk {
} }
.ui.vertical.menu .header.item { .ui.vertical.menu .header.item {
background: #404552; background: var(--color-secondary);
} }
.ui.vertical.menu { .ui.vertical.menu {
@ -1233,19 +1264,19 @@ td.blob-hunk {
} }
.ui.repository.list .item:not(:first-child) { .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,
.ui.selection.active.dropdown .menu { .ui.selection.active.dropdown .menu {
border-color: #4e5361; 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,
.ui.selection.active.dropdown:hover .menu { .ui.selection.active.dropdown:hover .menu {
border-color: #4e5361; 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 { .ui.menu .ui.dropdown .menu > .active.item {
@ -1260,7 +1291,7 @@ td.blob-hunk {
.ui.card, .ui.card,
.ui.cards > .card { .ui.cards > .card {
background: #353945; background: #353945;
box-shadow: 0 0 0 1px #4c505c; box-shadow: 0 0 0 1px var(--color-secondary);
} }
.ui.card > .content > .header, .ui.card > .content > .header,
@ -1294,7 +1325,7 @@ td.blob-hunk {
} }
.ui.user.list .item:not(:first-child) { .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 { .ui.secondary.pointing.menu .active.item:hover {
@ -1349,7 +1380,7 @@ input {
} }
.settings .key.list .item:not(:first-child) { .settings .key.list .item:not(:first-child) {
border-top: 1px solid #404552; border-top: 1px solid var(--color-secondary);
} }
.ui.attached.info.message, .ui.attached.info.message,
@ -1425,7 +1456,7 @@ input {
.ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before { .ui.checkbox input:checked ~ label:before {
background: #404552; background: var(--color-secondary);
opacity: 1; opacity: 1;
color: #dbdbdb; color: #dbdbdb;
border-color: #505667; border-color: #505667;
@ -1433,25 +1464,25 @@ input {
.ui.checkbox .box:before, .ui.checkbox .box:before,
.ui.checkbox label:before { .ui.checkbox label:before {
background: #404552; background: var(--color-secondary);
border: 1px solid #505667; border: 1px solid #505667;
} }
.ui.checkbox .box:hover::before, .ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before { .ui.checkbox label:hover::before {
background: #404552; background: var(--color-secondary);
border-color: #505667; border-color: #505667;
} }
.ui.checkbox .box:active::before, .ui.checkbox .box:active::before,
.ui.checkbox label:active::before { .ui.checkbox label:active::before {
background: #404552; background: var(--color-secondary);
border-color: #6a737d; border-color: #6a737d;
} }
.ui.checkbox input:focus ~ .box:before, .ui.checkbox input:focus ~ .box:before,
.ui.checkbox input:focus ~ label:before { .ui.checkbox input:focus ~ label:before {
background: #404552; background: var(--color-secondary);
border-color: #6a737d; 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 ~ .box:before,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before { .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before {
border-color: #6a737d; border-color: #6a737d;
background: #404552; background: var(--color-secondary);
} }
.ui.checkbox input:checked:focus ~ .box:after, .ui.checkbox input:checked:focus ~ .box:after,
@ -1510,11 +1541,11 @@ input {
} }
.user.profile .ui.card .extra.content ul li:not(:last-child) { .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 { .ui.form .dropzone {
border: 1px dashed #7f98ad; border: 1px dashed var(--color-secondary);
background-color: #2e323e; background-color: #2e323e;
.dz-button { .dz-button {
@ -1567,7 +1598,7 @@ input {
.lines-num { .lines-num {
color: #a5a5a8 !important; color: #a5a5a8 !important;
border-color: #4b505f !important; border-color: var(--color-secondary) !important;
} }
td.blob-excerpt { td.blob-excerpt {
@ -1675,7 +1706,7 @@ a.ui.labels .label:hover {
} }
.repository .label.list .item { .repository .label.list .item {
border-bottom: 1px dashed #4c505c; border-bottom: 1px dashed var(--color-secondary);
} }
.ui.text.yellow, .ui.text.yellow,
@ -1715,7 +1746,7 @@ a.ui.labels .label:hover {
.organization.teams .members .item:not(:last-child), .organization.teams .members .item:not(:last-child),
.organization.teams .detail .item:not(:last-child), .organization.teams .detail .item:not(:last-child),
.organization.members .list .item { .organization.members .list .item {
border-bottom-color: #404552; border-bottom-color: var(--color-secondary);
} }
.repository .labelspage .item a, .repository .labelspage .item a,
@ -1741,17 +1772,17 @@ a.ui.labels .label:hover {
} }
.ui.dividing.header { .ui.dividing.header {
border-bottom: 1px solid #4c505c; border-bottom: 1px solid var(--color-secondary);
} }
.ui.modal > .header { .ui.modal > .header {
background: #404552; background: var(--color-secondary);
color: #dbdbdb; color: #dbdbdb;
} }
.ui.modal > .actions { .ui.modal > .actions {
background: #404552; background: var(--color-secondary);
border-top: 1px solid #404552; border-top: 1px solid var(--color-secondary);
} }
.ui.modal > .content { .ui.modal > .content {
@ -1759,18 +1790,18 @@ a.ui.labels .label:hover {
} }
.minicolors-panel { .minicolors-panel {
background: #404552 !important; background: var(--color-secondary) !important;
border-color: #6a737d !important; border-color: #6a737d !important;
} }
.editor-toolbar { .editor-toolbar {
background-color: #404552; background-color: var(--color-secondary);
border-color: #4b505f; border-color: var(--color-secondary);
} }
.edit-diff > div > .ui.table { .edit-diff > div > .ui.table {
border-left-color: #404552 !important; border-left-color: var(--color-secondary) !important;
border-right-color: #404552 !important; border-right-color: var(--color-secondary) !important;
} }
.editor-toolbar a { .editor-toolbar a {
@ -1795,7 +1826,7 @@ a.ui.labels .label:hover {
} }
&.sticky { &.sticky {
border-bottom-color: #4c505c; border-bottom-color: var(--color-secondary);
} }
} }
@ -1813,10 +1844,10 @@ a.ui.labels .label:hover {
border: none; border: none;
} }
background: #404552; background: var(--color-secondary);
} }
border-color: #4c505c; border-color: var(--color-secondary);
} }
.footer { .footer {
@ -1901,7 +1932,7 @@ a.ui.labels .label:hover {
.CodeMirror { .CodeMirror {
color: #9daccc; color: #9daccc;
background-color: #2e323e; background-color: #2e323e;
border-color: #4b505f; border-color: var(--color-secondary);
border-top: 0; border-top: 0;
div.CodeMirror-cursor { div.CodeMirror-cursor {
@ -2005,7 +2036,7 @@ a.ui.labels .label:hover {
.ui.popup { .ui.popup {
background-color: #383c4a; background-color: #383c4a;
color: #a5a5a8; color: #a5a5a8;
border-color: #4c505c; border-color: var(--color-secondary);
} }
.ui.popup.top:before, .ui.popup.top:before,
@ -2015,7 +2046,7 @@ a.ui.labels .label:hover {
.ui.bottom.left.popup:before, .ui.bottom.left.popup:before,
.ui.bottom.right.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 { .markdown:not(code) h1 {
@ -2040,7 +2071,7 @@ footer .container .links > * {
} }
.repository.release #release-list > li .detail { .repository.release #release-list > li .detail {
border-left-color: #4c505c; border-left-color: var(--color-secondary);
} }
.repository.release #release-list > li .detail .dot { .repository.release #release-list > li .detail .dot {
@ -2049,11 +2080,11 @@ footer .container .links > * {
} }
.repository.release #release-list > li .detail .download .list { .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 { .repository.release #release-list > li .detail .download .list li {
border-bottom-color: #404552; border-bottom-color: var(--color-secondary);
} }
.board-column { .board-column {