Bug 991945 Fix modern theme fallout from bug 649490 r=Ratty,IanN a=Ratty
authorNeil Rashbrook <neil@parkwaycc.co.uk>
Fri, 25 Apr 2014 13:23:16 +0100
changeset 19694 4f43e626ee6df7eae2a46744403a6af0099a98bc
parent 19693 fd88841bab2f51b11bba46864d1d64aad14f9f42
child 19695 15e63d007ec59c67fe4d2cb8c5364963e648025b
push id1133
push usermbanner@mozilla.com
push dateMon, 28 Apr 2014 19:42:02 +0000
treeherdercomm-beta@ca498fc736fc [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersRatty, IanN, Ratty
bugs991945, 649490
Bug 991945 Fix modern theme fallout from bug 649490 r=Ratty,IanN a=Ratty
suite/themes/modern/global/media/videocontrols.css
--- a/suite/themes/modern/global/media/videocontrols.css
+++ b/suite/themes/modern/global/media/videocontrols.css
@@ -48,27 +48,16 @@ button {
   /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
   margin: 10px 22px;
   height: 8px;
   border: none;
   min-width: 0px;
   min-height: 0px;
 }
 
-.volumeStack {
-  width: 28px;
-  height: 70px;
-  background-color: #989EA6;
-  /* use negative margin to place stack over the mute button to its left. */
-  margin: -70px 3px 28px -31px;
-  overflow: hidden; /* crop it when sliding down, don't grow the control bar */
-  position: relative; /* Trick to work around negative margin interfering with dragging the thumb. */
-  padding-top: 6px;
-}
-
 /* .progress-bar is an element inside the <progressmeter> implementation. */
 .bufferBar > .progress-bar {
   background-color: #B1BBC5;
   border-radius: 4px;
 }
 
 .progressBar > .progress-bar {
   background-color: #6B7B8D;
@@ -80,39 +69,41 @@ button {
   /* Hide the default box. */
   background: none;
   border: none;
   margin: 0px;
   min-height: 20px;
 }
 
 .volumeControl {
-  min-height: 64px;
+  width: 32px;
 }
 
 /* .scale-thumb is an element inside the <scale> implementation. */
 .volumeControl .scale-thumb {
   /* Override the default thumb appearance. */
   background-color: #B1BBC5;
   background-image: none;
   border: 2px solid;
   -moz-border-top-colors: #000000;
   -moz-border-right-colors: #000000;
   -moz-border-bottom-colors: #000000;
   -moz-border-left-colors: #000000;
-  border-radius: 5px;
-  min-height: 11px;
-  min-width: 20px;
+  border-radius: 4px;
+  min-height: 20px;
+  min-width: 8px;
 }
 
-.volumeBackgroundBar {
-  /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */
-  margin: 0px 10px;
-  background-color: #B1BBC5;
-  border-radius: 4px;
+/* Draws a right-angled triangle. */
+.volumeBackground {
+  margin: 6px 0px;
+  border: 0px solid transparent;
+  border-top-width: 16px;
+  -moz-border-end-width: 32px;
+  -moz-border-end-color: #B1BBC5;
 }
 
 .durationBox {
   -moz-box-pack: center;
 }
 
 .durationLabel {
   margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */