Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-11 08:13:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 809278 - Remove duplication in videocontrols.css button styles. r=dao

Browse Source
This commit is contained in:
Jared Wein 2013-01-08 11:38:00 -05:00
parent b7cefa18f3
commit 88de5f4e2b
2 changed files with 51 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
toolkit/themes/pinstripe/global/media/videocontrols.css
View File

@ -10,41 +10,13 @@
background-color: rgba(35,31,32,.74);
}
.playButton {
background: url(chrome://global/skin/media/pauseButton.png) no-repeat center;
/* Remove the native button appearance and styling */
-moz-appearance: none;
margin: 0;
padding: 0;
min-height: 28px;
min-width: 28px;
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. */
}
.playButton[paused] {
background: url(chrome://global/skin/media/playButton.png) no-repeat center;
}
.muteButton {
background: url(chrome://global/skin/media/muteButton.png) no-repeat center;
/* Remove the native button appearance and styling */
-moz-appearance: none;
margin: 0;
padding: 0;
min-height: 28px;
min-width: 33px;
}
.muteButton[muted] {
background: url(chrome://global/skin/media/unmuteButton.png) no-repeat center;
}
.muteButton[noAudio] {
background: url(chrome://global/skin/media/noAudio.png) no-repeat center;
}
.playButton,
.muteButton,
.fullscreenButton {
background: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0) no-repeat center;
-moz-appearance: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
-moz-appearance: none; /* Remove the native button appearance and styling */
margin: 0;
padding: 0;
min-height: 28px;
@ -52,6 +24,32 @@
border: none;
}
.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. */
}
.playButton[paused] {
background-image: url(chrome://global/skin/media/playButton.png);
}
.muteButton {
background-image: url(chrome://global/skin/media/muteButton.png);
min-width: 33px;
}
.muteButton[muted] {
background-image: url(chrome://global/skin/media/unmuteButton.png);
}
.muteButton[noAudio] {
background-image: url(chrome://global/skin/media/noAudio.png);
}
.fullscreenButton {
background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
}
.fullscreenButton[fullscreened] {
background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);
}
@ -168,7 +166,7 @@
}
.timeThumb[showhours="true"] {
background: url(chrome://global/skin/media/scrubberThumbWide.png) no-repeat center;
background-image: url(chrome://global/skin/media/scrubberThumbWide.png);
}
.timeLabel {

40
toolkit/themes/winstripe/global/media/videocontrols.css
View File

@ -10,48 +10,44 @@
background-color: rgba(35,31,32,.74);
}
.playButton {
background: url(chrome://global/skin/media/pauseButton.png) no-repeat center;
/* Remove the native button appearance and styling */
-moz-appearance: none;
.playButton,
.muteButton,
.fullscreenButton {
background-color: transparent;
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;
}
.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. */
}
.playButton[paused] {
background: url(chrome://global/skin/media/playButton.png) no-repeat center;
background-image: url(chrome://global/skin/media/playButton.png);
}
.muteButton {
background: url(chrome://global/skin/media/muteButton.png) no-repeat center;
/* Remove the native button appearance and styling */
-moz-appearance: none;
margin: 0;
padding: 0;
min-height: 28px;
background-image: url(chrome://global/skin/media/muteButton.png);
min-width: 33px;
border: none;
}
.muteButton[muted] {
background: url(chrome://global/skin/media/unmuteButton.png) no-repeat center;
background-image: url(chrome://global/skin/media/unmuteButton.png);
}
.muteButton[noAudio] {
background: url(chrome://global/skin/media/noAudio.png) no-repeat center;
background-image: url(chrome://global/skin/media/noAudio.png);
}
.fullscreenButton {
background: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0) no-repeat center;
-moz-appearance: none;
margin: 0;
padding: 0;
min-height: 28px;
min-width: 28px;
border: none;
background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
}
.fullscreenButton[fullscreened] {
@ -176,7 +172,7 @@
}
.timeThumb[showhours="true"] {
background: url(chrome://global/skin/media/scrubberThumbWide.png) no-repeat center;
background-image: url(chrome://global/skin/media/scrubberThumbWide.png);
}
.timeLabel {