0
0
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2024-12-23 16:24:06 +01:00

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; --height-loading: 12rem;
/* base colors */ /* base colors */
--color-primary: #4183c4; --color-primary: #4183c4;
--color-primary-contrast: #ffffff;
--color-primary-dark-1: #3876b3; --color-primary-dark-1: #3876b3;
--color-primary-dark-2: #31699f; --color-primary-dark-2: #31699f;
--color-primary-dark-3: #2b5c8b; --color-primary-dark-3: #2b5c8b;
@ -163,9 +164,11 @@
--color-tooltip-text: #ffffff; --color-tooltip-text: #ffffff;
--color-header-bar: #ffffff; --color-header-bar: #ffffff;
--color-label-active-bg: #d0d0d0; --color-label-active-bg: #d0d0d0;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-6); --color-small-accent: var(--color-primary-light-6);
--color-accent: var(--color-primary-light-4);
--color-active-line: #fffbdd; --color-active-line: #fffbdd;
accent-color: var(--color-accent);
} }
:root * { :root * {
@ -230,10 +233,10 @@ progress::-webkit-progress-bar {
background: var(--color-secondary-dark-1); background: var(--color-secondary-dark-1);
} }
progress::-webkit-progress-value { progress::-webkit-progress-value {
background-color: var(--color-secondary-dark-4); background-color: var(--color-accent);
} }
progress::-moz-progress-bar { 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; 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 { ::selection {
background: var(--color-primary-light-1) !important; background: var(--color-primary-light-1) !important;
color: var(--color-white) !important; color: var(--color-white) !important;
@ -1598,11 +1612,11 @@ footer {
.activity-bar-graph { .activity-bar-graph {
background-color: var(--color-primary); background-color: var(--color-primary);
color: #fff; color: var(--color-primary-contrast);
} }
.activity-bar-graph-alt { .activity-bar-graph-alt {
color: #fff; color: var(--color-primary-contrast);
} }
.archived-icon { .archived-icon {
@ -1899,6 +1913,7 @@ a.ui.label:hover {
.ui.primary.button, .ui.primary.button,
.ui.primary.buttons .button { .ui.primary.buttons .button {
background-color: var(--color-primary) !important; background-color: var(--color-primary) !important;
color: var(--color-primary-contrast) !important;
} }
.ui.primary.button:hover, .ui.primary.button:hover,
@ -1914,7 +1929,7 @@ a.ui.label:hover {
.ui.basic.primary.button, .ui.basic.primary.button,
.ui.basic.primary.buttons .button { .ui.basic.primary.buttons .button {
box-shadow: inset 0 0 0 1px var(--color-primary) !important; 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, .ui.basic.primary.button:hover,

View file

@ -194,7 +194,7 @@ a.blob-excerpt {
a.blob-excerpt:hover { a.blob-excerpt:hover {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--color-primary-contrast);
} }
// See the comment of createCommentEasyMDE() for the review editor // See the comment of createCommentEasyMDE() for the review editor
@ -244,7 +244,7 @@ a.blob-excerpt:hover {
#review-box .review-comments-counter { #review-box .review-comments-counter {
background-color: var(--color-primary-light-4); background-color: var(--color-primary-light-4);
color: #fff; color: var(--color-primary-contrast);
} }
#review-box:hover .review-comments-counter { #review-box:hover .review-comments-counter {
@ -275,7 +275,7 @@ a.blob-excerpt:hover {
.viewed-file-form { .viewed-file-form {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px none; border: 1px solid transparent;
padding: 4px 8px; padding: 4px 8px;
margin: -8px 0; // just like other buttons in the diff box header margin: -8px 0; // just like other buttons in the diff box header
border-radius: .285rem; // just like .ui.tiny.button border-radius: .285rem; // just like .ui.tiny.button
@ -288,7 +288,7 @@ a.blob-excerpt:hover {
.viewed-file-checked-form { .viewed-file-checked-form {
background-color: var(--color-small-accent); background-color: var(--color-small-accent);
border: 1px solid var(--color-accent); border-color: var(--color-accent);
} }
#viewed-files-summary { #viewed-files-summary {

View file

@ -23,7 +23,7 @@
.tribute-container li.highlight, .tribute-container li.highlight,
.tribute-container li:hover { .tribute-container li:hover {
background: var(--color-primary) !important; background: var(--color-primary) !important;
color: #ffffff !important; color: var(--color-primary-contrast) !important;
} }
.tribute-item { .tribute-item {

View file

@ -4,6 +4,7 @@
:root { :root {
--is-dark-theme: true; --is-dark-theme: true;
--color-primary: #87ab63; --color-primary: #87ab63;
--color-primary-contrast: #ffffff;
--color-primary-dark-1: #93b373; --color-primary-dark-1: #93b373;
--color-primary-dark-2: #9fbc82; --color-primary-dark-2: #9fbc82;
--color-primary-dark-3: #abc492; --color-primary-dark-3: #abc492;
@ -135,8 +136,8 @@
--color-reaction-active-bg: var(--color-primary-alpha-40); --color-reaction-active-bg: var(--color-primary-alpha-40);
--color-header-bar: #2e323e; --color-header-bar: #2e323e;
--color-label-active-bg: #4c525e; --color-label-active-bg: #4c525e;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5); --color-small-accent: var(--color-primary-light-5);
--color-accent: var(--color-primary-light-3);
--color-active-line: #534d1b; --color-active-line: #534d1b;
} }