mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 11:41:32 +01: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:
		
							parent
							
								
									e0a84d7880
								
							
						
					
					
						commit
						b4f8da533e
					
				| @ -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> | ||||
| 						<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 right basic label">{{$.i18n.Tr "repo.diff.protected"}}</span> | ||||
| 								<span class="ui 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> | ||||
| 									<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 grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a> | ||||
| 									<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> | ||||
| 			<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}} | ||||
| 				</b> {{ .Percentage }}%</span> | ||||
| 				</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 { | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user