Markdown and Repo header tweaks (#13744)

* Markdown and Repo header tweaks

- Use CSS vars for all markdown colors
- Tweak repo header, removing double borders and adjust sizes
- Use menu instead of buttons for issue open/close switcher
- Add emoji inversion for select emoji glyphs in arc-green
- Use border over box-shadow for all buttons
- Add spacing element to login form without openid

* repo settings navbar fix

* use shared template in more places and adjust dashboard

* fix remaining open/close combos

1 files changed, 27 insertions, 6 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index c6f7d043af..d2dd9dcb3f 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -76,7 +76,7 @@
   /* target-based colors */
   --color-body: #ffffff;
   --color-text: #212121;
-  --color-text-light: #444444;
+  --color-text-light: #555555;
   --color-text-light-2: #888888;
   --color-box-header: #f7f7f7;
   --color-box-body: #ffffff;
@@ -91,9 +91,12 @@
   --color-label-hover: #00000015;
   --color-label-basic: #00000008;
   --color-label-border: #00000018;
-  --color-hover: #0000000d;
-  --color-active: #00000014;
+  --color-hover: #0000000a;
+  --color-active: #00000010;
   --color-menu: #ffffff;
+  --color-markdown-table-row: #00000008;
+  --color-markdown-code-block: #00000010;
+  --color-button: #ffffff;
 }
 
 :root:lang(ja) {
@@ -231,6 +234,10 @@ a.muted:hover,
   color: var(--color-primary-dark-2);
 }
 
+.ui.breadcrumb .divider {
+  color: var(--color-text-light-2);
+}
+
 .ui.input.focus > input,
 .ui.input > input:focus {
   border-color: var(--color-primary);
@@ -1124,16 +1131,19 @@ footer {
 .ui.menu.new-menu::after {
   position: absolute;
   display: block;
-  background-image: linear-gradient(to right, transparent, var(--color-navbar) 100%);
-  content: ' ';
+  background: linear-gradient(to right, transparent, var(--color-navbar) 100%);
+  content: '';
   right: 0;
   height: 39px;
-  z-index: 1000;
   width: 60px;
   visibility: visible;
   pointer-events: none;
 }
 
+.ui.menu.new-menu.shadow-body::after {
+  background: linear-gradient(to right, transparent, var(--color-body) 100%);
+}
+
 .ui.menu.new-menu .item {
   margin: 0 !important;
 }
@@ -1403,6 +1413,13 @@ a.ui.label:hover {
   font-size: .85714286rem;
 }
 
+.ui.button {
+  background: var(--color-button);
+  border: 1px solid var(--color-secondary);
+  box-shadow: none !important;
+  color: var(--color-text);
+}
+
 .ui.blue.button,
 .ui.blue.buttons .button,
 .ui.primary.button,
@@ -1714,6 +1731,10 @@ table th[data-sortt-desc] {
   color: var(--color-text);
 }
 
+.ui.header {
+  color: var(--color-text);
+}
+
 .ui.header .ui.label {
   margin-left: .25rem;
 }