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>

templates/repo/sub_menu.tmpl

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