mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-22 21:35:35 +03:00
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
GitHub
parent
42b803554c
commit
ac3a61ea17
4 changed files with 30 additions and 65 deletions
|
|
@ -1,12 +1,16 @@
|
|||
:root {
|
||||
/* documented customizable variables */
|
||||
/* fonts */
|
||||
--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-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;
|
||||
--opacity-disabled: .55;
|
||||
--height-loading: 12rem;
|
||||
/* base colors */
|
||||
--color-primary: #4183c4;
|
||||
--color-primary-dark-1: #3876b3;
|
||||
--color-primary-dark-2: #31699f;
|
||||
|
|
@ -61,7 +65,7 @@
|
|||
/* console colors */
|
||||
--color-console-fg: #ffffff;
|
||||
--color-console-bg: #171717;
|
||||
/* colors */
|
||||
/* named colors */
|
||||
--color-red: #db2828;
|
||||
--color-orange: #f2711c;
|
||||
--color-yellow: #fbbd08;
|
||||
|
|
@ -113,7 +117,6 @@
|
|||
--color-info-border: #a9d5de;
|
||||
--color-info-bg: #f8ffff;
|
||||
--color-info-text: #276f86;
|
||||
/* target-based colors */
|
||||
--color-body: #ffffff;
|
||||
--color-text-dark: #080808;
|
||||
--color-text: #212121;
|
||||
|
|
@ -159,12 +162,9 @@
|
|||
--color-tooltip-text: #ffffff;
|
||||
--color-header-bar: #ffffff;
|
||||
--color-label-active-bg: #d0d0d0;
|
||||
/* accent */
|
||||
--color-small-accent: var(--color-primary-light-6);
|
||||
--color-accent: var(--color-primary-light-4);
|
||||
/* 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>');
|
||||
--color-active-line: #fffbdd;
|
||||
}
|
||||
|
||||
:root * {
|
||||
|
|
@ -351,6 +351,10 @@ a.commit-statuses-trigger {
|
|||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.ui.dividing.header {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
|
@ -1374,7 +1378,7 @@ footer {
|
|||
max-width: calc(100vw - 1rem) !important;
|
||||
|
||||
.links > * {
|
||||
border-left: 1px solid var(--color-secondary);
|
||||
border-left: 1px solid var(--color-secondary-dark-1);
|
||||
padding-left: 8px;
|
||||
margin-left: 5px;
|
||||
|
||||
|
|
@ -1712,7 +1716,7 @@ a.ui.label:hover {
|
|||
|
||||
.lines-code.active,
|
||||
.lines-code .active {
|
||||
background: #fffbdd !important;
|
||||
background: var(--color-active-line) !important;
|
||||
}
|
||||
|
||||
.blame .lines-num {
|
||||
|
|
@ -2114,6 +2118,10 @@ table th[data-sortt-desc] {
|
|||
vertical-align: -.15em;
|
||||
}
|
||||
|
||||
.minicolors-panel {
|
||||
background: var(--color-secondary-dark-1) !important;
|
||||
}
|
||||
|
||||
.labelspage {
|
||||
list-style: none;
|
||||
padding-top: 0;
|
||||
|
|
@ -2215,6 +2223,10 @@ table th[data-sortt-desc] {
|
|||
margin-top: inherit;
|
||||
}
|
||||
|
||||
.ui.header .sub.header {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.flash-error details code,
|
||||
.flash-warning details code {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1944,16 +1944,16 @@
|
|||
}
|
||||
|
||||
.dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background-color: #ddd;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: var(--color-secondary-dark-3);
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: -5px;
|
||||
left: -6px;
|
||||
top: 40px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 100%;
|
||||
border: 2.5px solid var(--color-body);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
animation: isloadingspin 500ms infinite linear;
|
||||
border-width: 4px;
|
||||
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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -136,6 +136,7 @@
|
|||
--color-label-active-bg: #4c525e;
|
||||
--color-small-accent: var(--color-primary-light-5);
|
||||
--color-accent: var(--color-primary-light-3);
|
||||
--color-active-line: #534d1b;
|
||||
}
|
||||
|
||||
::-webkit-calendar-picker-indicator {
|
||||
|
|
@ -231,10 +232,6 @@ a.ui.basic.green.label:hover {
|
|||
background-color: #a0cc75;
|
||||
}
|
||||
|
||||
.repository .diff-stats li {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.red.button,
|
||||
.ui.red.buttons .button {
|
||||
background-color: #7d3434;
|
||||
|
|
@ -245,24 +242,6 @@ a.ui.basic.green.label:hover {
|
|||
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 */
|
||||
.emoji[aria-label="check mark"],
|
||||
.emoji[aria-label="currency exchange"],
|
||||
|
|
@ -287,36 +266,10 @@ a.ui.basic.green.label:hover {
|
|||
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"] {
|
||||
filter: invert(80%);
|
||||
}
|
||||
|
||||
.is-loading::after {
|
||||
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
|
||||
}
|
||||
|
||||
.markup-block-error {
|
||||
border: 1px solid rgba(121, 71, 66, .5) !important;
|
||||
border-bottom: none !important;
|
||||
|
|
|
|||
Loading…
Reference in a new issue