Rework commit page header (#17849)

- Remove blue background and use regular header styling
- Use flexbox on author and signature segments
- Add shield-type icons besides gpg key, replacing icon font icons
- Ensure author and signature line are same height
- Remove erronous green background on arc-green signature line
- Turn signing colors into CSS variables
- Consolidate the two warning states into one

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

web_src/less/_base.less

@@ -82,6 +82,15 @@
   --color-diff-moved-row-border: #d0e27f;
   --color-diff-added-row-border: #e6ffed;
   --color-diff-inactive: #f2f2f2;
+  --color-error-border: #c29393;
+  --color-error-bg: #fff5f5;
+  --color-error-text: #d64444;
+  --color-success-border: #a3c293;
+  --color-success-bg: #fcfff5;
+  --color-success-text: #6cc644;
+  --color-warning-border: #c2c193;
+  --color-warning-bg: #fffff5;
+  --color-warning-text: #fbbd08;
   /* target-based colors */
   --color-body: #ffffff;
   --color-text-dark: #080808;
@@ -411,6 +420,16 @@ a.muted:hover,
   background: var(--color-active) !important;
 }
 
+.ui.message {
+  background: var(--color-box-body);
+  color: var(--color-text);
+}
+
+.ui.bottom.attached.message {
+  box-shadow: none !important;
+  border: 1px solid var(--color-secondary);
+}
+
 .ui.selection.active.dropdown,
 .ui.selection.active.dropdown:hover,
 .ui.selection.active.dropdown .menu,
@@ -896,20 +915,6 @@ a.ui.card:hover,
     text-align: left;
   }
 
-  &.bottom.attached.message {
-    text-align: left;
-    color: black;
-
-    .pull-right {
-      color: black;
-    }
-
-    & > span,
-    .pull-right > span {
-      color: var(--color-green);
-    }
-  }
-
   .header > i + .content {
     padding-left: .75rem;
     vertical-align: middle;