lavender-legacy/gitea
7
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Search and Diff CSS enhancements (#14050)

Browse source 
* Search and Diff CSS enhancements

- Use flexbox for language stats
- Improve labels and code boxes on repo and code search
- Use flexbox on diff header and improve suppressed diff text
- Add dedicated color for diff expander

* more diff tweaks, less vertical padding on header

* more minor tweaks

* always show fold icon, image diff improvments

* remove margin

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind 2020-12-20 19:00:03 +01:00 committed by GitHub
parent e0a84d7880
commit b4f8da533e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 129 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
templates/explore/code.tmpl
View file

@ -16,10 +16,10 @@
<h3> <h3>
{{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }} {{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }}
</h3> </h3>
<div> <div class="df ac fw">
{{range $term := .SearchResultLanguages}} {{range $term := .SearchResultLanguages}}
<a class="ui text-label {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}"> <a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
<i class="color-icon" style="background-color: {{$term.Color}}"></i> <i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
{{$term.Language}} {{$term.Language}}
<div class="detail">{{$term.Count}}</div> <div class="detail">{{$term.Count}}</div>
</a> </a>
@ -31,7 +31,7 @@
<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result"> <div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
<h4 class="ui top attached normal header"> <h4 class="ui top attached normal header">
<span class="file"><a rel="nofollow" href="{{EscapePound $repo.HTMLURL}}">{{$repo.FullName}}</a> - {{.Filename}}</span> <span class="file"><a rel="nofollow" href="{{EscapePound $repo.HTMLURL}}">{{$repo.FullName}}</a> - {{.Filename}}</span>
<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a> <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
</h4> </h4>
<div class="ui attached table segment"> <div class="ui attached table segment">
<div class="file-body file-code code-view"> <div class="file-body file-code code-view">

8
templates/explore/repo_list.tmpl
View file

@ -38,12 +38,12 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<div class="metas"> <div class="metas df ac">
{{if .PrimaryLanguage }} {{if .PrimaryLanguage }}
<span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span> <span class="text grey df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
{{end}} {{end}}
<span class="text grey">{{svg "octicon-star"}} {{.NumStars}}</span> <span class="text grey df ac mr-3">{{svg "octicon-star" 16 "mr-3"}}{{.NumStars}}</span>
<span class="text grey">{{svg "octicon-git-branch"}} {{.NumForks}}</span> <span class="text grey df ac mr-3">{{svg "octicon-git-branch" 16 "mr-3"}}{{.NumForks}}</span>
</div> </div>
</div> </div>
<div class="description"> <div class="description">

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

@ -33,10 +33,10 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<ol class="diff-detail-box diff-stats detail-files hide" id="diff-files"> <ol class="diff-detail-box diff-stats m-0 hide" id="diff-files">
{{range .Diff.Files}} {{range .Diff.Files}}
<li> <li>
<div class="diff-counter pull-right"> <div class="bold df ac pull-right">
{{if not .IsBin}} {{if not .IsBin}}
{{template "repo/diff/stats" dict "file" . "root" $}} {{template "repo/diff/stats" dict "file" . "root" $}}
{{else}} {{else}}
@ -45,7 +45,7 @@
</div> </div>
<!-- todo finish all file status, now modify, add, delete and rename --> <!-- todo finish all file status, now modify, add, delete and rename -->
<span class="status {{DiffTypeToStr .GetType}} poping up" data-content="{{DiffTypeToStr .GetType}}" data-variation="inverted tiny" data-position="right center">&nbsp;</span> <span class="status {{DiffTypeToStr .GetType}} poping up" data-content="{{DiffTypeToStr .GetType}}" data-variation="inverted tiny" data-position="right center">&nbsp;</span>
<a class="file" href="#diff-{{.Index}}">{{.Name}}</a> <a class="file mono" href="#diff-{{.Index}}">{{.Name}}</a>
</li> </li>
{{end}} {{end}}
</ol> </ol>
@ -53,23 +53,28 @@
{{if $file.IsIncomplete}} {{if $file.IsIncomplete}}
<div class="diff-file-box diff-box file-content"> <div class="diff-file-box diff-box file-content">
<h4 class="ui top attached normal header rounded"> <h4 class="ui top attached normal header rounded">
<div class="diff-counter ui left"> <a role="button" class="fold-file muted mr-2">
{{svg "octicon-chevron-down" 18}}
</a>
<div class="bold ui left df ac">
{{if not $file.IsRenamed}} {{if not $file.IsRenamed}}
{{template "repo/diff/stats" dict "file" . "root" $}} {{template "repo/diff/stats" dict "file" . "root" $}}
{{end}} {{end}}
</div> </div>
<span class="file">{{$file.Name}}</span> <span class="file mono">{{$file.Name}}</span>
<div>{{$.i18n.Tr "repo.diff.file_suppressed"}}</div> <div class="diff-file-header-actions df ac">
{{if $file.IsProtected}} <div class="text grey">{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
<span class="ui right basic label">{{$.i18n.Tr "repo.diff.protected"}}</span> {{if $file.IsProtected}}
{{end}} <span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
{{if $file.IsDeleted}}
<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{else}}
<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{end}} {{end}}
{{end}} {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
{{if $file.IsDeleted}}
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{else}}
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{end}}
{{end}}
</div>
</h4> </h4>
</div> </div>
{{else}} {{else}}
@ -82,21 +87,19 @@
{{else}} {{else}}
{{$isImage = (call $.IsImageFileInHead $file.Name)}} {{$isImage = (call $.IsImageFileInHead $file.Name)}}
{{end}} {{end}}
{{if or (not $file.IsBin) $isImage}} <a role="button" class="fold-file muted mr-2">
<a role="button" class="fold-file">
{{svg "octicon-chevron-down" 18}} {{svg "octicon-chevron-down" 18}}
</a> </a>
{{end}} <div class="bold df ac">
<div class="diff-counter">
{{if $file.IsBin}} {{if $file.IsBin}}
{{$.i18n.Tr "repo.diff.bin"}} {{$.i18n.Tr "repo.diff.bin"}}
{{else if not $file.IsRenamed}} {{else if not $file.IsRenamed}}
{{template "repo/diff/stats" dict "file" . "root" $}} {{template "repo/diff/stats" dict "file" . "root" $}}
{{end}} {{end}}
</div> </div>
<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span> <span class="file mono">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
</div> </div>
<div class="df ac"> <div class="diff-file-header-actions df ac">
{{if $file.IsProtected}} {{if $file.IsProtected}}
<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span> <span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
{{end}} {{end}}
@ -111,8 +114,8 @@
</h4> </h4>
<div class="diff-file-body ui attached unstackable table segment"> <div class="diff-file-body ui attached unstackable table segment">
{{if ne $file.Type 4}} {{if ne $file.Type 4}}
<div class="file-body file-code has-context-menu code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}"> <div class="file-body file-code has-context-menu{{if not $isImage}} code-diff{{end}}{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $isImage}} py-4{{end}}">
<table class="chroma"> <table class="chroma{{if $isImage}} w-100{{end}}">
<tbody> <tbody>
{{if $isImage}} {{if $isImage}}
{{template "repo/diff/image_diff" dict "file" . "root" $}} {{template "repo/diff/image_diff" dict "file" . "root" $}}
@ -130,7 +133,6 @@
</div> </div>
</div> </div>
{{end}} {{end}}
<br>
{{end}} {{end}}
{{if .Diff.IsIncomplete}} {{if .Diff.IsIncomplete}}

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

