diff options
author | silverwind <me@silverwind.io> | 2020-10-31 04:52:10 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-30 23:52:10 -0400 |
commit | 6c323678d0a0872825e90d1339db802ebce3fb76 (patch) | |
tree | b664603babc63851555d04a12ec9f76dd0b1f9da /web_src/less/_base.less | |
parent | b5e974c8a5a90e7c166792d03d97f2ea5b6cfba6 (diff) | |
download | gitea-6c323678d0a0872825e90d1339db802ebce3fb76.tar.gz gitea-6c323678d0a0872825e90d1339db802ebce3fb76.zip |
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>
Diffstat (limited to 'web_src/less/_base.less')
-rw-r--r-- | web_src/less/_base.less | 105 |
1 files changed, 95 insertions, 10 deletions
diff --git a/web_src/less/_base.less b/web_src/less/_base.less index aeecddb8af..a695599ec4 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -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 { |