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
go-gitea · Nov 20, 2022 · ef08998 · ef08998
1 parent 7a004ad
commit ef08998
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 133 deletions.
diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
@@ -38,10 +38,10 @@
  {{end}}
  </div>
  </div>
- <div class="metas df ac">
+ <div class="metas df ac text grey">
  {{if .PrimaryLanguage}}
- <a href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
- <span class="text grey df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
+ <a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
+ <span class="df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
  </a>
  {{end}}
  {{if not $.DisableStars}}

diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
@@ -68,8 +68,8 @@
  <div class="item">
  <a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong class="team-name">{{.Name}}</strong></a>
  <p class="text grey">
- <a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.NumMembers}}</strong> {{$.locale.Tr "org.lower_members"}}</a> ·
- <a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories"><strong>{{.NumRepos}}</strong> {{$.locale.Tr "org.lower_repositories"}}</a>
+ <a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.NumMembers}}</strong> {{$.locale.Tr "org.lower_members"}}</a> ·
+ <a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories"><strong>{{.NumRepos}}</strong> {{$.locale.Tr "org.lower_repositories"}}</a>
  </p>
  </div>
  {{end}}

diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
@@ -11,7 +11,7 @@
  <div class="ui top attached header comment-header df ac sb">
  <div class="comment-header-left df ac">
  {{if .OriginalAuthor}}
