Style and template tweaks (#13828)

* Style and template tweaks

- Get red and green buttons on arc green closer to base theme
- EasyMDE adjustments, toolbar and focus border
- Fix header on 404 repo page
- Tweaks to frontpage search, add 'Create Repo' button
- Fix misaligned box headers
- Fix pagination on arc-green
- Fix background and footer on explore and repo search

* better fix for header button alignment

* add label hover for reactions

6 files changed, 58 insertions, 88 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 36421ca733..a1df19ef69 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -69,7 +69,7 @@
   --color-purple: #a333c8;
   --color-pink: #e03997;
   --color-brown: #a5673f;
-  --color-grey: #767676;
+  --color-grey: #888888;
   --color-black: #1b1c1d;
   --color-gold: #a1882b;
   --color-white: #ffffff;
@@ -97,6 +97,7 @@
   --color-markdown-table-row: #00000008;
   --color-markdown-code-block: #00000010;
   --color-button: #ffffff;
+  --color-code-bg: #ffffff;
 }
 
 :root:lang(ja) {
@@ -253,6 +254,10 @@ a.muted:hover,
   border-color: var(--color-primary);
 }
 
+.CodeMirror-focused {
+  border-color: var(--color-primary) !important;
+}
+
 .ui.action.input:not([class*="left action"]) > input:focus {
   border-right-color: var(--color-primary);
 }
@@ -288,6 +293,10 @@ a.muted:hover,
   background: none;
 }
 
+.ui.ui.menu .item.disabled {
+  color: var(--color-text-light-2);
+}
+
 .ui.dropdown .menu {
   background: var(--color-menu);
   border-color: var(--color-secondary);
@@ -307,6 +316,8 @@ a.muted:hover,
 }
 
 .ui.dropdown .menu .active.item {
+  color: var(--color-text);
+  background: var(--color-active);
   font-weight: normal;
 }
 
@@ -523,17 +534,15 @@ a.muted:hover,
   flex-direction: inherit;
 }
 
-.ui.dropdown:not(.labeled) > .dropdown.icon {
-  height: 14px;
-  vertical-align: bottom;
-  margin-bottom: -2px;
-  margin-left: .5rem;
-}
-
 .ui.dropdown .menu {
   border-color: var(--color-secondary);
 }
 
+.ui.pagination.menu .active.item {
+  color: var(--color-text);
+  background: var(--color-active);
+}
+
 .ui.form .field > .selection.dropdown > .dropdown.icon {
   height: auto;
 }
@@ -1266,6 +1275,11 @@ a.ui.label:hover {
   color: var(--color-text);
 }
 
+.ui.basic.labels a.label:hover,
+a.ui.basic.label:hover {
+  background: var(--color-label-hover);
+}
+
 .ui.label > .detail .icons {
   margin-right: .25em;
 }
@@ -1597,6 +1611,7 @@ a.ui.label:hover {
 }
 
 .ui.attached.header {
+  position: relative;
   background: var(--color-box-header);
   border-color: var(--color-secondary);
 
@@ -1606,6 +1621,14 @@ a.ui.label:hover {
   }
 }
 
+/* fix misaligned right buttons on box headers */
+.ui.attached.header .right {
+  position: absolute;
+  right: .78571429rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 /* https://github.com/go-gitea/gitea/issues/10210 */
 .ui.attached.segment ~ .ui.top.attached.header {
   margin-top: 1rem;
diff --git a/web_src/less/_chroma.less b/web_src/less/_chroma.less
index 28a795784d..699f69d810 100644
--- a/web_src/less/_chroma.less
+++ b/web_src/less/_chroma.less
@@ -1,7 +1,6 @@
-/* Background */
-
-.chroma {
-  background-color: #ffffff;
+.chroma,
+.lines-code {
+  background-color: var(--color-code-bg);
 }
 /* LineTableTD */
 
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index 771c7e088c..c925512f29 100644
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -63,7 +63,8 @@
     }
   }
 
-  .dashboard-repos {
+  .dashboard-repos,
+  .dashboard-orgs {
     margin: 0 1px; /* Accomodate for Semantic's 1px hacks on .attached elements */
   }
 
diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
index 82a7153c7b..c23de4f2e0 100644
--- a/web_src/less/_editor.less
+++ b/web_src/less/_editor.less
@@ -37,12 +37,26 @@
   border-color: var(--color-secondary);
 }
 
+.editor-toolbar button {
+  border: none !important;
+  color: var(--color-text-light);
+}
+
 .editor-toolbar button:not(:hover) {
   background-color: transparent !important;
 }
 
 .editor-toolbar i.separator {
   border-left: none;
+  border-right-color: var(--color-secondary);
+}
+
+.editor-toolbar button:hover {
+  background: var(--color-hover);
+}
+
+.editor-toolbar button.active {
+  background: var(--color-active);
 }
 
 .editor-loading {
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 3cf5161651..77c81a62e1 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -20,6 +20,9 @@
   word-break: break-all !important;
 }
 
+.full-screen-width { width: 100vw !important; }
+.full-screen-height { height: 100vw !important; }
+
 .rounded { border-radius: var(--border-radius) !important; }
 .rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
 .rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 2d097a6553..884548accb 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -64,8 +64,8 @@
   --color-purple: #a333c8;
   --color-pink: #e03997;
   --color-brown: #a5673f;
-  --color-grey: #767676;
-  --color-black: #1b1c1d;
+  --color-grey: #767a85;
+  --color-black: #1e222e;
   --color-gold: #a1882b;
   --color-white: #ffffff;
   /* target-based colors */
@@ -73,8 +73,8 @@
   --color-box-header: #454a57;
   --color-box-body: #353945;
   --color-text: #bbc0ca;
-  --color-text-light: #969aa5;
-  --color-text-light-2: #767a85;
+  --color-text-light: #a6aab5;
+  --color-text-light-2: #868a95;
   --color-footer: #2e323e;
   --color-timeline: #4a505c;
   --color-input-text: #d5dbe6;
@@ -92,13 +92,9 @@
   --color-markdown-table-row: #ffffff06;
   --color-markdown-code-block: #2a2e3a;
   --color-button: #353846;
+  --color-code-bg: #2a2e3a;
 }
 
-/* Background */
-
-.chroma {
-  background-color: #2a2e3a;
-}
 /* LineTableTD */
 
 .chroma .lntd {
@@ -563,12 +559,6 @@ a.ui.basic.green.label:hover {
   color: #fff !important;
 }
 
-.ui.basic.red.active.button,
-.ui.basic.red.buttons .active.button {
-  box-shadow: 0 0 0 1px #b75252 inset !important;
-  color: #b75252 !important;
-}
-
 .ui.divider:not(.vertical):not(.horizontal) {
   border-bottom-color: var(--color-secondary);
   border-top-color: transparent;
@@ -771,19 +761,6 @@ a.ui.basic.green.label:hover {
   border-color: transparent !important;
 }
 
-.ui.basic.green.active.button,
-.ui.basic.green.buttons .active.button {
-  color: #87ab63 !important;
-  box-shadow: 0 0 0 1px #87ab63 inset !important;
-}
-
-.ui.green.buttons .active.button,
-.ui.green.buttons .active.button:active,
-.ui.green.active.button,
-.ui.green.button .active.button:active {
-  background: #87ab63;
-}
-
 .ui .info.segment.top {
   background-color: var(--color-secondary) !important;
 }
@@ -840,23 +817,6 @@ td.blob-hunk {
   background: #353945;
 }
 
-.ui.vertical.menu .active.item {
-  background: #4b5162;
-}
-
-.ui.vertical.menu .item {
-  background: #353945;
-}
-
-.ui.vertical.menu .header.item {
-  background: var(--color-secondary);
-}
-
-.ui.vertical.menu {
-  background: #353945;
-  border: 1px solid #333640;
-}
-
 .ui.card,
 .ui.cards > .card {
   background: #353945;
@@ -966,12 +926,6 @@ td.blob-hunk {
   color: rgba(158, 158, 158, 1);
 }
 
-.ui.basic.red.button,
-.ui.basic.red.buttons .button {
-  box-shadow: 0 0 0 1px #a04141 inset !important;
-  color: #a04141 !important;
-}
-
 .ui.list .list > .item .header,
 .ui.list > .item .header {
   color: #dedede;
@@ -1183,30 +1137,11 @@ a.blob-excerpt:hover {
   filter: invert(100%);
 }
 
-.editor-toolbar {
-  background-color: var(--color-secondary);
-  border-color: var(--color-secondary);
-}
-
 .edit-diff > div > .ui.table {
   border-left-color: var(--color-secondary) !important;
   border-right-color: var(--color-secondary) !important;
 }
 
-.editor-toolbar button {
-  color: #87ab63 !important;
-}
-
-.editor-toolbar button.active,
-.editor-toolbar button:hover {
-  background: #2a2e3a;
-  border-color: transparent;
-}
-
-.editor-toolbar i.separator {
-  border-right-color: #87ab63;
-}
-
 .repository .diff-detail-box {
   background-color: #383c4a;
 
@@ -1232,11 +1167,6 @@ a.blob-excerpt:hover {
   }
 }
 
-.add-comment-left.add-comment-right .ui.attached.header {
-  border-color: var(--color-secondary);
-  border-right: none;
-}
-
 .file-comment {
   color: var(--color-secondary-dark-6);
 }