@ -2,22 +2,22 @@
{{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name) }} {{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name) }}
<tr> <tr>
<th class="halfwidth center"> <th class="halfwidth center pl-3 pr-2">
{{.root.i18n.Tr "repo.diff.file_before"}} {{.root.i18n.Tr "repo.diff.file_before"}}
</th> </th>
<th class="halfwidth center"> <th class="halfwidth center pl-2 pr-3">
{{.root.i18n.Tr "repo.diff.file_after"}} {{.root.i18n.Tr "repo.diff.file_after"}}
</th> </th>
</tr> </tr>
<tr> <tr>
<td class="halfwidth center"> <td class="halfwidth center pl-3 pr-2">
{{if or .file.IsDeleted (not .file.IsCreated)}} {{if or .file.IsDeleted (not .file.IsCreated)}}
<a href="{{$imagePathOld}}" target="_blank"> <a href="{{$imagePathOld}}" target="_blank">
<img src="{{$imagePathOld}}" class="border red" /> <img src="{{$imagePathOld}}" class="border red" />
</a> </a>
{{end}} {{end}}
</td> </td>
<td class="halfwidth center"> <td class="halfwidth center pl-2 pr-3">
{{if or .file.IsCreated (not .file.IsDeleted)}} {{if or .file.IsCreated (not .file.IsDeleted)}}
<a href="{{$imagePathNew}}" target="_blank"> <a href="{{$imagePathNew}}" target="_blank">
<img src="{{$imagePathNew}}" class="border green" /> <img src="{{$imagePathNew}}" class="border green" />
@ -29,7 +29,7 @@
{{ $imageInfoHead := (call .root.ImageInfo .file.Name) }} {{ $imageInfoHead := (call .root.ImageInfo .file.Name) }}
{{if or $imageInfoBase $imageInfoHead }} {{if or $imageInfoBase $imageInfoHead }}
<tr> <tr>
<td class="halfwidth center"> <td class="halfwidth center pl-3 pr-2">
{{if $imageInfoBase }} {{if $imageInfoBase }}
{{ $classWidth := "" }} {{ $classWidth := "" }}
{{ $classHeight := "" }} {{ $classHeight := "" }}
@ -52,7 +52,7 @@
{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoBase.ByteSize}}</span> {{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoBase.ByteSize}}</span>
{{end}} {{end}}
</td> </td>
<td class="halfwidth center"> <td class="halfwidth center pl-2 pr-3">
{{if $imageInfoHead }} {{if $imageInfoHead }}
{{ $classWidth := "" }} {{ $classWidth := "" }}
{{ $classHeight := "" }} {{ $classHeight := "" }}

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

