Bug 1377167 - Update font size, font color, and background color to match the Photon preferences visual refresh spec. draft
authorEvan Tseng <evan@tseng.io>
Mon, 24 Jul 2017 16:49:16 +0800
changeset 619483 4356342aa801b1e92ed7b3688905c78ed25fa850
parent 619442 fec8d72590053c3ad72cd3492d389213dfabc2ff
child 640414 0a8bc8fd9eeea8dd23eec238196921bd5ab3d2fa
push id71697
push userbmo:evan@tseng.io
push dateWed, 02 Aug 2017 04:05:35 +0000
bugs1377167
milestone56.0a1
Bug 1377167 - Update font size, font color, and background color to match the Photon preferences visual refresh spec. 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;
 }
 
 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,49 @@ 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;
@@ -630,27 +664,29 @@ 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;
   text-decoration: none;
 }
 
 .search-container {
   position: sticky;
   background-color: var(--in-content-page-background);
   width: 100%;
   top: 0;