From: Kohei Yoshino <kohei.yoshino@gmail.com>
Date: Fri, 24 May 2019 22:34:02 +0000 (-0400)
Subject: Bug 1552885 - Fix issues in the post-Sandstone skin including low contrast, visited... 
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=1e91f1d22e014c18bcf911354871cd2671e76d6d;p=thirdparty%2Fbugzilla.git

Bug 1552885 - Fix issues in the post-Sandstone skin including low contrast, visited links and small font size
---

diff --git a/extensions/BMO/template/en/default/bug/create/create-mozlist.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-mozlist.html.tmpl
index 9bffdec455..af11e11cea 100644
--- a/extensions/BMO/template/en/default/bug/create/create-mozlist.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-mozlist.html.tmpl
@@ -117,8 +117,8 @@
       [% INCLUDE global/textarea.html.tmpl
          name           = 'listLongDesc'
          id             = 'listLongDesc'
-         minrows        = 10
-         maxrows        = 25
+         minrows        = 5
+         maxrows        = 15
          cols           = constants.COMMENT_COLS
          defaultcontent = listLongDesc
        %]
@@ -131,8 +131,8 @@
       [% INCLUDE global/textarea.html.tmpl
          name           = 'comment'
          id             = 'comment'
-         minrows        = 10
-         maxrows        = 25
+         minrows        = 5
+         maxrows        = 15
          cols           = constants.COMMENT_COLS
          defaultcontent = comment
        %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
index b2ea6022ac..96134cfb7b 100644
--- a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
@@ -178,14 +178,7 @@
         view_only = 1
     %]
       <div id="field-value-bug_id">
-        [% this_bug_href = basepath _ "show_bug.cgi?id=$bug.id" %]
-        [% IF cgi.param("format") %]
-          [% format_uri = cgi.param("format") FILTER uri %]
-          [% this_bug_href = this_bug_href _ "&format=" _ format_uri %]
-        [% END %]
-        <a id="this-bug" href="[% this_bug_href FILTER html %]">
-          [%~ terms.Bug _ " " _ bug.id FILTER none ~%]
-        </a>
+        [% terms.Bug _ " " _ bug.id FILTER none %]
         [% IF bug.alias %]
           <span class="edit-hide">
             ([% bug.alias FILTER html %])
diff --git a/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
index ae786e27ef..fa16ebe813 100644
--- a/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
@@ -262,7 +262,7 @@ END;
                  [%+ aria_labelledby_html FILTER none +%] [% " required" IF required %]>
         [% CASE constants.FIELD_TYPE_USER %]
           [% IF action && !action.hidden %]
-            <button class="field-button minor [%= action.class FILTER html IF action.class %]"
+            <button type="button" class="field-button minor [%= action.class FILTER html IF action.class %]"
               data-field="[% name FILTER html %]"
               [% IF action.id %]id="[% action.id FILTER html %]"[% END %]>
               [% action.caption FILTER html %]
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index ad3e880840..bf6dddc481 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -43,7 +43,6 @@
 
 .spin-toggle {
   display: inline;
-  cursor: pointer;
 }
 
 .spin-toggle:hover {
@@ -182,24 +181,18 @@ a.activity-ref {
 
 .module .field .value {
   display: table-cell;
+  padding-right: 10px;
 }
 
 .module .field .value.wide {
   display: block;
 }
 
-.module .field .value.edit {
+.module .field .value input[type="text"],
+.module .field .value input:not([type]) {
   width: 100%;
 }
 
-.module .field .value input {
-  width: 100%;
-}
-
-.module .field .value input[type="checkbox"] {
-  width: auto;
-}
-
 .module .field .value.short input {
   width: 170px;
 }
@@ -308,6 +301,10 @@ input[type="number"] {
   margin-left: 5px;
 }
 
+#module-security-content {
+  padding: 8px;
+}
+
 #module-user-story-content {
   overflow: hidden;
 }
@@ -332,10 +329,6 @@ input[type="number"] {
   color: var(--secondary-label-color);
 }
 
-#cc-latch {
-  cursor: pointer;
-}
-
 #cc-list {
   overflow-y: auto;
   clear: both;
@@ -343,6 +336,10 @@ input[type="number"] {
   white-space: nowrap;
 }
 
+#cc-list .cc-user {
+  margin: 4px 0;
+}
+
 #cc-list .vcard {
   display: inline-block;
 }
@@ -371,10 +368,6 @@ input[type="number"] {
   width: 100%;
 }
 
-.cc-loadable {
-  cursor: pointer;
-}
-
 .cc-loadable:hover {
   text-decoration: underline;
 }
@@ -575,7 +568,6 @@ td.flag-requestee {
   opacity: 1;
   font-size: var(--font-size-small);
   text-align: center;
-  cursor: pointer;
   transition: all .2s 2s;
   will-change: transform; /* for performance */
 }
