third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use CSS Vars for primary color (#13361)

Browse Source 
* Use CSS Vars for primary color

- Create 15 color shades derived from primary color
- Change blue-ish colors to use that primary color
- Move styles for scrollbars, selection from arc-green to base
- Remove obsolete arc-green styles that now use those variables

* simplify webkit scrollbar style

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
tokarchuk/v1.17
silverwind 4 years ago committed by GitHub
parent b5e974c8a5
commit 6c323678d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 125 additions and 121 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. 105
      web_src/less/_base.less
  2. 4
      web_src/less/_repository.less
  3. 4
      web_src/less/_review.less
  4. 133
      web_src/less/themes/theme-arc-green.less

105
web_src/less/_base.less
Unescape View File

@ -6,6 +6,22 @@
/* other variables */
--fonts-regular: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
--border-radius: .28571429rem;
--color-primary: #4183c4;
--color-primary-dark-1: #3876b3;
--color-primary-dark-2: #31699f;
--color-primary-dark-3: #2b5c8b;
--color-primary-dark-4: #254f77;
--color-primary-dark-5: #193450;
--color-primary-dark-6: #0c1a28;
--color-primary-dark-7: #04080c;
--color-primary-light-1: #548fca;
--color-primary-light-2: #679cd0;
--color-primary-light-3: #7aa8d6;
--color-primary-light-4: #8db5dc;
--color-primary-light-5: #b3cde7;
--color-primary-light-6: #d9e6f3;
--color-primary-light-7: #f4f8fb;
--color-body: #fff;
}
:root:lang(ja) {
@ -96,7 +112,7 @@ h5,
}
body {
background-color: #ffffff;
background-color: var(--color-body);
overflow-y: auto;
display: flex;
flex-direction: column;
@ -110,10 +126,47 @@ table {
border-collapse: collapse;
}
a {
/* firefox scroll bars */
* {
scrollbar-width: thin;
scrollbar-color: var(--color-primary) transparent;
}
/* webkit scrollbars */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 6px var(--color-primary);
border: 2px solid transparent;
border-radius: 5px !important;
}
::-webkit-scrollbar-thumb:window-inactive {
box-shadow: inset 0 0 0 6px var(--color-primary);
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 0 6px var(--color-primary-dark-2);
}
::selection,
.CodeMirror-selected {
background: var(--color-primary-light-1) !important;
color: #fff !important;
}
a,
.ui.breadcrumb a {
color: var(--color-primary);
cursor: pointer;
}
a:hover,
.ui.breadcrumb a:hover {
color: var(--color-primary-dark-2);
}
.rounded {
border-radius: var(--border-radius) !important;
}
@ -331,13 +384,13 @@ code,
}
&.blue {
color: #428bca !important;
color: var(--color-primary-dark-1) !important;
a {
color: #1155cc !important;
color: var(--color-primary) !important;
&:hover {
color: #428bca !important;
color: var(--color-primary-dark-2) !important;
}
}
}
@ -568,7 +621,7 @@ code,
}
&.blue {
background-color: #428bca !important;
background-color: var(--color-primary) !important;
}
&.black {
@ -623,7 +676,7 @@ code,
}
&.blue {
border-color: #428bca !important;
border-color: var(--color-primary) !important;
}
&.black {
@ -740,7 +793,7 @@ footer {
.fa {
width: 16px;
text-align: center;
color: #428bca;
color: var(--color-primary);
}
.links > * {
@ -1150,10 +1203,42 @@ i.icon.centerlock {
font-size: .85714286rem;
}
.ui.blue.button,
.ui.blue.buttons .button {
background-color: var(--color-primary) !important;
}
.ui.blue.button:hover,
.ui.blue.buttons .button:hover {
background-color: var(--color-primary-dark-2) !important;
}
.ui.blue.button:focus,
.ui.blue.buttons .button:focus {
background-color: var(--color-primary-dark-3) !important;
}
.ui.basic.blue.button,
.ui.basic.blue.buttons .button {
box-shadow: inset 0 0 0 1px #1678c2 !important;
color: #1678c2 !important;
box-shadow: inset 0 0 0 1px var(--color-primary) !important;
color: #fff !important;
}
.ui.basic.blue.button:hover,
.ui.basic.blue.buttons .button:hover {
box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important;
}
.ui.basic.blue.button:focus,
.ui.basic.blue.buttons .button:focus {
box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important;
}
.ui.blue.label,
.ui.blue.labels .label,
.repository .segment.reactions .ui.label.basic.blue {
background-color: var(--color-primary) !important;
border-color: var(--color-primary-dark-2) !important;
}
.ui.label > img {

4
web_src/less/_repository.less
Unescape View File

@ -345,7 +345,7 @@
&.octicon-file-directory,
&.octicon-file-submodule {
color: #1e70bf;
color: var(--color-primary);
}
}
}
@ -717,7 +717,7 @@
.pull-desc {
code {
color: #0166e6;
color: var(--color-primary);
}
}

4
web_src/less/_review.less
Unescape View File

@ -145,11 +145,11 @@ a.blob-excerpt {
justify-content: center;
align-items: center;
width: 100%;
background: #daecfe;
background: var(--color-primary-light-5);
}
a.blob-excerpt:hover {
background: #428bca;
background: var(--color-primary);
color: #fff;
}

133
web_src/less/themes/theme-arc-green.less
Unescape View File

@ -1,3 +1,22 @@
:root {
--color-primary: #87ab63;
--color-primary-dark-1: #93b373;
--color-primary-dark-2: #9fbc82;
--color-primary-dark-3: #abc492;
--color-primary-dark-4: #b7cda1;
--color-primary-dark-5: #cfddc1;
--color-primary-dark-6: #e7eee0;
--color-primary-dark-7: #f8faf6;
--color-primary-light-1: #7a9e55;
--color-primary-light-2: #6c8c4c;
--color-primary-light-3: #5f7b42;
--color-primary-light-4: #516939;
--color-primary-light-5: #364626;
--color-primary-light-6: #1b2313;
--color-primary-light-7: #080b06;
--color-body: #383c4a;
}
/* Background */
.chroma {
@ -401,63 +420,13 @@
}
body {
background: #383c4a;
color: #9e9e9e;
}
/* firefox scroll bars */
* {
scrollbar-width: thin;
scrollbar-color: #87ab63 rgba(255, 255, 255, .1);
}
/* webkit scrollbars */
::-webkit-scrollbar {
-webkit-appearance: none !important;
width: 10px !important;
height: 10px !important;
}
::-webkit-scrollbar-track {
border-radius: 0 !important;
background: rgba(255, 255, 255, .1) !important;
}
::-webkit-scrollbar-thumb {
cursor: pointer !important;
border-radius: 5px !important;
-webkit-transition: color .2s ease !important;
transition: color .2s ease !important;
background: #87ab63 !important;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #87ab63 !important;
}
::-webkit-scrollbar-thumb:hover {
background: #87ab63 !important;
}
::selection {
background: #87ab63 !important;
color: #fff !important;
}
::placeholder {
color: #7f7f7f !important;
}
a {
color: #87ab63;
}
a:hover {
color: #a0cc75;
}
.ui.card > .extra a:not(.ui):hover,
.ui.cards > .card > .extra a:not(.ui):hover {
color: #a0cc75;
@ -718,16 +687,7 @@ a.ui.basic.green.label:hover {
color: #9e9e9e;
}
.ui.blue.label,
.ui.blue.labels .label,
.repository .segment.reactions .ui.label.basic.blue {
background-color: #26577b !important;
border-color: #26577b !important;
}
.repository .segment.reactions .ui.label.basic.blue {
color: #a0cc75 !important;
background: #305020 !important;
border-color: #404552 !important;
}
@ -739,16 +699,6 @@ a.ui.basic.green.label:hover {
background: #565454;
}
.ui.blue.button,
.ui.blue.buttons .button {
background-color: #87ab63;
}
.ui.blue.button:hover,
.ui.blue.buttons .button:hover {
background-color: #a0cc75;
}
.ui.form input:not([type]),
.ui.form textarea,
.ui.form input[type="date"],
@ -893,6 +843,13 @@ a.ui.basic.green.label:hover {
box-shadow: none;
}
.ui.blue.label,
.ui.blue.labels .label,
.repository .segment.reactions .ui.label.basic.blue {
background-color: var(--color-primary-light-2) !important;
border-color: var(--color-primary) !important;
}
.ui.labeled.button:not([class*="left labeled"]) > .label,
.ui[class*="left labeled"].button > .button {
background: #404552;
@ -1250,10 +1207,6 @@ td.blob-hunk {
border-top: 1px solid #4c505c;
}
.ui .text.blue {
color: #87ab63 !important;
}
.ui.selection.active.dropdown,
.ui.selection.active.dropdown .menu {
border-color: #4e5361;
@ -1573,23 +1526,6 @@ input {
color: #7c9b5e;
}
.ui.blue.button:focus,
.ui.blue.buttons .button:focus {
background-color: #a27558;
}
.ui.basic.blue.button:hover,
.ui.basic.blue.buttons .button:hover {
box-shadow: 0 0 0 1px #87ab63 inset !important;
color: #87ab63 !important;
}
.ui.basic.blue.button:focus,
.ui.basic.blue.buttons .button:focus {
box-shadow: 0 0 0 1px #87ab63 inset !important;
color: #87ab63 !important;
}
.repository.labels .ui.basic.black.label {
background-color: #bbbbbb !important;
}
@ -1712,12 +1648,6 @@ a.ui.labels .label:hover {
border-bottom: 1px dashed #4c505c;
}
.ui.basic.blue.button,
.ui.basic.blue.buttons .button {
box-shadow: 0 0 0 1px #87ab63 inset !important;
color: #87ab63 !important;
}
.ui.text.yellow,
.yellow.icon.icon.icon {
color: #e4ac07 !important;
@ -1768,11 +1698,6 @@ a.ui.labels .label:hover {
color: #9e9e9e;
}
.ui.blue.button:active,
.ui.blue.buttons .button:active {
background-color: #a27558;
}
#git-graph-container li a {
color: #c79575;
}
@ -1952,12 +1877,6 @@ a.ui.labels .label:hover {
background-color: #2e323e;
}
::selection,
::-moz-selection,
.CodeMirror-selected {
background: #42402f !important;
}
&.cm-s-default,
&.cm-s-paper {
.cm-property {

Write Preview
Loading…
Cancel
Save