Various style fixes (#13372)

- Add alpha variants for primary color
- Make timeline items solid background color
- Fix reaction styles recently regressed
- Fix diff header and make it flexbox
- Numerous smaller fixes for arc green

templates/repo/diff/box.tmpl

 	<h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
 {{else}}
 	<div>
-		<div class="diff-detail-box diff-box sticky">
-			{{svg "octicon-diff"}} {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
-			<div class="ui right">
+		<div class="diff-detail-box diff-box sticky df sb ac">
+			<div class="diff-detail-stats df ac">
+				{{svg "octicon-diff" 16 "mr-2"}}{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
+			</div>
+			<div class="diff-detail-actions df ac">
 				{{if .PageIsPullFiles}}
 					{{template "repo/diff/whitespace_dropdown" .}}
 				{{else}}

web_src/less/_base.less

   --color-primary-light-5: #b3cde7;
   --color-primary-light-6: #d9e6f3;
   --color-primary-light-7: #f4f8fb;
+  --color-primary-alpha-10: #4183c419;
+  --color-primary-alpha-20: #4183c433;
+  --color-primary-alpha-30: #4183c44b;
+  --color-primary-alpha-40: #4183c466;
+  --color-primary-alpha-50: #4183c480;
+  --color-primary-alpha-60: #4183c499;
+  --color-primary-alpha-70: #4183c4b3;
+  --color-primary-alpha-80: #4183c4cc;
+  --color-primary-alpha-90: #4183c4e1;
   --color-body: #fff;
 }
 
     margin: 0;
   }
 
+  #navbar .dropdown .avatar {
+    margin-right: 0 !important;
+  }
+
   @media only screen and (max-width: 767px) {
     #navbar:not(.shown) > *:not(:first-child) {
       display: none;
   }
 }
 
-.file-comment {
-  font: 12px var(--fonts-monospace);
-  color: rgba(0, 0, 0, .87);
-}
-
 .ui.floating.dropdown {
   .overflow.menu {
     .scrolling.menu.items {
 }
 
 .ui.blue.label,
-.ui.blue.labels .label,
-.repository .segment.reactions .ui.label.basic.blue {
+.ui.blue.labels .label {
   background-color: var(--color-primary) !important;
   border-color: var(--color-primary-dark-2) !important;
 }
 
+.ui.basic.labels .blue.label,
+.ui.ui.ui.basic.blue.label {
+  background: transparent;
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
 .ui.label > img {
   width: auto !important;
   vertical-align: middle;

web_src/less/_repository.less

         .badge {
           width: 32px;
           height: 32px;
-          background-color: #fff;
+          background-color: #eee;
           border: 2px solid #eee;
           border-radius: 50%;
           display: flex;
           float: left;
           margin-left: -32px;
           margin-right: 8px;
-          color: #444;
+          color: #666;
           align-items: center;
           justify-content: center;
 
       z-index: 8;
       margin-bottom: 10px;
       border-bottom: 1px solid #d4d4d5;
-      padding-left: 5px;
-      padding-right: 5px;
+      padding-left: 2px;
+      padding-right: 2px;
     }
 
     > div:after {
       display: block;
     }
 
+    .diff-detail-stats strong {
+      margin-left: .25rem;
+      margin-right: .25rem;
+    }
+
+    .diff-detail-actions .btn-review {
+      margin-right: 0 !important;
+    }
+
     span.status {
       display: inline-block;
       width: 12px;
       }
 
       > .item:hover {
-        background: #4183c4;
+        background: var(--color-primary);
       }
     }
   }
 
     .ui.label {
       max-height: 40px;
-      padding: 7px 18px;
+      padding: 10px 18px !important;
       display: flex !important;
       align-items: center;
       border: 0;
     }
 
     .ui.label.basic.blue {
-      background-color: #f1f8ff !important;
+      background-color: var(--color-primary-alpha-10) !important;
       border-color: inherit !important;
     }
 

web_src/less/_review.less

 }
 
 .file-comment {
-  font: 12px var(--fonts-monospace);
   color: rgba(0, 0, 0, .87);
 }
 

web_src/less/helpers.less

 .df { display: flex; }
 .ac { align-items: center; }
 .jc { justify-content: center; }
+.sb { justify-content: space-between; }
 
 .m-0 { margin: 0 !important; }
 .m-1 { margin: .125rem !important; }

web_src/less/themes/theme-arc-green.less

   --color-primary-light-5: #364626;
   --color-primary-light-6: #1b2313;
   --color-primary-light-7: #080b06;
+  --color-primary-alpha-10: #87ab6319;
+  --color-primary-alpha-20: #87ab6333;
+  --color-primary-alpha-30: #87ab634b;
+  --color-primary-alpha-40: #87ab6366;
+  --color-primary-alpha-50: #87ab6380;
+  --color-primary-alpha-60: #87ab6399;
+  --color-primary-alpha-70: #87ab63b3;
+  --color-primary-alpha-80: #87ab63cc;
+  --color-primary-alpha-90: #87ab63e1;
   --color-body: #383c4a;
 }
 
 }
 
 body {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 ::placeholder {
   color: #a0cc75;
 }
 
+.repository .milestone.list > .item {
+  border-bottom-color: #4c505c;
+}
+
 .repository .milestone.list > .item > a {
   color: #87ab63;
 }
 }
 
 .repository.release #release-list {
