Skip to content

Commit ef08998

Browse files
authored
Color and Style enhancements (#21784, #21799) (#21868)
Backport #21784 Backport #21799 These PRs provide tweaks and simplification to the less/css selectors, simplifying text color selectors and tweak arc-green colors with a follow-up to adjust the timeline See the original PRs for more details
1 parent 7a004ad commit ef08998

File tree

14 files changed

+81
-133
lines changed

14 files changed

+81
-133
lines changed

Diff for: templates/explore/repo_list.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@
3838
{{end}}
3939
</div>
4040
</div>
41-
<div class="metas df ac">
41+
<div class="metas df ac text grey">
4242
{{if .PrimaryLanguage}}
43-
<a href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
44-
<span class="text grey df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
43+
<a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
44+
<span class="df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
4545
</a>
4646
{{end}}
4747
{{if not $.DisableStars}}

Diff for: templates/org/home.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@
6868
<div class="item">
6969
<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong class="team-name">{{.Name}}</strong></a>
7070
<p class="text grey">
71-
<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.NumMembers}}</strong> {{$.locale.Tr "org.lower_members"}}</a> ·
72-
<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories"><strong>{{.NumRepos}}</strong> {{$.locale.Tr "org.lower_repositories"}}</a>
71+
<a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.NumMembers}}</strong> {{$.locale.Tr "org.lower_members"}}</a> ·
72+
<a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories"><strong>{{.NumRepos}}</strong> {{$.locale.Tr "org.lower_repositories"}}</a>
7373
</p>
7474
</div>
7575
{{end}}

