Bug 1013708 - in-content preferences: restyle the horizontal tabs. r=jaws
authorRichard Marti <richard.marti@gmail.com>
Thu, 29 May 2014 13:46:19 +0200
changeset 205487 a81285b5fabf53425ba074012ccbc2306e5310b1
parent 205486 6042fe5242058f5484fd6ce2e42ec0d445837e26
child 205488 d75f1adf40d42cfe00545aff3f8d9f60a67cc74f
push id3741
push userasasaki@mozilla.com
push dateMon, 21 Jul 2014 20:25:18 +0000
treeherdermozilla-beta@4d6f46f5af68 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1013708
milestone32.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 1013708 - in-content preferences: restyle the horizontal tabs. r=jaws
browser/themes/linux/preferences/in-content/preferences.css
browser/themes/osx/preferences/in-content/preferences.css
browser/themes/shared/incontentprefs/preferences.css
browser/themes/windows/preferences/in-content/preferences.css
--- a/browser/themes/linux/preferences/in-content/preferences.css
+++ b/browser/themes/linux/preferences/in-content/preferences.css
@@ -1,14 +1,22 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/preferences.css
 
+tab[selected] {
+  /* Override styles for tab[selected] from
+     toolkit/themes/linux/global/tabbox.css */
+  margin-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 button > .button-box,
 menulist > .menulist-label-box {
   -moz-appearance: none;
 }
 
 button[type="menu"] > .button-box > .button-menu-dropmarker {
   -moz-appearance: none !important;
 }
--- a/browser/themes/osx/preferences/in-content/preferences.css
+++ b/browser/themes/osx/preferences/in-content/preferences.css
@@ -1,14 +1,28 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/preferences.css
 
+prefpane .groupbox-title {
+  background: none;
+  margin-bottom: 0;
+}
+
+tabs {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+tab[selected] {
+  text-shadow: none;
+}
+
 menulist:not([editable="true"]) > menupopup > menuitem[checked="true"]::before,
 menulist:not([editable="true"]) > menupopup > menuitem[selected="true"]::before {
   display: none;
 }
 
 menulist:not([editable="true"]) > .menulist-dropmarker {
   display: -moz-box;
   margin-top: 1px;
--- a/browser/themes/shared/incontentprefs/preferences.css
+++ b/browser/themes/shared/incontentprefs/preferences.css
@@ -7,17 +7,17 @@
 
 @font-face {
   font-family: "Clear Sans";
   src: url("chrome://browser/content/fonts/ClearSans-Regular.woff") format('woff');
 }
 
 page {
   -moz-appearance: none;
-  background-image: linear-gradient(#FFFFFF, #EDEDED 100px);
+  background-color: white;
 }
 
 * {
   -moz-user-select: text;
 }
 
 caption {
   -moz-appearance: none;
@@ -79,62 +79,49 @@ tabpanels {
   border: none;
   padding: 0;
   background-color: transparent;
 }
 
 tabs {
   -moz-margin-start: 60px;
   margin-bottom: 15px;
-  border-top: 2px solid;
-  border-bottom: 2px solid;
-  -moz-border-top-colors: #BBBBBB #F9F9F9;
-  -moz-border-bottom-colors: #F9F9F9 #BBBBBB;
+  border-top: 1px solid #c1c1c1;
+  border-bottom: 1px solid #c1c1c1;
+  background-color: #fbfbfb;
 }
 
 .tabs-left,
 .tabs-right {
   border-bottom: none;
 }
 
 tab {
   -moz-appearance: none;
   margin-top: 0;
-  padding: 0;
-  -moz-margin-end: 30px;
-  min-height: 60px;
-  background-color: transparent;
+  padding: 0 20px;
+  min-height: 44px;
+  color: #424f5a;
+  background-color: #fbfbfb;
   border-width: 0;
-  border-bottom: 3px solid transparent;
+  transition: background-color 50ms ease 0s;
+}
+
+tab:hover {
+  background-color: #ebebeb;
 }
 
 tab[selected] {
-  border-bottom-color: #FF9500;
+  background-color: #ebebeb;
+  box-shadow: inset 0 -4px 0 0 #ff9500;
 }
 
 .tab-text {
   font-size: 1.3rem;
   line-height: 22px;
-  color: #333333;
-  border: 1px solid transparent;
-  border-radius: 5px;
-}
-
-tab:not([selected]):hover > .tab-middle > .tab-text {
-  background-color: rgba(255,255,255,0.5);
-  border-color: #FFFFFF;
-}
-
-tab:not([selected]):hover:active > .tab-middle > .tab-text {
-  background-color: rgba(0,0,0,0.03);
-}
-
-tab[selected] > .tab-middle > .tab-text {
-  font-weight: bold;
-  color: #424E5A;
 }
 
 /* buttons and menulists */
 
 button,
 menulist {
   -moz-appearance: none;
   height: 30px;
--- a/browser/themes/windows/preferences/in-content/preferences.css
+++ b/browser/themes/windows/preferences/in-content/preferences.css
@@ -1,14 +1,18 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/preferences.css
 
+caption {
+  background-color: transparent;
+}
+
 menulist:not([editable="true"]) > .menulist-dropmarker {
   margin-top: 1px;
   margin-bottom: 1px;
 }
 
 checkbox {
   -moz-padding-start: 0;
 }