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:
parent
876ee8c3cd
commit
f982a71997
4 changed files with 28 additions and 12 deletions
|
@ -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,
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue