From 3f9e323ecd519efc94a472502085100728900d3f Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 23 Sep 2022 05:00:29 +0200 Subject: [PATCH] Various CSS tweaks (#21244) - Remove arc-green specific rules and instead fix the colors in the base rules. - Make file table row border visible on arc-green. - Remove remnants of fomantic accordeon module that was removed. --- web_src/fomantic/theme.config.less | 1 - web_src/less/_base.less | 55 +++++++++++++- web_src/less/_form.less | 2 +- web_src/less/_repository.less | 10 +-- web_src/less/themes/theme-arc-green.less | 92 +----------------------- 5 files changed, 61 insertions(+), 99 deletions(-) diff --git a/web_src/fomantic/theme.config.less b/web_src/fomantic/theme.config.less index 15f3bd58a7..b92399409d 100644 --- a/web_src/fomantic/theme.config.less +++ b/web_src/fomantic/theme.config.less @@ -50,7 +50,6 @@ @table : 'default'; /* Modules */ -@accordion : 'default'; @calendar : 'default'; @checkbox : 'default'; @dimmer : 'default'; diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 5fc3762e8b..3c0b24a634 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -135,7 +135,7 @@ --color-light: #00000006; --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #0000001d; - --color-hover: #0000000f; + --color-hover: #0000000c; --color-active: #00000014; --color-menu: #ffffff; --color-card: #ffffff; @@ -157,6 +157,7 @@ --color-reaction-active-bg: var(--color-primary-alpha-20); --color-tooltip-bg: #000000f0; --color-tooltip-text: #ffffff; + --color-header-bar: #ffffff; /* backgrounds */ --checkbox-mask-checked: url('data:image/svg+xml;utf8,'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); @@ -294,6 +295,29 @@ a.commit-statuses-trigger { text-decoration: none !important; } +.ui.search > .results { + background: var(--color-body); + border-color: var(--color-secondary); +} + +.ui.search > .results .result { + background: var(--color-body); +} + +.ui.search > .results .result .title { + color: var(--color-text-dark); +} + +.ui.search > .results .result .image { + width: auto; + height: auto; +} + +.ui.search > .results .result:hover, +.ui.category.search > .results .category .result:hover { + background: var(--color-hover); +} + .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; @@ -318,6 +342,11 @@ a.commit-statuses-trigger { color: var(--color-text-light-2); } +.ui.divider:not(.vertical,.horizontal) { + border-top-color: var(--color-secondary) !important; + border-bottom: none !important; +} + .page-content { margin-top: 15px; } @@ -449,6 +478,11 @@ a.commit-statuses-trigger { color: var(--color-text-light-2); } +.ui.list .list > .item > .content, +.ui.list > .item > .content { + color: var(--color-text); +} + .ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover { @@ -656,10 +690,20 @@ a.ui.card:hover, .ui.table { color: var(--color-text); - background: var(--color-body); + background: var(--color-box-body); border-color: var(--color-secondary); } +.ui.table th, +.ui.table td { + transition: none; +} + +.ui.table > tr > td, +.ui.table > tbody > tr > td { + border-top-color: var(--color-secondary-alpha-50); +} + .ui.ui.selectable.table > tbody > tr:hover, .ui.table tbody tr td.selectable:hover { color: var(--color-text); @@ -672,6 +716,11 @@ a.ui.card:hover, color: var(--color-text); } +.ui.table > thead > tr > th { + background: var(--color-box-header); + color: var(--color-text); +} + .ui.modal { background: var(--color-body); } @@ -750,7 +799,7 @@ a.ui.card:hover, margin: 0 !important; &.light { - background: var(--color-body); + background: var(--color-header-bar); border-bottom: 1px solid var(--color-secondary); } diff --git a/web_src/less/_form.less b/web_src/less/_form.less index b59c9bb52f..08e1f324b4 100644 --- a/web_src/less/_form.less +++ b/web_src/less/_form.less @@ -134,7 +134,7 @@ textarea:focus, .form { .help { - color: #999999; + color: var(--color-secondary-dark-5); padding-bottom: .6em; display: inline-block; } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 57d54a08f6..44e9a0430e 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -384,7 +384,7 @@ } tr:hover { - background-color: #ffffee; + background-color: var(--color-hover); } tr.has-parent a { @@ -3013,9 +3013,9 @@ tbody.commit-list { } .tag-code, -.tag-code td { - background-color: #f0f9ff; - border-color: #f1f8ff !important; +.tag-code td, +.tag-code .blob-excerpt { + background-color: var(--color-box-body-highlight); vertical-align: middle; } @@ -3031,7 +3031,7 @@ tbody.commit-list { } td.blob-excerpt { - background-color: #fafafa; + background-color: var(--color-secondary-alpha-30); } .issue-keyword { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 2cbb979074..754177d603 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -94,7 +94,7 @@ /* target-based colors */ --color-body: #383c4a; --color-box-header: #404652; - --color-box-body: #303440; + --color-box-body: #2a2e3a; --color-box-body-highlight: #353945; --color-text-dark: #dbe0ea; --color-text: #bbc0ca; @@ -105,7 +105,7 @@ --color-footer: #2e323e; --color-timeline: #4c525e; --color-input-text: #d5dbe6; - --color-input-background: #292d39; + --color-input-background: #232933; --color-input-border: #454a57; --color-input-border-hover: #505667; --color-navbar: #2a2e3a; @@ -132,25 +132,13 @@ --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ --color-reaction-bg: #ffffff12; --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #2e323e; } ::-webkit-calendar-picker-indicator { filter: invert(.8); } -.ui.horizontal.segments > .segment { - background-color: #383c4a; -} - -.following.bar.light { - background: #2e323e; - border-color: var(--color-secondary-alpha-40); -} - -.following.bar .top.menu a.item:hover { - color: #fff; -} - .ui.red.label, .ui.red.labels .label { background-color: #7d3434 !important; @@ -163,10 +151,6 @@ background-color: #936e00 !important; } -.ui.accordion .title:not(.ui) { - color: #dbdbdb; -} - .ui.green.label, .ui.green.labels .label, .ui.basic.green.label { @@ -183,19 +167,6 @@ a.ui.basic.green.label:hover { color: #fff !important; } -.ui.divider:not(.vertical,.horizontal) { - border-bottom-color: var(--color-secondary); - border-top-color: transparent; -} - -.form .help { - color: #7f8699; -} - -.ui .text.light.grey { - color: #7f8699 !important; -} - .ui.form .fields.error .field textarea, .ui.form .fields.error .field select, .ui.form .fields.error .field input:not([type]), @@ -257,45 +228,6 @@ a.ui.basic.green.label:hover { background-color: #a0cc75; } -.ui.search > .results { - background: #383c4a; - border-color: var(--color-secondary); -} - -.ui.search > .results .result:hover, -.ui.category.search > .results .category .result:hover { - background: var(--color-secondary); -} - -.ui.search > .results .result .title { - color: #dbdbdb; -} - -.ui.table > thead > tr > th { - background: var(--color-secondary); - color: #dbdbdb !important; -} - -.repository.file.list #repo-files-table tr { - background: #2a2e3a; -} - -.repository.file.list #repo-files-table tr:hover { - background-color: #393d4a !important; -} - -.overflow.menu .items .item { - color: #9d9d9d; -} - -.overflow.menu .items .item:hover { - color: #dbdbdb; -} - -.ui.list > .item > .content { - color: var(--color-secondary-dark-6) !important; -} - .repository .navbar .active.item, .repository .navbar .active.item:hover { border-color: transparent !important; @@ -305,20 +237,6 @@ a.ui.basic.green.label:hover { border-color: var(--color-secondary); } -.tag-code, -.tag-code td { - background: #353945 !important; - -} -.tag-code td.lines-num { - background-color: #3a3e4c !important; -} - -.tag-code td.lines-type-marker, -td.blob-hunk { - color: #dbdbdb !important; -} - .ui.red.button, .ui.red.buttons .button { background-color: #7d3434; @@ -344,10 +262,6 @@ td.blob-hunk { border-color: var(--color-secondary) !important; } -td.blob-excerpt { - background-color: rgba(0, 0, 0, .15); -} - .lines-code.active, .lines-code .active { background: #534d1b !important;