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

1 files changed, 12 insertions, 12 deletions

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 */