Bug 1412504 - Style updates for about:devtools;r=nchevobbe
authorJulian Descottes <jdescottes@mozilla.com>
Sat, 11 Nov 2017 10:28:22 +0100
changeset 391727 734949a8f6d1c77b36c8a455346a32afa0610af3
parent 391700 b0a6b4678b2f7dfb499328946b95366775f71edd
child 391728 1ddfda4ef74f39e2558220e901ed51a665a66733
push id32903
push userbtara@mozilla.com
push dateTue, 14 Nov 2017 20:37:26 +0000
treeherdermozilla-central@f0c0fb9182d6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1412504
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1412504 - Style updates for about:devtools;r=nchevobbe MozReview-Commit-ID: BjCimCRFYWr
devtools/shim/aboutdevtools/aboutdevtools.css
devtools/shim/aboutdevtools/aboutdevtools.xhtml
devtools/shim/aboutdevtools/subscribe.css
--- a/devtools/shim/aboutdevtools/aboutdevtools.css
+++ b/devtools/shim/aboutdevtools/aboutdevtools.css
@@ -1,25 +1,26 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   /* Photon color variables used on the aboutdevtools page */
+  --blue-50: #0a84ff;
+  --blue-50-alpha20: rgba(10, 132, 255, 0.2);
   --blue-60: #0060df;
   --blue-70: #003eaa;
   --blue-80: #002275;
   --grey-30: #d7d7db;
   --grey-90: #0c0c0d;
   --grey-90-alpha-10: rgba(12, 12, 13, 0.1);
   --grey-90-alpha-20: rgba(12, 12, 13, 0.2);
   --grey-90-alpha-30: rgba(12, 12, 13, 0.3);
   --grey-90-alpha-40: rgba(12, 12, 13, 0.4);
   --grey-90-alpha-50: rgba(12, 12, 13, 0.5);
-  --teal-60: #00c8d7;
   --red-50: #ff0039;
   --white: #ffffff;
 
   /* Shared variables */
   --line-height: 1.5em;
 }
 
 html, body {
@@ -31,17 +32,24 @@ p {
   line-height: var(--line-height);
 }
 
 .box {
   width: 100%;
   max-width: 850px;
   display: flex;
   flex-shrink: 0;
-  padding: 34px 0 50px 0;
+}
+
+#install-page .box {
+  padding: 17% 0 50px 0;
+}
+
+#welcome-page .box {
+  padding: 50px 0;
 }
 
 .wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -88,16 +96,17 @@ p {
 }
 
 .feature-desc {
   margin: 1em 20px;
 }
 
 .feature-link {
   display: block;
+  margin-top: 10px;
 }
 
 .external,
 .external:hover,
 .external:visited,
 .external:hover:active {
   color: var(--blue-60);
 }
@@ -124,16 +133,17 @@ p {
   font-weight: 300;
   font-size: 32px;
   margin-top: 16px;
   line-height: 44px;
 }
 
 .buttons-container {
   display: flex;
+  margin-top: 5px;
 }
 
 .buttons-container button:not(:last-child) {
   margin-right: 10px;
 }
 
 button {
   margin: 20px 0 0 0;
@@ -190,16 +200,17 @@ button::-moz-focus-inner {
 
 footer {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 300px;
   flex-grow: 1;
+  padding-bottom: 15px;
   color: var(--white);
   background: linear-gradient(0, var(--blue-60), var(--blue-80));
 }
 
 .dev-edition-logo {
   flex-shrink: 0;
   width: 165px;
   margin: 20px 50px 0 0;
--- a/devtools/shim/aboutdevtools/aboutdevtools.xhtml
+++ b/devtools/shim/aboutdevtools/aboutdevtools.xhtml
@@ -70,17 +70,17 @@
 
             <section id="newsletter-privacy" class="newsletter-form-section">
               <input type="checkbox" id="privacy" name="privacy" required="true" />
               <label for="privacy">&aboutDevtools.newsletter.privacy.label;</label>
             </section>
             <button type="submit" id="newsletter-submit" class="primary-button">&aboutDevtools.newsletter.subscribeButton;</button>
           </form>
           <div id="newsletter-thanks">
-            <h2>&aboutDevtools.newsletter.thanks.title;</h2>
+            <h2 class="newsletter-title">&aboutDevtools.newsletter.thanks.title;</h2>
             <p>&aboutDevtools.newsletter.thanks.message;</p>
           </div>
         </div>
       </div>
     </div>
 
     <div class="features">
       <ul class="features-list">
--- a/devtools/shim/aboutdevtools/subscribe.css
+++ b/devtools/shim/aboutdevtools/subscribe.css
@@ -2,16 +2,23 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /**
  * This file contains the styles for the newsletter subscription form on about:devtools.
  * It is largely inspired from https://mozilla.github.io/basket-example/
  */
 
+.newsletter-title {
+  font-size: 17px;
+  font-weight: 500;
+  margin-top: 26px;
+  margin-bottom: -4px;
+}
+
 #newsletter-errors {
   /* Hidden by default */
   display: none;
 
   margin-bottom: 20px;
   padding: 10px;
   border-radius: 2px;
 
@@ -47,54 +54,57 @@
   width: 320px;
 }
 
 #newsletter-privacy {
   display: flex;
 
   /* The privacy section is hidden by default and only displayed on focus */
   height: 0;
-  margin-bottom: -20px;
   overflow: hidden;
+
+  padding: 3px 0 0 3px;
+  margin: -3px 0 -20px -3px;
 }
 
 #newsletter-privacy.animate {
   transition: all 0.25s cubic-bezier(.15,.75,.35,.9);
 }
 
 #newsletter-privacy label {
   line-height: var(--line-height);
 }
 
 #privacy {
   width: 20px;
   height: 20px;
-  margin: 2px;
+  margin-top: 2px;
   margin-inline-end: 10px;
   flex-shrink: 0;
 }
 
 #email {
   width: 100%;
   box-sizing: border-box;
-  padding: 12px 15px;
+  padding: 8px;
 }
 
 #newsletter-form input {
   border-color: var(--grey-90-alpha-30);
 }
 
 #newsletter-form input:hover {
   border-color: var(--grey-90-alpha-50);
 }
 
 #newsletter-form input:focus {
-  border-color: var(--teal-60);
-  box-shadow: 0 0 2px 0 var(--teal-60);
+  border-color: var(--blue-50);
+  box-shadow: 0 0 0px 3px var(--blue-50-alpha20);
 }
 
 #newsletter-form::placeholder {
   color: var(--grey-90-alpha-40);
 }
 
 #newsletter-submit {
   display: block;
+  padding: 8px 20px;
 }