forks/forgejo
1
0
Fork 0
Code Releases Activity

Consolidate more CSS colors into variables (#21402)

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

32
web_src/less/_base.less
View file

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

12
web_src/less/_repository.less
View file

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

2
web_src/less/animations.less
View file

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

49
web_src/less/themes/theme-arc-green.less
View file

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