@@ -822,7 +814,6 @@ h3.change-name a {
 .change-set .attachment.deleted .label [itemprop="description"],
 .change-set .attachment.obsolete .label [itemprop="description"] {
   text-decoration: line-through;
-  text-decoration-color: var(--secondary-label-color);
 }
 
 .change-set .attachment .outer {
@@ -945,7 +936,6 @@ h3.change-name a {
   outline: 0;
   border-bottom: 4px solid transparent;
   padding: 4px 8px;
-  cursor: pointer;
 }
 
 #comment-tabs li[aria-selected="true"] {
@@ -997,6 +987,7 @@ h3.change-name a {
 #mode-container {
   display: table-cell;
   margin: 5px;
+  border-left: 5px solid transparent;
   padding: 5px;
   text-align: right;
   white-space: nowrap;
@@ -1083,7 +1074,6 @@ a.lightbox-icon.markdown {
   max-width: 90%;
   background-color: var(--secondary-region-background-color);
   box-shadow: var(--primary-region-box-shadow);
-  cursor: pointer;
 }
 
 #lb_overlay {
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index afd438ac7b..d6358208f7 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -948,7 +948,7 @@ $(function() {
     } else if (BUGZILLA.user.settings.zoom_textareas) {
         // add comment --> enlarge on focus
         $('#comment').focus(function(event) {
-            $(event.target).attr('rows', 25);
+            $(event.target).attr('rows', 15);
         });
     }
 
diff --git a/extensions/UserProfile/web/styles/user_profile.css b/extensions/UserProfile/web/styles/user_profile.css
index 000ed36a08..e7eea036ba 100644
--- a/extensions/UserProfile/web/styles/user_profile.css
+++ b/extensions/UserProfile/web/styles/user_profile.css
@@ -12,6 +12,7 @@
 #user_profile_table th {
   text-align: right;
   padding-right: 1em;
+  color: var(--secondary-label-color);
   vertical-align: middle;
   white-space: nowrap;
 }
diff --git a/js/bug.js b/js/bug.js
index f67444c5ed..209d034ad7 100644
--- a/js/bug.js
+++ b/js/bug.js
@@ -94,7 +94,7 @@ YAHOO.bugzilla.dupTable = {
                   `id=${oRecord.getData('id')}&addselfcc=1&token=${escape(oData)}`;
         var button = document.createElement('a');
         button.setAttribute('href',  url);
-        button.innerHTML = YAHOO.bugzilla.dupTable.addCcMessage;
+        button.innerHTML = `<input type="button" value="${YAHOO.bugzilla.dupTable.addCcMessage.htmlEncode()}">`;
         el.appendChild(button);
         new YAHOO.widget.Button(button);
     },
diff --git a/skins/lib/prism.css b/skins/lib/prism.css
index 0286f9cff5..488b006330 100644
--- a/skins/lib/prism.css
+++ b/skins/lib/prism.css
@@ -1,9 +1,7 @@
-/* PrismJS 1.15.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+c+cpp+diff+http+json+markdown+perl+python+rust+yaml&plugins=autolinker */
 /**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
+ * Based on PrismJS themes
+ * https://github.com/PrismJS/prism/blob/master/themes/prism.css
+ * https://github.com/PrismJS/prism/blob/master/themes/prism-dark.css
  */
 
 code[class*="language-"],
@@ -50,10 +48,7 @@ pre[class*="language-"] {
   color: slategray;
 }
 
-.token.punctuation {
-  color: #999;
-}
-
+.token.punctuation,
 .namespace {
   opacity: .7;
 }
@@ -118,3 +113,56 @@ pre[class*="language-"] {
 .token a {
   color: inherit;
 }
+
+@media screen and (prefers-color-scheme: dark) {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30, 20%, 50%);
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: hsl(350, 40%, 70%);
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: hsl(75, 70%, 60%);
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: hsl(40, 90%, 60%);
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: hsl(350, 40%, 70%);
+  }
+
+  .token.function,
+  .token.class-name {
+    color: inherit;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+}
diff --git a/skins/standard/admin.css b/skins/standard/admin.css
index 42a2396340..e0bb460275 100644
--- a/skins/standard/admin.css
+++ b/skins/standard/admin.css
@@ -191,7 +191,7 @@ th.title {
 }
 
 #public_key {
-  font-size: var(--font-size-monospace);
+  font-size-adjust: .5;
   font-family: var(--font-family-monospace);
 }
 
diff --git a/skins/standard/attachment.css b/skins/standard/attachment.css
index af57fbf97a..d33849c053 100644
--- a/skins/standard/attachment.css
+++ b/skins/standard/attachment.css
@@ -103,7 +103,7 @@ tbody.file pre:empty {
   width: 3em;
   color: var(--tertiary-label-color);
   border-right: 1px solid var(--secondary-control-border-color);
-  font-size: var(--font-size-monospace);
+  font-size-adjust: .5;
   font-family: var(--font-family-monospace);
   text-align: right;
 }
@@ -460,7 +460,7 @@ div#update_container {
   padding: 8px;
   width: 100%;
   height: 100%;
-  font-size: var(--font-size-monospace);
+  font-size-adjust: .5;
   font-family: var(--font-family-monospace);
 }
 
diff --git a/skins/standard/buglist.css b/skins/standard/buglist.css
index 8504428575..ed761d6896 100644
--- a/skins/standard/buglist.css
+++ b/skins/standard/buglist.css
@@ -15,7 +15,7 @@
 
 .bz_query_timestamp {
   font-weight: bold;
-  color: var(--tertiary-label-color);
+  color: var(--secondary-label-color);
 }
 
 .bz_query_buttons form {
@@ -100,13 +100,13 @@
 /* Style bug rows according to severity. */
 .bz_blocker,
 .bz_blocker .bz_short_desc_column {
-  color: rgb(var(--accent-color-red-1)) !important;
+  color: rgb(var(--accent-color-red-2)) !important;
   font-weight: bold;
 }
 
 .bz_critical,
 .bz_critical .bz_short_desc_column {
-  color: rgb(var(--accent-color-red-1)) !important;
+  color: rgb(var(--accent-color-red-2)) !important;
 }
 
 /* Align columns in the "change multiple bugs" form to the right. */
diff --git a/skins/standard/fonts/FiraMono-Bold.woff b/skins/standard/fonts/FiraMono-Bold.woff
deleted file mode 100644
index 735352fb93..0000000000
Binary files a/skins/standard/fonts/FiraMono-Bold.woff and /dev/null differ
diff --git a/skins/standard/fonts/FiraMono-Bold.woff2 b/skins/standard/fonts/FiraMono-Bold.woff2
deleted file mode 100644
index 832aaabbb2..0000000000
Binary files a/skins/standard/fonts/FiraMono-Bold.woff2 and /dev/null differ
diff --git a/skins/standard/fonts/FiraMono-Regular.woff b/skins/standard/fonts/FiraMono-Regular.woff
deleted file mode 100644
index b38ee144d0..0000000000
Binary files a/skins/standard/fonts/FiraMono-Regular.woff and /dev/null differ
diff --git a/skins/standard/fonts/FiraMono-Regular.woff2 b/skins/standard/fonts/FiraMono-Regular.woff2
deleted file mode 100644
index 9fa44b7cc2..0000000000
Binary files a/skins/standard/fonts/FiraMono-Regular.woff2 and /dev/null differ
diff --git a/skins/standard/fonts/NotoMono-Regular.woff b/skins/standard/fonts/NotoMono-Regular.woff
new file mode 100644
index 0000000000..2804c12f18
Binary files /dev/null and b/skins/standard/fonts/NotoMono-Regular.woff differ
diff --git a/skins/standard/fonts/NotoMono-Regular.woff2 b/skins/standard/fonts/NotoMono-Regular.woff2
new file mode 100644
index 0000000000..6b088607da
Binary files /dev/null and b/skins/standard/fonts/NotoMono-Regular.woff2 differ
diff --git a/skins/standard/global.css b/skins/standard/global.css
index f25cc5fd7d..f3cf92aa37 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -64,21 +64,12 @@
 }
 
 @font-face {
-  font-family: 'Fira Mono';
+  font-family: 'Noto Mono';
   font-style: normal;
   font-weight: normal;
-  src: local('Fira Mono'),
-    url('fonts/FiraMono-Regular.woff2?v=3.202') format('woff2'),
-    url('fonts/FiraMono-Regular.woff?v=3.202') format('woff');
-}
-
-@font-face {
-  font-family: 'Fira Mono';
-  font-style: normal;
-  font-weight: bold;
-  src: local('Fira Mono Bold'),
-    url('fonts/FiraMono-Bold.woff2?v=3.202') format('woff2'),
-    url('fonts/FiraMono-Bold.woff?v=3.202') format('woff');
+  src: local('Noto Mono'),
+    url('fonts/NotoMono-Regular.woff2?v=1.00') format('woff2'),
+    url('fonts/NotoMono-Regular.woff?v=1.00') format('woff');
 }
 
 @font-face {
@@ -109,11 +100,10 @@
     --font-size-medium: 13px;
     --font-size-small: 12px;
     --font-size-x-small: 11px;
-    --font-size-monospace: 90%;
     --line-height-default: 1.25;
     --line-height-comfortable: 1.5;
     --font-family-sans-serif: 'FiraGO', sans-serif;
-    --font-family-monospace: 'Menlo', 'Consolas', 'Droid Sans Mono', 'Fira Mono', monospace;
+    --font-family-monospace: 'Menlo', 'Noto Mono', monospace;
 
     /** Region */
     --primary-region-border-radius: 4px;
@@ -123,7 +113,7 @@
 
     /** Control */
     --control-border-radius: 4px;
-    --control-padding: 6px 8px;
+    --control-padding: 6px;
 
     /** Button */
     --button-border-radius: 4px;
@@ -140,17 +130,21 @@
     /** Accent Colors */
     --accent-color-red-1: 220, 40, 30;
     --accent-color-red-2: 194, 35, 27;
-    --accent-color-green-1: 70, 140, 70;
-    --accent-color-blue-1: 0, 125, 210;
-    --accent-color-blue-2: 0, 103, 171;
+    --accent-color-green-1: 40, 120, 40;
+    --accent-color-blue-1: 0, 108, 191;
+    --accent-color-blue-2: 0, 94, 166;
+    --accent-color-blue-3: 0, 122, 204; /* B 80% */
+    --accent-color-blue-4: 0, 107, 179; /* B 70% */
+    --accent-color-blue-5: 0, 92, 153; /* B 60% */
     --accent-color-yellow-1: 210, 210, 60;
     --accent-color-lightyellow-1: 250, 250, 190;
     --accent-color-pink-1: 250, 195, 195;
     --accent-color-lightgreen-1: 195, 250, 195;
     --accent-color-wine-1: 217, 207, 238;
+    --accent-color-purple-1: 146, 72, 200;
 
     /** App */
-    --application-foreground-color: rgb(60, 61, 62);
+    --application-foreground-color: rgb(40, 41, 42);
     --application-background-color: rgb(235, 236, 237);
     --application-header-foreground-color: rgb(200, 201, 202);
     --application-header-foreground-hover-color: rgb(240, 241, 242);
@@ -169,27 +163,28 @@
 
     /** Label */
     --primary-label-color: var(--application-foreground-color);
-    --secondary-label-color: rgb(100, 101, 102);
-    --tertiary-label-color: rgb(140, 141, 142);
+    --secondary-label-color: rgb(80, 81, 82);
+    --tertiary-label-color: rgb(120, 121, 122);
     --inverted-label-color: rgb(240, 241, 242);
-    --required-label-color: rgb(var(--accent-color-red-1));
+    --required-label-color: rgb(var(--accent-color-red-2));
 
     /** Text */
     --primary-text-color: var(--application-foreground-color);
     --primary-text-background-color: var(--primary-region-background-color);
-    --secondary-text-color: rgb(120, 121, 122);
+    --secondary-text-color: rgb(100, 101, 102);
     --secondary-text-border-color: rgb(220, 221, 222);
     --placeholder-text-color: var(--secondary-text-color);
     --secondary-text-background-color: var(--primary-region-header-background-color);
     --selected-text-background-color: rgba(var(--accent-color-blue-1), .3);
     --link-text-color: rgb(var(--accent-color-blue-1));
-    --link-text-hover-color: rgb(var(--accent-color-blue-2));
+    --hovered-link-text-color: rgb(var(--accent-color-blue-2));
+    --visited-link-text-color: rgb(var(--accent-color-purple-1));
     --text-shadow-light: 0 0 4px rgb(40, 41, 42);
 
     /** Message */
     --warning-message-background-color: rgb(var(--accent-color-lightyellow-1));
     --warning-message-border-color: rgb(var(--accent-color-yellow-1));
-    --error-message-foreground-color: rgb(var(--accent-color-red-1));
+    --error-message-foreground-color: rgb(var(--accent-color-red-2));
     --error-message-background-color: rgb(var(--accent-color-pink-1));
     --positive-message-foreground-color: rgb(var(--accent-color-green-1));
     --positive-message-background-color: rgb(var(--accent-color-lightgreen-1));
@@ -209,19 +204,32 @@
     --selected-control-background-color: rgb(230, 231, 232);
     --invalid-control-border-color: rgb(var(--accent-color-red-1));
     --disabled-control-foreground-color: rgb(160, 161, 162);
+    --scrollbar-color: rgb(190, 191, 192) var(--application-background-color);
 
     /** Button */
     --primary-button-foreground-color: rgb(255, 255, 255);
-    --primary-button-background-color: rgb(var(--accent-color-blue-1));
-    --primary-button-border-color: rgb(var(--accent-color-blue-1));
+    --primary-button-background-color: rgb(var(--accent-color-blue-3));
+    --primary-button-border-color: var(--primary-button-background-color);
+    --hovered-primary-button-foreground-color: var(--primary-button-foreground-color);
+    --hovered-primary-button-background-color: rgb(var(--accent-color-blue-4));
+    --hovered-primary-button-border-color: var(--hovered-primary-button-background-color);
+    --pressed-primary-button-foreground-color: var(--primary-button-foreground-color);
+    --pressed-primary-button-background-color: rgb(var(--accent-color-blue-5));
+    --pressed-primary-button-border-color: var(--pressed-primary-button-background-color);
     --secondary-button-foreground-color: var(--primary-label-color);
     --secondary-button-background-color: rgb(230, 231, 232);
     --secondary-button-border-color: rgb(210, 211, 212);
+    --hovered-secondary-button-foreground-color: var(--secondary-button-foreground-color);
+    --hovered-secondary-button-background-color: rgb(220, 221, 222);
+    --hovered-secondary-button-border-color: var(--secondary-button-border-color);
+    --pressed-secondary-button-foreground-color: var(--secondary-button-foreground-color);
+    --pressed-secondary-button-background-color: rgb(200, 201, 202);
+    --pressed-secondary-button-border-color: var(--secondary-button-border-color);
     --danger-button-foreground-color: var(--primary-button-foreground-color);
     --danger-button-background-color: rgb(var(--accent-color-red-1));
     --danger-button-border-color: rgb(var(--accent-color-red-1));
-    --pressed-button-foreground-color: var(--primary-button-foreground-color);
-    --pressed-button-background-color: rgb(100, 101, 102);
+    --selected-button-foreground-color: var(--primary-button-foreground-color);
+    --selected-button-background-color: rgb(100, 101, 102);
     --disabled-button-foreground-color: var(--disabled-control-foreground-color);
     --disabled-button-background-color: var(--secondary-button-background-color);
 
@@ -254,6 +262,11 @@
   select:not([multiple]):not([size]) {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgb(160, 161, 162)" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>');
   }
+
+  #private-bug-banner {
+    --confidential-bug-background-color: #b595f5;
+    --security-bug-background-color: #ffaf1a;
+  }
 }
 
 /**
@@ -263,17 +276,22 @@
 @media screen and (prefers-color-scheme: dark) {
   :root {
     /** Accent Colors */
