From ac3a61ea176d4f0359ddb195bcc73eef3eec44fe Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 12 Oct 2022 18:26:27 +0200 Subject: [PATCH] Consolidate more CSS colors into variables (#21402) 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. Screen Shot 2022-10-10 at 21 10 23 Screen Shot 2022-10-10 at 21 31 53 Screen Shot 2022-10-10 at 21 31 44 Co-authored-by: wxiaoguang Co-authored-by: techknowlogick --- web_src/less/_base.less | 32 +++++++++++----- web_src/less/_repository.less | 12 +++--- web_src/less/animations.less | 2 +- web_src/less/themes/theme-arc-green.less | 49 +----------------------- 4 files changed, 30 insertions(+), 65 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index fdc235164e..c66cabd8a1 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -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,'); + --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); + /* 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,'); - --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); + --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; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index d5f4ff05df..c5d2a5f50a 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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); } } } diff --git a/web_src/less/animations.less b/web_src/less/animations.less index ea31d53bfe..6d32625704 100644 --- a/web_src/less/animations.less +++ b/web_src/less/animations.less @@ -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%; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 3f3d4feae2..12dba79266 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -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;