@ -1,4 +1,4 @@
{{Add .file.Addition .file.Deletion}} {{Add .file.Addition .file.Deletion}}
<span class="diff-stats-bar poping up ml-2" data-content="{{.root.i18n.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide"> <span class="diff-stats-bar poping up mx-3" data-content="{{.root.i18n.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide">
<div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div> <div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
</span> </span>

8
templates/repo/search.tmpl
View file

@ -16,10 +16,10 @@
<h3> <h3>
{{.i18n.Tr "repo.search.results" (.Keyword|Escape) .RepoLink .RepoName | Str2html }} {{.i18n.Tr "repo.search.results" (.Keyword|Escape) .RepoLink .RepoName | Str2html }}
</h3> </h3>
<div> <div class="df ac fw">
{{range $term := .SearchResultLanguages}} {{range $term := .SearchResultLanguages}}
<a class="ui text-label {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{EscapePound $.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}"> <a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{EscapePound $.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
<i class="color-icon" style="background-color: {{$term.Color}}"></i> <i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
{{$term.Language}} {{$term.Language}}
<div class="detail">{{$term.Count}}</div> <div class="detail">{{$term.Count}}</div>
</a> </a>
@ -30,7 +30,7 @@
<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result"> <div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
<h4 class="ui top attached normal header"> <h4 class="ui top attached normal header">
<span class="file">{{.Filename}}</span> <span class="file">{{.Filename}}</span>
<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a> <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
</h4> </h4>
<div class="ui attached table segment"> <div class="ui attached table segment">
<div class="file-body file-code code-view"> <div class="file-body file-code code-view">

19
templates/repo/sub_menu.tmpl
View file

@ -23,15 +23,16 @@
<div class="ui segment sub-menu language-stats-details" style="display: none"> <div class="ui segment sub-menu language-stats-details" style="display: none">
<div class="ui horizontal center link list"> <div class="ui horizontal center link list">
{{range .LanguageStats}} {{range .LanguageStats}}
<div class="item"> <div class="item df ac jc">
<i class="color-icon" style="background-color: {{ .Color }}"></i> <i class="color-icon mr-3" style="background-color: {{ .Color }}"></i>
<span class="ui"><b> <span class="bold mr-3">
{{if eq .Language "other" }} {{if eq .Language "other" }}
{{ $.i18n.Tr "repo.language_other" }} {{ $.i18n.Tr "repo.language_other" }}
{{else}} {{else}}
{{ .Language }} {{ .Language }}
{{end}} {{end}}
</b> {{ .Percentage }}%</span> </span>
{{ .Percentage }}%
</div> </div>
{{end}} {{end}}
</div> </div>

6
templates/shared/searchbottom.tmpl
View file

@ -1,10 +1,10 @@
<div class="ui bottom attached table segment df ac sb"> <div class="ui bottom attached table segment df ac sb">
<div class="ml-3"> <div class="df ac ml-4">
{{if .result.Language}} {{if .result.Language}}
<i class="color-icon" style="background-color: {{.result.Color}}"></i>{{.result.Language}} <i class="color-icon mr-3" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
{{end}} {{end}}
</div> </div>
<div class="mr-3"> <div class="mr-4">
{{if not .result.UpdatedUnix.IsZero}} {{if not .result.UpdatedUnix.IsZero}}
<span class="ui grey text">{{.root.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix .result.UpdatedUnix .root.i18n.Lang) | Safe}}</span> <span class="ui grey text">{{.root.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix .result.UpdatedUnix .root.i18n.Lang) | Safe}}</span>
{{end}} {{end}}

