From c73b11d5e94b1da3c16ebc67d02062027d0d2ecb Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 10 Oct 2022 21:22:45 +0200 Subject: [PATCH 1/2] Consolidate more CSS colors into variables Move more colors into variables. The only real notable change is the dot in the release timeline. --- web_src/less/_base.less | 34 +++++++++++----- web_src/less/_repository.less | 12 +++--- web_src/less/animations.less | 2 +- web_src/less/themes/theme-arc-green.less | 51 ++---------------------- 4 files changed, 34 insertions(+), 65 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index fdc235164e64e..90ee9ee698485 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,11 @@ --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; + --color-loading-bg: #ececec; + --color-loading-fg: #666; } :root * { @@ -351,6 +353,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 +1380,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 +1718,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 +2120,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 +2225,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 f30bafa4cc703..f134a0ef4147c 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -1934,16 +1934,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 ea31d53bfea72..277343f2b508c 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-loading-bg) var(--color-loading-bg) var(--color-loading-fg) var(--color-loading-fg); border-radius: 100%; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 3f3d4feae28d5..c2625ff800487 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -136,6 +136,9 @@ --color-label-active-bg: #4c525e; --color-small-accent: var(--color-primary-light-5); --color-accent: var(--color-primary-light-3); + --color-active-line: #534d1b; + --color-loading-bg: #4a4c58; + --color-loading-fg: #d7d7da; } ::-webkit-calendar-picker-indicator { @@ -231,10 +234,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 +244,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 +268,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; From 56b2acfcb2dc931ef141920a99745c60678c3a23 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 10 Oct 2022 21:32:35 +0200 Subject: [PATCH 2/2] use secondary colors for loading --- web_src/less/_base.less | 2 -- web_src/less/animations.less | 2 +- web_src/less/themes/theme-arc-green.less | 2 -- 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 90ee9ee698485..c66cabd8a196d 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -165,8 +165,6 @@ --color-small-accent: var(--color-primary-light-6); --color-accent: var(--color-primary-light-4); --color-active-line: #fffbdd; - --color-loading-bg: #ececec; - --color-loading-fg: #666; } :root * { diff --git a/web_src/less/animations.less b/web_src/less/animations.less index 277343f2b508c..6d32625704d77 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: var(--color-loading-bg) var(--color-loading-bg) var(--color-loading-fg) var(--color-loading-fg); + 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 c2625ff800487..12dba7926626f 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -137,8 +137,6 @@ --color-small-accent: var(--color-primary-light-5); --color-accent: var(--color-primary-light-3); --color-active-line: #534d1b; - --color-loading-bg: #4a4c58; - --color-loading-fg: #d7d7da; } ::-webkit-calendar-picker-indicator {