Fix colors and triangles in issues (#13463)

- Fix misaligned triangles
- Fix triangle and header background colors
- Adjust timeline color

4 files changed, 40 insertions, 55 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 8fbedcf6a2..7a757fd922 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -57,7 +57,11 @@
   --color-secondary-alpha-70: #dededeb3;
   --color-secondary-alpha-80: #dededecc;
   --color-secondary-alpha-90: #dededee1;
-  --color-body: #fff;
+  --color-body: #ffffff;
+  --color-text: #212121;
+  --color-box-header: #f7f7f7;
+  --color-box-body: #ffffff;
+  --color-timeline: #ececec;
 }
 
 :root:lang(ja) {
@@ -1336,6 +1340,24 @@ i.icon.centerlock {
   visibility: hidden;
 }
 
+.ui.segment,
+.ui.segments,
+.ui.attached.segment {
+  background: var(--color-box-body);
+  color: var(--color-text);
+  border-color: var(--color-secondary);
+}
+
+.ui.attached.header {
+  background: var(--color-box-header);
+  border-color: var(--color-secondary);
+
+  .right .button {
+    padding: 8px 10px;
+    font-weight: normal;
+  }
+}
+
 /* https://github.com/go-gitea/gitea/issues/10210 */
 .ui.attached.segment ~ .ui.top.attached.header {
   margin-top: 1rem;
diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index 4c0d1efe0b..666e7fa99b 100644
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -7,15 +7,6 @@
   }
 }
 
-.ui.attached.header {
-  background: #f0f0f0;
-
-  .right .button {
-    padding: 8px 10px;
-    font-weight: normal;
-  }
-}
-
 @create-page-form-input-padding: 250px !important;
 #create-page-form {
   form {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 9b4383c145..0a2772a79e 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -781,7 +781,7 @@
         bottom: 0;
         left: 96px;
         width: 2px;
-        background-color: #f3f3f3;
+        background-color: var(--color-timeline);
         z-index: -1;
       }
 
@@ -801,7 +801,7 @@
           bottom: 0;
           left: 30px;
           width: 2px;
-          background-color: #f3f3f3;
+          background-color: var(--color-timeline);
           z-index: -1;
         }
       }
@@ -848,14 +848,14 @@
 
         .badge.badge-commit {
           border-color: transparent;
-          background: radial-gradient(white 40%, transparent 40%) no-repeat;
+          background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
         }
 
         .badge {
           width: 32px;
           height: 32px;
-          background-color: #eee;
-          border: 2px solid #eee;
+          background-color: var(--color-timeline);
+          border: 2px solid var(--color-timeline);
           border-radius: 50%;
           display: flex;
           float: left;
@@ -1002,7 +1002,7 @@
           border-radius: var(--border-radius);
 
           > .merge-section {
-            background-color: #f7f7f7;
+            background-color: var(--color-box-body);
 
             .item {
               padding: .25rem 0;
@@ -1677,7 +1677,7 @@
 
   .diff-file-box {
     .header {
-      background-color: #f7f7f7;
+      background-color: var(--color-box-header);
     }
 
     .file-body.file-code {
@@ -2727,7 +2727,7 @@
 
     > .header,
     .segment {
-      box-shadow: 0 1px 2px 0 var(--color-secondary);
+      box-shadow: 0 1px 2px 0 var(--color-box-header);
     }
   }
 
@@ -2787,7 +2787,7 @@
 .ui.vertical.menu {
   .header.item {
     font-size: 1.1em;
-    background: #f0f0f0;
+    background: var(--color-box-header);
   }
 }
 
@@ -2820,7 +2820,8 @@
   margin: 0 !important;
   position: relative;
   color: #767676;
-  background-color: #f7f7f7;
+  min-height: 41px;
+  background-color: var(--color-box-header);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -2932,7 +2933,7 @@
   }
 
   &:after {
-    border-right-color: #f7f7f7;
+    border-right-color: var(--color-box-header);
     border-width: 8px;
     margin-top: -8px;
   }
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index f1dec84676..c7fd7e4a23 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -51,6 +51,10 @@
   --color-secondary-alpha-80: #454a57cc;
   --color-secondary-alpha-90: #454a57e1;
   --color-body: #383c4a;
+  --color-box-header: #454a57;
+  --color-box-body: #353945;
+  --color-text: #9aa0af;
+  --color-timeline: #454a57;
 }
 
 /* Background */
@@ -561,12 +565,6 @@ body {
   color: #fff;
 }
 
-.ui.attached.header {
-  background: var(--color-secondary);
-  border-color: var(--color-secondary);
-  color: #dbdbdb;
-}
-
 .ui.attached.table {
   border: 1px solid #304251;
 }
@@ -749,7 +747,7 @@ a.ui.basic.green.label:hover {
 }
 
 .ui.menu .item > .label {
-  background: #565454;
+  background: #505667;
 }
 
 .ui.form input:not([type]),
@@ -1049,17 +1047,6 @@ a.ui.basic.green.label:hover {
   color: #dbdbdb;
 }
 
-.ui.segment {
-  background: #353945;
-  color: var(--color-secondary-dark-6) !important;
-}
-
-.ui.segment,
-.ui.segments,
-.ui.attached.segment {
-  border-color: var(--color-secondary);
-}
-
 .ui.list > .item > .content {
   color: var(--color-secondary-dark-6) !important;
 }
@@ -1118,11 +1105,6 @@ a.ui.basic.green.label:hover {
     border-color: var(--color-secondary);
   }
 
-  .merge-section {
-    background-color: var(--color-secondary);
-    border-color: #505667;
-  }
-
   .header:after {
     border-right-color: var(--color-secondary);
   }
@@ -1148,21 +1130,10 @@ a.ui.basic.green.label:hover {
   border-right-color: #353945;
 }
 
-.repository.view.issue .comment-list:not(.prevent-before-timeline):before,
-.repository.view.issue .comment-list .timeline:before {
-  background-color: var(--color-secondary);
-}
-
 .repository.view.issue .comment-list .timeline-item .badge {
-  background-color: var(--color-secondary);
-  border-color: var(--color-secondary);
   color: #ccc;
 }
 
-.repository.view.issue .comment-list .timeline-item .badge.badge-commit {
-  background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
-}
-
 .comment-header-right a {
   color: var(--color-secondary-dark-6);
 }