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

diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index 2a5c444dce2f10635891f188d57cc0e2364ad7ea..044af9522e6e164612e0f9a8695fa2d0fca987d8 100644 (file)
--- 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
index 3ff86259d53f230761d1c9494784a3c9d746ed84..448639975f895ba9ece15a46d8dd08f67e5440aa 100644 (file)
--- 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
index 5d298f820c274fdef6172469caa5ca6171a9919f..647c662d51ce6b4b77a518815e34cc4517e094c1 100644 (file)
--- 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
index de11846af7e943e2f185ceb5ee9fe54d31f76861..0cb74e818290497372e10a1e5443b9a42133046f 100644 (file)
--- 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
index 7ed8cf3bde5e54671c5be5c66c653792d86b825d..e9b7172d1b324b483f55f84676dd3df5305a1557 100644 (file)
--- 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
index eb95674b13d2ed581a98d6088ec51a89bf7807b9..af648387db58b6d8ea896f9fb5f999cb2190e0e7 100644 (file)
--- 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
index 6fce412ffa1404dfd1b088d6bceb98d99b40f0bf..e8ad8406cd2d57cfc68a2c83cfe156b4ecaff892 100644 (file)
--- 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
index 81c2a4ed5e508b995fbeef433d74041c8fc09156..4a6672181f43ba4532677529c238ddea986d344d 100644 (file)
--- 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
index 40f5ee71297fe840f4f88dbf2957c363ee2985f4..90f5d96700e30109b71fbf281e220b4795a4d2ea 100644 (file)
--- 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
index 25dff36a788022fbf0246aea12e0d21d2bc5cf5f..a122f4f45b543fc2abc4806355a290e27c7f0a65 100644 (file)
--- 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
index f1691d81562d820dc93d0a2fc60fd65d61caaf9a..09ed50377677d56bf06e0eb52602f919e762aa9a 100644 (file)
--- 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
index 039c471309ff67a5521ff1fbc9c67755d4f7a446..38103c5f8eb551f17488901a5b57f5cc71260019 100644 (file)
--- 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
index 2dffe19909a28ce3a830fc3d0fc7fcd28602fc74..8d4cfc46d491c61be659877e86454394b04852b5 100644 (file)
--- 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 {

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 229ffd893707048c816f75642ad5900bc1888708..b793f995091603414d08dca15b743c5c542dc6d8 100644 (file)
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -56,34 +56,35 @@
   --color-secondary-alpha-80: #454a57cc;
   --color-secondary-alpha-90: #454a57e1;
   /* colors */
-  --color-red: #7d3434;
+  --color-red: #cc4848;
   --color-orange: #cc580c;
   --color-yellow: #cc9903;
   --color-olive: #91a313;
   --color-green: #87ab63;
   --color-teal: #00918a;
-  --color-blue: #1a6aa6;
-  --color-violet: #502aa1;
-  --color-purple: #8229a0;
-  --color-pink: #c21e7b;
-  --color-brown: #845232;
-  --color-grey: #5e626a;
-  /* light variants */
-  --color-red-light: #984646;
-  --color-orange-light: #e6630d;
-  --color-yellow-light: #e5ac04;
-  --color-olive-light: #a3b816;
-  --color-green-light: #9fbc82;
-  --color-teal-light: #00a39c;
-  --color-blue-light: #1e78bb;
-  --color-violet-light: #5a30b5;
-  --color-purple-light: #932eb4;
-  --color-pink-light: #db228a;
-  --color-brown-light: #955d39;
-  --color-grey-light: #6a6e78;
-  /* other colors */
+  --color-blue: #3a8ac6;
+  --color-violet: #906ae1;
+  --color-purple: #b259d0;
+  --color-pink: #d22e8b;
+  --color-brown: #a47252;
+  --color-grey: #9ea2aa;
   --color-black: #1e222e;
-  --color-gold: #a1882b;
+  /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
+  --color-red-light: #c23636;
+  --color-orange-light: #b84f0b;
+  --color-yellow-light: #b88a03;
+  --color-olive-light: #839311;
+  --color-green-light: #7a9e55;
+  --color-teal-light: #00837c;
+  --color-blue-light: #347cb3;
+  --color-violet-light: #7b4edb;
+  --color-purple-light: #a742c9;
+  --color-pink-light: #be297d;
+  --color-brown-light: #94674a;
+  --color-grey-light: #8d919b;
+  --color-black-light: #1b1f29;
+  /* other colors */
+  --color-gold: #b1983b;
   --color-white: #ffffff;
   --color-diff-removed-word-bg: #6f3333;
   --color-diff-added-word-bg: #3c653c;