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>
This commit is contained in:
silverwind 2022-10-23 06:05:20 +02:00 committed by GitHub
parent 876ee8c3cd
commit f982a71997
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 12 deletions

View file

@ -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,

View file

@ -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 {

View file

@ -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 {

View file

@ -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;
}