mirror of
				https://gitee.com/gitea/gitea
				synced 2025-11-04 08:30:25 +08:00 
			
		
		
		
	Search and Diff CSS enhancements (#14050)
* 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:
		@@ -16,10 +16,10 @@
 | 
			
		||||
                <h3>
 | 
			
		||||
                    {{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }}
 | 
			
		||||
                </h3>
 | 
			
		||||
				<div>
 | 
			
		||||
				<div class="df ac fw">
 | 
			
		||||
					{{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}}">
 | 
			
		||||
						<i class="color-icon" style="background-color: {{$term.Color}}"></i>
 | 
			
		||||
					<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 mr-3" style="background-color: {{$term.Color}}"></i>
 | 
			
		||||
						{{$term.Language}}
 | 
			
		||||
						<div class="detail">{{$term.Count}}</div>
 | 
			
		||||
					</a>
 | 
			
		||||
@@ -31,7 +31,7 @@
 | 
			
		||||
                        <div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
 | 
			
		||||
                            <h4 class="ui top attached normal header">
 | 
			
		||||
                                <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>
 | 
			
		||||
                            <div class="ui attached table segment">
 | 
			
		||||
                                <div class="file-body file-code code-view">
 | 
			
		||||
 
 | 
			
		||||
@@ -38,12 +38,12 @@
 | 
			
		||||
						{{end}}
 | 
			
		||||
					</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div class="metas">
 | 
			
		||||
				<div class="metas df ac">
 | 
			
		||||
					{{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}}
 | 
			
		||||
					<span class="text grey">{{svg "octicon-star"}} {{.NumStars}}</span>
 | 
			
		||||
					<span class="text grey">{{svg "octicon-git-branch"}} {{.NumForks}}</span>
 | 
			
		||||
					<span class="text grey df ac mr-3">{{svg "octicon-star" 16 "mr-3"}}{{.NumStars}}</span>
 | 
			
		||||
					<span class="text grey df ac mr-3">{{svg "octicon-git-branch" 16 "mr-3"}}{{.NumForks}}</span>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="description">
 | 
			
		||||
 
 | 
			
		||||
@@ -33,10 +33,10 @@
 | 
			
		||||
				{{end}}
 | 
			
		||||
			</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}}
 | 
			
		||||
				<li>
 | 
			
		||||
					<div class="diff-counter pull-right">
 | 
			
		||||
					<div class="bold df ac pull-right">
 | 
			
		||||
						{{if not .IsBin}}
 | 
			
		||||
							{{template "repo/diff/stats" dict "file" . "root" $}}
 | 
			
		||||
						{{else}}
 | 
			
		||||
@@ -45,7 +45,7 @@
 | 
			
		||||
					</div>
 | 
			
		||||
					<!-- 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"> </span>
 | 
			
		||||
					<a class="file" href="#diff-{{.Index}}">{{.Name}}</a>
 | 
			
		||||
					<a class="file mono" href="#diff-{{.Index}}">{{.Name}}</a>
 | 
			
		||||
				</li>
 | 
			
		||||
			{{end}}
 | 
			
		||||
		</ol>
 | 
			
		||||
