From f982a71997e057bce009574d04503177788e5a4e Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 23 Oct 2022 06:05:20 +0200 Subject: [PATCH] CSS color enhancements (#21534) - Add [`accent-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) which will change the color of various native HTML elements from OS-color to specified one. Affects unstyled checkbox, radio, range and progress - Change `--color-accent` to `--color-primary-light-1` - Change progress bar color to `--color-accent` - Add new `--color-primary-contrast` meant to contrast over primary - Avoid layout shift on clicking `.viewed-file-form` - Add styles for `input[type=file]` upload button Screen Shot 2022-10-21 at 18 05 35 Screen Shot 2022-10-21 at 19 41 27 image Screen Shot 2022-10-21 at 18 21 24 Screen Shot 2022-10-21 at 18 56 59 Screen Shot 2022-10-21 at 18 57 09 Co-authored-by: delvh Co-authored-by: Lunny Xiao --- web_src/less/_base.less | 27 ++++++++++++++++++------ web_src/less/_review.less | 8 +++---- web_src/less/_tribute.less | 2 +- web_src/less/themes/theme-arc-green.less | 3 ++- 4 files changed, 28 insertions(+), 12 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index b255f81d7a..1f32307012 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; @@ -163,9 +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-accent); } :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-accent); } progress::-moz-progress-bar { - background: var(--color-secondary-dark-4); + background-color: var(--color-accent); } * { @@ -260,6 +263,17 @@ progress::-moz-progress-bar { background: transparent; } +::file-selector-button { + border: 1px solid var(--color-light-border); + color: var(--color-text-light); + background: var(--color-light); + border-radius: var(--border-radius); +} +::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 +1612,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 { @@ -1899,6 +1913,7 @@ a.ui.label:hover { .ui.primary.button, .ui.primary.buttons .button { background-color: var(--color-primary) !important; + color: var(--color-primary-contrast) !important; } .ui.primary.button:hover, @@ -1914,7 +1929,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 33e4003b2c..013d6d5aa1 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,7 +275,7 @@ a.blob-excerpt:hover { .viewed-file-form { display: flex; align-items: center; - border: 1px none; + 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 @@ -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 1626461c57..9adf155ffa 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 { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index fe83162154..1f6da76db9 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; @@ -135,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; }