Refactor some CSS styles and simplify code (#26771)

Refactor some CSS styles and simplify code.

Some styles are not in use, remove them.

templates/code/searchresults.tmpl

@@ -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>

templates/projects/view.tmpl

@@ -43,11 +43,9 @@
 						<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>
 					</div>
-					</div>
 
 					<div class="text right actions">
 						<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
@@ -125,11 +123,9 @@
 												<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>
 											</div>
-											</div>
 
 											<div class="text right actions">
 												<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>

templates/repo/branch/list.tmpl

@@ -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>

templates/repo/icon.tmpl

@@ -1,4 +1,3 @@
-<div class="repo-icon">
 {{$avatarLink := .RelAvatarLink}}
 {{if $avatarLink}}
 	<img class="ui avatar gt-vm" src="{{$avatarLink}}" width="32" height="32" alt="{{.FullName}}">
@@ -13,4 +12,3 @@
 {{else}}
 	{{svg "octicon-repo" 32}}
 {{end}}
-</div>

templates/repo/issue/label_precolors.tmpl

@@ -1,3 +1,5 @@
+<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>
@@ -6,6 +8,8 @@
 		<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>
@@ -14,3 +18,5 @@
 		<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>

templates/repo/issue/labels/edit_delete_label.tmpl

@@ -54,11 +54,9 @@
 				<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>
 			</div>
-			</div>
 		</form>
 	</div>
 	<div class="actions">

templates/repo/issue/labels/label_new.tmpl

@@ -29,11 +29,9 @@
 				<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>
 			</div>
-			</div>
 		</form>
 	</div>
 

templates/repo/search.tmpl

@@ -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>

web_src/css/base.css

@@ -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;
+  display: flex;
-  padding-right: 0 !important;
+  flex-direction: column;
-  margin: 3px 10px auto !important;
+  justify-content: center;
-  width: 120px !important;
+  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;