From ef08998bf6711f696524c7ed5fadc8949458a8ed Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 20 Nov 2022 11:47:02 +0100 Subject: [PATCH] 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 --- templates/explore/repo_list.tmpl | 6 +- templates/org/home.tmpl | 4 +- templates/repo/diff/comments.tmpl | 2 +- templates/repo/issue/view_content.tmpl | 4 +- .../repo/issue/view_content/comments.tmpl | 20 ++-- .../repo/issue/view_content/sidebar.tmpl | 2 +- templates/shared/issuelist.tmpl | 2 +- templates/shared/user/authorlink.tmpl | 4 +- templates/shared/user/avatarlink.tmpl | 4 +- templates/shared/user/namelink.tmpl | 4 +- web_src/less/_base.less | 91 +++++-------------- web_src/less/_repository.less | 18 ++-- web_src/less/shared/issuelist.less | 8 ++ web_src/less/themes/theme-arc-green.less | 45 ++++----- 14 files changed, 81 insertions(+), 133 deletions(-) diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl index 2a5c444dce..044af9522e 100644 --- a/templates/explore/repo_list.tmpl +++ b/templates/explore/repo_list.tmpl @@ -38,10 +38,10 @@ {{end}} -
+
{{if .PrimaryLanguage}} - - {{.PrimaryLanguage.Language}} + + {{.PrimaryLanguage.Language}} {{end}} {{if not $.DisableStars}} diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl index 3ff86259d5..448639975f 100644 --- a/templates/org/home.tmpl +++ b/templates/org/home.tmpl @@ -68,8 +68,8 @@
{{.Name}}

- {{.NumMembers}} {{$.locale.Tr "org.lower_members"}} · - {{.NumRepos}} {{$.locale.Tr "org.lower_repositories"}} + {{.NumMembers}} {{$.locale.Tr "org.lower_members"}} · + {{.NumRepos}} {{$.locale.Tr "org.lower_repositories"}}

{{end}} diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl index 5d298f820c..647c662d51 100644 --- a/templates/repo/diff/comments.tmpl +++ b/templates/repo/diff/comments.tmpl @@ -11,7 +11,7 @@
{{if .OriginalAuthor}} - + {{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}} {{.OriginalAuthor}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index de11846af7..0cb74e8182 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -30,7 +30,7 @@
{{if .Issue.OriginalAuthor}} - + {{svg (MigrationIcon .Repository.GetOriginalURLHostname)}} {{.Issue.OriginalAuthor}} @@ -45,7 +45,7 @@ {{avatar .Issue.Poster}} - {{.Issue.Poster.GetDisplayName}} + {{template "shared/user/authorlink" .Issue.Poster}} {{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}} {{end}} diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 7ed8cf3bde..e9b7172d1b 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -25,7 +25,7 @@
{{if .OriginalAuthor}} - + {{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}} {{.OriginalAuthor}} @@ -42,9 +42,7 @@ {{end}} - - {{.Poster.GetDisplayName}} - + {{template "shared/user/authorlink" .Poster}} {{$.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}} {{end}} @@ -151,14 +149,14 @@ {{svg "octicon-bookmark"}} {{template "shared/user/avatarlink" .Poster}} {{if eq .RefAction 3}}{{end}} - + {{template "shared/user/authorlink" .Poster}} {{$.locale.Tr $refTr (.EventTag|Escape) $createdStr (.RefCommentHTMLURL|Escape) $refFrom | Safe}} {{if eq .RefAction 3}}{{end}}
- {{.RefIssueTitle}} {{.RefIssueIdent}} + {{.RefIssueTitle}} {{.RefIssueIdent}}
{{else if eq .Type 4}} @@ -207,7 +205,7 @@ {{if .RemovedAssignee}} {{template "shared/user/avatarlink" .Assignee}} - {{.Assignee.GetDisplayName}} + {{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 @@
{{svg "octicon-plus"}} - + {{if eq .DependentIssue.RepoID .Issue.RepoID}} #{{.DependentIssue.Index}} {{.DependentIssue.Title}} {{else}} @@ -354,7 +352,7 @@
{{svg "octicon-trash"}} - + {{if eq .DependentIssue.RepoID .Issue.RepoID}} #{{.DependentIssue.Index}} {{.DependentIssue.Title}} {{else}} @@ -408,7 +406,7 @@
{{if .OriginalAuthor}} - + {{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}} {{.OriginalAuthor}} @@ -536,7 +534,7 @@ {{end}} {{if .OriginalAuthor}} - + {{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}} {{.OriginalAuthor}} diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index eb95674b13..af648387db 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -389,7 +389,7 @@ {{avatar $user}}
- {{$user.DisplayName}} + {{template "shared/user/authorlink" $user}}
{{$trackedtime}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 6fce412ffa..e8ad8406cd 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -160,7 +160,7 @@
{{if .NumComments}} - + {{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}} {{end}} diff --git a/templates/shared/user/authorlink.tmpl b/templates/shared/user/authorlink.tmpl index 81c2a4ed5e..4a6672181f 100644 --- a/templates/shared/user/authorlink.tmpl +++ b/templates/shared/user/authorlink.tmpl @@ -1,3 +1 @@ - - {{.GetDisplayName}} - +{{.GetDisplayName}} diff --git a/templates/shared/user/avatarlink.tmpl b/templates/shared/user/avatarlink.tmpl index 40f5ee7129..90f5d96700 100644 --- a/templates/shared/user/avatarlink.tmpl +++ b/templates/shared/user/avatarlink.tmpl @@ -1,3 +1 @@ - - {{avatar .}} - +{{avatar .}} diff --git a/templates/shared/user/namelink.tmpl b/templates/shared/user/namelink.tmpl index 25dff36a78..a122f4f45b 100644 --- a/templates/shared/user/namelink.tmpl +++ b/templates/shared/user/namelink.tmpl @@ -1,3 +1 @@ - - {{.GetDisplayName}} - +{{.GetDisplayName}} diff --git a/web_src/less/_base.less b/web_src/less/_base.less index f1691d8156..09ed503776 100644 --- 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 039c471309..38103c5f8e 100644 --- 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 2dffe19909..8d4cfc46d4 100644 --- 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 229ffd8937..b793f99509 100644 --- 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;