Bug 578422 - Make toolbar buttons transparent when using a lightweight theme. r=dao, a=beltzner
authorMarkus Stange <mstange@themasta.com>
Tue, 18 Jan 2011 08:28:29 +0100
changeset 60744 a4df433a0caa017c2370fc48433bf89ec64fc8f4
parent 60743 0b88752d6d29db4bc9ef4bd9b10bc1c49effebf3
child 60745 433213256ed102e524cd6bf4c4421bc67a4a19a7
push idunknown
push userunknown
push dateunknown
reviewersdao, beltzner
bugs578422
milestone2.0b10pre
Bug 578422 - Make toolbar buttons transparent when using a lightweight theme. r=dao, a=beltzner
browser/base/content/browser.xul
browser/themes/pinstripe/browser/browser.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1009,16 +1009,20 @@
     <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"/>
     </svg:mask>
   </svg:svg>
 #endif
 #ifdef XP_MACOSX
   <svg:svg height="0">
+    <svg:mask id="pinstripe-keyhole-forward-mask" maskContentUnits="objectBoundingBox">
+      <svg:rect x="0" y="0" width="1" height="1" fill="white"/>
+      <svg:circle cx="-0.46" cy="0.48" r="0.65"/>
+    </svg:mask>
     <svg:mask id="pinstripe-tab-ontop-left-curve-mask" maskContentUnits="userSpaceOnUse">
       <svg:circle cx="9" cy="3" r="3" fill="white"/>
       <svg:rect x="9" y="0" width="3" height="3" fill="white"/>
       <svg:rect x="6" y="3" width="6" height="19" fill="white"/>
       <svg:rect x="1" y="17" width="5" height="5" fill="white"/>
       <svg:circle cx="1" cy="17" r="5"/>
       <svg:rect x="0" y="22" width="12" height="1" fill="white"/>
     </svg:mask>
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@@ -283,16 +283,32 @@ toolbarbutton.bookmark-item > menupopup 
   height: 22px;
   border: 1px solid @toolbarbuttonBorderColor@;
   border-radius: @toolbarbuttonCornerRadius@;
   box-shadow: 0 1px rgba(255, 255, 255, 0.2);
   background: @toolbarbuttonBackground@;
   background-origin: border-box;
 }
 
+.toolbarbutton-1:not([type="menu-button"]):-moz-lwtheme,
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-lwtheme,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme,
+#restore-button:-moz-lwtheme {
+  border-color: rgba(0, 0, 0, 0.4);
+  background-image: -moz-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2));
+  box-shadow: inset 0 1px rgba(255,255,255,0.3), 0 1px rgba(255,255,255,0.2);
+}
+
+.toolbarbutton-1:not([type="menu-button"]):-moz-lwtheme-darktext,
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-lwtheme-darktext,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-darktext,
+#restore-button:-moz-lwtheme-darktext {
+  background-image: -moz-linear-gradient(rgba(255,255,255,0.3), rgba(50,50,50,0.2) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.13));
+}
+
 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   margin: 0;
 }
 
 .toolbarbutton-1,
 #restore-button {
   margin: 0 4px;
@@ -371,40 +387,60 @@ toolbar:not([mode="icons"]) .toolbarbutt
   opacity: .7;
 }
 
 .toolbarbutton-1 > .toolbarbutton-text,
 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
   margin: 2px 0 0;
 }
 
-toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):active:hover,
-toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"])[open="true"],
-toolbar[mode="icons"] .toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button:active:hover,
-toolbar[mode="icons"] .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker,
-toolbar[mode="icons"] #restore-button:not([disabled="true"]):active:hover {
+toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):active:hover:not(:-moz-lwtheme),
+toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"])[open="true"]:not(:-moz-lwtheme),
+toolbar[mode="icons"] .toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button:active:hover:not(:-moz-lwtheme),
+toolbar[mode="icons"] .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not(:-moz-lwtheme),
+toolbar[mode="icons"] #restore-button:not([disabled="true"]):active:hover:not(:-moz-lwtheme) {
   background: @toolbarbuttonPressedBackgroundColor@;
   text-shadow: @loweredShadow@;
   box-shadow: @toolbarbuttonPressedInnerShadow@, @loweredShadow@;
 }
 
-toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"] {
+toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):active:hover:-moz-lwtheme,
+toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"])[open="true"]:-moz-lwtheme,
+toolbar[mode="icons"] .toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button:active:hover:-moz-lwtheme,
+toolbar[mode="icons"] .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme,
+toolbar[mode="icons"] #restore-button:not([disabled="true"]):active:hover:-moz-lwtheme {
+  text-shadow: @loweredShadow@;
+  background-color: rgba(0,0,0,0.2);
+  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
+}
+
+toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not(:-moz-lwtheme) {
   background: #606060;
   box-shadow: inset #2A2A2A 0 3px 3.5px, @loweredShadow@;
 }
 
-toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not([disabled="true"]):active:hover {
+toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:-moz-lwtheme {
+  background-color: rgba(0,0,0,0.4);
+  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), 0 1px rgba(255,255,255,0.2);
+}
+
+toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not([disabled="true"]):active:hover:not(:-moz-lwtheme) {
   background: #4E4E4E;
   box-shadow: inset #1c1c1c 0 3px 3.5px;
 }
 
-toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):-moz-window-inactive,
-toolbar[mode="icons"] .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-window-inactive,
-toolbar[mode="icons"] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-window-inactive,
-toolbar[mode="icons"] #restore-button:-moz-window-inactive {
+toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not([disabled="true"]):active:hover:-moz-lwtheme {
+  background-color: rgba(0, 0, 0, 0.6);
+  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 255, 0.2);
+}
+
+toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):-moz-window-inactive:not(:-moz-lwtheme),
+toolbar[mode="icons"] .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-window-inactive:not(:-moz-lwtheme),
+toolbar[mode="icons"] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-window-inactive:not(:-moz-lwtheme),
+toolbar[mode="icons"] #restore-button:-moz-window-inactive:not(:-moz-lwtheme) {
   border-color: @toolbarbuttonInactiveBorderColor@;
   background-image: @toolbarbuttonInactiveBackgroundImage@;
 }
 
 toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:-moz-window-inactive {
   background: #8E8E8E;
   box-shadow: inset rgba(0, 0, 0, 0.5) 0 3px 3.5px, @loweredShadow@;
 }
@@ -427,40 +463,42 @@ toolbar[mode="icons"] .toolbarbutton-1 >
 #back-button:-moz-locale-dir(rtl),
 #forward-button:-moz-locale-dir(ltr) {
   -moz-image-region: rect(0, 60px, 20px, 40px);
 }
 
 toolbar:not([iconsize="small"])[mode="icons"] #back-button {
   -moz-margin-end: -5px;
   position: relative;
+  z-index: 1;
   -moz-image-region: rect(0, 20px, 20px, 0);
+  width: 30px;
+  height: 30px;
+  padding: 4px 5px 4px 3px;
+  border-radius: 10000px;
 }
 
 toolbar:not([iconsize="small"])[mode="icons"] #back-button:-moz-locale-dir(rtl) {
   -moz-transform: scaleX(-1);
 }
 
-toolbar:not([iconsize="small"])[mode="icons"] #back-button {
-  width: 30px;
-  height: 30px;
-  padding: 4px 5px 4px 3px;
-  border-radius: 10000px;
-}
-
 toolbar[mode="icons"] #forward-button {
   -moz-margin-start: 0;
 }
 
 toolbar[mode="icons"]:not([iconsize="small"]) #forward-button {
   /* 1px to the right */
   -moz-padding-start: 4px;
   -moz-padding-end: 2px;
 }
 
+toolbar[mode="icons"]:not([iconsize="small"]) #forward-button:-moz-lwtheme {
+  mask: url(chrome://browser/content/browser.xul#pinstripe-keyhole-forward-mask);
+}
+
 toolbar[iconsize="small"][mode="icons"] #back-button {
   -moz-margin-end: 0;
 }
 
 toolbar[iconsize="small"][mode="icons"] #back-button {
   width: 26px;
   -moz-border-end-width: 0;
   -moz-padding-end: 2px;