Bug 1363889 - Update BMO to use new Mozilla branding

2 files changed, 67 insertions, 49 deletions

diff --git a/skins/standard/global.css b/skins/standard/global.css
index f6579efee..bd822106a 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -147,17 +147,60 @@
  * to both the header and footer.
  */
     #footer {
+        display: flex;
         clear: both;
-        margin-top: 1em;
-        width: 100%;
-        background: #edf2f2;
-        border-top: 1px solid #ddd;
-        border-bottom: 1px solid #ddd;
+        margin: 2em 0 0;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        padding: 2em;
+        color: #bbb;
+        background-color: #fff;
+        line-height: 1.5;
+    }
+
+    #footer .intro {
+        flex: none;
+        display: flex;
+        align-items: center;
+        width: 25%;
+        min-width: 20em;
+    }
+
+    #footer .org-links h1 {
+        margin: 0;
+        font-size: 1em;
+    }
+
+    #footer .org-links h1 a {
+        display: block;
+        width: 100px;
+        height: 30px;
+        background-image: url(../../images/moz-logo-bw-rgb.svg);
+        background-repeat: no-repeat;
+        background-size: contain;
+        text-indent: -9999px;
+    }
+
+    #footer .org-links ul {
+        display: flex;
+        margin: .5em 0 0;
+        padding: 0;
+    }
+
+    #footer .org-links li {
+        flex: none;
+    }
+
+    #footer .org-links li:not(:last-child) {
+        margin-right: 1.5em;
     }
 
     #footer #useful-links {
-        padding-left: 1ex;
-        padding-right: 1ex;
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
     }
 
     #footer ul {
@@ -178,6 +221,20 @@
     #footer .links {
         vertical-align: top;
     }
+
+    #footer .links .quicksearch_form {
+        display: none;
+    }
+
+    #footer .form {
+        display: block;
+        margin-top: 1em;
+    }
+
+    #footer .form input {
+        padding: 1px 2px;
+        margin-top: 3px;
+    }
 /* footer (end) */
 
 /* link lists (begin) */
@@ -517,7 +574,7 @@ div.user_match {
 
 /* Rules specific for printing */
 @media print {
-    #header, #footer, #privacy-policy {
+    #header, #footer {
         display: none;
     }
 
@@ -945,14 +1002,8 @@ body.mfa-warning #mfa-select button {
     font-size: 120%;
 }
 
-#moz_tab {
-    width: 100px;
-    vertical-align: top;
-}
-
 #moz_login {
     text-align: right;
-    padding-right: 2em;
     color: #404040;
 }
 
@@ -1000,10 +1051,6 @@ body.mfa-warning #mfa-select button {
     width: 200px;
 }
 
-#footer .links .quicksearch_form {
-    display: none;
-}
-
 #header .form a {
     margin: 0;
 }
@@ -1416,30 +1463,10 @@ table.edit_form hr {
     padding: 2px 2px 2px 1px;
 }
 
-#footer {
-    background: #fff;
-    border: none;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 0;
-    color: #bbb;
-    width: auto;
-    margin-bottom: 1em;
-    margin-left: 6px;
-}
-
 #links-actions, #links-saved {
     margin-left: -10px;
 }
 
-#footer form input {
-    padding: 1px 2px;
-    margin-top: 3px;
-}
-
-#privacy-policy {
-    margin-bottom: 1em;
-}
-
 button, input[type=submit], input[type=button], #commit, #commit_top, #header .btn, #header input[type=submit] {
     background-color: #43a6e2;
     background-image: -moz-linear-gradient(#43a6e2,#277ac1);
@@ -1570,7 +1597,7 @@ table.tabs {
 
 body {
     margin: 0;
-    padding: 15px 15px 2px 15px;
+    padding: 15px;
 }
 
 #header .btn, #header .txt {
@@ -1625,15 +1652,6 @@ a.controller {
     padding-left: 18px;
 }
 
-#policy_links {
-    padding-right: 5px;
-    text-align: right;
-}
-
-#policy_links li {
-    display: inline;
-}
-
 .highlighted {
     background: lightyellow;
 }
diff --git a/skins/standard/mobile.css b/skins/standard/mobile.css
index c5e47b8a5..244726f21 100644
--- a/skins/standard/mobile.css
+++ b/skins/standard/mobile.css
@@ -52,7 +52,7 @@ only screen and (-o-min-device-pixel-ratio: 2/1),
 only screen and (min-device-pixel-ratio: 2),
 only screen and (min-resolution: 192dpi),
 only screen and (min-resolution: 2dppx) {
-    #policy_links {
+    #footer .org-links {
         font-size: small;
     }