Diff for: templates/repo/diff/comments.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="ui top attached header comment-header df ac sb">
1212
<div class="comment-header-left df ac">
1313
{{if .OriginalAuthor}}
14-
<span class="text black mr-2">
14+
<span class="text black bold mr-2">
1515
{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
1616
{{.OriginalAuthor}}
1717
</span>

Diff for: templates/repo/issue/view_content.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<div class="ui top attached header comment-header df ac sb">
3131
<div class="comment-header-left df ac">
3232
{{if .Issue.OriginalAuthor}}
33-
<span class="text black">
33+
<span class="text black bold">
3434
{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
3535
{{.Issue.OriginalAuthor}}
3636
</span>
@@ -45,7 +45,7 @@
4545
{{avatar .Issue.Poster}}
4646
</a>
4747
<span class="text grey">
48-
<a class="author"{{if gt .Issue.Poster.ID 0}} href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
48+
{{template "shared/user/authorlink" .Issue.Poster}}
4949
{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
5050
</span>
5151
{{end}}

Diff for: templates/repo/issue/view_content/comments.tmpl

+9-11
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<div class="ui top attached header comment-header df ac sb">
2626
<div class="comment-header-left df ac">
2727
{{if .OriginalAuthor}}
28-
<span class="text black mr-2">
28+
<span class="text black bold mr-2">
2929
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
3030
{{.OriginalAuthor}}
3131
</span>
@@ -42,9 +42,7 @@
4242
</a>
4343
{{end}}
4444
<span class="text grey">
45-
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
46-
{{.Poster.GetDisplayName}}
47-
</a>
45+
{{template "shared/user/authorlink" .Poster}}
4846
{{$.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
4947
</span>
5048
{{end}}
@@ -151,14 +149,14 @@
151149
<span class="badge">{{svg "octicon-bookmark"}}</span>
152150
{{template "shared/user/avatarlink" .Poster}}
153151
{{if eq .RefAction 3}}<del>{{end}}
154-
<span class="text grey">
152+
<span class="text grey muted-links">
155153
{{template "shared/user/authorlink" .Poster}}
156154
{{$.locale.Tr $refTr (.EventTag|Escape) $createdStr (.RefCommentHTMLURL|Escape) $refFrom | Safe}}
157155
</span>
158156
{{if eq .RefAction 3}}</del>{{end}}
159157

160158
<div class="detail">
161-
<span class="text grey"><a href="{{.RefIssueHTMLURL}}"><b>{{.RefIssueTitle}}</b> {{.RefIssueIdent}}</a></span>
159+
<span class="text grey"><a class="muted" href="{{.RefIssueHTMLURL}}"><b>{{.RefIssueTitle}}</b> {{.RefIssueIdent}}</a></span>
162160
</div>
163161
</div>
164162
{{else if eq .Type 4}}
@@ -207,7 +205,7 @@
207205
{{if .RemovedAssignee}}
208206
{{template "shared/user/avatarlink" .Assignee}}
209207
<span class="text grey">
210-
<a class="author" {{if gt .Assignee.ID 0}}href="{{.Assignee.HomeLink}}"{{end}}>{{.Assignee.GetDisplayName}}</a>
208+
{{template "shared/user/authorlink" .Assignee}}
211209
{{if eq .Poster.ID .Assignee.ID}}
212210
{{$.locale.Tr "repo.issues.remove_self_assignment" $createdStr | Safe}}
213211
{{else}}
@@ -331,7 +329,7 @@
331329
<div class="detail">
332330
{{svg "octicon-plus"}}
333331
<span class="text grey">
334-
<a href="{{.DependentIssue.HTMLURL}}">
332+
<a class="muted" href="{{.DependentIssue.HTMLURL}}">
335333
{{if eq .DependentIssue.RepoID .Issue.RepoID}}
336334
#{{.DependentIssue.Index}} {{.DependentIssue.Title}}
337335
{{else}}
@@ -354,7 +352,7 @@
354352
<div class="detail">
355353
<span class="text grey">{{svg "octicon-trash"}}</span>
356354
<span class="text grey">
357-
<a href="{{.DependentIssue.HTMLURL}}">
355+
<a class="muted" href="{{.DependentIssue.HTMLURL}}">
358356
{{if eq .DependentIssue.RepoID .Issue.RepoID}}
359357
#{{.DependentIssue.Index}} {{.DependentIssue.Title}}
360358
{{else}}
@@ -408,7 +406,7 @@
408406
<div class="comment-header-left df ac">
409407
<span class="text grey">
410408
{{if .OriginalAuthor}}
411-
<span class="text black">
409+
<span class="text black bold">
412410
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
413411
{{.OriginalAuthor}}
414412
</span>
@@ -536,7 +534,7 @@
536534
{{end}}
537535
<span class="text grey">
538536
{{if .OriginalAuthor}}
539-
<span class="text black">
537+
<span class="text black bold">
540538
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
541539
{{.OriginalAuthor}}
542540
</span>

Diff for: templates/repo/issue/view_content/sidebar.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -389,7 +389,7 @@
389389
{{avatar $user}}
390390
</a>
391391
<div class="content">
392-
<a class="author">{{$user.DisplayName}}</a>
392+
{{template "shared/user/authorlink" $user}}
393393
<div class="text">
394394
{{$trackedtime}}
395395
</div>

Diff for: templates/shared/issuelist.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160
</div>
161161
<div class="issue-item-icon-right text grey">
162162
{{if .NumComments}}
163-
<a class="tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
163+
<a class="tdn muted" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
164164
{{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}}
165165
</a>
166166
{{end}}

Diff for: templates/shared/user/authorlink.tmpl

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
<a class="author"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
2-
{{.GetDisplayName}}
3-
</a>
1+
<a class="author text black bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>

Diff for: templates/shared/user/avatarlink.tmpl

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
<a class="avatar"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
2-
{{avatar .}}
3-
</a>
1+
<a class="avatar"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{avatar .}}</a>

Diff for: templates/shared/user/namelink.tmpl

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
<a{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
2-
{{.GetDisplayName}}
3-
</a>
1+
<a{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>

Diff for: web_src/less/_base.less

+21-70
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
--color-pink: #e03997;
8080
--color-brown: #a5673f;
8181
--color-grey: #888888;
82+
--color-black: #1b1c1d;
8283
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
8384
--color-red-light: #e45e5e;
8485
--color-orange-light: #f59555;
@@ -92,9 +93,9 @@
9293
--color-pink-light: #e86bb1;
9394
--color-brown-light: #c58b66;
9495
--color-grey-light: #a6a6a6;
96+
--color-black-light: #525558;
9597
/* other colors */
9698
--color-gold: #a1882b;
97-
--color-black: #1b1c1d;
9899
--color-white: #ffffff;
99100
--color-diff-removed-word-bg: #fdb8c0;
100101
--color-diff-added-word-bg: #acf2bd;
@@ -293,13 +294,15 @@ a,
293294
text-decoration-skip-ink: all;
294295
}
295296

296-
a.muted {
297+
a.muted,
298+
.muted-links a {
297299
color: inherit;
298300
}
299301

300302
a:hover,
301303
a.muted:hover,
302304
a.muted:hover [class*="color-text"],
305+
.muted-links a:hover,
303306
.ui.breadcrumb a:hover {
304307
color: var(--color-primary);
305308
}
@@ -1301,6 +1304,22 @@ a.ui.card:hover,
13011304
visibility: hidden;
13021305
}
13031306

1307+
.text.red { color: var(--color-red) !important; }
1308+
.text.orange { color: var(--color-orange) !important; }
1309+
.text.yellow { color: var(--color-yellow) !important; }
1310+
.text.olive { color: var(--color-olive) !important; }
1311+
.text.green { color: var(--color-green) !important; }
1312+
.text.teal { color: var(--color-teal) !important; }
1313+
.text.blue { color: var(--color-blue) !important; }
1314+
.text.violet { color: var(--color-violet) !important; }
1315+
.text.purple { color: var(--color-purple) !important; }
1316+
.text.pink { color: var(--color-pink) !important; }
1317+
.text.brown { color: var(--color-brown) !important; }
1318+
.text.black { color: var(--color-text) !important; }
1319+
.text.grey { color: var(--color-text-light) !important; }
1320+
.text.light.grey { color: var(--color-grey-light) !important; }
1321+
.text.gold { color: var(--color-gold) !important; }
1322+
13041323
.ui {
13051324
&.left:not(.action) {
13061325
float: left;
@@ -1370,74 +1389,6 @@ a.ui.card:hover,
13701389
}
13711390

13721391
.text {
1373-
&.red {
1374-
color: var(--color-red) !important;
1375-
1376-
a {
1377-
color: inherit !important;
1378-
1379-
&:hover {
1380-
color: var(--color-red-light) !important;
1381-
}
1382-
}
1383-
}
1384-
1385-
&.blue {
1386-
color: var(--color-blue) !important;
1387-
1388-
a {
1389-
color: inherit !important;
1390-
1391-
&:hover {
1392-
color: var(--color-blue-light) !important;
1393-
}
1394-
}
1395-
}
1396-
1397-
&.black {
1398-
color: var(--color-text);
1399-
1400-
&:hover {
1401-
color: var(--color-text-dark);
1402-
}
1403-
}
1404-
1405-
&.grey {
1406-
color: var(--color-text-light) !important;
1407-
1408-
a {
1409-
color: var(--color-text) !important;
1410-
1411-
&:hover {
1412-
color: var(--color-primary) !important;
1413-
}
1414-
}
1415-
}
1416-
1417-
&.light.grey {
1418-
color: var(--color-text-light-2) !important;
1419-
}
1420-
1421-
&.green {
1422-
color: var(--color-green) !important;
1423-
}
1424-
1425-
&.purple {
1426-
color: var(--color-purple) !important;
1427-
}
1428-
1429-
&.yellow {
1430-
color: var(--color-yellow) !important;
1431-
}
1432-
1433-
&.orange {
1434-
color: var(--color-orange) !important;
1435-
}
1436-
1437-
&.gold {
1438-
color: var(--color-gold) !important;
1439-
}
1440-
14411392
&.left {
14421393
text-align: left !important;
14431394
}

Diff for: web_src/less/_repository.less

+7-11
Original file line numberDiff line numberDiff line change
@@ -829,7 +829,7 @@
829829

830830
.timeline-avatar {
831831
position: absolute;
832-
left: -72px;
832+
left: -68px;
833833

834834
img {
835835
width: 40px !important;
@@ -846,7 +846,6 @@
846846
.avatar img {
847847
width: 20px;
848848
height: 20px;
849-
margin: 0 .25rem;
850849
vertical-align: middle;
851850
}
852851

@@ -981,10 +980,6 @@
981980
margin-top: 4px;
982981
}
983982

984-
.author {
985-
font-weight: 600;
986-
}
987-
988983
.comment-form-reply .footer {
989984
padding-bottom: 1em;
990985
}
@@ -1165,9 +1160,12 @@
11651160
padding-left: 15px;
11661161

11671162
.detail {
1168-
font-size: .9rem;
1169-
margin-top: 5px;
1170-
margin-left: 8px;
1163+
margin-top: 4px;
1164+
margin-left: 14px;
1165+
1166+
.svg {
1167+
margin-right: 2px;
1168+
}
11711169
}
11721170

11731171
.segments {
@@ -2673,12 +2671,10 @@
26732671

26742672
a {
26752673
color: var(--color-text);
2676-
text-decoration: none;
26772674
}
26782675

26792676
a:hover {
26802677
color: var(--color-primary);
2681-
text-decoration: none;
26822678
}
26832679
}
26842680

Diff for: web_src/less/shared/issuelist.less

+8
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,14 @@
9191
border-radius: 3px;
9292
vertical-align: 2px !important;
9393
}
94+
95+
progress::-webkit-progress-value {
96+
background-color: var(--color-secondary-dark-4);
97+
}
98+
99+
progress::-moz-progress-bar {
100+
background-color: var(--color-secondary-dark-4);
101+
}
94102
}
95103

96104
.conflicting {

0 commit comments

Comments
 (0)