[Australis] Bug 968595 - Clean up Menu Panel SubViews and panel footer styling, r=mikedeboer, a=sylvestre
authorStephen Horlander <shorlander@mozilla.com>
Wed, 12 Feb 2014 19:17:00 +0000
changeset 182905 e8eecab71e67ac638acdb49e166270279fc17391
parent 182904 e362f24fe667e9a8cf6f50d850df8b43de4d92d8
child 182906 01c5b49eeaed6eca4e1167ef3542b5c6911bd759
push id3343
push userffxbld
push dateMon, 17 Mar 2014 21:55:32 +0000
treeherdermozilla-beta@2f7d3415f79f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer, sylvestre
bugs968595
milestone29.0a2
[Australis] Bug 968595 - Clean up Menu Panel SubViews and panel footer styling, r=mikedeboer, a=sylvestre
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -25,21 +25,20 @@
   background-position: 0px 0px, 1px 0px, 2px 0px;
   background-repeat: no-repeat;
 }
 
 .panel-subviews {
   padding: 4px;
   background-color: hsla(0,0%,100%,.97);
   background-clip: padding-box;
-  border-right: 1px solid hsla(210,4%,10%,.2);
-  border-left: 1px solid hsla(210,4%,10%,.2);
+  border-left: 1px solid hsla(210,4%,10%,.3);
   box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
               0 0 7px hsla(210,4%,10%,.1);
-  color: #222426;
+  color: hsl(0,0%,15%);
   -moz-margin-start: @exitSubviewGutterWidth@;
 }
 
 .panel-viewstack[viewtype="main"] > .panel-subviews {
   transform: translateX(@menuPanelWidth@);
 }
 
 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
@@ -58,29 +57,23 @@
 
 #PanelUI-popup .panel-subview-body {
   margin: -4px;
 }
 
 .panel-subview-header,
 .subviewbutton.panel-subview-footer {
   padding: 12px;
-  background-color: hsla(210,4%,10%,.04);
 }
 
 .panel-subview-header {
   margin: -4px -4px 4px;
-  box-shadow: 0 -1px 0 hsla(210,4%,10%,.08) inset;
-  color: #797c80;
-}
-
-.subviewbutton.panel-subview-footer {
-  margin: 4px -4px -4px;
-  box-shadow: 0 1px 0 hsla(210,4%,10%,.08) inset;
-  border-radius: 0;
+  background-color: hsla(210,4%,10%,.05);
+  box-shadow: 0 -1px 0 hsla(210,4%,10%,.05) inset;
+  color: hsl(0,0%,50%);
 }
 
 .cui-widget-panelview .panel-subview-header {
   display: none;
 }
 
 .cui-widget-panelview .subviewbutton.panel-subview-footer {
   margin: 4px 0 0;
@@ -192,18 +185,18 @@ toolbaritem[cui-areatype="menu-panel"][s
 .panel-customization-placeholder-child {
   -moz-appearance: none;
   -moz-box-orient: vertical;
   width: calc(@menuPanelButtonWidth@);
   height: calc(40px + 4em);
 }
 
 /* Help SDK buttons fit in. */
-toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
-toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
+toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
+#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
   height: 32px;
   width: 32px;
 }
 
 .customization-palette .toolbarbutton-1 {
   -moz-appearance: none;
   -moz-box-orient: vertical;
 }
@@ -311,30 +304,29 @@ toolbarpaletteitem[place="palette"] > to
 #zoom-reset-button > .toolbarbutton-icon {
   display: none;
 }
 
 #PanelUI-footer {
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.05);
-  box-shadow: 0 -1px 0 rgba(0,0,0,.15);
+  background-color: hsla(210,4%,10%,.07);
   padding: 0;
   margin: 0;
 }
 
 #PanelUI-footer-inner {
   display: flex;
-  box-shadow: 0 -1px 0 rgba(0,0,0,.15);
+  border-top: 1px solid hsla(210,4%,10%,.14);
 }
 
 #PanelUI-footer-inner > toolbarseparator {
   border: 0;
-  border-left: 1px solid rgba(0,0,0,0.1);
+  border-left: 1px solid hsla(210,4%,10%,.14);
   margin: 7px 0 7px;
 }
 
 #PanelUI-footer-inner:hover > toolbarseparator {
   margin: 0;
 }
 
 #PanelUI-help,
@@ -342,25 +334,26 @@ toolbarpaletteitem[place="palette"] > to
 #PanelUI-customize,
 #PanelUI-quit {
   margin: 0;
   padding: 10px 0;
   min-height: 2em;
   -moz-appearance: none;
   box-shadow: none;
   background-image: none;
