Use CSS Vars for primary color (#13361)
* 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>
This commit is contained in:
silverwind
GitHub
parent
b5e974c8a5
commit
6c323678d0
4 changed files with 125 additions and 121 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Reference in a new issue