third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages 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>
tokarchuk/v1.17
silverwind 4 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      templates/explore/code.tmpl
  2. 8
      templates/explore/repo_list.tmpl
  3. 50
      templates/repo/diff/box.tmpl
  4. 12
      templates/repo/diff/image_diff.tmpl
  5. 2
      templates/repo/diff/stats.tmpl
  6. 8
      templates/repo/search.tmpl
  7. 19
      templates/repo/sub_menu.tmpl
  8. 6
      templates/shared/searchbottom.tmpl
  9. 63
      web_src/less/_base.less
  10. 15
      web_src/less/_explore.less
  11. 45
      web_src/less/_repository.less
  12. 9
      web_src/less/_review.less
  13. 4
      web_src/less/helpers.less
  14. 33
      web_src/less/themes/theme-arc-green.less

8
templates/explore/code.tmpl
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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 {

Write Preview
Loading…
Cancel
Save