-  border: 1px solid transparent;
-  border-bottom-style: none;
+  border: none;  
   border-radius: 0;
   transition: background-color;
   -moz-box-orient: horizontal;
 }
 
 #PanelUI-fxa-status {
-  border-bottom-style: solid;
+  border-top: 1px solid hsla(210,4%,10%,.14);
+  border-bottom: 1px solid transparent;
+  margin-bottom: -1px;
 }
 
 #PanelUI-fxa-status > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }
 
 #PanelUI-fxa-status[signedin] {
   font-weight: bold;
@@ -441,37 +434,46 @@ toolbarpaletteitem[place="palette"] > to
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
 
 #PanelUI-help[disabled],
 #PanelUI-quit[disabled] {
   opacity: 0.4;
 }
 
+#PanelUI-fxa-status:not([disabled]):hover,
 #PanelUI-help:not([disabled]):hover,
 #PanelUI-customize:hover,
 #PanelUI-quit:not([disabled]):hover {
-  outline: 1px solid rgba(0,0,0,0.1);
-  background-color: rgba(0,0,0,0.1);
-  box-shadow: none;
+  outline: 1px solid hsla(210,4%,10%,.07);
+  background-color: hsla(210,4%,10%,.07);
 }
 
-#PanelUI-fxa-status:not([disabled]):hover {
-  background-color: rgba(0,0,0,0.1);
-  border-bottom-color: rgba(0,0,0,0.1);
-  box-shadow: 0 -1px 0 rgba(0,0,0,0.2);
+#PanelUI-fxa-status:not([disabled]):hover:active,
+#PanelUI-help:not([disabled]):hover:active,
+#PanelUI-customize:hover:active,
+#PanelUI-quit:not([disabled]):hover:active {
+  outline: 1px solid hsla(210,4%,10%,.12);
+  background-color: hsla(210,4%,10%,.12);
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
+#PanelUI-fxa-status:not([disabled]):hover,
+#PanelUI-fxa-status:not([disabled]):hover:active {
+  outline: none;
 }
 
 #PanelUI-quit:not([disabled]):hover {
   background-color: #d94141;
   outline-color: #c23a3a;
 }
 
 #PanelUI-quit:not([disabled]):hover:active {
   background-color: #ad3434;
+  outline-color: #992e2e;
 }
 
 #customization-panelHolder #PanelUI-customize {
   color: white;
   background-color: rgb(116,191,67);
   text-shadow: none;
 }
 
@@ -548,32 +550,51 @@ panelview .toolbarbutton-1,
 }
 
 panelview .toolbarbutton-1@buttonStateHover@,
 .subviewbutton@buttonStateHover@,
 .widget-overflow-list .toolbarbutton-1@buttonStateHover@,
 #edit-controls@inAnyPanel@ > toolbarbutton@buttonStateHover@,
 #zoom-controls@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
   background-color: hsla(210,4%,10%,.08);
-  border-color: hsla(210,4%,10%,.1);
+  border-color: hsla(210,4%,10%,.11);
 }
 
 #edit-controls@inAnyPanel@@buttonStateHover@,
 #zoom-controls@inAnyPanel@@buttonStateHover@ {
-  border-color: hsla(210,4%,10%,.1);
+  border-color: hsla(210,4%,10%,.11);
 }
 
 panelview .toolbarbutton-1@buttonStateActive@,
 .subviewbutton@buttonStateActive@,
 .widget-overflow-list .toolbarbutton-1@buttonStateActive@,
 #edit-controls@inAnyPanel@ > toolbarbutton@buttonStateActive@,
 #zoom-controls@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
+  background-color: hsla(210,4%,10%,.12);
+  border-color: hsla(210,4%,10%,.14);
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+}
+
+.subviewbutton.panel-subview-footer {
+  margin: 4px -4px -4px;
+  background-color: hsla(210,4%,10%,.07);
+  border-top: 1px solid hsla(210,4%,10%,.12);
+  border-radius: 0;
+  color: hsl(0,0%,25%)
+}
+
+.subviewbutton.panel-subview-footer@buttonStateHover@ {
+  background-color: hsla(210,4%,10%,.1);
+  border-top: 1px solid hsla(210,4%,10%,.12);
+}
+
+.subviewbutton.panel-subview-footer@buttonStateActive@ {
   background-color: hsla(210,4%,10%,.15);
-  border-color: hsla(210,4%,10%,.15);
-  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
+  border-top: 1px solid hsla(210,4%,10%,.12);
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
 #BMB_bookmarksPopup > .subviewbutton {
   font: inherit;
   font-weight: normal;
 }
 
 #BMB_bookmarksPopup > .subviewbutton:not([disabled="true"]) {