-  border-top: 1px solid #4c505c;
+  border-top-color: #4c505c;
 }
 
 .repository .milestone.list > .item .operate > a {
 }
 
 .ui.secondary.menu .item {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .following.bar .top.menu a.item:hover {
 }
 
 .ui.menu .ui.dropdown .menu > .item {
-  color: #9e9e9e !important;
+  color: #a5a5a8 !important;
 }
 
 .ui.menu .ui.dropdown .menu > .item:hover,
 
 .ui.menu .item {
   background: #404552;
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .ui.menu .item.disabled,
 
 .ui.disabled.checkbox label,
 .ui.checkbox input[disabled] ~ label {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .ui.pagination.menu .active.item {
 
 .ui.header,
 .ui.breadcrumb .divider {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
-.repository .segment.reactions .ui.label.basic.blue {
-  border-color: #404552 !important;
-}
-
-.repository .select-reaction .item:hover {
-  background: #305020 !important;
+.ui.divider:not(.vertical):not(.horizontal) {
+  border-bottom-color: #4b505f;
+  border-top-color: transparent;
 }
 
 .ui.menu .item > .label {
 .ui.form input[type="time"],
 .ui.form input[type="url"],
 .ui.selection.dropdown {
-  color: #9e9e9e;
+  color: #a5a5a8;
   background: #404552;
   border: 1px solid #4b505f;
 }
 
 .ui.basic.button,
 .ui.basic.buttons .button {
-  color: #9e9e9e;
+  color: #a5a5a8;
   background: rgba(0, 0, 0, .06);
   box-shadow: none;
 }
 }
 
 .ui.blue.label,
-.ui.blue.labels .label,
-.repository .segment.reactions .ui.label.basic.blue {
+.ui.blue.labels .label {
   background-color: var(--color-primary-light-2) !important;
   border-color: var(--color-primary) !important;
 }
 }
 
 .ui.tabular.menu {
-  border-bottom-color: rgba(255, 255, 255, .1);
+  border-bottom-color: #4c505c;
 
   .item.active {
-    border-top-color: #404552;
-    border-left-color: #404552;
-    border-right-color: #404552;
-    background: #353945;
+    border-top-color: #4c505c;
+    border-left-color: #4c505c;
+    border-right-color: #4c505c;
+    background: #383c4a;
     color: #dbdbdb;
   }
 
   .item {
-    color: #9e9e9e;
+    color: #a5a5a8;
   }
 
   .item:hover {
 
 .ui.segment {
   background: #353945;
-  color: #9e9e9e !important;
+  color: #a5a5a8 !important;
   border: 1px solid #404552;
 }
 
 .ui.list > .item > .content {
-  color: #9e9e9e !important;
+  color: #a5a5a8 !important;
 }
 
 .ui.active.button:active,
 }
 
 .ui.dropdown .menu > .item {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .ui.attached.segment {
 }
 
 .ui .comment .actions a {
-  color: #9e9e9e !important;
+  color: #a5a5a8 !important;
 }
 
 .ui .comment .actions a.active,
 
   .merge-section {
     background-color: #404552;
-    border-top: 1px solid #353944;
+    border-color: #505667;
   }
 
-  .header:after,
-  > .merge-section.no-header:after {
+  .header:after {
     border-right-color: #404552;
   }
 
-  .header:before,
-  > .merge-section.no-header:before {
+  .merge-section.no-header:after {
     border-right-color: #404552;
   }
+
+  .header:before {
+    border-right-color: #404552;
+  }
+
+  .merge-section.no-header:before {
+    border-right-color: #505667;
+  }
 }
 
 .repository.new.issue .comment.form .content:after {
 
 .repository.view.issue .comment-list:not(.prevent-before-timeline):before,
 .repository.view.issue .comment-list .timeline:before {
-  background-color: #3b4954;
+  background-color: #4c505c;
 }
 
 .repository.view.issue .comment-list .timeline-item .badge {
-  background-color: #383c4a;
-  border-color: #3b4954;
-  color: #9e9e9e;
+  background-color: #4c505c;
+  border-color: #4c505c;
+  color: #a5a5a8;
 }
 
 .repository.view.issue .comment-list .timeline-item .badge.badge-commit {
-  background: radial-gradient(#383c4a 40%, transparent 40%) no-repeat;
+  background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
 }
 
 .repository.file.editor .commit-form-wrapper .commit-form {
   box-shadow: 0 0 0 1px #13ae38 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: #404552 !important;
 }
 }
 
 .ui .text.black {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .ui .text.black:hover {
 .ui.checkbox label,
 .ui.checkbox + label,
 .ui.form .field > label {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .ui.form .inline.field > label,
 .ui.form .inline.fields .field > label,
 .ui.form .inline.fields .field > p,
 .ui.form .inline.fields > label {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .user.settings .email.list .item:not(:first-child) {
 }
 
 .ui.selection.visible.dropdown > .text:not(.default) {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .ui.positive.message {
 
 .ui.list .list > .item .description,
 .ui.list > .item .description {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .ui.user.list .item .description a {
 }
 
 .lines-num {
-  color: #9e9e9e !important;
+  color: #a5a5a8 !important;
   border-color: #2d2d2d !important;
 }
 
   color: #dbdbdb !important;
 }
 
-.repository #commits-table td.sha .sha.label,
-.repository #repo-files-table .sha.label {
-  border-color: #888;
+.sha.label,
+.repository #repo-files-table .sha.label,
+.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label {
+  border-color: #4c505c;
 }
 
 .repository #commits-table td.sha .sha.label.isSigned .detail.icon,
 
 .repository .ui.attached.message.isSigned.isVerified {
   background-color: #394829;
-  color: #9e9e9e;
+  color: #a5a5a8;
 
   &.message {
     color: #87ab63;
     .ui.text {
-      color: #9e9e9e;
+      color: #a5a5a8;
     }
     .pull-right {
       color: #87ab63;
 
 .repository .ui.attached.message.isSigned.isVerifiedUntrusted {
   background-color: #4a3903;
-  color: #9e9e9e;
+  color: #a5a5a8;
   &.message {
     color: #c2c193;
     .ui.text {
-      color: #9e9e9e;
+      color: #a5a5a8;
     }
     .pull-right,
     a {
 
 .repository .ui.attached.message.isSigned.isVerifiedUnmatched {
   background-color: #4e3321;
-  color: #9e9e9e;
+  color: #a5a5a8;
   &.message {
     color: #c2a893;
     .ui.text {
-      color: #9e9e9e;
+      color: #a5a5a8;
     }
     .pull-right,
     a {
       color: #d07d7d;
     }
     .pull-right {
-      color: #9e9e9e;
+      color: #a5a5a8;
     }
   }
 }
 
 .repository .labelspage .item a:hover,
 .organization.settings .labelspage .item a:hover {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 #git-graph-container li a {
 }
 
 .ui.header .sub.header {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .ui.dividing.header {
   }
 
   &.sticky {
-    border-bottom-color: rgba(255, 255, 255, .1);
+    border-bottom-color: #4c505c;
   }
 }
 
 }
 
 .file-comment {
-  color: #888888;
+  color: #a5a5a8;
 }
 
 .ui.comments .comment {
   }
 
   .text {
-    color: #9e9e9e;
+    color: #a5a5a8;
   }
 }
 
 
 .activity-bar-graph {
   background-color: #a0cc75;
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 /* code mirror dark theme */
   border-top: 0;
 
   div.CodeMirror-cursor {
-    border-left: 1px solid #9e9e9e;
+    border-left: 1px solid #a5a5a8;
   }
 
   .CodeMirror-gutters {
 
 .ui.popup {
   background-color: #383c4a;
-  color: #9e9e9e;
-  border-color: #9e9e9e;
+  color: #a5a5a8;
+  border-color: #4c505c;
+}
 
-  &.top::before {
-    background-color: #383c4a;
-  }
+.ui.popup.top:before,
+.ui.popup.bottom:before {
+  background-color: #383c4a;
+}
+
+.ui.bottom.left.popup:before,
+.ui.bottom.right.popup:before {
+  box-shadow: -1px -1px 0 0 #4c505c;
 }
 
 .markdown:not(code) h1 {
 }
 
 .repository.file.list #repo-files-table tbody .svg {
-  color: #9e9e9e;
+  color: #a5a5a8;
 }
 
 .repository.release #release-list > li .detail {