Bug 1377167 - Update font size, font color, and background color to match the Photon preferences visual refresh spec. r=mconley
authorEvan Tseng <evan@tseng.io>
Mon, 24 Jul 2017 16:49:16 +0800
changeset 373165 c3910ce15bbbe91658ddf9e43ec5a5d436342070
parent 373164 347ea0d06092d7fcd6c34e2c7ade389b0b71ae31
child 373166 6296374f677f0c7995890fd3b6b1cf574c6bdf19
push id48128
push usercbook@mozilla.com
push dateMon, 07 Aug 2017 06:38:01 +0000
treeherderautoland@c3910ce15bbb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1377167
milestone57.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 1377167 - Update font size, font color, and background color to match the Photon preferences visual refresh spec. r=mconley MozReview-Commit-ID: 2dcr9x8cnEp
browser/components/preferences/in-content-new/sync.xul
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content-new/sync.xul
+++ b/browser/components/preferences/in-content-new/sync.xul
@@ -42,17 +42,19 @@
 </hbox>
 
 <deck id="weavePrefsDeck" data-category="paneSync" hidden="true">
   <vbox id="noFxaAccount">
     <hbox>
       <vbox id="fxaContentWrapper">
         <groupbox id="noFxaGroup">
           <vbox>
-            <label id="noFxaCaption">&signedOut.caption;</label>
+            <caption>
+              <label id="noFxaCaption">&signedOut.caption;</label>
+            </caption>
             <description id="noFxaDescription" flex="1">&signedOut.description;</description>
             <hbox class="fxaAccountBox">
               <vbox>
                 <image class="fxaFirefoxLogo"/>
               </vbox>
               <vbox flex="1">
                 <label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
                 <hbox class="fxaAccountBoxButtons">
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -2,47 +2,64 @@
 /* - 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/. */
 %endif
 @namespace html "http://www.w3.org/1999/xhtml";
 
 .main-content {
   padding-top: 0;
+  background-color: #fafafc;
 }
 
 .pane-container {
   display: block;
   max-width: 800px;
 }
 
 #mainPrefPane {
   width: 100%;
   padding: 0;
   font: message-box;
-  font-size: 1.25rem;
+  color: #0c0c0d;
+}
+
+#mainPrefPane groupbox,
+#mainPrefPane deck,
+#mainPrefPane description {
+  font-size: 1.36rem;
+}
+
+input,
+description.indent,
+.indent > description {
+  font-size: 1.18rem !important;
 }
 
 description.indent,
 .indent > description {
-  font-size: 1.18rem;
   color: #737373;
 }
 
 * {
   -moz-user-select: text;
 }
 
 button,
 treecol,
 html|option {
   /* override the * rule */
   -moz-user-select: none;
 }
 
+caption > label {
+  font-size: 1.55rem;
+  font-weight: 600;
+}
+
 #engineList treechildren::-moz-tree-image(engineShown, checked),
 #blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) {
   list-style-image: url("chrome://global/skin/in-content/check.svg");
   -moz-context-properties: fill, stroke;
   fill: #2292d0;
   stroke: none;
   width: 21px;
   height: 21px;
@@ -82,32 +99,51 @@ html|option {
 #searchCategory,
 #browserPrivacyCategory,
 #firefoxAccountCategory {
   margin-top: 0;
 }
 
 .header-name {
   font-size: 2rem;
+  font-weight: 300;
 }
 
 .subcategory {
   margin-top: 48px;
 }
 
 /* Category List */
 
 #categories {
   max-height: 100vh;
+  background-color: #fafafc;
 }
 
 #categories > scrollbox {
   overflow-x: hidden !important;
 }
 
+.category-name {
+  font-size: 1.45rem;
+  color: #0c0c0d;
+}
+
+.category,
+.category:hover,
+.category[selected] {
+  background-color: transparent;
+  border-inline-start: initial;
+  padding-inline-start: 44px;
+}
+
+richlistitem[selected='true'] .category-name {
+  color: #0a84ff;
+}
+
 /**
  * We want the last category to always have non-0 getBoundingClientRect().bottom
  * so we can use the value to figure out the max-height of the list in
  * preferences.js, so use collapse instead of display: none; if it's hidden
  */
 #categories > .category[hidden="true"] {
   display: -moz-box;
   visibility: collapse;
@@ -192,18 +228,19 @@ html|option {
   font-size: 90%;
   margin-inline-end: 8px !important;
 }
 
 #getStarted {
   font-size: 90%;
 }
 
-#isNotDefaultLabel {
-  font-weight: bold;
+#isNotDefaultLabel,
+#signedOutAccountBoxTitle {
+  font-weight: 600;
 }
 
 #downloadFolder {
   margin-inline-start: 0;
 }
 
 #browserHomePage:-moz-locale-dir(rtl) input {
   unicode-bidi: plaintext;
@@ -469,17 +506,16 @@ groupbox {
   -moz-box-flex: 1;
 }
 
 #tosPP-small-ToS {
   margin-bottom: 14px;
 }
 
 #noFxaCaption {
-  font-weight: bold;
   margin-bottom: 11px;
 }
 
 .fxaSyncIllustration {
   margin-top: 35px;
   width: 231px;
   -moz-context-properties: fill;
   fill: #bfcbd3;
@@ -502,20 +538,16 @@ groupbox {
 }
 
 .fxaAccountBox {
   border: 1px solid #D1D2D3;
   border-radius: 5px;
   padding: 14px 20px 14px 14px;
 }
 
-#signedOutAccountBoxTitle {
-  font-weight: bold;
-}
-
 .fxaAccountBoxButtons {
   margin-bottom: 0 !important;
   margin-top: 11px;
   display: flex;
   align-items: center;
 }
 
 .fxaAccountBoxButtons > * {
@@ -627,30 +659,41 @@ groupbox {
      get behind the status panel (bug 1357841). */
   bottom: 2rem;
   font-size: 13px;
   line-height: 13px;
   height: 14px;
   background-position: 15px;
   padding-inline-start: 35px;
   white-space: nowrap;
+  fill: #0c0c0d;
+  stroke: #0c0c0d;
 }
 
 .help-button:-moz-locale-dir(rtl) {
   left: auto;
   right: 0;
   background-position: right 15px top 0;
 }
 
 .help-button:link,
 .help-button:visited {
-  color: var(--in-content-category-text);
+  color: #0c0c0d !important;
+  opacity: 0.8;
   text-decoration: none;
 }
 
+.help-button:hover {
+  color: #0c0c0d !important;
+  fill: #0c0c0d !important;
+  stroke: #0c0c0d !important;
+  stroke-opacity: 0!important;
+  opacity: 0.9;
+}
+
 .search-container {
   position: sticky;
   background-color: var(--in-content-page-background);
   width: 100%;
   top: 0;
   z-index: 1;
 }