From fe403725f45e4515ce89d6a4dfd01e9698d38ad9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 27 Dec 2020 11:53:53 +0100 Subject: [PATCH] Improve basic button and label styles (#14119) * Improve disabled styles for repo buttons - Simplify disabled styling of label by matching for the disabled attribute. - Raise fomantic disabled opacity from .45 to .55 to for more contrast. - Use CSS vars for basic button styles. * restore clickability on label * color tweaks and remove arc-green style * slightly reduce button size * consolidate vars * also cover active class * slightly more distinct active class * remove useless rule --- templates/repo/header.tmpl | 8 +-- web_src/fomantic/_site/globals/site.variables | 1 + web_src/fomantic/build/semantic.css | 24 ++++---- web_src/less/_base.less | 56 +++++++++++++----- web_src/less/_repository.less | 26 +++------ web_src/less/themes/theme-arc-green.less | 58 ++----------------- 6 files changed, 70 insertions(+), 103 deletions(-) diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 8799cda655..31bcd5c48a 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -45,7 +45,7 @@
{{$.CsrfTokenHtml}}
- @@ -56,7 +56,7 @@ {{$.CsrfTokenHtml}}
- @@ -65,8 +65,8 @@
{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}} -
- +
+ {{svg "octicon-repo-forked"}}{{$.i18n.Tr "repo.fork"}} diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables index dd29751be8..3c1781a08f 100644 --- a/web_src/fomantic/_site/globals/site.variables +++ b/web_src/fomantic/_site/globals/site.variables @@ -4,3 +4,4 @@ @pageFont: var(--fonts-regular); @bold: 500; @useCustomScrollbars: false; +@disabledOpacity: var(--opacity-disabled); diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index eaab660796..8d4d0ceab8 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -578,7 +578,7 @@ .ui.disabled.button:hover, .ui.disabled.active.button { cursor: default; - opacity: 0.45 !important; + opacity: var(--opacity-disabled) !important; background-image: none; box-shadow: none; pointer-events: none !important; @@ -9202,7 +9202,7 @@ select.ui.dropdown { .ui.active.search.dropdown input.search:focus + .text i.icon, .ui.active.search.dropdown input.search:focus + .text .flag { - opacity: 0.45; + opacity: var(--opacity-disabled); } .ui.active.search.dropdown input.search:focus + .text { @@ -9734,7 +9734,7 @@ select.ui.dropdown { .ui.dropdown .menu > .disabled.item { cursor: default; pointer-events: none; - opacity: 0.45; + opacity: var(--opacity-disabled); } /******************************* @@ -12013,12 +12013,12 @@ select.ui.dropdown { .ui.form .disabled.field, .ui.form .field :disabled { pointer-events: none; - opacity: 0.45; + opacity: var(--opacity-disabled); } .ui.form .field.disabled > label, .ui.form .fields.disabled > label { - opacity: 0.45; + opacity: var(--opacity-disabled); } .ui.form .field.disabled :disabled { @@ -15101,7 +15101,7 @@ h6.ui.header .sub.header { *******************************/ .ui.disabled.header { - opacity: 0.45; + opacity: var(--opacity-disabled); } /******************************* @@ -15768,7 +15768,7 @@ i.emphasized.icons:not(.disabled) { i.disabled.icon, i.disabled.icons { - opacity: 0.45; + opacity: var(--opacity-disabled); cursor: default; pointer-events: none; } @@ -24650,7 +24650,7 @@ img.ui.image { .ui.disabled.images, .ui.disabled.image { cursor: default; - opacity: 0.45; + opacity: var(--opacity-disabled); } /******************************* @@ -25008,7 +25008,7 @@ img.ui.bordered.image { .ui.disabled.input, .ui.input:not(.disabled) input[disabled] { - opacity: 0.45; + opacity: var(--opacity-disabled); } .ui.disabled.input > input, @@ -37183,7 +37183,7 @@ template { .ui.disabled.search { cursor: default; pointer-events: none; - opacity: 0.45; + opacity: var(--opacity-disabled); } /******************************* @@ -37984,7 +37984,7 @@ template { ---------------*/ .ui.disabled.segment { - opacity: 0.45; + opacity: var(--opacity-disabled); color: rgba(40, 40, 40, 0.3); } @@ -41783,7 +41783,7 @@ span.ui.warning.text { } span.ui.disabled.text { - opacity: 0.45; + opacity: var(--opacity-disabled); } /* Sizes */ diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 7042af574b..23a289a8f3 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -6,6 +6,7 @@ /* other variables */ --fonts-regular: var(--fonts-proportional), var(--fonts-emoji); --border-radius: .28571429rem; + --opacity-disabled: .55; --color-primary: #4183c4; --color-primary-dark-1: #3876b3; --color-primary-dark-2: #31699f; @@ -96,13 +97,10 @@ --color-input-border: #dedede; --color-input-border-hover: #cecece; --color-navbar: #f8f8f8; - --color-label: #00000010; - --color-label-hover: #00000015; - --color-label-basic: #00000008; - --color-label-basic-hover: #00000015; - --color-label-border: #00000018; - --color-hover: #0000000a; - --color-active: #00000010; + --color-light: #00000004; + --color-light-border: #0000001d; + --color-hover: #0000000d; + --color-active: #00000012; --color-menu: #ffffff; --color-card: #ffffff; --color-markdown-table-row: #00000008; @@ -1382,13 +1380,13 @@ i.icon.centerlock { .ui.label { padding: .3em .5em; - background: var(--color-label); + background: var(--color-light); color: var(--color-text-light); } .ui.labels a.label:hover, a.ui.label:hover { - background: var(--color-label-hover); + background: var(--color-hover); color: var(--color-text); } @@ -1556,7 +1554,7 @@ a.ui.label:hover { .ui.button { background: var(--color-button); - border: 1px solid var(--color-secondary); + border: 1px solid var(--color-light-border); box-shadow: none !important; color: var(--color-text); } @@ -1578,6 +1576,34 @@ a.ui.label:hover { border-left: none; } +.ui.basic.buttons .button, +.ui.basic.button { + color: var(--color-text-light); + background: var(--color-light); +} + +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.basic.buttons .button:focus, +.ui.basic.button:focus, +.ui.basic.buttons .button:active, +.ui.basic.button:active, +.ui.basic.buttons .active.button, +.ui.basic.active.button, +.ui.basic.buttons .active.button:hover, +.ui.basic.active.button:hover { + color: var(--color-text); + background: var(--color-active); +} + +.ui.labeled.button > .label { + border-color: var(--color-light-border); +} + .ui.blue.button, .ui.blue.buttons .button, .ui.primary.button, @@ -1640,16 +1666,16 @@ a.ui.label:hover { .ui.basic.labels .label, .ui.basic.label { - background: var(--color-label-basic); - border-color: var(--color-label-border); - color: var(--color-text); + background: var(--color-light); + border-color: var(--color-light-border); + color: var(--color-text-light); } .ui.basic.labels a.label:hover, a.ui.basic.label:hover { color: var(--color-text); - border-color: var(--color-label-border); - background: var(--color-label-basic-hover); + border-color: var(--color-light-border); + background: var(--color-hover); } .ui.label > img { diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index c0fd13c094..5f9fc954c1 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -861,7 +861,7 @@ .shabox { .sha.label { margin: 0; - border: 1px solid #bbbbbb; + border: 1px solid var(--color-light-border); &.isSigned.isWarning { border: 1px solid #db2828; @@ -1301,7 +1301,7 @@ #repo-files-table .sha.label, #rev-list .sha.label, .timeline-item.commits-list .singular-commit .sha.label { - border: 1px solid #bbbbbb; + border: 1px solid var(--color-light-border); .ui.signature.avatar { height: 16px; @@ -1310,10 +1310,10 @@ } .detail.icon { - background: #fafafa; + background: var(--color-light); margin: -6px -10px -4px 0; padding: 5px 4px 5px 6px; - border-left: 1px solid #bbbbbb; + border-left: 1px solid var(--color-light-border); border-top: 0; border-right: 0; border-bottom: 0; @@ -2780,24 +2780,14 @@ tbody.commit-list { word-break: break-all; } -.repo-header .repo-buttons { +.repo-buttons { display: flex; align-items: center; } -.repo-buttons .disabled-repo-button .label { - opacity: .5; -} - -.repo-buttons .disabled-repo-button a.button { - opacity: .5; - cursor: not-allowed; -} - -.repo-buttons .disabled-repo-button a.button:hover { - background: none !important; - color: rgba(0, 0, 0, .6) !important; - box-shadow: 0 0 0 1px var(--color-secondary) inset !important; +.repo-buttons button[disabled], +.repo-buttons button[disabled] ~ .label { + opacity: var(--opacity-disabled); } .repo-buttons .ui.labeled.button > .label { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index ca629188bc..9f35d4dafe 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -91,13 +91,10 @@ --color-input-border: #454a57; --color-input-border-hover: #505667; --color-navbar: #2a2e3a; - --color-label: #ffffff0d; - --color-label-hover: #ffffff20; - --color-label-basic: #00000030; - --color-label-basic-hover: #40404030; - --color-label-border: #ffffff28; - --color-hover: #ffffff0d; - --color-active: #ffffff14; + --color-light: #00000028; + --color-light-border: #ffffff28; + --color-hover: #60606020; + --color-active: #60606040; --color-menu: #2e323e; --color-card: #2e323e; --color-markdown-table-row: #ffffff06; @@ -271,34 +268,6 @@ a.ui.basic.green.label:hover { background-color: #a0cc75; } -.ui.basic.button, -.ui.basic.buttons .button { - color: var(--color-secondary-dark-6); - background: rgba(0, 0, 0, .1); - box-shadow: none; -} - -.ui.basic.button:focus, -.ui.basic.button:hover, -.ui.basic.buttons .button:focus, -.ui.basic.buttons .button:hover { - color: #dbdbdb; - background: rgba(255, 255, 255, .08); - box-shadow: none; -} - -.ui.labeled.button:not([class*="left labeled"]) > .label, -.ui[class*="left labeled"].button > .button { - background: var(--color-secondary); - border: 1px solid var(--color-secondary); - color: #87ab63; -} - -.ui.button:hover { - background-color: var(--color-secondary); - color: #dbdbdb; -} - .ui.search > .results { background: #383c4a; border-color: var(--color-secondary); @@ -521,25 +490,6 @@ td.blob-excerpt { color: #dbdbdb; } -.sha.label, -.repository #repo-files-table .sha.label, -.repository #commits-table td.sha .sha.label, -#rev-list .sha.label, -.repository .timeline-item.commits-list .singular-commit .sha.label, -.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label { - border-color: #505667; -} - -.sha.label.isSigned .detail.icon, -.repository #commits-table td.sha .sha.label.isSigned .detail.icon, -#rev-list .sha.label.isSigned .detail.icon, -.repository #repo-files-table .sha.label.isSigned .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned .detail.icon, -.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned .detail.icon { - background: none; - border-left-color: #888; -} - .repository .ui.attached.message.isSigned.isVerified { background-color: #394829; color: var(--color-secondary-dark-6);