1 files changed, 109 insertions, 9 deletions

diff --git a/skins/standard/global.css b/skins/standard/global.css
index e7028f892..3ccf6e8fb 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -79,6 +79,52 @@
     }
 /* fixed global header (end) */
 
+/* global message (begin) */
+    #message-container {
+        text-align: center;
+        line-height: 1.5;
+    }
+
+    #message-container .inner {
+        box-sizing: border-box;
+        margin: 0 auto;
+        padding: 8px;
+        width: 1024px;
+    }
+
+    #message-container p {
+        margin: 0;
+    }
+
+    #message-container .noscript {
+        color: #EEE;
+        background-color: #333;
+    }
+
+    #message-container .warning {
+        color: #EEE;
+        background-color: #C00;
+    }
+
+    #message-container .announcement {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+        color: #555;
+        background-color: lightyellow;
+    }
+
+    #message-container .announcement p.warning {
+        color: red;
+    }
+
+    /* Reset legacy style */
+    #message-container .announcement #message {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        color: #555;
+    }
+/* global message (end) */
+
 /* header (begin) */
     #header {
         flex: none;
@@ -243,7 +289,7 @@
     }
 
     #header .link-file .icon::before {
-        content: '\E254';
+        content: '\E89C';
     }
 
     #header .link-dashboard .icon::before {
@@ -404,6 +450,7 @@
 
 /* narrower global header (begin) */
     @media screen and (max-width: 1024px) {
+        #message-container .inner,
         #header .inner {
             width: 800px;
         }
@@ -1110,6 +1157,67 @@ select, select[multiple] {
     font-size: 12px;
 }
 
+.buttons.toggle[role="radiogroup"] {
+  display: inline-flex;
+}
+
+.buttons.toggle[role="radiogroup"] .item {
+  display: flex;
+}
+
+.buttons.toggle[role="radiogroup"] input[type="radio"] {
+  position: absolute;
+  left: -99999px;
+}
+
+.buttons.toggle[role="radiogroup"] label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  border: 1px solid #B2B2B2;
+  padding: 4px 12px;
+  min-width: 1em;
+  min-height: 1em;
+  background-color: #FFF;
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1);
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.buttons.toggle[role="radiogroup"] .item:first-child label {
+  border-radius: 4px 0 0 4px;
+}
+
+.buttons.toggle[role="radiogroup"] .item:last-child label {
+  border-radius: 0 4px 4px 0;
+}
+
+.buttons.toggle[role="radiogroup"] .item:not(:first-child) label {
+  margin-left: -1px;
+  border-left-color: #D2D2D2;
+}
+
+.buttons.toggle[role="radiogroup"] .item:not(:last-child) label {
+  border-right-color: #D2D2D2;
+}
+
+.buttons.toggle[role="radiogroup"] input[type="radio"]:checked + label {
+  z-index: 2;
+  border-color: #B2B2B2;
+  color: #111;
+  background-color: #DDD;
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2);
+}
+
+.buttons.toggle[role="radiogroup"] input[type="radio"]:focus + label {
+  z-index: 2;
+  border-color: #42A4E0;
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2), 0 0 0 2px rgba(73, 173, 227, .4);
+}
+
 hr {
     border: none;
     height: 1px;
@@ -1122,14 +1230,6 @@ hr {
     display: none;
 }
 
-#mfa-warning {
-    flex: none;
-    margin: 0 -15px;
-    padding: 10px 15px;
-    color: #FFF;
-    background-color: #FF5300;
-}
-
 #bugzilla-body {
     flex: auto;
     position: relative;