-    --accent-color-red-1: 255, 47, 36;
-    --accent-color-red-2: 220, 40, 30;
-    --accent-color-green-1: 17, 166, 17;
-    --accent-color-blue-3: 0, 148, 247;
+    --accent-color-red-1: 220, 40, 30;
+    --accent-color-red-2: 255, 80, 80;
+    --accent-color-green-1: 42, 186, 39;
+    --accent-color-blue-1: 26, 168, 245;
+    --accent-color-blue-2: 24, 151, 219;
+    --accent-color-blue-3: 0, 122, 204; /* B 80% */
+    --accent-color-blue-4: 0, 107, 179; /* B 70% */
+    --accent-color-blue-5: 0, 77, 128; /* B 50% */
     --accent-color-lightyellow-1: 51, 37, 3;
     --accent-color-pink-1: 128, 64, 64;
     --accent-color-lightgreen-1: 64, 128, 64;
     --accent-color-wine-1: 50, 45, 64;
+    --accent-color-purple-1: 200, 118, 255;
 
     /** App */
-    --application-foreground-color: rgb(200, 201, 202);
+    --application-foreground-color: rgb(210, 211, 212);
     --application-background-color: rgb(30, 31, 32);
 
     /** Region */
@@ -285,27 +303,28 @@
     --overlay-background-color: rgba(10, 11, 12, .7);
 
     /** Label */