@@ -53,23 +53,28 @@
 | 
			
		||||
			{{if $file.IsIncomplete}}
 | 
			
		||||
				<div class="diff-file-box diff-box file-content">
 | 
			
		||||
					<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}}
 | 
			
		||||
								{{template "repo/diff/stats" dict "file" . "root" $}}
 | 
			
		||||
							{{end}}
 | 
			
		||||
						</div>
 | 
			
		||||
						<span class="file">{{$file.Name}}</span>
 | 
			
		||||
						<div>{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
 | 
			
		||||
						{{if $file.IsProtected}}
 | 
			
		||||
							<span class="ui right basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
 | 
			
		||||
						{{end}}
 | 
			
		||||
						{{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>
 | 
			
		||||
						<span class="file mono">{{$file.Name}}</span>
 | 
			
		||||
						<div class="diff-file-header-actions df ac">
 | 
			
		||||
							<div class="text grey">{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
 | 
			
		||||
							{{if $file.IsProtected}}
 | 
			
		||||
								<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
 | 
			
		||||
							{{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>
 | 
			
		||||
				</div>
 | 
			
		||||
			{{else}}
 | 
			
		||||
@@ -82,21 +87,19 @@
 | 
			
		||||
							{{else}}
 | 
			
		||||
								{{$isImage = (call $.IsImageFileInHead $file.Name)}}
 | 
			
		||||
							{{end}}
 | 
			
		||||
							{{if or (not $file.IsBin) $isImage}}
 | 
			
		||||
							<a role="button" class="fold-file">
 | 
			
		||||
							<a role="button" class="fold-file muted mr-2">
 | 
			
		||||
								{{svg "octicon-chevron-down" 18}}
 | 
			
		||||
							</a>
 | 
			
		||||
							{{end}}
 | 
			
		||||
							<div class="diff-counter">
 | 
			
		||||
							<div class="bold df ac">
 | 
			
		||||
								{{if $file.IsBin}}
 | 
			
		||||
									{{$.i18n.Tr "repo.diff.bin"}}
 | 
			
		||||
								{{else if not $file.IsRenamed}}
 | 
			
		||||
									{{template "repo/diff/stats" dict "file" . "root" $}}
 | 
			
		||||
								{{end}}
 | 
			
		||||
							</div>
 | 
			
		||||
							<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
 | 
			
		||||
							<span class="file mono">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="df ac">
 | 
			
		||||
						<div class="diff-file-header-actions df ac">
 | 
			
		||||
							{{if $file.IsProtected}}
 | 
			
		||||
								<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
 | 
			
		||||
							{{end}}
 | 
			
		||||
@@ -111,8 +114,8 @@
 | 
			
		||||
					</h4>
 | 
			
		||||
					<div class="diff-file-body ui attached unstackable table segment">
 | 
			
		||||
						{{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}}">
 | 
			
		||||
								<table class="chroma">
 | 
			
		||||
							<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{{if $isImage}} w-100{{end}}">
 | 
			
		||||
									<tbody>
 | 
			
		||||
										{{if $isImage}}
 | 
			
		||||
											{{template "repo/diff/image_diff" dict "file" . "root" $}}
 | 
			
		||||
@@ -130,7 +133,6 @@
 | 
			
		||||
					</div>
 | 
			
		||||
				</div>
 | 
			
		||||
			{{end}}
 | 
			
		||||
		<br>
 | 
			
		||||
		{{end}}
 | 
			
		||||
 | 
			
		||||
		{{if .Diff.IsIncomplete}}
 | 
			
		||||
 
 | 
			
		||||
@@ -2,22 +2,22 @@
 | 
			
		||||
{{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name)  }}
 | 
			
		||||
 | 
			
		||||
<tr>
 | 
			
		||||
 	<th class="halfwidth center">
 | 
			
		||||
 	<th class="halfwidth center pl-3 pr-2">
 | 
			
		||||
 		{{.root.i18n.Tr "repo.diff.file_before"}}
 | 
			
		||||
 	</th>
 | 
			
		||||
 	<th class="halfwidth center">
 | 
			
		||||
 	<th class="halfwidth center pl-2 pr-3">
 | 
			
		||||
 		{{.root.i18n.Tr "repo.diff.file_after"}}
 | 
			
		||||
 	</th>
 | 
			
		||||
</tr>
 | 
			
		||||
<tr>
 | 
			
		||||
 	<td class="halfwidth center">
 | 
			
		||||
 	<td class="halfwidth center pl-3 pr-2">
 | 
			
		||||
 	    {{if or .file.IsDeleted (not .file.IsCreated)}}
 | 
			
		||||
            <a href="{{$imagePathOld}}" target="_blank">
 | 
			
		||||
                <img src="{{$imagePathOld}}" class="border red" />
 | 
			
		||||
            </a>
 | 
			
		||||
 	    {{end}}
 | 
			
		||||
 	</td>
 | 
			
		||||
 	<td class="halfwidth center">
 | 
			
		||||
 	<td class="halfwidth center pl-2 pr-3">
 | 
			
		||||
 	    {{if or .file.IsCreated (not .file.IsDeleted)}}
 | 
			
		||||
			<a href="{{$imagePathNew}}" target="_blank">
 | 
			
		||||
				<img src="{{$imagePathNew}}" class="border green" />
 | 
			
		||||
@@ -29,7 +29,7 @@
 | 
			
		||||
{{ $imageInfoHead := (call .root.ImageInfo .file.Name) }}
 | 
			
		||||
{{if or $imageInfoBase $imageInfoHead }}
 | 
			
		||||
<tr>
 | 
			
		||||
 	<td class="halfwidth center">
 | 
			
		||||
 	<td class="halfwidth center pl-3 pr-2">
 | 
			
		||||
 	{{if $imageInfoBase }}
 | 
			
		||||
 		{{ $classWidth := "" }}
 | 
			
		||||
 		{{ $classHeight := "" }}
 | 
			
		||||
@@ -52,7 +52,7 @@
 | 
			
		||||
 	    {{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoBase.ByteSize}}</span>
 | 
			
		||||
 	{{end}}
 | 
			
		||||
 	</td>
 | 
			
		||||
 	<td class="halfwidth center">
 | 
			
		||||
 	<td class="halfwidth center pl-2 pr-3">
 | 
			
		||||
 	{{if $imageInfoHead }}
 | 
			
		||||
 		{{ $classWidth := "" }}
 | 
			
		||||
 		{{ $classHeight := "" }}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,4 +1,4 @@
 | 
			
		||||
{{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>
 | 
			
		||||
</span>
 | 
			
		||||
 
 | 
			
		||||
@@ -16,10 +16,10 @@
 | 
			
		||||
			<h3>
 | 
			
		||||
				{{.i18n.Tr "repo.search.results" (.Keyword|Escape) .RepoLink .RepoName | Str2html }}
 | 
			
		||||
			</h3>
 | 
			
		||||
			<div>
 | 
			
		||||
			<div class="df ac fw">
 | 
			
		||||
				{{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}}">
 | 
			
		||||
					<i class="color-icon" style="background-color: {{$term.Color}}"></i>
 | 
			
		||||
				<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 mr-3" style="background-color: {{$term.Color}}"></i>
 | 
			
		||||
					{{$term.Language}}
 | 
			
		||||
					<div class="detail">{{$term.Count}}</div>
 | 
			
		||||
				</a>
 | 
			
		||||
@@ -30,7 +30,7 @@
 | 
			
		||||
					<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
 | 
			
		||||
						<h4 class="ui top attached normal header">
 | 
			
		||||
							<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>
 | 
			
		||||
						<div class="ui attached table segment">
 | 
			
		||||
							<div class="file-body file-code code-view">
 | 
			
		||||
 
 | 
			
		||||
@@ -23,15 +23,16 @@
 | 
			
		||||
	<div class="ui segment sub-menu language-stats-details" style="display: none">
 | 
			
		||||
		<div class="ui horizontal center link list">
 | 
			
		||||
			{{range .LanguageStats}}
 | 
			
		||||
			<div class="item">
 | 
			
		||||
				<i class="color-icon" style="background-color: {{ .Color }}"></i>
 | 
			
		||||
				<span class="ui"><b>
 | 
			
		||||
				{{if eq .Language "other" }}
 | 
			
		||||
					{{ $.i18n.Tr "repo.language_other" }}
 | 
			
		||||
				{{else}}
 | 
			
		||||
					{{ .Language }}
 | 
			
		||||
				{{end}}
 | 
			
		||||
				</b> {{ .Percentage }}%</span>
 | 
			
		||||
			<div class="item df ac jc">
 | 
			
		||||
				<i class="color-icon mr-3" style="background-color: {{ .Color }}"></i>
 | 
			
		||||
				<span class="bold mr-3">
 | 
			
		||||
					{{if eq .Language "other" }}
 | 
			
		||||
						{{ $.i18n.Tr "repo.language_other" }}
 | 
			
		||||
					{{else}}
 | 
			
		||||
						{{ .Language }}
 | 
			
		||||
					{{end}}
 | 
			
		||||
				</span>
 | 
			
		||||
				{{ .Percentage }}%
 | 
			
		||||
			</div>
 | 
			
		||||
			{{end}}
 | 
			
		||||
		</div>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,10 +1,10 @@
 | 
			
		||||
<div class="ui bottom attached table segment df ac sb">
 | 
			
		||||
		<div class="ml-3">
 | 
			
		||||
		<div class="df ac ml-4">
 | 
			
		||||
			{{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}}
 | 
			
		||||
		</div>
 | 
			
		||||
		<div class="mr-3">
 | 
			
		||||
		<div class="mr-4">
 | 
			
		||||
			{{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>
 | 
			
		||||
			{{end}}
 | 
			
		||||
 
 | 
			
		||||
@@ -85,7 +85,8 @@
 | 
			
		||||
  --color-text-dark: #080808;
 | 
			
		||||
  --color-text: #212121;
 | 
			
		||||
  --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-body: #ffffff;
 | 
			
		||||
  --color-footer: #ffffff;
 | 
			
		||||
@@ -98,6 +99,7 @@
 | 
			
		||||
  --color-label: #00000010;
 | 
			
		||||
  --color-label-hover: #00000015;
 | 
			
		||||
  --color-label-basic: #00000008;
 | 
			
		||||
  --color-label-basic-hover: #00000015;
 | 
			
		||||
  --color-label-border: #00000018;
 | 
			
		||||
  --color-hover: #0000000a;
 | 
			
		||||
  --color-active: #00000010;
 | 
			
		||||
@@ -109,6 +111,7 @@
 | 
			
		||||
  --color-code-bg: #ffffff;
 | 
			
		||||
  --color-markdown-code-block: #00000010;
 | 
			
		||||
  --color-secondary-bg: #f4f4f4;
 | 
			
		||||
  --color-expand-button: #d8efff;
 | 
			
		||||
  /* 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-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 {
 | 
			
		||||
  color: var(--color-text);
 | 
			
		||||
  background-color: var(--color-body);
 | 
			
		||||
  overflow-y: auto;
 | 
			
		||||
  display: flex;
 | 
			
		||||
@@ -304,6 +308,11 @@ a.muted:hover,
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.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);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@@ -809,10 +818,6 @@ a.ui.card:hover,
 | 
			
		||||
      font-weight: normal;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &.bold {
 | 
			
		||||
      font-weight: 600;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &.italic {
 | 
			
		||||
      font-style: italic;
 | 
			
		||||
    }
 | 
			
		||||
@@ -1387,18 +1392,6 @@ a.ui.label:hover {
 | 
			
		||||
  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 {
 | 
			
		||||
  margin-right: .25em;
 | 
			
		||||
}
 | 
			
		||||
@@ -1439,6 +1432,9 @@ a.ui.basic.label:hover {
 | 
			
		||||
 | 
			
		||||
.lines-num,
 | 
			
		||||
.lines-code {
 | 
			
		||||
  font-size: 12px;
 | 
			
		||||
  font-family: var(--fonts-monospace);
 | 
			
		||||
  line-height: 20px;
 | 
			
		||||
  padding-top: 0;
 | 
			
		||||
  padding-bottom: 0;
 | 
			
		||||
  vertical-align: top;
 | 
			
		||||
@@ -1549,12 +1545,6 @@ a.ui.basic.label:hover {
 | 
			
		||||
    overflow-y: visible;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  *:not(.fa):not(.svg):not(.icon) {
 | 
			
		||||
    font-size: 12px;
 | 
			
		||||
    font-family: var(--fonts-monospace);
 | 
			
		||||
    line-height: 20px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  table {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
  }
 | 
			
		||||
@@ -1576,6 +1566,10 @@ a.ui.basic.label:hover {
 | 
			
		||||
  color: var(--color-text);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.button.no-text .icon {
 | 
			
		||||
  margin: 0 !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.buttons .button:first-child {
 | 
			
		||||
  border-left: 1px solid var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
@@ -1644,6 +1638,20 @@ a.ui.basic.label:hover {
 | 
			
		||||
  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 {
 | 
			
		||||
  width: auto !important;
 | 
			
		||||
  vertical-align: middle;
 | 
			
		||||
@@ -1703,15 +1711,10 @@ a.ui.basic.label:hover {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.color-icon {
 | 
			
		||||
  margin-right: .5em;
 | 
			
		||||
  margin-left: .5em;
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  border: 0 solid rgba(0, 0, 0, .2);
 | 
			
		||||
  border-radius: 100%;
 | 
			
		||||
  height: 14px;
 | 
			
		||||
  width: 14px;
 | 
			
		||||
  position: relative;
 | 
			
		||||
  top: 2px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.label > .color-icon {
 | 
			
		||||
@@ -1835,10 +1838,6 @@ table th[data-sortt-desc] {
 | 
			
		||||
  align-items: center !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.text-label .color-icon {
 | 
			
		||||
  position: static !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.emoji,
 | 
			
		||||
.reaction {
 | 
			
		||||
  font-size: 1.25em;
 | 
			
		||||
 
 | 
			
		||||
@@ -15,39 +15,32 @@
 | 
			
		||||
 | 
			
		||||
.ui.repository.list {
 | 
			
		||||
  .item {
 | 
			
		||||
    padding-bottom: 25px;
 | 
			
		||||
    padding-bottom: 1.5rem;
 | 
			
		||||
 | 
			
		||||
    &:not(:first-child) {
 | 
			
		||||
      border-top: 1px solid var(--color-secondary);
 | 
			
		||||
      padding-top: 25px;
 | 
			
		||||
      padding-top: 1.5rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .ui.header {
 | 
			
		||||
      font-size: 1.5rem;
 | 
			
		||||
      padding-bottom: 10px;
 | 
			
		||||
      margin-bottom: .5rem;
 | 
			
		||||
 | 
			
		||||
      .name {
 | 
			
		||||
        word-break: break-all;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .metas {
 | 
			
		||||
        color: #888888;
 | 
			
		||||
        font-size: 14px;
 | 
			
		||||
        font-weight: normal;
 | 
			
		||||
 | 
			
		||||
        span:not(:last-child) {
 | 
			
		||||
          margin-right: 5px;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .time {
 | 
			
		||||
      font-size: 12px;
 | 
			
		||||
      color: #808080;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .ui.tags {
 | 
			
		||||
      margin-bottom: 1em;
 | 
			
		||||
      margin-bottom: .5rem;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -1413,7 +1413,7 @@
 | 
			
		||||
 | 
			
		||||
  .diff-detail-box {
 | 
			
		||||
    padding: 7px 0;
 | 
			
		||||
    background: #ffffff;
 | 
			
		||||
    background: var(--color-body);
 | 
			
		||||
    line-height: 30px;
 | 
			
		||||
 | 
			
		||||
    @media @mediaMdAndDown {
 | 
			
		||||
@@ -1425,7 +1425,6 @@
 | 
			
		||||
      position: sticky;
 | 
			
		||||
      top: 0;
 | 
			
		||||
      z-index: 8;
 | 
			
		||||
      margin-bottom: 10px;
 | 
			
		||||
      border-bottom: 1px solid var(--color-secondary);
 | 
			
		||||
      padding-left: 2px;
 | 
			
		||||
      padding-right: 2px;
 | 
			
		||||
@@ -1442,8 +1441,12 @@
 | 
			
		||||
      margin-right: .25rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .diff-detail-actions .btn-review {
 | 
			
		||||
      margin-right: 0 !important;
 | 
			
		||||
    .diff-detail-actions > * {
 | 
			
		||||
      margin-right: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .diff-detail-actions > * + * {
 | 
			
		||||
      margin-left: .25rem;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    span.status {
 | 
			
		||||
@@ -1454,26 +1457,21 @@
 | 
			
		||||
      vertical-align: middle;
 | 
			
		||||
 | 
			
		||||
      &.modify {
 | 
			
		||||
        background-color: #f0db88;
 | 
			
		||||
        background-color: var(--color-yellow);
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      &.add {
 | 
			
		||||
        background-color: #b4e2b4;
 | 
			
		||||
        background-color: var(--color-green);
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      &.del {
 | 
			
		||||
        background-color: #e9aeae;
 | 
			
		||||
        background-color: var(--color-red);
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      &.rename {
 | 
			
		||||
        background-color: #dad8ff;
 | 
			
		||||
        background-color: var(--color-teal);
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .detail-files {
 | 
			
		||||
      background: #ffffff;
 | 
			
		||||
      margin: 0;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .diff-box .header {
 | 
			
		||||
@@ -1486,12 +1484,18 @@
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .button {
 | 
			
		||||
      padding: 8px 10px;
 | 
			
		||||
      padding: 8px 12px;
 | 
			
		||||
      flex: 0 0 auto;
 | 
			
		||||
      margin-top: -8px;
 | 
			
		||||
      margin-bottom: -8px;
 | 
			
		||||
      margin-right: 0;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .diff-file-box {
 | 
			
		||||
    margin-top: 1rem;
 | 
			
		||||
    margin-bottom: 1rem;
 | 
			
		||||
 | 
			
		||||
    .header {
 | 
			
		||||
      background-color: var(--color-box-header);
 | 
			
		||||
    }
 | 
			
		||||
@@ -1588,7 +1592,6 @@
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .diff-stats {
 | 
			
		||||
 | 
			
		||||
    clear: both;
 | 
			
		||||
    margin-bottom: 5px;
 | 
			
		||||
    max-height: 400px;
 | 
			
		||||
@@ -1599,9 +1602,12 @@
 | 
			
		||||
      list-style: none;
 | 
			
		||||
      padding-bottom: 4px;
 | 
			
		||||
      margin-bottom: 4px;
 | 
			
		||||
      border-bottom: 1px dashed var(--color-secondary);
 | 
			
		||||
      padding-left: 6px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    li + li {
 | 
			
		||||
      border-top: 1px solid var(--color-secondary);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .repo-search-result {
 | 
			
		||||
@@ -2961,9 +2967,8 @@ td.blob-excerpt {
 | 
			
		||||
  border-radius: var(--border-radius) !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.diff-counter {
 | 
			
		||||
  font-weight: 600;
 | 
			
		||||
  margin-right: 8px;
 | 
			
		||||
.diff-file-header-actions > * + * {
 | 
			
		||||
  margin-left: .5rem !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.diff-stats-bar {
 | 
			
		||||
@@ -2971,8 +2976,6 @@ td.blob-excerpt {
 | 
			
		||||
  background-color: var(--color-red);
 | 
			
		||||
  height: 12px;
 | 
			
		||||
  width: 40px;
 | 
			
		||||
  position: relative;
 | 
			
		||||
  top: 2px;
 | 
			
		||||
 | 
			
		||||
  .diff-stats-add-bar {
 | 
			
		||||
    background-color: var(--color-green);
 | 
			
		||||
 
 | 
			
		||||
@@ -122,19 +122,14 @@
 | 
			
		||||
  color: var(--color-text);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
a.fold-file {
 | 
			
		||||
  margin-right: 10px;
 | 
			
		||||
  color: inherit;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
a.blob-excerpt {
 | 
			
		||||
  color: #575a68;
 | 
			
		||||
  color: var(--color-text-light);
 | 
			
		||||
  height: 28px;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  background: var(--color-primary-light-5);
 | 
			
		||||
  background: var(--color-expand-button);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
a.blob-excerpt:hover {
 | 
			
		||||
 
 | 
			
		||||
@@ -12,12 +12,16 @@
 | 
			
		||||
.f1 { flex: 1 !important; }
 | 
			
		||||
.fw { flex-wrap: wrap !important; }
 | 
			
		||||
.vm { vertical-align: middle !important; }
 | 
			
		||||
.w-100 { width: 100% !important; }
 | 
			
		||||
.h-100 { height: 100% !important; }
 | 
			
		||||
 | 
			
		||||
.mono {
 | 
			
		||||
  font-family: var(--fonts-monospace) !important;
 | 
			
		||||
  font-size: .9em !important; /* compensate for monospace fonts being usually slighty larger */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.bold { font-weight: 600 !important; }
 | 
			
		||||
 | 
			
		||||
.word-break {
 | 
			
		||||
  word-wrap: break-word !important;
 | 
			
		||||
  word-break: break-all !important;
 | 
			
		||||
 
 | 
			
		||||
@@ -82,7 +82,8 @@
 | 
			
		||||
  --color-text-dark: #dbe0ea;
 | 
			
		||||
  --color-text: #bbc0ca;
 | 
			
		||||
  --color-text-light: #a6aab5;
 | 
			
		||||
  --color-text-light-2: #868a95;
 | 
			
		||||
  --color-text-light-2: #8a8e99;
 | 
			
		||||
  --color-text-light-3: #707687;
 | 
			
		||||
  --color-footer: #2e323e;
 | 
			
		||||
  --color-timeline: #4c525e;
 | 
			
		||||
  --color-input-text: #d5dbe6;
 | 
			
		||||
@@ -92,7 +93,8 @@
 | 
			
		||||
  --color-navbar: #2a2e3a;
 | 
			
		||||
  --color-label: #ffffff0d;
 | 
			
		||||
  --color-label-hover: #ffffff20;
 | 
			
		||||
  --color-label-basic: #00000016;
 | 
			
		||||
  --color-label-basic: #00000030;
 | 
			
		||||
  --color-label-basic-hover: #40404030;
 | 
			
		||||
  --color-label-border: #ffffff28;
 | 
			
		||||
  --color-hover: #ffffff0d;
 | 
			
		||||
  --color-active: #ffffff14;
 | 
			
		||||
@@ -104,6 +106,8 @@
 | 
			
		||||
  --color-code-bg: #2a2e3a;
 | 
			
		||||
  --color-shadow: #00000060;
 | 
			
		||||
  --color-secondary-bg: #2a2e3a;
 | 
			
		||||
  --color-text-focus: #fff;
 | 
			
		||||
  --color-expand-button: #3c404d;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.repository.branches .commit-divergence .bar {
 | 
			
		||||
@@ -118,10 +122,6 @@
 | 
			
		||||
  background: var(--color-primary-alpha-20) !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
body {
 | 
			
		||||
  color: var(--color-secondary-dark-6);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
::placeholder,
 | 
			
		||||
.CodeMirror-placeholder {
 | 
			
		||||
  color: #6a737d !important;
 | 
			
		||||
@@ -505,15 +505,6 @@ td.blob-excerpt {
 | 
			
		||||
  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 {
 | 
			
		||||
  background: #534d1b !important;
 | 
			
		||||
@@ -658,18 +649,6 @@ a.blob-excerpt:hover {
 | 
			
		||||
  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 */
 | 
			
		||||
 | 
			
		||||
.CodeMirror {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user