Refactor some CSS styles and simplify code (#26771)
Refactor some CSS styles and simplify code. Some styles are not in use, remove them.
This commit is contained in:
		
							parent
							
								
									a587d25261
								
							
						
					
					
						commit
						4803766f7a
					
				|  | @ -1,6 +1,6 @@ | |||
| <div class="gt-df gt-ac gt-fw"> | ||||
| <div class="flex-text-block gt-fw"> | ||||
| 	{{range $term := .SearchResultLanguages}} | ||||
| 	<a class="ui text-label gt-df gt-ac gt-mr-1 gt-my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}{{if $.ContextUser}}/{{$.ContextUser.Name}}/-/code{{else}}/explore/code{{end}}?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}"> | ||||
| 	<a class="ui {{if eq $.Language $term.Language}}primary{{end}} basic label gt-m-0" href="{{AppSubUrl}}{{if $.ContextUser}}/{{$.ContextUser.Name}}/-/code{{else}}/explore/code{{end}}?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}"> | ||||
| 		<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i> | ||||
| 		{{$term.Language}} | ||||
| 		<div class="detail">{{$term.Count}}</div> | ||||
|  |  | |||
|  | @ -43,9 +43,7 @@ | |||
| 						<label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label> | ||||
| 						<div class="color picker column"> | ||||
| 							<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color_picker" name="color"> | ||||
| 							<div class="column precolors"> | ||||
| 								{{template "repo/issue/label_precolors"}} | ||||
| 							</div> | ||||
| 							{{template "repo/issue/label_precolors"}} | ||||
| 						</div> | ||||
| 					</div> | ||||
| 
 | ||||
|  | @ -125,9 +123,7 @@ | |||
| 												<label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label> | ||||
| 												<div class="color picker column"> | ||||
| 													<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color" name="color" value="{{.Color}}"> | ||||
| 													<div class="column precolors"> | ||||
| 														{{template "repo/issue/label_precolors"}} | ||||
| 													</div> | ||||
| 													{{template "repo/issue/label_precolors"}} | ||||
| 												</div> | ||||
| 											</div> | ||||
| 
 | ||||
|  |  | |||
|  | @ -132,11 +132,11 @@ | |||
| 									{{else}} | ||||
| 										<a href="{{.LatestPullRequest.Issue.Link}}" class="gt-vm ref-issue">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a> | ||||
| 										{{if .LatestPullRequest.HasMerged}} | ||||
| 											<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label purple large label gt-vm">{{svg "octicon-git-merge" 16 "gt-mr-2"}}{{$.locale.Tr "repo.pulls.merged"}}</a> | ||||
| 											<a href="{{.LatestPullRequest.Issue.Link}}" class="ui purple large label">{{svg "octicon-git-merge" 16 "gt-mr-2"}}{{$.locale.Tr "repo.pulls.merged"}}</a> | ||||
| 										{{else if .LatestPullRequest.Issue.IsClosed}} | ||||
| 											<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label red large label gt-vm">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.closed_title"}}</a> | ||||
| 											<a href="{{.LatestPullRequest.Issue.Link}}" class="ui red large label">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.closed_title"}}</a> | ||||
| 										{{else}} | ||||
| 											<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label green large label gt-vm">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.open_title"}}</a> | ||||
| 											<a href="{{.LatestPullRequest.Issue.Link}}" class="ui green large label">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.open_title"}}</a> | ||||
| 										{{end}} | ||||
| 									{{end}} | ||||
| 								</td> | ||||
|  |  | |||
|  | @ -1,16 +1,14 @@ | |||
| <div class="repo-icon"> | ||||
| 	{{$avatarLink := .RelAvatarLink}} | ||||
| 	{{if $avatarLink}} | ||||
| 		<img class="ui avatar gt-vm" src="{{$avatarLink}}" width="32" height="32" alt="{{.FullName}}"> | ||||
| 	{{else if $.IsTemplate}} | ||||
| 		{{svg "octicon-repo-template" 32}} | ||||
| 	{{else if $.IsPrivate}} | ||||
| 		{{svg "octicon-lock" 32}} | ||||
| 	{{else if $.IsMirror}} | ||||
| 		{{svg "octicon-mirror" 32}} | ||||
| 	{{else if $.IsFork}} | ||||
| 		{{svg "octicon-repo-forked" 32}} | ||||
| 	{{else}} | ||||
| 		{{svg "octicon-repo" 32}} | ||||
| 	{{end}} | ||||
| </div> | ||||
| {{$avatarLink := .RelAvatarLink}} | ||||
| {{if $avatarLink}} | ||||
| 	<img class="ui avatar gt-vm" src="{{$avatarLink}}" width="32" height="32" alt="{{.FullName}}"> | ||||
| {{else if $.IsTemplate}} | ||||
| 	{{svg "octicon-repo-template" 32}} | ||||
| {{else if $.IsPrivate}} | ||||
| 	{{svg "octicon-lock" 32}} | ||||
| {{else if $.IsMirror}} | ||||
| 	{{svg "octicon-mirror" 32}} | ||||
| {{else if $.IsFork}} | ||||
| 	{{svg "octicon-repo-forked" 32}} | ||||
| {{else}} | ||||
| 	{{svg "octicon-repo" 32}} | ||||
| {{end}} | ||||
|  |  | |||
|  | @ -1,16 +1,22 @@ | |||
| <a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a> | ||||
| <a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a> | ||||
| <a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a> | ||||
| <a class="color" style="background-color:#009800" data-color-hex="#009800"></a> | ||||
| <a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a> | ||||
| <a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a> | ||||
| <a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a> | ||||
| <a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a> | ||||
| <a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a> | ||||
| <a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a> | ||||
| <a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a> | ||||
| <a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a> | ||||
| <a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a> | ||||
| <a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a> | ||||
| <a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a> | ||||
| <a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a> | ||||
| <div class="precolors"> | ||||
| 	<div class="gt-df"> | ||||
| 		<a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a> | ||||
| 		<a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a> | ||||
| 		<a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a> | ||||
| 		<a class="color" style="background-color:#009800" data-color-hex="#009800"></a> | ||||
| 		<a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a> | ||||
| 		<a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a> | ||||
| 		<a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a> | ||||
| 		<a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a> | ||||
| 	</div> | ||||
| 	<div class="gt-df"> | ||||
| 		<a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a> | ||||
| 		<a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a> | ||||
| 		<a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a> | ||||
| 		<a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a> | ||||
| 		<a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a> | ||||
| 		<a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a> | ||||
| 		<a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a> | ||||
| 		<a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a> | ||||
| 	</div> | ||||
| </div> | ||||
|  |  | |||
|  | @ -54,9 +54,7 @@ | |||
| 				<label for="color">{{$.locale.Tr "repo.issues.label_color"}}</label> | ||||
| 				<div class="color picker column"> | ||||
| 					<input class="color-picker" name="color" value="#70c24a" required maxlength="7"> | ||||
| 					<div class="column precolors"> | ||||
| 						{{template "repo/issue/label_precolors"}} | ||||
| 					</div> | ||||
| 					{{template "repo/issue/label_precolors"}} | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</form> | ||||
|  |  | |||
|  | @ -29,9 +29,7 @@ | |||
| 				<label for="color">{{$.locale.Tr "repo.issues.label_color"}}</label> | ||||
| 				<div class="color picker column"> | ||||
| 					<input class="color-picker" name="color" value="#70c24a" required maxlength="7"> | ||||
| 					<div class="column precolors"> | ||||
| 						{{template "repo/issue/label_precolors"}} | ||||
| 					</div> | ||||
| 					{{template "repo/issue/label_precolors"}} | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</form> | ||||
|  |  | |||
|  | @ -27,9 +27,9 @@ | |||
| 				{{.locale.Tr "repo.search.results" (.Keyword|Escape) (.RepoLink|Escape) (.RepoName|Escape) | Str2html}} | ||||
| 			</h3> | ||||
| 			{{if .SearchResults}} | ||||
| 				<div class="gt-df gt-ac gt-fw"> | ||||
| 				<div class="flex-text-block gt-fw"> | ||||
| 					{{range $term := .SearchResultLanguages}} | ||||
| 					<a class="ui text-label gt-df gt-ac gt-mr-1 gt-my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{$.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}"> | ||||
| 					<a class="ui {{if eq $.Language $term.Language}}primary{{end}} basic label gt-m-0" href="{{$.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}"> | ||||
| 						<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i> | ||||
| 						{{$term.Language}} | ||||
| 						<div class="detail">{{$term.Count}}</div> | ||||
|  |  | |||
|  | @ -474,7 +474,7 @@ a.label, | |||
| 
 | ||||