-    --secondary-label-color: rgb(160, 161, 162);
-    --tertiary-label-color: rgb(120, 121, 122);
+    --secondary-label-color: rgb(170, 171, 172);
+    --tertiary-label-color: rgb(130, 131, 132);
     --inverted-label-color: rgb(60, 61, 62);
 
     /** Text */
-    --secondary-text-color: rgb(140, 141, 142);
+    --secondary-text-color: rgb(150, 151, 152);
     --secondary-text-border-color: rgb(60, 61, 62);
-    --link-text-color: rgb(var(--accent-color-blue-3));
-    --link-text-hover-color: rgb(var(--accent-color-blue-1));
 
     /** Control */
     --control-background-color: rgb(35, 36, 37);
     --control-border-color: rgb(60, 61, 62);
-    --selected-control-background-color: rgb(50, 51, 52);
+    --selected-control-background-color: rgb(60, 61, 62);
     --disabled-control-foreground-color: rgb(90, 91, 92);
+    --scrollbar-color: rgb(70, 71, 72) var(--application-background-color);
 
     /** Button */
-    --secondary-button-background-color: rgb(60, 61, 62);
-    --secondary-button-border-color: rgb(50, 51, 52);
-    --pressed-button-foreground-color: rgb(60, 61, 62);
-    --pressed-button-background-color: rgb(180, 181, 182);
+    --secondary-button-background-color: rgb(70, 71, 72);
+    --secondary-button-border-color: rgb(70, 71, 72);
+    --hovered-secondary-button-background-color: rgb(60, 61, 62);
+    --pressed-secondary-button-background-color: rgb(40, 41, 42);
+    --selected-button-foreground-color: rgb(60, 61, 62);
+    --selected-button-background-color: rgb(180, 181, 182);
 
     /** Menu */
     --menu-box-shadow: 0 1px 12px rgba(10, 11, 12, .5);
