More arc-green fixes (#13247)

- Fix various white borders
- Tweak basic button style to have more contrast
- Add more contrast to hover styles
- Invert Matrix webhook icon

May backport to 1.13.

Co-authored-by: zeripath <art27@cantab.net>

1 files changed, 57 insertions, 38 deletions

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 1e2a426115..c2e4409972 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -384,6 +384,10 @@
   }
 }
 
+.repository .ui.segment.sub-menu .list .item a:hover {
+  color: #fff;
+}
+
 .ui.horizontal.segments > .segment {
   background-color: #383c4a;
 }
@@ -535,15 +539,26 @@ a:hover {
 .ui.secondary.menu .link.item:hover,
 .ui.secondary.menu .active.item:hover,
 .ui.secondary.menu a.item:hover,
-.ui.dropdown .menu .active.item {
-  color: #ffffff;
+.ui.dropdown .menu .active.item,
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu a.item:hover,
+.ui.menu .active.item {
+  color: #dbdbdb;
+  background: #454b5a;
 }
 
 .ui.menu .ui.dropdown .menu > .item {
-  background: #2c303a !important;
   color: #9e9e9e !important;
 }
 
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item {
+  color: #dbdbdb !important;
+  background: #454b5a !important;
+}
+
 .ui.secondary.menu .dropdown.item > .menu,
 .ui.text.menu .dropdown.item > .menu {
   border: 1px solid #434444;
@@ -559,12 +574,8 @@ footer {
   background: #2c303a;
 }
 
-.ui.menu .ui.dropdown .menu > .item:hover,
-.ui.menu .ui.dropdown .menu > .selected.item {
-  color: #ffffff !important;
-}
-
-.ui.dropdown .menu > .header {
+.ui.dropdown .menu > .header,
+.ui.dropdown .menu > .header:not(.ui) {
   color: #dbdbdb;
 }
 
@@ -585,19 +596,6 @@ footer {
   background: #4b5162;
 }
 
-.ui.link.menu .item:hover,
-.ui.menu .dropdown.item:hover,
-.ui.menu .link.item:hover,
-.ui.menu a.item:hover {
-  color: #dbdbdb;
-  background: #454b5a;
-}
-
-.ui.menu .active.item {
-  background: #4b5162;
-  color: #dbdbdb;
-}
-
 .ui.input input {
   background: #404552;
   border: 1px solid #4b505f;
@@ -652,26 +650,12 @@ a.ui.basic.green.label:hover {
   color: #129c92;
 }
 
-.ui.basic.button,
-.ui.basic.buttons .button {
-  color: #797979;
-}
-
 .ui.basic.red.active.button,
 .ui.basic.red.buttons .active.button {
   box-shadow: 0 0 0 1px #c75252 inset !important;
   color: #c75252 !important;
 }
 
-.ui.basic.button:focus,
-.ui.basic.button:hover,
-.ui.basic.buttons .button:focus,
-.ui.basic.buttons .button:hover {
-  color: #dbdbdb;
-  box-shadow: 0 0 0 1px rgba(200, 200, 200, .35) inset;
-  background: rgba(0, 0, 0, .5);
-}
-
 .ui.menu .item {
   background: #404552;
   color: #9e9e9e;
@@ -862,6 +846,22 @@ a.ui.basic.green.label:hover {
   color: #dbdbdb;
 }
 
+.ui.basic.button,
+.ui.basic.buttons .button {
+  color: #9e9e9e;
+  background: rgba(0, 0, 0, .08);
+  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: #404552;
@@ -1041,6 +1041,7 @@ a.ui.basic.green.label:hover {
 
 .ui.dropdown .menu > .item:hover {
   color: #dbdbdb;
+  background: #353945;
 }
 
 .ui.dropdown .menu > .item {
@@ -1126,6 +1127,15 @@ a.ui.basic.green.label:hover {
   background: radial-gradient(#383c4a 40%, transparent 40%) no-repeat;
 }
 
+.repository.file.editor .commit-form-wrapper .commit-form {
+  border-color: #505667;
+}
+
+.repository.file.editor .commit-form-wrapper .commit-form::before,
+.repository.file.editor .commit-form-wrapper .commit-form::after {
+  border-right-color: #505667;
+}
+
 .repository .comment.form .content .form:after {
   border-right-color: #313c47;
 }
@@ -1232,7 +1242,7 @@ td.blob-hunk {
 .ui.card,
 .ui.cards > .card {
   background: #353945;
-  box-shadow: 0 1px 3px 0 #4c505c, 0 0 0 1px #4c505c;
+  box-shadow: 0 0 0 1px #4c505c;
 }
 
 .ui.card > .content > .header,
@@ -1703,6 +1713,7 @@ a.ui.labels .label:hover {
   border-color: #634343 !important;
 }
 
+.organization.settings .labelspage .item,
 .organization.teams .repositories .item:not(:last-child),
 .organization.teams .members .item:not(:last-child),
 .organization.teams .detail .item:not(:last-child),
@@ -1710,6 +1721,10 @@ a.ui.labels .label:hover {
   border-bottom-color: #404552;
 }
 
+.organization.settings .labelspage .item a:hover {
+  color: #fff;
+}
+
 .ui.blue.button:active,
 .ui.blue.buttons .button:active {
   background-color: #a27558;
@@ -1766,7 +1781,7 @@ a.ui.labels .label:hover {
 }
 
 .editor-toolbar i.separator {
-  border-right-color: #7f98ad;
+  border-right-color: #87ab63;
 }
 
 .repository .diff-detail-box {
@@ -2054,6 +2069,10 @@ footer .container .links > * {
   color: #2a2e3a;
 }
 
+img[src$="/img/matrix.svg"] {
+  filter: invert(80%);
+}
+
 #git-graph-container.monochrome #rel-container .flow-group {
   stroke: dimgrey;
   fill: dimgrey;