Bug 548027 - Tweak toolbarbutton style. r=rflint
authorDão Gottwald <dao@mozilla.com>
Mon, 01 Mar 2010 22:30:08 +0100
changeset 38820 dbb530e1ac89abc923c8907e1ca16fc6b57e4e85
parent 38819 02c434f2fd4a5c7e11873ae6d1ee2995f7c75008
child 38821 cdc530fc500eee1dcad367634e6634039f22524b
push id11877
push userdgottwald@mozilla.com
push dateMon, 01 Mar 2010 21:30:44 +0000
treeherdermozilla-central@dbb530e1ac89 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrflint
bugs548027
milestone1.9.3a3pre
Bug 548027 - Tweak toolbarbutton style. r=rflint
browser/base/content/browser.xul
browser/themes/winstripe/browser/browser.css
browser/themes/winstripe/browser/keyhole-forward-mask.svg
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -639,13 +639,17 @@
         </menupopup>
       </statusbarpanel>
     </statusbar>
   </vbox>
 #ifndef XP_UNIX
   <svg:svg height="0">
     <svg:mask id="winstripe-keyhole-forward-mask" maskContentUnits="objectBoundingBox">
       <svg:rect x="0" y="0" width="1" height="1" fill="white"/>
-      <svg:circle cx="-0.42" cy="0.5" r="0.63" id="circle"/>
+      <svg:circle cx="-0.46" cy="0.5" r="0.63" id="circle"/>
+    </svg:mask>
+    <svg:mask id="winstripe-keyhole-forward-mask-hover" maskContentUnits="objectBoundingBox">
+      <svg:rect x="0" y="0" width="1" height="1" fill="white"/>
+      <svg:circle cx="-0.35" cy="0.5" r="0.58" id="circle"/>
     </svg:mask>
   </svg:svg>
 #endif
 </window>
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@@ -179,46 +179,43 @@ menuitem.bookmark-item {
 }
 
 /* ::::: primary toolbar buttons ::::: */
 
 .toolbarbutton-menubutton-button,
 .toolbarbutton-menubutton-dropmarker,
 .toolbarbutton-1 {
   -moz-appearance: none;
-  padding: 1px 4px;
+  padding: 1px 5px;
   background: rgba(85%,85%,85%,.1)
-              -moz-linear-gradient(top, rgba(255,255,255,.7), rgba(255,255,255,.39) 48%,
-                                        rgba(95%,95%,95%,.33) 52%, rgba(95%,95%,95%,.15));
+              -moz-linear-gradient(top, rgba(255,255,255,.9), rgba(255,255,255,.45) 48%,
+                                        rgba(90%,90%,90%,.4) 52%, rgba(90%,90%,90%,.2));
   -moz-background-clip: padding;
   -moz-border-radius: 5px;
   border: 1px solid;
-  border-color: rgba(0,0,0,.1) rgba(0,0,0,.15) rgba(0,0,0,.25);
+  border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38);
   -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
-                   0 1px 0 rgba(0,0,0,.08);
+                   0 0 0 2px rgba(255,255,255,.1) inset,
+                   0 1px 0 rgba(0,0,0,.1);
   color: black;
   text-shadow: 0 0 3px white;
 }
 
+.toolbarbutton-menubutton-dropmarker,
 toolbar[iconsize="small"][mode="icons"] .toolbarbutton-menubutton-button,
-toolbar[iconsize="small"][mode="icons"] .toolbarbutton-menubutton-dropmarker,
 toolbar[iconsize="small"][mode="icons"] .toolbarbutton-1 {
   padding-left: 3px;
   padding-right: 3px;
 }
 
 .toolbarbutton-1 {
   -moz-box-orient: vertical;
   list-style-image: url("chrome://browser/skin/Toolbar.png");
 }
 
-.toolbarbutton-1[disabled="true"] > .toolbarbutton-icon {
-  opacity: .5;
-}
-
 toolbarbutton[type="menu-button"] {
   -moz-appearance: none;
   padding: 0;
   background: none !important;
   border: none !important;
   -moz-box-shadow: none !important;
 }
 
@@ -247,33 +244,34 @@ toolbar[iconsize="small"][mode="icons"] 
 .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
   -moz-border-radius-topleft: 0;
   -moz-border-radius-bottomleft: 0;
 }
 
 .toolbarbutton-menubutton-button[disabled="true"],
 .toolbarbutton-menubutton-dropmarker[disabled="true"],
 .toolbarbutton-1[disabled="true"] {
-  background-color: rgba(0,0,0,.15);
-  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.08);
+  opacity: .8;
+}
+
+.toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
+.toolbarbutton-1[disabled="true"] > .toolbarbutton-icon {
+  opacity: .6;
 }
 
 .toolbarbutton-menubutton-button:not([disabled="true"]):not(:active):hover,
 :not([open="true"]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
 .toolbarbutton-1:not([disabled="true"]):not([checked="true"]):not(:active):hover {
-  background-color: rgba(255,255,255,.6);
-  border-color: rgba(60%,60%,60%,.3) rgba(60%,60%,60%,.45) rgba(60%,60%,60%,.75);
-  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.04),
-                   0 0 6px -1px white,
-                   0 0 6px -2px highlight,
-                   0 0 5px -2px highlight,
-                   0 4px 4px -3px white inset,
-                   0 -4px 4px -3px white inset,
-                   0 -3px 12px -5px highlight inset;
-  -moz-transition: background-color .6s;
+  background-color: hsla(190,60%,70%,.5);
+  border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8);
+  -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
+                   0 0 0 2px rgba(255,255,255,.1) inset,
+                   0 0 5px hsl(190,90%,80%),
+                   0 1px 0 rgba(0,0,0,.1);
+  -moz-transition: background-color .5s ease-in;
 }
 
 .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
 :hover:active > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
 [open="true"] > .toolbarbutton-menubutton-dropmarker,
 .toolbarbutton-1:not([disabled="true"]):hover:active,
 .toolbarbutton-1[checked="true"],
 .toolbarbutton-1[open="true"] {
@@ -353,18 +351,23 @@ toolbar:not([iconsize="small"])[mode="ic
   padding-top: 3px;
   padding-bottom: 3px;
 }
 
 toolbar:not([iconsize="small"])[mode="icons"] #forward-button {
   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
   mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask);
   -moz-margin-start: -6px;
-  padding-left: 6px;
-  padding-right: 2px;
+  padding-left: 7px;
+  padding-right: 3px;
+}
+
+toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="true"]):hover {
+  /*mask: url(keyhole-forward-mask.svg#mask-hover);*/
+  mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask-hover);
 }
 
 #back-forward-dropmarker {
   -moz-appearance: none;
   padding: 0;
   -moz-padding-end: 2px;
   -moz-margin-start: -3px;
   border: none;
--- a/browser/themes/winstripe/browser/keyhole-forward-mask.svg
+++ b/browser/themes/winstripe/browser/keyhole-forward-mask.svg
@@ -1,7 +1,11 @@
 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg">
   <mask id="mask" maskContentUnits="objectBoundingBox">
     <rect x="0" y="0" width="1" height="1" fill="white"/>
-    <circle cx="-0.42" cy="0.5" r="0.63" id="circle"/>
+    <circle cx="-0.46" cy="0.5" r="0.63" id="circle"/>
+  </mask>
+  <mask id="mask-hover" maskContentUnits="objectBoundingBox">
+    <rect x="0" y="0" width="1" height="1" fill="white"/>
+    <circle cx="-0.35" cy="0.5" r="0.58" id="circle"/>
   </mask>
 </svg>