third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki 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>
tokarchuk/v1.18
silverwind 2 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 32
      web_src/less/_base.less
  2. 12
      web_src/less/_repository.less
  3. 2
      web_src/less/animations.less
  4. 49
      web_src/less/themes/theme-arc-green.less

32
web_src/less/_base.less
Unescape 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
Unescape 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
Unescape 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
Unescape 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;

Write Preview
Loading…
Cancel
Save