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

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 8799cda65589c89496590b7cf6f4c75d5863022a..31bcd5c48a8d774a7db8ab49857384fb258264d5 100644 (file)
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -45,7 +45,7 @@
                                        <form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
                                                {{$.CsrfTokenHtml}}
                                                <div class="ui labeled button{{if not $.IsSigned}} poping up{{end}}" tabindex="0"{{if not $.IsSigned}} data-content="{{$.i18n.Tr "repo.watch_guest_user" }}" data-position="top center" data-variation="tiny"{{end}}>
-                                                       <button type="submit" class="ui compact basic button"{{if not $.IsSigned}} disabled{{end}}>
+                                                       <button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
                                                                {{if $.IsWatchingRepo}}{{svg "octicon-eye-closed" 16}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{svg "octicon-eye"}}{{$.i18n.Tr "repo.watch"}}{{end}}
                                                        </button>
                                                        <a class="ui basic label" href="{{.Link}}/watchers">
@@ -56,7 +56,7 @@
                                        <form method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
                                                {{$.CsrfTokenHtml}}
                                                <div class="ui labeled button{{if not $.IsSigned}} poping up{{end}}" tabindex="0"{{if not $.IsSigned}} data-content="{{$.i18n.Tr "repo.star_guest_user" }}" data-position="top center" data-variation="tiny"{{end}}>
-                                                       <button type="submit" class="ui compact basic button"{{if not $.IsSigned}} disabled{{end}}>
+                                                       <button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
                                                                {{if $.IsStaringRepo}}{{svg "octicon-star-fill"}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{svg "octicon-star"}}{{$.i18n.Tr "repo.star"}}{{end}}
                                                        </button>
                                                        <a class="ui basic label" href="{{.Link}}/stars">
@@ -65,8 +65,8 @@
                                                </div>
                                        </form>
                                        {{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}}
-                                               <div class="ui labeled button {{if and ($.IsSigned) (not $.CanSignedUserFork)}}disabled-repo-button{{end}}" tabindex="0">
-                                                       <a class="ui compact basic button {{if or (not $.IsSigned) (not $.CanSignedUserFork)}}poping up{{end}}" {{if $.CanSignedUserFork}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else if $.IsSigned}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" {{ else }} data-content="{{$.i18n.Tr "repo.fork_guest_user" }}" rel="nofollow" href="{{AppSubUrl}}/user/login?redirect_to={{AppSubUrl}}/repo/fork/{{.ID}}" {{end}} data-position="top center" data-variation="tiny">
+                                               <div class="ui labeled button" tabindex="0">
+                                                       <a class="ui compact small basic button {{if or (not $.IsSigned) (not $.CanSignedUserFork)}}poping up{{end}}" {{if $.CanSignedUserFork}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else if $.IsSigned}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" {{ else }} data-content="{{$.i18n.Tr "repo.fork_guest_user" }}" rel="nofollow" href="{{AppSubUrl}}/user/login?redirect_to={{AppSubUrl}}/repo/fork/{{.ID}}" {{end}} data-position="top center" data-variation="tiny">
                                                                {{svg "octicon-repo-forked"}}{{$.i18n.Tr "repo.fork"}}
                                                        </a>
                                                        <a class="ui basic label" href="{{.Link}}/forks">

diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables
index dd29751be8d1218a1717c746062c3e3337f8c645..3c1781a08f95da2d4cf72d63d8473c0cc1533f4c 100644 (file)
--- 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 eaab660796c0a21f53ee925439c1220cdbdbdcd2..8d4d0ceab8cd4d88602e2499496d10212353ae31 100644 (file)
--- 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 7042af574b4d4221a3ecc6a6329b784987c2f3d0..23a289a8f352538cbaa5224001ed82951e8c4252 100644 (file)
--- 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 c0fd13c0944b4741c26fad15bfe94e44b5088b8f..5f9fc954c11013909219b6cb118c8a3546df3ef6 100644 (file)
--- 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 ca629188bc45fd28875cd4d085f2550792e21d16..9f35d4dafe55be653a43ed1781145352b4f3bf68 100644 (file)
--- 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);