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

<img width="301" alt="Screen Shot 2022-10-21 at 18 05 35"
src="https://user-images.githubusercontent.com/115237/197246896-7b3b5591-2934-4436-bf37-6aebcdfecb13.png">
<img width="98" alt="Screen Shot 2022-10-21 at 19 41 27"
src="https://user-images.githubusercontent.com/115237/197256892-c8fc6a0a-5d2f-4757-a98b-a79f9b7fcbc5.png">
<img width="93" alt="image"
src="https://user-images.githubusercontent.com/115237/197257029-293c02e9-ebf9-448a-a58f-ca418cf36953.png">
<img width="204" alt="Screen Shot 2022-10-21 at 18 21 24"
src="https://user-images.githubusercontent.com/115237/197246957-a99f5178-bbd5-4204-bd32-7a6977026f76.png">
<img width="449" alt="Screen Shot 2022-10-21 at 18 56 59"
src="https://user-images.githubusercontent.com/115237/197249305-d481abb7-9f16-4b48-936a-c75ed29f5b04.png">
<img width="449" alt="Screen Shot 2022-10-21 at 18 57 09"
src="https://user-images.githubusercontent.com/115237/197249309-7ab70c3b-325e-41bc-a4ba-07402c6826b6.png">

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index b255f81d7a77b6e63f199db883c3fc2212211fc4..1f3230701273bdb0ca36778a577f8e8fc81c4cdf 100644 (file)
--- 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 33e4003b2c7d0fb426220e291eec57b900cfd903..013d6d5aa11f484cf3acc1e2e0dc702a9bc4fc72 100644 (file)
--- 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 1626461c5756097469808e665976e6c5afdd47a6..9adf155ffaf43b3e590d8443e605b7d4a5a722cb 100644 (file)
--- 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 fe83162154fcfc1de55f8fcba46568adb8c87092..1f6da76db9df3a8c1c9d9ae3693816266f836e32 100644 (file)
--- 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;
 }