63
web_src/less/_base.less
View file

@ -85,7 +85,8 @@
--color-text-dark: #080808; --color-text-dark: #080808;
--color-text: #212121; --color-text: #212121;
--color-text-light: #555555; --color-text-light: #555555;
--color-text-light-2: #888888; --color-text-light-2: #808080;
--color-text-light-3: #a0a0a0;
--color-box-header: #f7f7f7; --color-box-header: #f7f7f7;
--color-box-body: #ffffff; --color-box-body: #ffffff;
--color-footer: #ffffff; --color-footer: #ffffff;
@ -98,6 +99,7 @@
--color-label: #00000010; --color-label: #00000010;
--color-label-hover: #00000015; --color-label-hover: #00000015;
--color-label-basic: #00000008; --color-label-basic: #00000008;
--color-label-basic-hover: #00000015;
--color-label-border: #00000018; --color-label-border: #00000018;
--color-hover: #0000000a; --color-hover: #0000000a;
--color-active: #00000010; --color-active: #00000010;
@ -109,6 +111,7 @@
--color-code-bg: #ffffff; --color-code-bg: #ffffff;
--color-markdown-code-block: #00000010; --color-markdown-code-block: #00000010;
--color-secondary-bg: #f4f4f4; --color-secondary-bg: #f4f4f4;
--color-expand-button: #d8efff;
/* backgrounds */ /* backgrounds */
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'); --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@ -170,6 +173,7 @@ h6 {
} }
body { body {
color: var(--color-text);
background-color: var(--color-body); background-color: var(--color-body);
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
@ -304,6 +308,11 @@ a.muted:hover,
} }
.ui.ui.menu .item.disabled { .ui.ui.menu .item.disabled {
color: var(--color-text-light-3);
}
/* slightly more contrast for filters on issue list */
.ui.ui.menu .dropdown.item.disabled {
color: var(--color-text-light-2); color: var(--color-text-light-2);
} }
@ -809,10 +818,6 @@ a.ui.card:hover,
font-weight: normal; font-weight: normal;
} }
&.bold {
font-weight: 600;
}
&.italic { &.italic {
font-style: italic; font-style: italic;
} }
@ -1387,18 +1392,6 @@ a.ui.label:hover {
color: var(--color-text); color: var(--color-text);
} }
.ui.basic.labels .label,
.ui.basic.label {
background: var(--color-label-basic);
border-color: var(--color-label-border);
color: var(--color-text);
}
.ui.basic.labels a.label:hover,
a.ui.basic.label:hover {
background: var(--color-label-hover);
}
.ui.label > .detail .icons { .ui.label > .detail .icons {
margin-right: .25em; margin-right: .25em;
} }
@ -1439,6 +1432,9 @@ a.ui.basic.label:hover {
.lines-num, .lines-num,
.lines-code { .lines-code {
font-size: 12px;
font-family: var(--fonts-monospace);
line-height: 20px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
vertical-align: top; vertical-align: top;
@ -1549,12 +1545,6 @@ a.ui.basic.label:hover {
overflow-y: visible; overflow-y: visible;
} }
*:not(.fa):not(.svg):not(.icon) {
font-size: 12px;
font-family: var(--fonts-monospace);
line-height: 20px;
}
table { table {
width: 100%; width: 100%;
} }
@ -1576,6 +1566,10 @@ a.ui.basic.label:hover {
color: var(--color-text); color: var(--color-text);
} }
.ui.button.no-text .icon {
margin: 0 !important;
}
.ui.buttons .button:first-child { .ui.buttons .button:first-child {
border-left: 1px solid var(--color-secondary); border-left: 1px solid var(--color-secondary);
} }
@ -1644,6 +1638,20 @@ a.ui.basic.label:hover {
color: var(--color-primary) !important; color: var(--color-primary) !important;
} }
.ui.basic.labels .label,
.ui.basic.label {
background: var(--color-label-basic);
border-color: var(--color-label-border);
color: var(--color-text);
}
.ui.basic.labels a.label:hover,
a.ui.basic.label:hover {
color: var(--color-text);
border-color: var(--color-label-border);
background: var(--color-label-basic-hover);
}
.ui.label > img { .ui.label > img {
width: auto !important; width: auto !important;
vertical-align: middle; vertical-align: middle;
@ -1703,15 +1711,10 @@ a.ui.basic.label:hover {
} }
.color-icon { .color-icon {
margin-right: .5em;
margin-left: .5em;
display: inline-block; display: inline-block;
border: 0 solid rgba(0, 0, 0, .2);
border-radius: 100%; border-radius: 100%;
height: 14px; height: 14px;
width: 14px; width: 14px;
position: relative;
top: 2px;
} }
.ui.label > .color-icon { .ui.label > .color-icon {
@ -1835,10 +1838,6 @@ table th[data-sortt-desc] {
align-items: center !important; align-items: center !important;
} }
.text-label .color-icon {
position: static !important;
}
.emoji, .emoji,
.reaction { .reaction {
font-size: 1.25em; font-size: 1.25em;

15
web_src/less/_explore.less
View file

@ -15,39 +15,32 @@
.ui.repository.list { .ui.repository.list {
.item { .item {
padding-bottom: 25px; padding-bottom: 1.5rem;
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid var(--color-secondary); border-top: 1px solid var(--color-secondary);
padding-top: 25px; padding-top: 1.5rem;
} }
.ui.header { .ui.header {
font-size: 1.5rem; font-size: 1.5rem;
padding-bottom: 10px; margin-bottom: .5rem;
.name { .name {
word-break: break-all; word-break: break-all;
} }
.metas { .metas {
color: #888888;
font-size: 14px; font-size: 14px;
font-weight: normal;
span:not(:last-child) {
margin-right: 5px;
}
} }
} }
.time { .time {
font-size: 12px; font-size: 12px;
color: #808080;
} }
.ui.tags { .ui.tags {
margin-bottom: 1em; margin-bottom: .5rem;
} }
} }
} }

45
web_src/less/_repository.less
View file

@ -1413,7 +1413,7 @@
.diff-detail-box { .diff-detail-box {
padding: 7px 0; padding: 7px 0;
background: #ffffff; background: var(--color-body);
line-height: 30px; line-height: 30px;
@media @mediaMdAndDown { @media @mediaMdAndDown {
@ -1425,7 +1425,6 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 8; z-index: 8;
margin-bottom: 10px;
border-bottom: 1px solid var(--color-secondary); border-bottom: 1px solid var(--color-secondary);
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
@ -1442,8 +1441,12 @@
margin-right: .25rem; margin-right: .25rem;
} }
.diff-detail-actions .btn-review { .diff-detail-actions > * {
margin-right: 0 !important; margin-right: 0;
}
.diff-detail-actions > * + * {
margin-left: .25rem;
} }
span.status { span.status {
@ -1454,26 +1457,21 @@
vertical-align: middle; vertical-align: middle;
&.modify { &.modify {
background-color: #f0db88; background-color: var(--color-yellow);
} }
&.add { &.add {
background-color: #b4e2b4; background-color: var(--color-green);
} }
&.del { &.del {
background-color: #e9aeae; background-color: var(--color-red);
} }
&.rename { &.rename {
background-color: #dad8ff; background-color: var(--color-teal);
} }
} }
.detail-files {
background: #ffffff;
margin: 0;
}
} }
.diff-box .header { .diff-box .header {
@ -1486,12 +1484,18 @@
} }
.button { .button {
padding: 8px 10px; padding: 8px 12px;
flex: 0 0 auto; flex: 0 0 auto;
margin-top: -8px;
margin-bottom: -8px;
margin-right: 0;
} }
} }
.diff-file-box { .diff-file-box {
margin-top: 1rem;
margin-bottom: 1rem;
.header { .header {
background-color: var(--color-box-header); background-color: var(--color-box-header);
} }
@ -1588,7 +1592,6 @@
} }
.diff-stats { .diff-stats {
clear: both; clear: both;
margin-bottom: 5px; margin-bottom: 5px;
max-height: 400px; max-height: 400px;
@ -1599,9 +1602,12 @@
list-style: none; list-style: none;
padding-bottom: 4px; padding-bottom: 4px;
margin-bottom: 4px; margin-bottom: 4px;
border-bottom: 1px dashed var(--color-secondary);
padding-left: 6px; padding-left: 6px;
} }
li + li {
border-top: 1px solid var(--color-secondary);
}
} }
.repo-search-result { .repo-search-result {
@ -2961,9 +2967,8 @@ td.blob-excerpt {
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
} }
.diff-counter { .diff-file-header-actions > * + * {
font-weight: 600; margin-left: .5rem !important;
margin-right: 8px;
} }
.diff-stats-bar { .diff-stats-bar {
@ -2971,8 +2976,6 @@ td.blob-excerpt {
background-color: var(--color-red); background-color: var(--color-red);
height: 12px; height: 12px;
width: 40px; width: 40px;
position: relative;
top: 2px;
.diff-stats-add-bar { .diff-stats-add-bar {
background-color: var(--color-green); background-color: var(--color-green);

9
web_src/less/_review.less
View file

@ -122,19 +122,14 @@
color: var(--color-text); color: var(--color-text);
} }
a.fold-file {
margin-right: 10px;
color: inherit;
}
a.blob-excerpt { a.blob-excerpt {
color: #575a68; color: var(--color-text-light);
height: 28px; height: 28px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
background: var(--color-primary-light-5); background: var(--color-expand-button);
} }
a.blob-excerpt:hover { a.blob-excerpt:hover {

4
web_src/less/helpers.less
View file

@ -12,12 +12,16 @@
.f1 { flex: 1 !important; } .f1 { flex: 1 !important; }
.fw { flex-wrap: wrap !important; } .fw { flex-wrap: wrap !important; }
.vm { vertical-align: middle !important; } .vm { vertical-align: middle !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mono { .mono {
font-family: var(--fonts-monospace) !important; font-family: var(--fonts-monospace) !important;
font-size: .9em !important; /* compensate for monospace fonts being usually slighty larger */ font-size: .9em !important; /* compensate for monospace fonts being usually slighty larger */
} }
.bold { font-weight: 600 !important; }
.word-break { .word-break {
word-wrap: break-word !important; word-wrap: break-word !important;
word-break: break-all !important; word-break: break-all !important;

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

@ -82,7 +82,8 @@
--color-text-dark: #dbe0ea; --color-text-dark: #dbe0ea;
--color-text: #bbc0ca; --color-text: #bbc0ca;
--color-text-light: #a6aab5; --color-text-light: #a6aab5;
--color-text-light-2: #868a95; --color-text-light-2: #8a8e99;
--color-text-light-3: #707687;
--color-footer: #2e323e; --color-footer: #2e323e;
--color-timeline: #4c525e; --color-timeline: #4c525e;
--color-input-text: #d5dbe6; --color-input-text: #d5dbe6;
@ -92,7 +93,8 @@
--color-navbar: #2a2e3a; --color-navbar: #2a2e3a;
--color-label: #ffffff0d; --color-label: #ffffff0d;
--color-label-hover: #ffffff20; --color-label-hover: #ffffff20;
--color-label-basic: #00000016; --color-label-basic: #00000030;
--color-label-basic-hover: #40404030;
--color-label-border: #ffffff28; --color-label-border: #ffffff28;
--color-hover: #ffffff0d; --color-hover: #ffffff0d;
--color-active: #ffffff14; --color-active: #ffffff14;
@ -104,6 +106,8 @@
--color-code-bg: #2a2e3a; --color-code-bg: #2a2e3a;
--color-shadow: #00000060; --color-shadow: #00000060;
--color-secondary-bg: #2a2e3a; --color-secondary-bg: #2a2e3a;
--color-text-focus: #fff;
--color-expand-button: #3c404d;
} }
.repository.branches .commit-divergence .bar { .repository.branches .commit-divergence .bar {
@ -118,10 +122,6 @@
background: var(--color-primary-alpha-20) !important; background: var(--color-primary-alpha-20) !important;
} }
body {
color: var(--color-secondary-dark-6);
}
::placeholder, ::placeholder,
.CodeMirror-placeholder { .CodeMirror-placeholder {
color: #6a737d !important; color: #6a737d !important;
@ -505,15 +505,6 @@ td.blob-excerpt {
background-color: rgba(0, 0, 0, .15); background-color: rgba(0, 0, 0, .15);
} }
a.blob-excerpt {
color: #ccc;
background: #393d4a;
}
a.blob-excerpt:hover {
background: #87ab63;
}
.lines-code.active, .lines-code.active,
.lines-code .active { .lines-code .active {
background: #534d1b !important; background: #534d1b !important;
@ -658,18 +649,6 @@ a.blob-excerpt:hover {
border-right-color: var(--color-secondary) !important; border-right-color: var(--color-secondary) !important;
} }
.repository .diff-detail-box {
background-color: #383c4a;
.detail-files {
background-color: inherit;
}
&.sticky {
border-bottom-color: var(--color-secondary);
}
}
/* code mirror dark theme */ /* code mirror dark theme */
.CodeMirror { .CodeMirror {