| /* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */ | ||||
| .ui.input > input { | ||||
|   line-height: 1.3; | ||||
|   line-height: var(--line-height-default); | ||||
| } | ||||
| 
 | ||||
| .ui.input.focus > input, | ||||
|  | @ -951,6 +951,7 @@ img.ui.avatar, | |||
|   filter: saturate(2); | ||||
| } | ||||
| 
 | ||||
| /* TODO: use gt-word-break instead */ | ||||
| .dont-break-out { | ||||
|   overflow-wrap: break-word; | ||||
|   word-wrap: break-word; | ||||
|  | @ -1456,10 +1457,6 @@ img.ui.avatar, | |||
|   border-color: var(--color-gold) !important; | ||||
| } | ||||
| 
 | ||||
| .ui .branch-tag-choice { | ||||
|   line-height: 20px; | ||||
| } | ||||
| 
 | ||||
| @media (max-width: 767.98px) { | ||||
|   .ui.pagination.menu .item:not(.active,.navigation), | ||||
|   .ui.pagination.menu .item.navigation span.navigation_label { | ||||
|  | @ -1640,10 +1637,6 @@ img.ui.avatar, | |||
|   margin-left: 0.5rem; | ||||
| } | ||||
| 
 | ||||
| .repo-icon { | ||||
|   display: inline-block; | ||||
| } | ||||
| 
 | ||||
| .activity-bar-graph { | ||||
|   background-color: var(--color-primary); | ||||
|   color: var(--color-primary-contrast); | ||||
|  | @ -1681,10 +1674,6 @@ i.icons .icon:first-child { | |||
|   margin-right: 0; | ||||
| } | ||||
| 
 | ||||
| i.icon.centerlock { | ||||
|   top: 1em; | ||||
| } | ||||
| 
 | ||||
| .ui.label { | ||||
|   padding: 0.3em 0.5em; | ||||
|   transition: none; | ||||
|  | @ -1879,10 +1868,6 @@ a.ui.active.label:hover { | |||
|   width: 100%; | ||||
| } | ||||
| 
 | ||||
| .octicon-tiny { | ||||
|   font-size: 0.85714286rem; | ||||
| } | ||||
| 
 | ||||
| .ui.primary.label, | ||||
| .ui.primary.labels .label, | ||||
| .ui.ui.ui.primary.label { | ||||
|  | @ -2037,6 +2022,7 @@ a.ui.basic.label:hover { | |||
|   margin-left: 0; | ||||
| } | ||||
| 
 | ||||
| /* TODO: replace it with gt-invisible */ | ||||
| .invisible { | ||||
|   visibility: hidden; | ||||
| } | ||||
|  | @ -2123,11 +2109,6 @@ table th[data-sortt-desc] .svg { | |||
|   box-shadow: 0 0 0 1px var(--color-secondary) inset; | ||||
| } | ||||
| 
 | ||||
| .text-label { | ||||
|   display: inline-flex !important; | ||||
|   align-items: center !important; | ||||
| } | ||||
| 
 | ||||
| .emoji, | ||||
| .reaction { | ||||
|   font-size: 1.25em; | ||||
|  | @ -2241,14 +2222,14 @@ table th[data-sortt-desc] .svg { | |||
| } | ||||
| 
 | ||||
| .precolors { | ||||
|   padding-left: 0 !important; | ||||
|   padding-right: 0 !important; | ||||
|   margin: 3px 10px auto !important; | ||||
|   width: 120px !important; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   justify-content: center; | ||||
|   margin-left: 1em; | ||||
| } | ||||
| 
 | ||||
| .precolors .color { | ||||
|   float: left; | ||||
|   display: inline-block; | ||||
|   width: 15px; | ||||
|   height: 15px; | ||||
| } | ||||
|  | @ -2303,6 +2284,7 @@ table th[data-sortt-desc] .svg { | |||
| 
 | ||||
| .ui.ui.button, | ||||
| .ui.ui.dropdown, | ||||
| .ui.ui.label, | ||||
| .flex-items-inline > .item, | ||||
| .flex-text-inline { | ||||
|   display: inline-flex; | ||||
|  | @ -2319,6 +2301,10 @@ table th[data-sortt-desc] .svg { | |||
|   vertical-align: middle; | ||||
| } | ||||
| 
 | ||||
| .ui.ui.circular.label { | ||||
|   justify-content: center; | ||||
| } | ||||
| 
 | ||||
| .ui.ui.labeled.button { | ||||
|   gap: 0; | ||||
|   align-items: stretch; | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue