From 0707598f97acf379d46d61fe03306222fbeaf386 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 Oct 2022 18:39:54 +0200 Subject: [PATCH 01/10] CSS enhancements - Add accent-color which will change the color of various native HTML elements like checkbox, radio, range and progress - Change progress bar color to `--color-primary` - Add new `--color-primary-contrast` meant to contrast over primary - Avoid layout shift on clicking `.viewed-file-form` --- web_src/less/_base.less | 32 ++++++++++++++++++++++++++------ web_src/less/_review.less | 8 ++++---- web_src/less/_tribute.less | 2 +- 3 files changed, 31 insertions(+), 11 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index b255f81d7a77b..06b9e3439d8eb 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -12,6 +12,7 @@ --height-loading: 12rem; /* base colors */ --color-primary: #4183c4; + --color-primary-contrast: #ffffff; --color-primary-dark-1: #3876b3; --color-primary-dark-2: #31699f; --color-primary-dark-3: #2b5c8b; @@ -166,6 +167,8 @@ --color-small-accent: var(--color-primary-light-6); --color-accent: var(--color-primary-light-4); --color-active-line: #fffbdd; + + accent-color: var(--color-primary); } :root * { @@ -230,10 +233,10 @@ progress::-webkit-progress-bar { background: var(--color-secondary-dark-1); } progress::-webkit-progress-value { - background-color: var(--color-secondary-dark-4); + background-color: var(--color-primary); } progress::-moz-progress-bar { - background: var(--color-secondary-dark-4); + background: var(--color-primary); } * { @@ -260,6 +263,22 @@ progress::-moz-progress-bar { background: transparent; } +input[type="file"] { + padding-top: 6px !important; + padding-bottom: 6px !important; +} +::file-selector-button { + border: 1px solid var(--color-light-border); + color: var(--color-text-light); + background: var(--color-light); + border-radius: var(--border-radius); + padding: 5px 10px; +} +::file-selector-button:hover { + color: var(--color-text); + background: var(--color-hover); +} + ::selection { background: var(--color-primary-light-1) !important; color: var(--color-white) !important; @@ -1598,11 +1617,11 @@ footer { .activity-bar-graph { background-color: var(--color-primary); - color: #fff; + color: var(--color-primary-contrast); } .activity-bar-graph-alt { - color: #fff; + color: var(--color-primary-contrast); } .archived-icon { @@ -1898,7 +1917,8 @@ a.ui.label:hover { .ui.primary.button, .ui.primary.buttons .button { - background-color: var(--color-primary) !important; + background-color: var(--color-primary); + color: var(--color-primary-contrast); } .ui.primary.button:hover, @@ -1914,7 +1934,7 @@ a.ui.label:hover { .ui.basic.primary.button, .ui.basic.primary.buttons .button { box-shadow: inset 0 0 0 1px var(--color-primary) !important; - color: #fff !important; + color: var(--color-primary-contrast) !important; } .ui.basic.primary.button:hover, diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 33e4003b2c7d0..23eb06405b02e 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -194,7 +194,7 @@ a.blob-excerpt { a.blob-excerpt:hover { background: var(--color-primary); - color: #fff; + color: var(--color-primary-contrast); } // See the comment of createCommentEasyMDE() for the review editor @@ -244,7 +244,7 @@ a.blob-excerpt:hover { #review-box .review-comments-counter { background-color: var(--color-primary-light-4); - color: #fff; + color: var(--color-primary-contrast); } #review-box:hover .review-comments-counter { @@ -275,11 +275,11 @@ a.blob-excerpt:hover { .viewed-file-form { display: flex; align-items: center; - border: 1px none; padding: 4px 8px; margin: -8px 0; // just like other buttons in the diff box header border-radius: .285rem; // just like .ui.tiny.button font-size: .857rem; // just like .ui.tiny.button + border: 1px solid transparent; } .viewed-file-form input { @@ -288,7 +288,7 @@ a.blob-excerpt:hover { .viewed-file-checked-form { background-color: var(--color-small-accent); - border: 1px solid var(--color-accent); + border-color: var(--color-accent); } #viewed-files-summary { diff --git a/web_src/less/_tribute.less b/web_src/less/_tribute.less index 1626461c57560..9adf155ffaf43 100644 --- a/web_src/less/_tribute.less +++ b/web_src/less/_tribute.less @@ -23,7 +23,7 @@ .tribute-container li.highlight, .tribute-container li:hover { background: var(--color-primary) !important; - color: #ffffff !important; + color: var(--color-primary-contrast) !important; } .tribute-item { From b7f15f9890f3407a5f1677dd43c42371125a1919 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 Oct 2022 18:47:31 +0200 Subject: [PATCH 02/10] add new color to arc-green as well --- web_src/less/themes/theme-arc-green.less | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index fe83162154fcf..574071fb2e1e3 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -4,6 +4,7 @@ :root { --is-dark-theme: true; --color-primary: #87ab63; + --color-primary-contrast: #ffffff; --color-primary-dark-1: #93b373; --color-primary-dark-2: #9fbc82; --color-primary-dark-3: #abc492; From 92ed1bdf7d911431a26298ddf0c4f70518be00c5 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 Oct 2022 18:48:38 +0200 Subject: [PATCH 03/10] add back important --- web_src/less/_base.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 06b9e3439d8eb..8709abc1b7c2b 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1917,8 +1917,8 @@ a.ui.label:hover { .ui.primary.button, .ui.primary.buttons .button { - background-color: var(--color-primary); - color: var(--color-primary-contrast); + background-color: var(--color-primary) !important; + color: var(--color-primary-contrast) !important; } .ui.primary.button:hover, From afddeda7b096b120201a73050ebbedb87b042276 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 Oct 2022 18:57:20 +0200 Subject: [PATCH 04/10] remove padding styles --- web_src/less/_base.less | 5 ----- 1 file changed, 5 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 8709abc1b7c2b..6387350f2c0dd 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -263,16 +263,11 @@ progress::-moz-progress-bar { background: transparent; } -input[type="file"] { - padding-top: 6px !important; - padding-bottom: 6px !important; -} ::file-selector-button { border: 1px solid var(--color-light-border); color: var(--color-text-light); background: var(--color-light); border-radius: var(--border-radius); - padding: 5px 10px; } ::file-selector-button:hover { color: var(--color-text); From 73f2bc290c66005884c446df86c3fc237276084b Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 Oct 2022 19:42:08 +0200 Subject: [PATCH 05/10] shift accent-color by one notch --- web_src/less/_base.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 6387350f2c0dd..53c9b4a07151a 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -168,7 +168,7 @@ --color-accent: var(--color-primary-light-4); --color-active-line: #fffbdd; - accent-color: var(--color-primary); + accent-color: var(--color-primary-light-1); } :root * { From a9b2b9d306646883935146e1a90cb893aaf3a2f0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 Oct 2022 20:40:48 +0200 Subject: [PATCH 06/10] Update web_src/less/_base.less Co-authored-by: delvh --- web_src/less/_base.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 53c9b4a07151a..81102bdd5177c 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -233,7 +233,7 @@ progress::-webkit-progress-bar { background: var(--color-secondary-dark-1); } progress::-webkit-progress-value { - background-color: var(--color-primary); + background-color: var(--color-accent); } progress::-moz-progress-bar { background: var(--color-primary); From 21b94e033ce39c608caa6dc3892336d5eeffe05c Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 Oct 2022 20:41:11 +0200 Subject: [PATCH 07/10] Update web_src/less/_base.less Co-authored-by: delvh --- web_src/less/_base.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 81102bdd5177c..4e673e8b5eb3a 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -236,7 +236,7 @@ progress::-webkit-progress-value { background-color: var(--color-accent); } progress::-moz-progress-bar { - background: var(--color-primary); + background-color: var(--color-accent); } * { From 45682d4623028ad00664340c970e2dac2e3d318f Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 Oct 2022 20:51:38 +0200 Subject: [PATCH 08/10] tweak --color-accent --- web_src/less/_base.less | 4 ++-- web_src/less/themes/theme-arc-green.less | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 4e673e8b5eb3a..1f3230701273b 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -164,11 +164,11 @@ --color-tooltip-text: #ffffff; --color-header-bar: #ffffff; --color-label-active-bg: #d0d0d0; + --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-6); - --color-accent: var(--color-primary-light-4); --color-active-line: #fffbdd; - accent-color: var(--color-primary-light-1); + accent-color: var(--color-accent); } :root * { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 574071fb2e1e3..1f6da76db9df3 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -136,8 +136,8 @@ --color-reaction-active-bg: var(--color-primary-alpha-40); --color-header-bar: #2e323e; --color-label-active-bg: #4c525e; + --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); - --color-accent: var(--color-primary-light-3); --color-active-line: #534d1b; } From 465a4e0db9b75d26c68b45ae7d749a56acd6a26e Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 Oct 2022 21:15:55 +0200 Subject: [PATCH 09/10] Update web_src/less/_review.less --- web_src/less/_review.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 23eb06405b02e..013d6d5aa11f4 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -275,11 +275,11 @@ a.blob-excerpt:hover { .viewed-file-form { display: flex; align-items: center; + border: 1px solid transparent; padding: 4px 8px; margin: -8px 0; // just like other buttons in the diff box header border-radius: .285rem; // just like .ui.tiny.button font-size: .857rem; // just like .ui.tiny.button - border: 1px solid transparent; } .viewed-file-form input { From 6361b69fc53193d1ed764295a59db1d5c10066e9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 22 Oct 2022 10:34:00 +0200 Subject: [PATCH 10/10] restart ci