From 0de546009e466486cd88dfa98d07d8775bd3087d Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 15 Nov 2020 21:58:16 +0100 Subject: [PATCH] CSS color variables, less bold font weight and more (#13567) * CSS color variables, less bold font weight - Define color variables for fully saturated colors and apply them where it made sense - Add background color helper classes - Globally reduce bold font weight from 700 to 500 - Remove border from timeline icons - Unify dropzone styling - Various border style consolidations * attempt to fix test * another attempt at tests * fix contains --- integrations/pull_merge_test.go | 2 +- integrations/pull_status_test.go | 4 +- .../repo/issue/view_content/comments.tmpl | 6 +- templates/repo/issue/view_content/pull.tmpl | 38 +++---- web_src/fomantic/_site/globals/site.variables | 1 + web_src/fomantic/build/semantic.css | 78 +++++++------- web_src/less/_admin.less | 2 +- web_src/less/_base.less | 100 ++++++++++------- web_src/less/_chroma.less | 2 +- web_src/less/_dashboard.less | 2 +- web_src/less/_home.less | 4 +- web_src/less/_markdown.less | 10 +- web_src/less/_organization.less | 8 +- web_src/less/_repository.less | 54 ++++------ web_src/less/_review.less | 2 +- web_src/less/_tribute.less | 4 +- web_src/less/_user.less | 10 +- web_src/less/features/heatmap.less | 1 - web_src/less/helpers.less | 16 +++ web_src/less/themes/theme-arc-green.less | 102 ++++++------------ 20 files changed, 221 insertions(+), 225 deletions(-) diff --git a/integrations/pull_merge_test.go b/integrations/pull_merge_test.go index 04e68ff3dcc4..b5edb41eeca4 100644 --- a/integrations/pull_merge_test.go +++ b/integrations/pull_merge_test.go @@ -194,7 +194,7 @@ func TestCantMergeWorkInProgress(t *testing.T) { req := NewRequest(t, "GET", resp.Header().Get("Location")) resp = session.MakeRequest(t, req, http.StatusOK) htmlDoc := NewHTMLParser(t, resp.Body) - text := strings.TrimSpace(htmlDoc.doc.Find(".attached.merge-section.no-header > .text.grey").Last().Text()) + text := strings.TrimSpace(htmlDoc.doc.Find(".merge-section > .item").Last().Text()) assert.NotEmpty(t, text, "Can't find WIP text") // remove from lang diff --git a/integrations/pull_status_test.go b/integrations/pull_status_test.go index 95ed755fbb63..0002784792b6 100644 --- a/integrations/pull_status_test.go +++ b/integrations/pull_status_test.go @@ -114,7 +114,7 @@ func TestPullCreate_EmptyChangesWithCommits(t *testing.T) { resp := session.MakeRequest(t, req, http.StatusOK) doc := NewHTMLParser(t, resp.Body) - text := strings.TrimSpace(doc.doc.Find(".item.text.green").Text()) - assert.EqualValues(t, "This pull request can be merged automatically.", text) + text := strings.TrimSpace(doc.doc.Find(".merge-section").Text()) + assert.Contains(t, text, "This pull request can be merged automatically.") }) } diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 6f189800727a..77b02f67a561 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -91,7 +91,7 @@ {{else if eq .Type 1}}
- {{svg "octicon-dot-fill"}} + {{svg "octicon-dot-fill"}} @@ -106,7 +106,7 @@
{{else if eq .Type 2}}
- {{svg "octicon-circle-slash"}} + {{svg "octicon-circle-slash"}} @@ -121,7 +121,7 @@
{{else if eq .Type 28}}
- {{svg "octicon-git-merge"}} + {{svg "octicon-git-merge"}} diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl index 6b62def2cc89..347b3b15d3ba 100644 --- a/templates/repo/issue/view_content/pull.tmpl +++ b/templates/repo/issue/view_content/pull.tmpl @@ -97,7 +97,7 @@ {{$canAutoMerge := false}}
{{if .Issue.PullRequest.HasMerged}} -
+
{{if .Issue.PullRequest.MergedCommitID}} {{$link := printf "%s/commit/%s" $.Repository.HTMLURL .Issue.PullRequest.MergedCommitID}} {{$.i18n.Tr "repo.pulls.merged_as" $link (ShortSha .Issue.PullRequest.MergedCommitID) | Safe}} @@ -112,7 +112,7 @@
{{end}} {{else if .Issue.IsClosed}} -
+
{{if .IsPullRequestBroken}} {{$.i18n.Tr "repo.pulls.cant_reopen_deleted_branch"}} {{else}} @@ -126,7 +126,7 @@
{{end}} {{else if .IsPullFilesConflicted}} -
+
{{svg "octicon-x"}} {{$.i18n.Tr "repo.pulls.files_conflicted"}} {{range .ConflictedFiles}} @@ -134,38 +134,38 @@ {{end}}
{{else if .IsPullRequestBroken}} -
+
{{svg "octicon-x"}} {{$.i18n.Tr "repo.pulls.data_broken"}}
{{else if .IsPullWorkInProgress}} -
+
{{svg "octicon-x"}} {{$.i18n.Tr "repo.pulls.cannot_merge_work_in_progress" (.WorkInProgressPrefix|Escape) | Str2html}}
{{else if .Issue.PullRequest.IsChecking}} -
+
{{svg "octicon-sync"}} {{$.i18n.Tr "repo.pulls.is_checking"}}
{{else if .Issue.PullRequest.CanAutoMerge}} {{if .IsBlockedByApprovals}} -
+
{{svg "octicon-x"}} {{$.i18n.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .Issue.PullRequest.ProtectedBranch.RequiredApprovals}}
{{else if .IsBlockedByRejection}} -
+
{{svg "octicon-x"}} {{$.i18n.Tr "repo.pulls.blocked_by_rejection"}}
{{else if .IsBlockedByOutdatedBranch}} -
+
{{svg "octicon-x"}} {{$.i18n.Tr "repo.pulls.blocked_by_outdated_branch"}}
{{else if .IsBlockedByChangedProtectedFiles}} -
+
{{svg "octicon-x" 16}} {{$.i18n.Tr (TrN $.i18n.Lang $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n") | Safe }}
@@ -175,21 +175,21 @@
{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}} -
+
{{svg "octicon-x"}} {{$.i18n.Tr "repo.pulls.required_status_check_failed"}}
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}} -
+
{{svg "octicon-x"}} {{$.i18n.Tr "repo.pulls.required_status_check_missing"}}
{{else if and .AllowMerge .RequireSigned (not .WillSign)}} -
+
{{svg "octicon-x"}} {{$.i18n.Tr "repo.pulls.require_signed_wont_sign"}}
-
+
{{$.i18n.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason) }}
@@ -197,23 +197,23 @@ {{$notAllOverridableChecksOk := or .IsBlockedByApprovals .IsBlockedByRejection .IsBlockedByOutdatedBranch .IsBlockedByChangedProtectedFiles (and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess))}} {{if and (or $.IsRepoAdmin (not $notAllOverridableChecksOk)) (or (not .AllowMerge) (not .RequireSigned) .WillSign)}} {{if $notAllOverridableChecksOk}} -
+
{{svg "octicon-dot-fill"}} {{$.i18n.Tr "repo.pulls.required_status_check_administrator"}}
{{else}} -
+
{{svg "octicon-check"}} {{$.i18n.Tr "repo.pulls.can_auto_merge_desc"}}
{{end}} {{if .WillSign}} -
+
{{$.i18n.Tr "repo.signing.will_sign" .SigningKey}}
{{else if .IsSigned}} -
+
{{$.i18n.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason) }}
@@ -223,7 +223,7 @@ {{$canAutoMerge = true}} {{if (gt .Issue.PullRequest.CommitsBehind 0)}}
-
+
{{svg "octicon-alert"}} {{$.i18n.Tr "repo.pulls.outdated_with_base_branch"}} diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables index efd2e2a27d20..550d44b3b508 100644 --- a/web_src/fomantic/_site/globals/site.variables +++ b/web_src/fomantic/_site/globals/site.variables @@ -2,3 +2,4 @@ @headerFont: var(--fonts-regular); @pageFont: var(--fonts-regular); +@bold: 500; diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 8fe1c7384a09..c2cc6356ef39 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -138,7 +138,7 @@ margin: 0; padding: 0.75em 1em; color: rgba(0, 0, 0, 0.4); - font-weight: bold; + font-weight: 500; border-top: 1px solid rgba(34, 36, 38, 0.15); transition: background 0.1s ease, color 0.1s ease; } @@ -354,7 +354,7 @@ *******************************/ .ui.breadcrumb .active.section { - font-weight: bold; + font-weight: 500; } /******************************* @@ -428,7 +428,7 @@ padding: 0.78571429em 1.5em 0.78571429em; text-transform: none; text-shadow: none; - font-weight: bold; + font-weight: 500; line-height: 1em; font-style: normal; text-align: center; @@ -1521,7 +1521,7 @@ line-height: 1.78571429em; color: rgba(0, 0, 0, 0.4); font-style: normal; - font-weight: bold; + font-weight: 500; box-shadow: 0 0 0 1px transparent inset; } @@ -5187,7 +5187,7 @@ .ui.cards > .card > .content > .header:not(.ui), .ui.card > .content > .header:not(.ui) { - font-weight: bold; + font-weight: 500; font-size: 1.28571429em; margin-top: -0.21425em; line-height: 1.28571429em; @@ -7305,7 +7305,7 @@ a.inverted.ui.card:hover, .ui.comments .comment .author { font-size: 1em; color: rgba(0, 0, 0, 0.87); - font-weight: bold; + font-weight: 500; } .ui.comments .comment a.author { @@ -8158,7 +8158,7 @@ body.dimmable > .dimmer { margin: 1rem 0; line-height: 1; height: 0; - font-weight: bold; + font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(0, 0, 0, 0.85); @@ -8616,7 +8616,7 @@ body.dimmable > .dimmer { .ui.dropdown .menu > .header { margin: 1rem 0 0.75rem; padding: 0 1.14285714rem; - font-weight: bold; + font-weight: 500; text-transform: uppercase; } @@ -9416,7 +9416,7 @@ select.ui.dropdown { } .ui.inline.dropdown > .text { - font-weight: bold; + font-weight: 500; } .ui.inline.dropdown .menu { @@ -9437,7 +9437,7 @@ select.ui.dropdown { .ui.dropdown .menu .active.item { background: transparent; - font-weight: bold; + font-weight: 500; color: rgba(0, 0, 0, 0.95); box-shadow: none; z-index: 12; @@ -10679,7 +10679,7 @@ select.ui.dropdown { margin: 0 0 0.28571429rem 0; color: rgba(0, 0, 0, 0.87); font-size: 0.92857143em; - font-weight: bold; + font-weight: 500; text-transform: none; } @@ -12186,7 +12186,7 @@ select.ui.dropdown { margin: 0 0 0.28571429rem 0; color: rgba(0, 0, 0, 0.87); font-size: 0.92857143em; - font-weight: bold; + font-weight: 500; text-transform: none; } @@ -12395,7 +12395,7 @@ select.ui.dropdown { margin-bottom: 0; vertical-align: baseline; font-size: 0.92857143em; - font-weight: bold; + font-weight: 500; color: rgba(0, 0, 0, 0.87); text-transform: none; } @@ -14785,7 +14785,7 @@ select.ui.dropdown { margin: calc(2rem - 0.1428571428571429em) 0 1rem; padding: 0 0; font-family: var(--fonts-regular); - font-weight: bold; + font-weight: 500; line-height: 1.28571429em; text-transform: none; color: rgba(0, 0, 0, 0.87); @@ -15045,7 +15045,7 @@ h6.ui.header .sub.header { .ui.sub.header { padding: 0; margin-bottom: 0.14285714rem; - font-weight: bold; + font-weight: 500; font-size: 0.85714286em; text-transform: uppercase; color: ''; @@ -25869,7 +25869,7 @@ img.ui.bordered.image { display: inline-block; margin: -0.21425em 0 0; font-family: var(--fonts-regular); - font-weight: bold; + font-weight: 500; color: rgba(0, 0, 0, 0.85); } @@ -26365,7 +26365,7 @@ img.ui.bordered.image { padding: 0.5833em 0.833em; color: rgba(0, 0, 0, 0.6); text-transform: none; - font-weight: bold; + font-weight: 500; border: 0 solid transparent; border-radius: 0.28571429rem; transition: background 0.1s ease; @@ -26419,7 +26419,7 @@ a.ui.label { .ui.label > .detail { display: inline-block; vertical-align: top; - font-weight: bold; + font-weight: 500; margin-left: 1em; opacity: 0.8; } @@ -28906,7 +28906,7 @@ ol.ui.list ol li, display: block; margin: 0; font-family: var(--fonts-regular); - font-weight: bold; + font-weight: 500; color: rgba(0, 0, 0, 0.87); } @@ -30943,13 +30943,13 @@ ol.ui.suffixed.list li:before, margin: 0; background: ''; text-transform: normal; - font-weight: bold; + font-weight: 500; } .ui.vertical.menu .item > .header:not(.ui) { margin: 0 0 0.5em; font-size: 1em; - font-weight: bold; + font-weight: 500; } /*-------------- @@ -31002,7 +31002,7 @@ ol.ui.suffixed.list li:before, .ui.menu .ui.dropdown .menu > .active.item { background: rgba(0, 0, 0, 0.03) !important; - font-weight: bold !important; + font-weight: 500 !important; color: rgba(0, 0, 0, 0.95) !important; } @@ -31410,7 +31410,7 @@ Floated Menu / Item .ui.vertical.menu .item .menu .active.item { background-color: transparent; - font-weight: bold; + font-weight: 500; color: rgba(0, 0, 0, 0.95); } @@ -31458,7 +31458,7 @@ Floated Menu / Item color: rgba(0, 0, 0, 0.95); border-top-width: 1px; border-color: #D4D4D5; - font-weight: bold; + font-weight: 500; margin-bottom: -1px; box-shadow: none; border-radius: 0.28571429rem 0.28571429rem 0 0 !important; @@ -31827,7 +31827,7 @@ Floated Menu / Item background-color: transparent; box-shadow: none; border-color: currentColor; - font-weight: bold; + font-weight: 500; color: rgba(0, 0, 0, 0.95); } @@ -31935,7 +31935,7 @@ Floated Menu / Item color: rgba(0, 0, 0, 0.85); font-size: 0.92857143em; text-transform: uppercase; - font-weight: bold; + font-weight: 500; } /* Image */ @@ -33233,7 +33233,7 @@ Floated Menu / Item .ui.message .header { display: block; font-family: var(--fonts-regular); - font-weight: bold; + font-weight: 500; margin: -0.14285714em 0 0 0; } @@ -33970,7 +33970,7 @@ Floated Menu / Item .ui.modal > .header:not(.ui) { font-size: 1.42857143rem; line-height: 1.28571429em; - font-weight: bold; + font-weight: 500; } /*-------------- @@ -34750,7 +34750,7 @@ Floated Menu / Item font-family: var(--fonts-regular); font-size: 1.14285714em; line-height: 1.2; - font-weight: bold; + font-weight: 500; } .ui.popup > .header + .content { @@ -35644,7 +35644,7 @@ Floated Menu / Item color: rgba(255, 255, 255, 0.7); text-shadow: none; margin-top: -0.5em; - font-weight: bold; + font-weight: 500; text-align: left; } @@ -35659,7 +35659,7 @@ Floated Menu / Item left: 0; bottom: auto; color: rgba(0, 0, 0, 0.87); - font-weight: bold; + font-weight: 500; text-shadow: none; margin-top: 0.2em; text-align: center; @@ -37055,7 +37055,7 @@ template { .ui.search > .results .result .title { margin: -0.14285714em 0 0; font-family: var(--fonts-regular); - font-weight: bold; + font-weight: 500; font-size: 1em; color: rgba(0, 0, 0, 0.85); } @@ -37082,7 +37082,7 @@ template { .ui.search > .results > .message .header { font-family: var(--fonts-regular); font-size: 1rem; - font-weight: bold; + font-weight: 500; color: rgba(0, 0, 0, 0.87); } @@ -37100,7 +37100,7 @@ template { background: #F3F4F5; padding: 0.92857143em 1em; color: rgba(0, 0, 0, 0.87); - font-weight: bold; + font-weight: 500; text-align: center; } @@ -37291,7 +37291,7 @@ template { font-family: var(--fonts-regular); font-size: 1em; padding: 0.4em 1em; - font-weight: bold; + font-weight: 500; color: rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(34, 36, 38, 0.1); } @@ -39052,7 +39052,7 @@ h5 { font-family: var(--fonts-regular); line-height: 1.28571429em; margin: calc(2rem - 0.1428571428571429em) 0 1rem; - font-weight: bold; + font-weight: 500; padding: 0; } @@ -39388,7 +39388,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover { padding: 0.92857143em 0.78571429em; vertical-align: inherit; font-style: none; - font-weight: bold; + font-weight: 500; text-transform: none; border-bottom: 1px solid rgba(34, 36, 38, 0.1); border-left: none; @@ -39563,7 +39563,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover { .ui.table:not(.unstackable) > tr > td:first-child, .ui.table:not(.unstackable) > tbody > tr > td:first-child, .ui.table:not(.unstackable) > tfoot > tr > td:first-child { - font-weight: bold; + font-weight: 500; } /* Definition Table */ @@ -39894,7 +39894,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover { .ui.definition.table > tfoot > tr > td:first-child:not(.ignored), .ui.definition.table tr td.definition { background: rgba(0, 0, 0, 0.03); - font-weight: bold; + font-weight: 500; color: rgba(0, 0, 0, 0.95); text-transform: ''; box-shadow: ''; diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less index 1a6180d2276a..d1bcfb6e25a2 100644 --- a/web_src/less/_admin.less +++ b/web_src/less/_admin.less @@ -64,7 +64,7 @@ } dt { - font-weight: bolder; + font-weight: 500; float: left; width: 285px; clear: left; diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 7a484e426913..293c460fd944 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -57,6 +57,23 @@ --color-secondary-alpha-70: #dededeb3; --color-secondary-alpha-80: #dededecc; --color-secondary-alpha-90: #dededee1; + /* colors */ + --color-red: #db2828; + --color-orange: #f2711c; + --color-yellow: #fbbd08; + --color-olive: #b5cc18; + --color-green: #21ba45; + --color-teal: #00b5ad; + --color-blue: #2185d0; + --color-violet: #6435c9; + --color-purple: #a333c8; + --color-pink: #e03997; + --color-brown: #a5673f; + --color-grey: #767676; + --color-black: #1b1c1d; + --color-gold: #a1882b; + --color-white: #ffffff; + /* target-based colors */ --color-body: #ffffff; --color-text: #212121; --color-box-header: #f7f7f7; @@ -97,7 +114,7 @@ @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); - font-weight: 700; + font-weight: 500; } @font-face { @@ -119,6 +136,11 @@ samp { font-family: var(--fonts-monospace); } +b, +strong { + font-weight: 500; +} + body { background-color: var(--color-body); overflow-y: auto; @@ -415,10 +437,10 @@ a:hover, .text { &.red { - color: #d95c5c !important; + color: var(--color-red) !important; a { - color: #d95c5c !important; + color: var(--color-red) !important; &:hover { color: #e67777 !important; @@ -447,7 +469,7 @@ a:hover, } &.grey { - color: #767676 !important; + color: var(--color-grey) !important; a { color: #444444 !important; @@ -459,27 +481,27 @@ a:hover, } &.light.grey { - color: #888888 !important; + color: var(--color-grey) !important; } &.green { - color: #6cc644 !important; + color: var(--color-green) !important; } &.purple { - color: #6e5494 !important; + color: var(--color-purple) !important; } &.yellow { - color: #fbbd08 !important; + color: var(--color-yellow) !important; } &.orange { - color: #f2711c !important; + color: var(--color-orange) !important; } &.gold { - color: #a1882b !important; + color: var(--color-gold) !important; } &.left { @@ -499,7 +521,7 @@ a:hover, } &.bold { - font-weight: bold; + font-weight: 500; } &.italic { @@ -534,7 +556,7 @@ a:hover, } &.bottom.attached.message { - font-weight: bold; + font-weight: 500; text-align: left; color: black; @@ -544,7 +566,7 @@ a:hover, & > span, .pull-right > span { - color: #21ba45; + color: var(--color-green); } } @@ -556,22 +578,22 @@ a:hover, .error { &.header { background-color: #ffe8e6 !important; - border-color: #db2828; + border-color: var(--color-red); } &.segment { - border-color: #db2828; + border-color: var(--color-red); } } .warning { &.header { background-color: #f9edbe !important; - border-color: #efc16b; + border-color: var(--color-yellow); } &.segment { - border-color: #efc16b; + border-color: var(--color-yellow); } } @@ -652,7 +674,7 @@ a:hover, .background { &.red { - background-color: #d95c5c !important; + background-color: var(--color-red) !important; } &.blue { @@ -664,31 +686,31 @@ a:hover, } &.grey { - background-color: #767676 !important; + background-color: var(--color-grey) !important; } &.light.grey { - background-color: #888888 !important; + background-color: var(--color-grey) !important; } &.green { - background-color: #6cc644 !important; + background-color: var(--color-green) !important; } &.purple { - background-color: #6e5494 !important; + background-color: var(--color-purple) !important; } &.yellow { - background-color: #fbbf09 !important; + background-color: var(--color-yellow) !important; } &.orange { - background-color: #f2711c !important; + background-color: var(--color-orange) !important; } &.gold { - background-color: #a1882b !important; + background-color: var(--color-gold) !important; } } @@ -707,7 +729,7 @@ a:hover, .border { border: 1px solid; &.red { - border-color: #d95c5c !important; + border-color: var(--color-red) !important; } &.blue { @@ -719,31 +741,31 @@ a:hover, } &.grey { - border-color: #767676 !important; + border-color: var(--color-grey) !important; } &.light.grey { - border-color: #888888 !important; + border-color: var(--color-grey) !important; } &.green { - border-color: #6cc644 !important; + border-color: var(--color-green) !important; } &.purple { - border-color: #6e5494 !important; + border-color: var(--color-purple) !important; } &.yellow { - border-color: #fbbd08 !important; + border-color: var(--color-yellow) !important; } &.orange { - border-color: #f2711c !important; + border-color: var(--color-orange) !important; } &.gold { - border-color: #a1882b !important; + border-color: var(--color-gold) !important; } } @@ -804,7 +826,7 @@ a:hover, .scrolling.menu { .item.selected { - font-weight: 700 !important; + font-weight: 500 !important; } } @@ -1056,7 +1078,7 @@ i.icon.centerlock { span { &.bottom-line { &::after { - border-bottom: 1px solid #eaecef; + border-bottom: 1px solid var(--color-secondary); } } @@ -1171,7 +1193,7 @@ i.icon.centerlock { .lines-code, .lines-commit { .bottom-line { - border-bottom: 1px solid #eaecef; + border-bottom: 1px solid var(--color-secondary); } } .code-view { @@ -1268,13 +1290,13 @@ i.icon.centerlock { .svg { span.green & { - color: #21ba45; + color: var(--color-green); } span.red & { - color: #db2828; + color: var(--color-red); } span.purple & { - color: #a333c8; + color: var(--color-purple); } } diff --git a/web_src/less/_chroma.less b/web_src/less/_chroma.less index 11de7b86ba54..28a795784d6c 100644 --- a/web_src/less/_chroma.less +++ b/web_src/less/_chroma.less @@ -353,7 +353,7 @@ /* GenericStrong */ .chroma .gs { - font-weight: bold; + font-weight: 500; } /* GenericSubheading */ diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less index f2dd145f552e..d798f2bed5ff 100644 --- a/web_src/less/_dashboard.less +++ b/web_src/less/_dashboard.less @@ -61,7 +61,7 @@ } .right.stackable.menu > .item.active { - color: #d9453d; + color: var(--color-red); } } diff --git a/web_src/less/_home.less b/web_src/less/_home.less index 139df3022b19..707c8732799d 100644 --- a/web_src/less/_home.less +++ b/web_src/less/_home.less @@ -25,7 +25,7 @@ } .svg { - color: #5aa509; + color: var(--color-green); height: 40px; width: 50px; vertical-align: bottom; @@ -45,7 +45,7 @@ } a { - color: #5aa509; + color: var(--color-green); } } diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less index 868fe5c146b0..7a29630575dd 100644 --- a/web_src/less/_markdown.less +++ b/web_src/less/_markdown.less @@ -26,7 +26,7 @@ } .absent { - color: #cc0000; + color: var(--color-red); } .anchor { @@ -77,7 +77,7 @@ h6 { margin-top: 1em; margin-bottom: 16px; - font-weight: bold; + font-weight: 500; line-height: 1.4; &:first-of-type { @@ -193,7 +193,7 @@ margin-top: 16px; font-size: 1em; font-style: italic; - font-weight: bold; + font-weight: 500; } dl dd { @@ -224,7 +224,7 @@ } table th { - font-weight: bold; + font-weight: 500; } table th, @@ -450,7 +450,7 @@ } .csv-data th { - font-weight: bold; + font-weight: 500; background: #f8f8f8; border-top: 0; } diff --git a/web_src/less/_organization.less b/web_src/less/_organization.less index 11b53a4cf115..a22190b9300f 100644 --- a/web_src/less/_organization.less +++ b/web_src/less/_organization.less @@ -117,7 +117,7 @@ .item { margin-left: 0; margin-right: 0; - border-bottom: 1px solid #eeeeee; + border-bottom: 1px solid var(--color-secondary); .ui.avatar { width: 48px; @@ -137,7 +137,7 @@ padding: 10px 15px; &:not(:last-child) { - border-bottom: 1px solid #eeeeee; + border-bottom: 1px solid var(--color-secondary); } } } @@ -149,7 +149,7 @@ line-height: 32px; &:not(:last-child) { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid var(--color-secondary); } .button { @@ -186,7 +186,7 @@ margin-right: -14px; margin-left: -14px !important; padding: 10px; - border-bottom: 1px solid #e1e4e8; + border-bottom: 1px solid var(--color-secondary); border-top: none; a { diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 662a057715ca..27624d57687f 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -432,7 +432,7 @@ } .btn-octicon:hover { - color: #4078c0; + color: var(--color-primary); } .btn-octicon-danger:hover { @@ -859,14 +859,13 @@ } .badge { - width: 32px; - height: 32px; + width: 34px; + height: 34px; background-color: var(--color-timeline); - border: 2px solid var(--color-timeline); border-radius: 50%; display: flex; float: left; - margin-left: -32px; + margin-left: -34px; margin-right: 8px; color: #666; align-items: center; @@ -877,14 +876,6 @@ height: 22px; padding: 3px; - &.octicon-circle-slash { - color: #bd2c00; - } - - &.octicon-dot-fill { - color: #6cc644; - } - &.octicon-comment { margin-top: 2px; } @@ -983,7 +974,7 @@ } .author { - font-weight: 700; + font-weight: 500; } .comment-form-reply .footer { @@ -1056,7 +1047,7 @@ } > .bottom.segment { - background: #f3f4f5; + background: var(--color-box-body); .ui.images::after { clear: both; @@ -1250,7 +1241,7 @@ margin-right: -14px; margin-left: -14px; padding: 10px; - border-bottom: 1px solid #e1e4e8; + border-bottom: 1px solid var(--color-secondary); border-top: none; a { @@ -1299,7 +1290,7 @@ color: #000000; &:hover { - color: #4078c0; + color: var(--color-primary); } } @@ -1323,7 +1314,7 @@ } .overdue { - color: red; + color: var(--color-red); } } @@ -1398,7 +1389,7 @@ max-width: 90px; &:last-child { - border-left: 1px solid #b4b4b4; + border-left: 1px solid var(--color-secondary); } } @@ -1658,7 +1649,7 @@ flex: 0 0 auto; .bar { - background-color: #bd2c00; + background-color: var(--color-red); height: 12px; width: 40px; display: inline-block; @@ -1666,7 +1657,7 @@ vertical-align: text-top; .add { - background-color: #55a532; + background-color: var(--color-green); height: 12px; } } @@ -1862,10 +1853,10 @@ margin-right: 15px; .del { - color: red; + color: var(--color-red); } .add { - color: green; + color: var(--color-green); } } } @@ -1907,7 +1898,7 @@ &.release { #release-list { - border-top: 1px solid #dddddd; + border-top: 1px solid var(--color-secondary); margin-top: 20px; padding-top: 15px; @@ -1942,7 +1933,7 @@ } .detail { - border-left: 2px solid #dddddd; + border-left: 2px solid var(--color-secondary); .author { img { @@ -2049,7 +2040,7 @@ .item { padding-top: 10px; padding-bottom: 10px; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid var(--color-secondary); .ui.avatar { float: left; @@ -2138,7 +2129,7 @@ line-height: 2em; &:not(:last-child) { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid var(--color-secondary); } } } @@ -2619,7 +2610,7 @@ .title { color: #444444; font-size: 15px; - font-weight: bold; + font-weight: 500; margin: 0 6px; &:hover { @@ -2699,7 +2690,7 @@ } .overdue { - color: red; + color: var(--color-red); } } } @@ -2711,7 +2702,8 @@ .ui.form { .dropzone { - border: 2px dashed #0087f5; + border: 2px dashed var(--color-secondary); + background: none; box-shadow: none !important; padding: 0; min-height: 5rem; @@ -2744,7 +2736,7 @@ .list { > .item { .green:not(.ui.button) { - color: #21ba45; + color: var(--color-green); } &:not(:first-child) { diff --git a/web_src/less/_review.less b/web_src/less/_review.less index df6da056c877..65e36432a31f 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -82,7 +82,7 @@ } .footer { - border-top: 1px solid #f1f1f1; + border-top: 1px solid var(--color-secondary); padding: 10px 0; .markdown-info { diff --git a/web_src/less/_tribute.less b/web_src/less/_tribute.less index adac4d28b294..cfa2e5ded69b 100644 --- a/web_src/less/_tribute.less +++ b/web_src/less/_tribute.less @@ -7,7 +7,7 @@ .tribute-container ul { margin-top: 0 !important; - background: #ffffff !important; + background: var(--color-body) !important; } .tribute-container li { @@ -22,7 +22,7 @@ .tribute-container li.highlight, .tribute-container li:hover { - background: #2185d0 !important; + background: var(--color-primary) !important; color: #ffffff !important; } diff --git a/web_src/less/_user.less b/web_src/less/_user.less index 4af96bfd3dba..9fa319deb643 100644 --- a/web_src/less/_user.less +++ b/web_src/less/_user.less @@ -11,7 +11,7 @@ } .header { - font-weight: 700; + font-weight: 500; font-size: 1.3rem; margin-top: -.2rem; line-height: 1.3rem; @@ -99,19 +99,19 @@ font-size: 2em; &.green { - color: #21ba45; + color: var(--color-green); } &.red { - color: #d01919; + color: var(--color-red); } &.purple { - color: #a333c8; + color: var(--color-purple); } &.blue { - color: #2185d0; + color: var(--color-blue); } } diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less index 3aa46a500f32..3c11e0593e2a 100644 --- a/web_src/less/features/heatmap.less +++ b/web_src/less/features/heatmap.less @@ -15,7 +15,6 @@ .total-contributions { text-align: left; - font-weight: 500; margin-top: 0; } } diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index 7721e97d7df0..d50aea026419 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -23,6 +23,22 @@ .rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; } .rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; } +.bg-red { background: var(--color-red) !important; } +.bg-orange { background: var(--color-orange) !important; } +.bg-yellow { background: var(--color-yellow) !important; } +.bg-olive { background: var(--color-olive) !important; } +.bg-green { background: var(--color-green) !important; } +.bg-teal { background: var(--color-teal) !important; } +.bg-blue { background: var(--color-blue) !important; } +.bg-violet { background: var(--color-violet) !important; } +.bg-purple { background: var(--color-purple) !important; } +.bg-pink { background: var(--color-pink) !important; } +.bg-brown { background: var(--color-brown) !important; } +.bg-grey { background: var(--color-grey) !important; } +.bg-gold { background: var(--color-gold) !important; } + +.text-white { color: var(--color-white) !important; } + .m-0 { margin: 0 !important; } .m-1 { margin: .125rem !important; } .m-2 { margin: .25rem !important; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 638d5262d134..781a15ee8ec8 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -50,11 +50,28 @@ --color-secondary-alpha-70: #454a57b3; --color-secondary-alpha-80: #454a57cc; --color-secondary-alpha-90: #454a57e1; + /* colors */ + --color-red: #db2828; + --color-orange: #f2711c; + --color-yellow: #fbbd08; + --color-olive: #b5cc18; + --color-green: #21ba45; + --color-teal: #00b5ad; + --color-blue: #2185d0; + --color-violet: #6435c9; + --color-purple: #a333c8; + --color-pink: #e03997; + --color-brown: #a5673f; + --color-grey: #767676; + --color-black: #1b1c1d; + --color-gold: #a1882b; + --color-white: #ffffff; + /* target-based colors */ --color-body: #383c4a; --color-box-header: #454a57; --color-box-body: #353945; --color-text: #b6bac5; - --color-timeline: #454a57; + --color-timeline: #4a505c; --color-input-text: #dcdcdc; --color-input-background: #2e323e; --color-input-border: #454a57; @@ -416,7 +433,7 @@ /* GenericStrong */ .chroma .gs { - font-weight: bold; + font-weight: 500; } /* GenericSubheading */ @@ -459,10 +476,6 @@ background: #6a737d; } -.repository.branches .commit-divergence .bar-group:last-child { - border-color: #6a737d; -} - .ui.horizontal.segments > .segment { background-color: #383c4a; } @@ -532,10 +545,6 @@ body { color: #a0cc75; } -.repository.release #release-list { - border-top-color: var(--color-secondary); -} - .repository .milestone.list > .item .operate > a { color: #87ab63; } @@ -624,6 +633,17 @@ footer { color: #dbdbdb; } +.ui.labels a.label:hover, +a.ui.label:hover { + background: #454b5a; + color: #dbdbdb; +} + +.ui.basic.labels a.label:hover, +a.ui.basic.label:hover { + background: var(--color-body); +} + .ui.red.label, .ui.red.labels .label { background-color: #7d3434 !important; @@ -1017,10 +1037,6 @@ a.ui.basic.green.label:hover { } .repository.view.issue .comment-list .comment .content { - > .bottom.segment { - background: #353945; - } - .header { color: #dbdbdb; background-color: var(--color-secondary); @@ -1044,14 +1060,6 @@ a.ui.basic.green.label:hover { } } -.repository.new.issue .comment.form .content::after { - border-right-color: #353945; -} - -.repository.new.issue .comment.form .content::before { - border-right-color: #353945; -} - .repository.view.issue .comment-list .timeline-item .badge { color: #ccc; } @@ -1337,13 +1345,8 @@ td.blob-hunk { box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent; } -.ui.form .dropzone { - border: 1px dashed var(--color-secondary); - background-color: #2e323e; - - .dz-button { - color: rgba(158, 158, 158, .8); - } +.ui.form .dropzone .dz-button { + color: rgba(158, 158, 158, .8); } .ui.form .dropzone:hover .dz-button { @@ -1380,11 +1383,6 @@ td.blob-hunk { background: #2e323e !important; } -.bottom-line, -.bottom-line::after { - border-color: #4e525e !important; -} - .lines-num { color: var(--color-secondary-dark-6) !important; border-color: var(--color-secondary) !important; @@ -1500,11 +1498,6 @@ a.blob-excerpt:hover { border-bottom: 1px dashed var(--color-secondary); } -.ui.text.yellow, -.yellow.icon.icon.icon { - color: #e4ac07 !important; -} - .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1), .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2), .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(3), @@ -1531,15 +1524,6 @@ a.blob-excerpt:hover { border-color: #634343 !important; } -.repository .labelspage .item, -.organization.settings .labelspage .item, -.organization.teams .repositories .item:not(:last-child), -.organization.teams .members .item:not(:last-child), -.organization.teams .detail .item:not(:last-child), -.organization.members .list .item { - border-bottom-color: var(--color-secondary); -} - .repository .labelspage .item a, .organization.settings .labelspage .item a { color: #6a737d; @@ -1621,13 +1605,8 @@ a.blob-excerpt:hover { border: 0; } - .footer { - border-top-color: var(--color-secondary); - - .markdown-info { - color: inherit; - } - + .footer .markdown-info { + color: inherit; } } @@ -1790,10 +1769,6 @@ footer .container .links > * { color: var(--color-secondary-dark-6); } -.repository.release #release-list > li .detail { - border-left-color: var(--color-secondary); -} - .repository.release #release-list > li .detail .dot { background-color: #505667; border-color: #383c4a; @@ -1807,15 +1782,6 @@ footer .container .links > * { box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6); } -.tribute-container ul { - background: #2d303b !important; -} - -.tribute-container li.highlight, -.tribute-container li:hover { - background: #728e5e !important; -} - .repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar { color: #2a2e3a; }