Bug 998157: use box-shadow instead of border to draw an outline around the back-button. r=dao.
authorMike de Boer <mdeboer@mozilla.com>
Tue, 13 May 2014 11:01:27 +0200
changeset 182874 3930dd3b0bfc27098937a5e96451703cfa8dab78
parent 182873 a98ed6c91bf3e5a1514ebb76aa422b54211aa766
child 182875 85c60372f2bf10d19403a61a4753e18579865c40
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersdao
bugs998157
milestone32.0a1
Bug 998157: use box-shadow instead of border to draw an outline around the back-button. r=dao.
browser/themes/windows/browser.css
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -921,44 +921,45 @@ toolbarbutton[sdk-button="true"][cui-are
   margin-top: -1px !important;
 }
 
 #back-button > .toolbarbutton-icon {
   border-radius: 10000px !important;
   background-clip: padding-box !important;
   background-color: hsla(210,25%,98%,.08) !important;
   padding: 6px !important;
-  border-color: hsla(210,4%,10%,.25) !important;
-  transition-property: background-color, border-color !important;
+  border-style: none !important;
+  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
+              0 0 0 1px hsla(210,4%,10%,.25);
+  transition-property: background-color, box-shadow !important;
   transition-duration: 250ms !important;
 }
 
 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
   background-color: hsla(210,4%,10%,.08) !important;
-  box-shadow: none !important;
 }
 
 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
 #back-button[open="true"] > .toolbarbutton-icon {
   background-color: hsla(210,4%,10%,.12) !important;
-  box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;
+  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
+              0 0 0 1px hsla(210,4%,10%,.25),
+              0 1px 0 0 hsla(210,80%,20%,.1) inset !important;
 }
 
 %ifdef WINDOWS_AERO
 @media (-moz-os-version: windows-vista),
        (-moz-os-version: windows-win7) {
 %endif
   #back-button > .toolbarbutton-icon {
-    border: none !important;
     background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)) !important;
     box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
                 0 0 0 1px hsla(0,0%,100%,.3) inset,
                 0 0 0 1px hsla(210,54%,20%,.25),
                 0 1px 0 hsla(210,54%,20%,.35) !important;
-    transition-property: background-color, box-shadow !important;
   }
 
   #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
     background-color: hsla(210,48%,96%,.75) !important;
     box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
                 0 0 0 1px hsla(0,0%,100%,.3) inset,
                 0 0 0 1px hsla(210,54%,20%,.3),
                 0 1px 0 hsla(210,54%,20%,.4),