@@ -315,6 +334,14 @@
     --grid-subheader-background-color: rgb(70, 71, 72);
   }
 
+  input[type="checkbox"]:checked {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="rgb(35, 36, 37)" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
+  }
+
+  input[type="checkbox"]:indeterminate {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="rgb(35, 36, 37)" d="M19 13H5v-2h14v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+  }
+
   select:not([multiple]):not([size]) {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="rgb(90, 91, 92)" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>');
   }
@@ -328,13 +355,13 @@ body {
   font-size: var(--font-size-medium);
   line-height: var(--line-height-default);
   font-family: var(--font-family-sans-serif);
-  scrollbar-color: var(--control-border-color) var(--secondary-control-border-color);
+  scrollbar-color: var(--scrollbar-color);
 }
 
 pre,
 code,
 kbd {
-  font-size: var(--font-size-monospace);
+  font-size-adjust: .5;
   font-family: var(--font-family-monospace);
 }
 
@@ -386,11 +413,17 @@ a {
   text-decoration: none;
 }
 
-a:hover {
-  color: var(--link-text-hover-color);
+a:hover,
+a:focus,
+a:active {
+  color: var(--hovered-link-text-color);
   text-decoration: underline;
 }
 
+a:visited {
+  color: var(--visited-link-text-color);
+}
+
 table {
   border-collapse: collapse;
 }
@@ -436,6 +469,9 @@ select:not([multiple]):not([size]) {
 
 @supports (-moz-appearance: none) {
   /* Remove extra padding in Firefox */
+  button,
+  input[type="button"],
+  input[type="submit"],
   select:not([multiple]):not([size]) {
     padding-top: 5px !important;
     padding-bottom: 5px !important;
@@ -512,6 +548,7 @@ textarea {
   padding: var(--control-padding);
 }
 
+input[type="checkbox"]:focus,
 input[type="date"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus,
@@ -578,12 +615,28 @@ input[type="submit"] {
   box-shadow: none;
 }
 
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+  border-color: var(--hovered-secondary-button-border-color);
+  color: var(--hovered-secondary-button-foreground-color);
+  background-color: var(--hovered-secondary-button-background-color);
+}
+
 button:focus,
 input[type="submit"]:focus,
 input[type="button"]:focus {
   border-color: var(--focused-control-border-color);
 }
 
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active {
+  border-color: var(--pressed-secondary-button-border-color);
+  color: var(--pressed-secondary-button-foreground-color);
+  background-color: var(--pressed-secondary-button-background-color);
+}
+
 button.primary,
 button:not([type]),
 button[type="submit"]:not(.secondary),
@@ -595,6 +648,24 @@ input[type="submit"]:not(.secondary) {
   font-weight: 500;
 }
 
+button.primary:hover,
+button:not([type]):hover,
+button[type="submit"]:not(.secondary):hover,
+input[type="submit"]:not(.secondary):hover {
+  border-color: var(--hovered-primary-button-border-color);
+  color: var(--hovered-primary-button-foreground-color);
+  background-color: var(--hovered-primary-button-background-color);
+}
+
+button.primary:active,
+button:not([type]):active,
+button[type="submit"]:not(.secondary):active,
+input[type="submit"]:not(.secondary):active {
+  border-color: var(--pressed-primary-button-border-color);
+  color: var(--pressed-primary-button-foreground-color);
+  background-color: var(--pressed-primary-button-background-color);
+}
+
 button.danger {
   border-color: var(--danger-button-border-color);
   color: var(--danger-button-foreground-color);
@@ -635,7 +706,7 @@ input[type="checkbox"]:checked {
   background-color: var(--checked-control-background-color);
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 16px 16px;
+  background-size: 18px 18px;
 }
 
 input[type="radio"] {
@@ -704,8 +775,8 @@ input[type="radio"]:checked {
 .buttons.toggle[role="radiogroup"] input[type="radio"]:checked + label {
   z-index: 2;
   border-color: var(--secondary-button-border-color);
-  color: var(--pressed-button-foreground-color);
-  background-color: var(--pressed-button-background-color);
+  color: var(--selected-button-foreground-color);
+  background-color: var(--selected-button-background-color);
 }
 
 .buttons.toggle[role="radiogroup"] input[type="radio"]:focus + label {
@@ -776,6 +847,15 @@ input[type="radio"]:checked {
 .yui-skin-sam .yui-dt table tr,
 .yui3-skin-sam .yui3-datatable-table tr {
   border-bottom: 1px solid var(--grid-border-color) !important;
+  background-color: transparent !important;
+}
+
+.yui-skin-sam .yui-dt-col-summary {
+  font-size: var(--font-size-large) !important;
+}
+
+.yui-skin-sam .yui-dt-message {
+  background-color: transparent !important;
 }
 
 .yui-skin-sam .yui-dt table .yui-skin-sam td,
@@ -809,6 +889,15 @@ input[type="radio"]:checked {
   display: inline-block;
 }
 
+.yui-skin-sam .yui-button {
+  border: 0 !important;
+  background: transparent !important;
+}
+
+.yui-skin-sam .yui-button .first-child {
+  border: 0 !important;
+}
+
 #bugzilla-body .yui-ac-content {
   max-height: 19em;
   overflow: auto;
@@ -870,10 +959,6 @@ input[type="radio"]:checked {
     background-color: var(--application-background-color);
   }
 
-  body[class*="bz_group_"] {
-    background-color: rgb(var(--accent-color-wine-1)); /* Colorize private bugs */
-  }
-
   #wrapper {
     display: flex;
     flex-direction: column;
@@ -1272,6 +1357,41 @@ input[type="radio"]:checked {
   content: '\E5CD';
 }
 
+/**
+ * Private group banner for confidential and security bugs
+ */
+
+#private-bug-banner {
+  padding: 4px;
+  color: #111;
+  background-color: var(--confidential-bug-background-color);
+  text-align: center;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+#private-bug-banner .icon {
+  font-family: 'Material Icons';
+  vertical-align: text-bottom;
+}
+
+#private-bug-banner .icon::before {
+  content: '\E897';
+}
+
+#private-bug-banner.security {
+  background-color: var(--security-bug-background-color);
+}
+
+#private-bug-banner strong {
+  text-transform: uppercase;
+}
+
+#private-bug-banner .groups {
+  font-size: var(--font-size-small);
+}
+
 /**
  * Narrower global header
  */
@@ -1669,7 +1789,7 @@ input.validation_error_field {
   color: var(--control-foreground-color);
   background-color: var(--menu-background-color);
   box-shadow: var(--menu-box-shadow);
-  cursor: pointer;
+  cursor: default;
   width: auto !important;
 }
 
@@ -1813,10 +1933,6 @@ table.tabs .clickable_area {
   display: inline-block;
 }
 
-.dropdown-button {
-  cursor: pointer;
-}
-
 .dropdown-button * {
   pointer-events: none;
 }
@@ -1919,7 +2035,7 @@ table.tabs .clickable_area {
 .dropdown-content [role="option"] {
   outline: 0;
   text-decoration: none;
-  cursor: pointer;
+  cursor: default;
 }
 
 .dropdown-content [role^="menuitem"]:hover,
@@ -2011,19 +2127,19 @@ table.tabs .clickable_area {
 .dropdown-panel .notifications img {
   float: left;
   border-radius: 4px;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
 }
 
 .dropdown-panel .notifications img ~ * {
   display: block;
-  margin-left: 52px;
+  margin-left: 44px;
 }
 
 .dropdown-panel .notifications label {
   display: -webkit-box;
   overflow: hidden;
-  max-height: 40px;
+  max-height: calc(2em * var(--line-height-default));
   white-space: normal;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
@@ -2223,6 +2339,7 @@ div.bz_comment_text pre {
 #comment_preview {
   display: block;
   clear: both;
+  overflow: auto;
   border: 1px solid var(--control-border-color);
   padding: 12px;
   color: var(--primary-text-color);
@@ -2274,7 +2391,7 @@ pre.comment-text {
 }
 
 .comment-text.empty {
-  color: var(--tertiary-label-color) !important;
+  color: var(--secondary-label-color) !important;
 }
 
 /**
@@ -2590,6 +2707,7 @@ pre.comment-text {
   line-height: 1.45;
   background-color: var(--secondary-text-background-color);
   border-radius: 3px;
+  padding: 1em;
 }
 
 .markdown-body pre code {
diff --git a/skins/standard/index.css b/skins/standard/index.css
index b70190cbde..07e67c2885 100644
--- a/skins/standard/index.css
+++ b/skins/standard/index.css
@@ -90,7 +90,7 @@
  #tiles a:hover,
  #tiles a:focus,
  #tiles a:active {
-   color: var(--link-text-hover-color);
+   color: var(--hovered-link-text-color);
    text-decoration: none;
  }
 
diff --git a/skins/standard/summarize-time.css b/skins/standard/summarize-time.css
index def229e23f..997cd32b52 100644
--- a/skins/standard/summarize-time.css
+++ b/skins/standard/summarize-time.css
@@ -19,7 +19,7 @@ table.realitems {
 
 tr.section_total {
   color: var(--inverted-label-color);
-  background: var(--pressed-button-background-color);
+  background: var(--selected-button-background-color);
 }
 
 td.subtotal {
diff --git a/template/en/default/bug/create/create.html.tmpl b/template/en/default/bug/create/create.html.tmpl
index 94e850cded..85b4fee8cf 100644
--- a/template/en/default/bug/create/create.html.tmpl
+++ b/template/en/default/bug/create/create.html.tmpl
@@ -544,8 +544,8 @@ TUI_hide_default('expert_fields');
         [% comment FILTER none %]
       [%- END %]
       [% INCLUDE bug/comment.html.tmpl
-         minrows        = 10
-         maxrows        = 25
+         minrows        = 5
+         maxrows        = 15
          cols           = constants.COMMENT_COLS
          defaultcontent = defaultcontent
        %]
diff --git a/template/en/default/bug/edit.html.tmpl b/template/en/default/bug/edit.html.tmpl
index fd151b3f12..a1144ddd20 100644
--- a/template/en/default/bug/edit.html.tmpl
+++ b/template/en/default/bug/edit.html.tmpl
@@ -1236,8 +1236,8 @@
       <table><tr><td>
         [% IF bug.check_can_change_field('longdesc', 0, 1) %]
           [% INCLUDE bug/comment.html.tmpl
-                     minrows   = 10
-                     maxrows   = 25
+                     minrows   = 5
+                     maxrows   = 15
                      cols      = constants.COMMENT_COLS
           %]
           [% Hook.process("after_comment_textarea", 'bug/edit.html.tmpl') %]
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index 0814b4bf54..2b14f99374 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -413,6 +413,19 @@
   </div>
 </header> [%# header %]
 
+[%
+  IF bug && bug.groups_in.size;
+    is_security_bug = 0;
+    FOREACH group IN bug.groups_in;
+      IF group.name.match('^(.*security|\w+sec)$'); is_security_bug = 1; END;
+    END;
+%]
+  <div id="private-bug-banner" class="[% IF is_security_bug %]security[% ELSE %]confidential[% END %]">
+    <span class="icon" aria-hidden="true"></span>
+    <strong>[% IF is_security_bug %]Security Issue[% ELSE %]Confidential[% END %]</strong>
+  </div>
+[% END %]
+
 <main id="bugzilla-body" tabindex="-1">
 <div id="main-inner">
 
diff --git a/template/en/default/list/edit-multiple.html.tmpl b/template/en/default/list/edit-multiple.html.tmpl
index aa03a7d5f7..0e3f282e0c 100644
--- a/template/en/default/list/edit-multiple.html.tmpl
+++ b/template/en/default/list/edit-multiple.html.tmpl
@@ -349,7 +349,7 @@
   name    = 'comment'
   id      = 'comment'
   minrows = 5
-  maxrows = 25
+  maxrows = 15
   cols    = constants.COMMENT_COLS
 %]<br>
 
diff --git a/template/en/default/mfa/recovery.html.tmpl b/template/en/default/mfa/recovery.html.tmpl
index bc078e9208..80224f791a 100644
--- a/template/en/default/mfa/recovery.html.tmpl
+++ b/template/en/default/mfa/recovery.html.tmpl
@@ -9,7 +9,7 @@
 [% css = BLOCK %]
 
 #codes {
-  font-size: var(--font-size-monospace);
+  font-size-adjust: .5;
   font-family: var(--font-family-monospace);
 }
 
diff --git a/template/en/default/reports/chart.html.tmpl b/template/en/default/reports/chart.html.tmpl
index a7006aa703..955ab56d15 100644
--- a/template/en/default/reports/chart.html.tmpl
+++ b/template/en/default/reports/chart.html.tmpl
@@ -39,7 +39,7 @@
   [% END %]
 
   <img alt="Graphical report results" src="[% imageurl %]"
-    width="[% width %]" height="[% height %]">
+    width="[% width %]" height="[% height %]" style="padding:8px;background:#FFF;">
   <p>
     [% sizeurl = BLOCK %]chart.cgi?
       [% imagebase FILTER html %]&amp;action=wrap
diff --git a/template/en/default/reports/report.html.tmpl b/template/en/default/reports/report.html.tmpl
index 9d864ba589..6203a39dd1 100644
--- a/template/en/default/reports/report.html.tmpl
+++ b/template/en/default/reports/report.html.tmpl
@@ -116,7 +116,7 @@
       [% END %]
 
       <img alt="Graphical report results" src="[% imageurl %]"
-        width="[% width %]" height="[% height %]">
+        width="[% width %]" height="[% height %]" style="padding:8px;background:#FFF;">
     [% END %]
     <br>
   [% END %]