loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Refactor some CSS styles and simplify code (#26771)

Refactor some CSS styles and simplify code.

Some styles are not in use, remove them.

authored by

wxiaoguang and committed by
GitHub
4803766f a587d252

+60 -78
+2 -2
templates/code/searchresults.tmpl
··· 1 - <div class="gt-df gt-ac gt-fw"> 1 + <div class="flex-text-block gt-fw"> 2 2 {{range $term := .SearchResultLanguages}} 3 - <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}}"> 3 + <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}}"> 4 4 <i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i> 5 5 {{$term.Language}} 6 6 <div class="detail">{{$term.Count}}</div>
+2 -6
templates/projects/view.tmpl
··· 43 43 <label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label> 44 44 <div class="color picker column"> 45 45 <input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color_picker" name="color"> 46 - <div class="column precolors"> 47 - {{template "repo/issue/label_precolors"}} 48 - </div> 46 + {{template "repo/issue/label_precolors"}} 49 47 </div> 50 48 </div> 51 49 ··· 125 123 <label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label> 126 124 <div class="color picker column"> 127 125 <input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color" name="color" value="{{.Color}}"> 128 - <div class="column precolors"> 129 - {{template "repo/issue/label_precolors"}} 130 - </div> 126 + {{template "repo/issue/label_precolors"}} 131 127 </div> 132 128 </div> 133 129
+3 -3
templates/repo/branch/list.tmpl
··· 132 132 {{else}} 133 133 <a href="{{.LatestPullRequest.Issue.Link}}" class="gt-vm ref-issue">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a> 134 134 {{if .LatestPullRequest.HasMerged}} 135 - <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> 135 + <a href="{{.LatestPullRequest.Issue.Link}}" class="ui purple large label">{{svg "octicon-git-merge" 16 "gt-mr-2"}}{{$.locale.Tr "repo.pulls.merged"}}</a> 136 136 {{else if .LatestPullRequest.Issue.IsClosed}} 137 - <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> 137 + <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> 138 138 {{else}} 139 - <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> 139 + <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> 140 140 {{end}} 141 141 {{end}} 142 142 </td>
+14 -16
templates/repo/icon.tmpl
··· 1 - <div class="repo-icon"> 2 - {{$avatarLink := .RelAvatarLink}} 3 - {{if $avatarLink}} 4 - <img class="ui avatar gt-vm" src="{{$avatarLink}}" width="32" height="32" alt="{{.FullName}}"> 5 - {{else if $.IsTemplate}} 6 - {{svg "octicon-repo-template" 32}} 7 - {{else if $.IsPrivate}} 8 - {{svg "octicon-lock" 32}} 9 - {{else if $.IsMirror}} 10 - {{svg "octicon-mirror" 32}} 11 - {{else if $.IsFork}} 12 - {{svg "octicon-repo-forked" 32}} 13 - {{else}} 14 - {{svg "octicon-repo" 32}} 15 - {{end}} 16 - </div> 1 + {{$avatarLink := .RelAvatarLink}} 2 + {{if $avatarLink}} 3 + <img class="ui avatar gt-vm" src="{{$avatarLink}}" width="32" height="32" alt="{{.FullName}}"> 4 + {{else if $.IsTemplate}} 5 + {{svg "octicon-repo-template" 32}} 6 + {{else if $.IsPrivate}} 7 + {{svg "octicon-lock" 32}} 8 + {{else if $.IsMirror}} 9 + {{svg "octicon-mirror" 32}} 10 + {{else if $.IsFork}} 11 + {{svg "octicon-repo-forked" 32}} 12 + {{else}} 13 + {{svg "octicon-repo" 32}} 14 + {{end}}
+22 -16
templates/repo/issue/label_precolors.tmpl
··· 1 - <a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a> 2 - <a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a> 3 - <a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a> 4 - <a class="color" style="background-color:#009800" data-color-hex="#009800"></a> 5 - <a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a> 6 - <a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a> 7 - <a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a> 8 - <a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a> 9 - <a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a> 10 - <a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a> 11 - <a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a> 12 - <a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a> 13 - <a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a> 14 - <a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a> 15 - <a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a> 16 - <a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a> 1 + <div class="precolors"> 2 + <div class="gt-df"> 3 + <a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a> 4 + <a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a> 5 + <a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a> 6 + <a class="color" style="background-color:#009800" data-color-hex="#009800"></a> 7 + <a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a> 8 + <a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a> 9 + <a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a> 10 + <a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a> 11 + </div> 12 + <div class="gt-df"> 13 + <a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a> 14 + <a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a> 15 + <a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a> 16 + <a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a> 17 + <a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a> 18 + <a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a> 19 + <a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a> 20 + <a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a> 21 + </div> 22 + </div>
+1 -3
templates/repo/issue/labels/edit_delete_label.tmpl
··· 54 54 <label for="color">{{$.locale.Tr "repo.issues.label_color"}}</label> 55 55 <div class="color picker column"> 56 56 <input class="color-picker" name="color" value="#70c24a" required maxlength="7"> 57 - <div class="column precolors"> 58 - {{template "repo/issue/label_precolors"}} 59 - </div> 57 + {{template "repo/issue/label_precolors"}} 60 58 </div> 61 59 </div> 62 60 </form>
+1 -3
templates/repo/issue/labels/label_new.tmpl
··· 29 29 <label for="color">{{$.locale.Tr "repo.issues.label_color"}}</label> 30 30 <div class="color picker column"> 31 31 <input class="color-picker" name="color" value="#70c24a" required maxlength="7"> 32 - <div class="column precolors"> 33 - {{template "repo/issue/label_precolors"}} 34 - </div> 32 + {{template "repo/issue/label_precolors"}} 35 33 </div> 36 34 </div> 37 35 </form>
+2 -2
templates/repo/search.tmpl
··· 27 27 {{.locale.Tr "repo.search.results" (.Keyword|Escape) (.RepoLink|Escape) (.RepoName|Escape) | Str2html}} 28 28 </h3> 29 29 {{if .SearchResults}} 30 - <div class="gt-df gt-ac gt-fw"> 30 + <div class="flex-text-block gt-fw"> 31 31 {{range $term := .SearchResultLanguages}} 32 - <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}}"> 32 + <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}}"> 33 33 <i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i> 34 34 {{$term.Language}} 35 35 <div class="detail">{{$term.Count}}</div>
+13 -27
web_src/css/base.css
··· 474 474 475 475 /* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */ 476 476 .ui.input > input { 477 - line-height: 1.3; 477 + line-height: var(--line-height-default); 478 478 } 479 479 480 480 .ui.input.focus > input, ··· 951 951 filter: saturate(2); 952 952 } 953 953 954 + /* TODO: use gt-word-break instead */ 954 955 .dont-break-out { 955 956 overflow-wrap: break-word; 956 957 word-wrap: break-word; ··· 1456 1457 border-color: var(--color-gold) !important; 1457 1458 } 1458 1459 1459 - .ui .branch-tag-choice { 1460 - line-height: 20px; 1461 - } 1462 - 1463 1460 @media (max-width: 767.98px) { 1464 1461 .ui.pagination.menu .item:not(.active,.navigation), 1465 1462 .ui.pagination.menu .item.navigation span.navigation_label { ··· 1640 1637 margin-left: 0.5rem; 1641 1638 } 1642 1639 1643 - .repo-icon { 1644 - display: inline-block; 1645 - } 1646 - 1647 1640 .activity-bar-graph { 1648 1641 background-color: var(--color-primary); 1649 1642 color: var(--color-primary-contrast); ··· 1679 1672 1680 1673 i.icons .icon:first-child { 1681 1674 margin-right: 0; 1682 - } 1683 - 1684 - i.icon.centerlock { 1685 - top: 1em; 1686 1675 } 1687 1676 1688 1677 .ui.label { ··· 1879 1868 width: 100%; 1880 1869 } 1881 1870 1882 - .octicon-tiny { 1883 - font-size: 0.85714286rem; 1884 - } 1885 - 1886 1871 .ui.primary.label, 1887 1872 .ui.primary.labels .label, 1888 1873 .ui.ui.ui.primary.label { ··· 2037 2022 margin-left: 0; 2038 2023 } 2039 2024 2025 + /* TODO: replace it with gt-invisible */ 2040 2026 .invisible { 2041 2027 visibility: hidden; 2042 2028 } ··· 2123 2109 box-shadow: 0 0 0 1px var(--color-secondary) inset; 2124 2110 } 2125 2111 2126 - .text-label { 2127 - display: inline-flex !important; 2128 - align-items: center !important; 2129 - } 2130 - 2131 2112 .emoji, 2132 2113 .reaction { 2133 2114 font-size: 1.25em; ··· 2241 2222 } 2242 2223 2243 2224 .precolors { 2244 - padding-left: 0 !important; 2245 - padding-right: 0 !important; 2246 - margin: 3px 10px auto !important; 2247 - width: 120px !important; 2225 + display: flex; 2226 + flex-direction: column; 2227 + justify-content: center; 2228 + margin-left: 1em; 2248 2229 } 2249 2230 2250 2231 .precolors .color { 2251 - float: left; 2232 + display: inline-block; 2252 2233 width: 15px; 2253 2234 height: 15px; 2254 2235 } ··· 2303 2284 2304 2285 .ui.ui.button, 2305 2286 .ui.ui.dropdown, 2287 + .ui.ui.label, 2306 2288 .flex-items-inline > .item, 2307 2289 .flex-text-inline { 2308 2290 display: inline-flex; ··· 2317 2299 2318 2300 .ui.dropdown .ui.label .svg { 2319 2301 vertical-align: middle; 2302 + } 2303 + 2304 + .ui.ui.circular.label { 2305 + justify-content: center; 2320 2306 } 2321 2307 2322 2308 .ui.ui.labeled.button {