Bug 780826 - Hover and active state for the video controls. r=dolske,shorlander
authorJared Wein <jwein@mozilla.com>
Thu, 17 Jan 2013 17:00:39 -0500
changeset 119205 a50549c5caca3cb40bf59b0f3c99710e5fa365ac
parent 119204 ea6b3f0cdd25a38e5f0c6e1c9fc1d90471b2f44b
child 119206 a951a8a24bbc333758f6ba2202c88417694893d7
push id24195
push userMs2ger@gmail.com
push dateSat, 19 Jan 2013 16:10:11 +0000
treeherderautoland@02e12a80aef9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdolske, shorlander
bugs780826
milestone21.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 780826 - Hover and active state for the video controls. r=dolske,shorlander
toolkit/themes/pinstripe/global/media/videocontrols.css
toolkit/themes/winstripe/global/media/videocontrols.css
--- a/toolkit/themes/pinstripe/global/media/videocontrols.css
+++ b/toolkit/themes/pinstripe/global/media/videocontrols.css
@@ -17,16 +17,29 @@
   background-repeat: no-repeat;
   background-position: center;
   -moz-appearance: none;   /* Remove the native button appearance and styling */
   margin: 0;
   padding: 0;
   min-height: 28px;
   min-width: 28px;
   border: none;
+  opacity: 0.7;
+}
+
+.playButton:hover,
+.muteButton:hover,
+.fullscreenButton:hover {
+  opacity: 1;
+}
+
+.playButton:hover:active,
+.muteButton:hover:active,
+.fullscreenButton:hover:active {
+  opacity: 0.4;
 }
 
 .playButton {
   background-image: url(chrome://global/skin/media/pauseButton.png);
   margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
   position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
 }
 
--- a/toolkit/themes/winstripe/global/media/videocontrols.css
+++ b/toolkit/themes/winstripe/global/media/videocontrols.css
@@ -17,16 +17,29 @@
   background-repeat: no-repeat;
   background-position: center;
   -moz-appearance: none;   /* Remove the native button appearance and styling */
   margin: 0;
   padding: 0;
   min-height: 28px;
   min-width: 28px;
   border: none;
+  opacity: 0.7;
+}
+
+.playButton:hover,
+.muteButton:hover,
+.fullscreenButton:hover {
+  opacity: 1;
+}
+
+.playButton:hover:active,
+.muteButton:hover:active,
+.fullscreenButton:hover:active {
+  opacity: 0.4;
 }
 
 .playButton {
   background-image: url(chrome://global/skin/media/pauseButton.png);
   margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
   position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
 }