From 5c0de39287dff804740a5de6a39d72203cbfc20c Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 12 Nov 2022 15:30:52 +0100 Subject: [PATCH 1/2] Simplify text color selectors and tweak arc-green colors (#21784) Move the text color rules out of the unneeded `.ui` block, add missing colors, tweak colors on arc-green to be more readable (red was particulary bad to read). Also, this removes the previous inheritance of link colors. I think links should always be in primary color and if they are to be discolored, the color should be set on them explicitely. Screenshot 2022-11-12 at 13 28 30 Screenshot 2022-11-12 at 13 18 48 HTML to test with: ```html
some text with a link.
some text with a link.
some text with a link.
some text with a link.
some text with a link.
some text with a link.
some text with a link.
some text with a link.
some text with a link.
some text with a link.
some text with a link.
some text with a link.
--- web_src/less/_base.less | 84 +++++------------------- web_src/less/themes/theme-arc-green.less | 38 +++++------ 2 files changed, 35 insertions(+), 87 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index f1691d81562d8..89dfe687b6ef9 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1301,6 +1301,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 +1386,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/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 229ffd8937070..370a866abb40e 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -56,34 +56,34 @@ --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-blue: #3a8ac6; + --color-violet: #906ae1; + --color-purple: #b259d0; + --color-pink: #d22e8b; + --color-brown: #a47252; --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; + --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: #55585f; /* other colors */ --color-black: #1e222e; - --color-gold: #a1882b; + --color-gold: #b1983b; --color-white: #ffffff; --color-diff-removed-word-bg: #6f3333; --color-diff-added-word-bg: #3c653c; From ace30150eb43d5f51e8a32823440fee6c2c0ffd9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 19 Nov 2022 05:02:30 +0100 Subject: [PATCH 2/2] Timeline and color tweaks (#21799) Followup to https://github.com/go-gitea/gitea/pull/21784. - Restore muted effect on timeline author and issuelist comment icon - Remove whitespace inside shared user templates, fixing link hover underline - Use shared author link template more - Use `bold` class instead of CSS - Fix grey-light color being too dark on arc-green - Add missing black-light color - Fix issuelist progress bar color - Fix various other cases of missing `.muted` Screenshot 2022-11-13 at 12 15 22 Screenshot 2022-11-13 at 12 16 52 Screenshot 2022-11-13 at 12 30 55 Screenshot 2022-11-13 at 12 41 03 Screenshot 2022-11-13 at 12 52 54 Screenshot 2022-11-13 at 12 56 16 Co-authored-by: Lauris BH Co-authored-by: techknowlogick Co-authored-by: wxiaoguang --- 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 | 7 +++++-- web_src/less/_repository.less | 18 +++++++---------- web_src/less/shared/issuelist.less | 8 ++++++++ web_src/less/themes/theme-arc-green.less | 9 +++++---- 14 files changed, 47 insertions(+), 47 deletions(-) diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl index 2a5c444dce2f1..044af9522e6e1 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 3ff86259d53f2..448639975f895 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 5d298f820c274..647c662d51ce6 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 de11846af7e94..0cb74e8182904 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 7ed8cf3bde5e5..e9b7172d1b324 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 eb95674b13d2e..af648387db58b 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 6fce412ffa140..e8ad8406cd2d5 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 81c2a4ed5e508..4a6672181f43b 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 40f5ee71297fe..90f5d96700e30 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 25dff36a78802..a122f4f45b543 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 89dfe687b6ef9..09ed50377677d 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); } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 039c471309ff6..38103c5f8eb55 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 2dffe19909a28..8d4cfc46d491c 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 370a866abb40e..b793f99509160 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -67,8 +67,9 @@ --color-purple: #b259d0; --color-pink: #d22e8b; --color-brown: #a47252; - --color-grey: #5e626a; - /* light variants */ + --color-grey: #9ea2aa; + --color-black: #1e222e; + /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ --color-red-light: #c23636; --color-orange-light: #b84f0b; --color-yellow-light: #b88a03; @@ -80,9 +81,9 @@ --color-purple-light: #a742c9; --color-pink-light: #be297d; --color-brown-light: #94674a; - --color-grey-light: #55585f; + --color-grey-light: #8d919b; + --color-black-light: #1b1f29; /* other colors */ - --color-black: #1e222e; --color-gold: #b1983b; --color-white: #ffffff; --color-diff-removed-word-bg: #6f3333;