Consolidate more CSS colors into variables (#21402)

Move more colors into variables. The only real notable change is the dot
in the release timeline. Also, made the variable comments a bit more
clear.

<img width="279" alt="Screen Shot 2022-10-10 at 21 10 23"
src="https://user-images.githubusercontent.com/115237/194938496-e5a21056-67c4-4219-9c68-134b0edf0e61.png">

<img width="88" alt="Screen Shot 2022-10-10 at 21 31 53"
src="https://user-images.githubusercontent.com/115237/194939712-f666c43e-fb1a-4045-be52-1176391bd8ea.png">

<img width="90" alt="Screen Shot 2022-10-10 at 21 31 44"
src="https://user-images.githubusercontent.com/115237/194939710-2e620c06-75a9-41b7-a3e1-18eab7a57614.png">

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind 2022-10-12 18:26:27 +02:00 committed by GitHub
parent 42b803554c
commit ac3a61ea17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 65 deletions

View file

@ -1,12 +1,16 @@
:root { :root {
/* documented customizable variables */ /* fonts */
--fonts-proportional: -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial"; --fonts-proportional: -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial";
--fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji); --fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"; --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
/* other variables */ /* backgrounds */
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
/* non-color variables */
--border-radius: .28571429rem; --border-radius: .28571429rem;
--opacity-disabled: .55; --opacity-disabled: .55;
--height-loading: 12rem; --height-loading: 12rem;
/* base colors */
--color-primary: #4183c4; --color-primary: #4183c4;
--color-primary-dark-1: #3876b3; --color-primary-dark-1: #3876b3;
--color-primary-dark-2: #31699f; --color-primary-dark-2: #31699f;
@ -61,7 +65,7 @@
/* console colors */ /* console colors */
--color-console-fg: #ffffff; --color-console-fg: #ffffff;
--color-console-bg: #171717; --color-console-bg: #171717;
/* colors */ /* named colors */
--color-red: #db2828; --color-red: #db2828;
--color-orange: #f2711c; --color-orange: #f2711c;
--color-yellow: #fbbd08; --color-yellow: #fbbd08;
@ -113,7 +117,6 @@
--color-info-border: #a9d5de; --color-info-border: #a9d5de;
--color-info-bg: #f8ffff; --color-info-bg: #f8ffff;
--color-info-text: #276f86; --color-info-text: #276f86;
/* target-based colors */
--color-body: #ffffff; --color-body: #ffffff;
--color-text-dark: #080808; --color-text-dark: #080808;
--color-text: #212121; --color-text: #212121;
@ -159,12 +162,9 @@
--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;
/* accent */
--color-small-accent: var(--color-primary-light-6); --color-small-accent: var(--color-primary-light-6);
--color-accent: var(--color-primary-light-4); --color-accent: var(--color-primary-light-4);
/* backgrounds */ --color-active-line: #fffbdd;
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
} }
:root * { :root * {
@ -351,6 +351,10 @@ a.commit-statuses-trigger {
border-bottom: none !important; border-bottom: none !important;
} }
.ui.dividing.header {
border-bottom-color: var(--color-secondary);
}
.page-content { .page-content {
margin-top: 15px; margin-top: 15px;
} }
@ -1374,7 +1378,7 @@ footer {
max-width: calc(100vw - 1rem) !important; max-width: calc(100vw - 1rem) !important;
.links > * { .links > * {
border-left: 1px solid var(--color-secondary); border-left: 1px solid var(--color-secondary-dark-1);
padding-left: 8px; padding-left: 8px;
margin-left: 5px; margin-left: 5px;
@ -1712,7 +1716,7 @@ a.ui.label:hover {
.lines-code.active, .lines-code.active,
.lines-code .active { .lines-code .active {
background: #fffbdd !important; background: var(--color-active-line) !important;
} }
.blame .lines-num { .blame .lines-num {
@ -2114,6 +2118,10 @@ table th[data-sortt-desc] {
vertical-align: -.15em; vertical-align: -.15em;
} }
.minicolors-panel {
background: var(--color-secondary-dark-1) !important;
}
.labelspage { .labelspage {
list-style: none; list-style: none;
padding-top: 0; padding-top: 0;
@ -2215,6 +2223,10 @@ table th[data-sortt-desc] {
margin-top: inherit; margin-top: inherit;
} }
.ui.header .sub.header {
color: var(--color-text-light-1);
}
.flash-error details code, .flash-error details code,
.flash-warning details code { .flash-warning details code {
display: block; display: block;

View file

@ -1944,16 +1944,16 @@
} }
.dot { .dot {
width: 9px; width: 10px;
height: 9px; height: 10px;
background-color: #ddd; background-color: var(--color-secondary-dark-3);
z-index: 9; z-index: 9;
position: absolute; position: absolute;
display: block; display: block;
left: -5px; left: -6px;
top: 40px; top: 40px;
border-radius: 6px; border-radius: 100%;
border: 1px solid #ffffff; border: 2.5px solid var(--color-body);
} }
} }
} }

View file

@ -24,7 +24,7 @@
animation: isloadingspin 500ms infinite linear; animation: isloadingspin 500ms infinite linear;
border-width: 4px; border-width: 4px;
border-style: solid; border-style: solid;
border-color: #ececec #ececec #666 #666; border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
border-radius: 100%; border-radius: 100%;
} }

View file

@ -136,6 +136,7 @@
--color-label-active-bg: #4c525e; --color-label-active-bg: #4c525e;
--color-small-accent: var(--color-primary-light-5); --color-small-accent: var(--color-primary-light-5);
--color-accent: var(--color-primary-light-3); --color-accent: var(--color-primary-light-3);
--color-active-line: #534d1b;
} }
::-webkit-calendar-picker-indicator { ::-webkit-calendar-picker-indicator {
@ -231,10 +232,6 @@ a.ui.basic.green.label:hover {
background-color: #a0cc75; background-color: #a0cc75;
} }
.repository .diff-stats li {
border-color: var(--color-secondary);
}
.ui.red.button, .ui.red.button,
.ui.red.buttons .button { .ui.red.buttons .button {
background-color: #7d3434; background-color: #7d3434;
@ -245,24 +242,6 @@ a.ui.basic.green.label:hover {
background-color: #984646; background-color: #984646;
} }
.lines-code.active,
.lines-code .active {
background: #534d1b !important;
}
.ui.header .sub.header {
color: var(--color-secondary-dark-6);
}
.ui.dividing.header {
border-bottom: 1px solid var(--color-secondary);
}
.minicolors-panel {
background: var(--color-secondary) !important;
border-color: #6a737d !important;
}
/* invert emojis that are hard to read otherwise */ /* invert emojis that are hard to read otherwise */
.emoji[aria-label="check mark"], .emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"], .emoji[aria-label="currency exchange"],
@ -287,36 +266,10 @@ a.ui.basic.green.label:hover {
filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg);
} }
.edit-diff > div > .ui.table {
border-left-color: var(--color-secondary) !important;
border-right-color: var(--color-secondary) !important;
}
footer .container .links > * {
border-left-color: #888;
}
.repository.release #release-list > li .detail .dot {
background-color: #505667;
border-color: #383c4a;
}
.tribute-container {
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
}
.repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar {
color: #2a2e3a;
}
img[src$="/img/matrix.svg"] { img[src$="/img/matrix.svg"] {
filter: invert(80%); filter: invert(80%);
} }
.is-loading::after {
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
}
.markup-block-error { .markup-block-error {
border: 1px solid rgba(121, 71, 66, .5) !important; border: 1px solid rgba(121, 71, 66, .5) !important;
border-bottom: none !important; border-bottom: none !important;