- <span class="text black mr-2">
+ <span class="text black bold mr-2">
  {{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
  {{.OriginalAuthor}}
  </span>

diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
@@ -30,7 +30,7 @@
  <div class="ui top attached header comment-header df ac sb">
  <div class="comment-header-left df ac">
  {{if .Issue.OriginalAuthor}}
- <span class="text black">
+ <span class="text black bold">
  {{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
  {{.Issue.OriginalAuthor}}
  </span>
@@ -45,7 +45,7 @@
  {{avatar .Issue.Poster}}
  </a>
  <span class="text grey">
- <a class="author"{{if gt .Issue.Poster.ID 0}} href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
+ {{template "shared/user/authorlink" .Issue.Poster}}
  {{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
  </span>
  {{end}}

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
@@ -25,7 +25,7 @@
  <div class="ui top attached header comment-header df ac sb">
  <div class="comment-header-left df ac">
  {{if .OriginalAuthor}}
- <span class="text black mr-2">
+ <span class="text black bold mr-2">
  {{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
  {{.OriginalAuthor}}
  </span>
@@ -42,9 +42,7 @@
  </a>
  {{end}}
  <span class="text grey">
- <a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
- {{.Poster.GetDisplayName}}
- </a>
+ {{template "shared/user/authorlink" .Poster}}
  {{$.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
  </span>
  {{end}}
@@ -151,14 +149,14 @@
  <span class="badge">{{svg "octicon-bookmark"}}</span>
  {{template "shared/user/avatarlink" .Poster}}
  {{if eq .RefAction 3}}<del>{{end}}
- <span class="text grey">
+ <span class="text grey muted-links">
  {{template "shared/user/authorlink" .Poster}}
  {{$.locale.Tr $refTr (.EventTag|Escape) $createdStr (.RefCommentHTMLURL|Escape) $refFrom | Safe}}
  </span>
  {{if eq .RefAction 3}}</del>{{end}}
 
  <div class="detail">
- <span class="text grey"><a href="{{.RefIssueHTMLURL}}"><b>{{.RefIssueTitle}}</b> {{.RefIssueIdent}}</a></span>
+ <span class="text grey"><a class="muted" href="{{.RefIssueHTMLURL}}"><b>{{.RefIssueTitle}}</b> {{.RefIssueIdent}}</a></span>
  </div>
  </div>
  {{else if eq .Type 4}}
@@ -207,7 +205,7 @@
  {{if .RemovedAssignee}}
  {{template "shared/user/avatarlink" .Assignee}}
  <span class="text grey">
- <a class="author" {{if gt .Assignee.ID 0}}href="{{.Assignee.HomeLink}}"{{end}}>{{.Assignee.GetDisplayName}}</a>
+ {{template "shared/user/authorlink" .Assignee}}
  {{if eq .Poster.ID .Assignee.ID}}
  {{$.locale.Tr "repo.issues.remove_self_assignment" $createdStr | Safe}}
  {{else}}
@@ -331,7 +329,7 @@
  <div class="detail">
  {{svg "octicon-plus"}}
  <span class="text grey">
- <a href="{{.DependentIssue.HTMLURL}}">
+ <a class="muted" href="{{.DependentIssue.HTMLURL}}">
  {{if eq .DependentIssue.RepoID .Issue.RepoID}}
  #{{.DependentIssue.Index}} {{.DependentIssue.Title}}
  {{else}}
@@ -354,7 +352,7 @@
  <div class="detail">
  <span class="text grey">{{svg "octicon-trash"}}</span>
  <span class="text grey">
- <a href="{{.DependentIssue.HTMLURL}}">
+ <a class="muted" href="{{.DependentIssue.HTMLURL}}">
  {{if eq .DependentIssue.RepoID .Issue.RepoID}}
  #{{.DependentIssue.Index}} {{.DependentIssue.Title}}
  {{else}}
@@ -408,7 +406,7 @@
  <div class="comment-header-left df ac">
  <span class="text grey">
  {{if .OriginalAuthor}}
- <span class="text black">
+ <span class="text black bold">
  {{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
  {{.OriginalAuthor}}
  </span>
@@ -536,7 +534,7 @@
  {{end}}
  <span class="text grey">
  {{if .OriginalAuthor}}
- <span class="text black">
+ <span class="text black bold">
  {{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
  {{.OriginalAuthor}}
  </span>

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
@@ -389,7 +389,7 @@
  {{avatar $user}}
  </a>
  <div class="content">
- <a class="author">{{$user.DisplayName}}</a>
+ {{template "shared/user/authorlink" $user}}
  <div class="text">
  {{$trackedtime}}
  </div>

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
@@ -160,7 +160,7 @@
  </div>
  <div class="issue-item-icon-right text grey">
  {{if .NumComments}}
- <a class="tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+ <a class="tdn muted" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
  {{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}}
  </a>
  {{end}}

diff --git a/templates/shared/user/authorlink.tmpl b/templates/shared/user/authorlink.tmpl
@@ -1,3 +1 @@
-<a class="author"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
- {{.GetDisplayName}}
-</a>
+<a class="author text black bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
diff --git a/templates/shared/user/avatarlink.tmpl b/templates/shared/user/avatarlink.tmpl
@@ -1,3 +1 @@
-<a class="avatar"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
- {{avatar .}}
-</a>
+<a class="avatar"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{avatar .}}</a>
diff --git a/templates/shared/user/namelink.tmpl b/templates/shared/user/namelink.tmpl
@@ -1,3 +1 @@
-<a{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
- {{.GetDisplayName}}
-</a>
+<a{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
@@ -79,6 +79,7 @@
  --color-pink: #e03997;
  --color-brown: #a5673f;
  --color-grey: #888888;
+ --color-black: #1b1c1d;
  /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
  --color-red-light: #e45e5e;
  --color-orange-light: #f59555;
@@ -92,9 +93,9 @@
  --color-pink-light: #e86bb1;
  --color-brown-light: #c58b66;
  --color-grey-light: #a6a6a6;
+ --color-black-light: #525558;
  /* other colors */
  --color-gold: #a1882b;
- --color-black: #1b1c1d;
  --color-white: #ffffff;
  --color-diff-removed-word-bg: #fdb8c0;
  --color-diff-added-word-bg: #acf2bd;
@@ -293,13 +294,15 @@ a,
  text-decoration-skip-ink: all;
 }
 
-a.muted {
+a.muted,
+.muted-links a {
  color: inherit;
 }
 
 a:hover,
 a.muted:hover,
 a.muted:hover [class*="color-text"],
+.muted-links a:hover,
 .ui.breadcrumb a:hover {
  color: var(--color-primary);
 }
@@ -1301,6 +1304,22 @@ a.ui.card:hover,
  visibility: hidden;
 }
 
+.text.red { color: var(--color-red) !important; }
+.text.orange { color: var(--color-orange) !important; }
+.text.yellow { color: var(--color-yellow) !important; }
+.text.olive { color: var(--color-olive) !important; }
+.text.green { color: var(--color-green) !important; }
+.text.teal { color: var(--color-teal) !important; }
+.text.blue { color: var(--color-blue) !important; }
+.text.violet { color: var(--color-violet) !important; }
+.text.purple { color: var(--color-purple) !important; }
+.text.pink { color: var(--color-pink) !important; }
+.text.brown { color: var(--color-brown) !important; }
+.text.black { color: var(--color-text) !important; }
+.text.grey { color: var(--color-text-light) !important; }
+.text.light.grey { color: var(--color-grey-light) !important; }
+.text.gold { color: var(--color-gold) !important; }
+
 .ui {
  &.left:not(.action) {
  float: left;
@@ -1370,74 +1389,6 @@ a.ui.card:hover,
  }
 
  .text {
- &.red {
- color: var(--color-red) !important;
-
- a {
- color: inherit !important;
-
- &:hover {
- color: var(--color-red-light) !important;
- }
- }
- }
-
- &.blue {
- color: var(--color-blue) !important;
-
- a {
- color: inherit !important;
-
- &:hover {
- color: var(--color-blue-light) !important;
- }
- }
- }
-
- &.black {
- color: var(--color-text);
-
- &:hover {
- color: var(--color-text-dark);
- }
- }
-
- &.grey {
- color: var(--color-text-light) !important;
-
- a {
- color: var(--color-text) !important;
-
- &:hover {
- color: var(--color-primary) !important;
- }
- }
- }
-
- &.light.grey {
- color: var(--color-text-light-2) !important;
- }
-
- &.green {
- color: var(--color-green) !important;
- }
-
- &.purple {
- color: var(--color-purple) !important;
- }
-
- &.yellow {
- color: var(--color-yellow) !important;
- }
-
- &.orange {
- color: var(--color-orange) !important;
- }
-
- &.gold {
- color: var(--color-gold) !important;
- }
-
  &.left {
  text-align: left !important;
  }

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
@@ -829,7 +829,7 @@
 
  .timeline-avatar {
  position: absolute;
- left: -72px;
+ left: -68px;
 
  img {
  width: 40px !important;
@@ -846,7 +846,6 @@
  .avatar img {
  width: 20px;
  height: 20px;
- margin: 0 .25rem;
  vertical-align: middle;
  }
 
@@ -981,10 +980,6 @@
  margin-top: 4px;
  }
 
- .author {
- font-weight: 600;
- }
-
  .comment-form-reply .footer {
  padding-bottom: 1em;
  }
@@ -1165,9 +1160,12 @@
  padding-left: 15px;
 
  .detail {
- font-size: .9rem;
- margin-top: 5px;
- margin-left: 8px;
+ margin-top: 4px;
+ margin-left: 14px;
+
+ .svg {
+ margin-right: 2px;
+ }
  }
 
  .segments {
@@ -2673,12 +2671,10 @@
 
  a {
  color: var(--color-text);
- text-decoration: none;
  }
 
  a:hover {
  color: var(--color-primary);
- text-decoration: none;
  }
 }
 

diff --git a/web_src/less/shared/issuelist.less b/web_src/less/shared/issuelist.less
@@ -91,6 +91,14 @@
  border-radius: 3px;
  vertical-align: 2px !important;
  }
+
+ progress::-webkit-progress-value {
+ background-color: var(--color-secondary-dark-4);
+ }
+
+ progress::-moz-progress-bar {
+ background-color: var(--color-secondary-dark-4);
+ }
  }
 
  .conflicting {