Firefox (Open) Media Player Control Skins

Inspired by the need for larger media player controls that are displayed on the media player for open media (audio and video) now supported by Firefox 3.5 (awesome isn't it), I created what I call a large, high visibility skin. While it's true that one can use full page zoom to enlarge the size of a video (now you know), they may not always want to enlarge the whole video so the Hi-Vis-Light skin allows me (and hopefully others) to see the media controls at even small media window sizes including and especially the time and duration labels.

After I discovered how easy that it was to edit the videocontrols.css (though very time consuming), I decided to create a few more skins for the media player controls. I have others in the works including more colorful ones and a Hi-Vis Black one, and I'm sure that once it gets out that this is a piece of cake to do (or pie, whatever you prefer), there will be quite a number of new media player control skins being created including by those that will feel the need to create stupid ones that emulates Windows Media Player (etc) which of course goes against the grain of the open media concept itself, but hey, whatever blows your dress up.
Enough yapping. Let's get to the goods.

You can copy and paste the coding for the desired skin into your userChrome.css, or create a new style in Stylish (also get Stylish-Custom, it rocks!).
Whatever skin you go with, it will be applied to both video and audio controls and they scale surprisingly well when using full page zoom or the super cool and new Full Screen Video add-on.
Download all 3 skins, get each skin's CSS below, or install from userstyles.org

Default Controls

Firefox 3.5 open media player controls

Hi-Vis-Light Controls

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* Original videocontrols.css by Mozilla. Skins by Ken Saunders - www.AccessFirefox.org */ .controlBar { height: 28px!important; background-color: #E9E9E9 !important; border: 1px #999999 dotted !important; } .playButton { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAYAAACGVs+MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwEyNQFqh6QAAARxSURBVFhHjZfZS2tXFMa9t1UQWkRBJc6zcYjGxDGamMF5nud5iEP0UkEvFt9EFBSkQhWpIGyLUPs39N724XJtKX3wrXDf+lcUiq5+K9Q0OTk728D3cla+vX77OznrZL+KCv+kFRYWOqKjo1+hRNry09PT56j99fDw8EtQLToxMdERHx//xePj45PW81lU1Gt8/vnz06f3qP2t0/P/S1VVVZcrKyu0tLREi4uLYXq+fnFxYXl2obltaHCQlpeXaWF+PlwLC+RFzefzfROxORedTuftxsaGH2BZR3x9w+eju7u7vufFDAaDZ25ujlZXV/0QeuLa3t7eR6KwUEOZHA6HWMOXdXfy3+5WkdAPt7ddz87U1FTX1OQkLSExmY9rX+/uvlcC2O12seL10tzsrFQc560GYGJ83N9c5uPa7tu3aoD6+nrBMc9MT0vFu9ECjI2O+pvLfFzb2dlRA9hsNjEPWo5UJt7Nzc1N4BYkJye7RoaH/c1lHq5tb2+rAWpra8UsaMcRqUxc1wIM4imYBLTMw7WtrS01QE1NjZgG7SgilYnrWoD+/n5/c5mHa1+9eaMGwBwQExMTNDQ0JBXXr6+vQ25Bb28vjYyMSD1c29zcfAGA1Sr4BzWAHcnEdS1Ad1cX8TCSeQYHBmh9fV0NYLFYBO+edyTTMH5wV1dXIQl0dHQQ3waZp6+vj9bW1tQAZrNZ8EJd2JFMA9hNMEBCQoKrtbWVenp6pJ7u7m7yer1qgPLycsELtbe3S8W7vLy8DCTAAE1NTdTZ2Sn1cEKYL2oAk8kkeKGWlhapOBktgMvlora2NqmHE8L8UAMUFxcLXsjj8UjF6Zyfn4ck0NjYSM3NzRF9MzMzLwAwGkUz4nQ5nVK1Ip0QgLg4l72hgTxud0Tf1NSUGgB/RoQbcTrsdqmakM7Z2VkggTgA2OrqyIkUIvkwP9QA+fn5guPES0kqvt9aAExQakAKkXxjY2NqgLy8PMEL4Z0gFf4z0OnpaUgClVYr1UXw1AIQ80MNkJOTI+oQJ0ayVLxLLYClooKqq6ulnsrKSsL8UANkZmYKbo6JKBWnc3JyEpIA5gdZkYLMVwFADDg1QHp6urCiuRkL6okbVQMwGCA2NtZlKi2lCrNZ7isr40mpBkhLSxMYx4SBpKtSNOKdHh0dBRJgAMwPKkOTSD4MsBcApKSIMjQvwYJ6Ki4q8u9UC2AsLKTSkpKIPoxjNUCKwSBKsJDRaNQV5oR/p1oAPL5UBDiZr6CggNrb2tQA+H8neCE26Ikb8W04ODgIuQV4fInhZD6u4/3yMgBeiA16ys3NJb7fWgA8vsRwMh/X8a5QA+CY9T0vwgY9ZWdn+2Pe39/vfD6YxMTEuLOysojhZL4s+PCCe6c8mCQlJYlcNM/MyCDMhDBlpKf7d3p8fDwUBODk7zKEnoev4fREbrf7dwC8jng+RAImnA1+BO3PMPykFU5O73Bu+HB/f18ftNCXeDq+xQj/A/oNkzJUNtuvOHM+HB4efgcAPnUHPv8CaizL2lVk0KoAAAAASUVORK5CYII=') no-repeat center!important; /* Remove the native button appearance and styling */ -moz-appearance: none!important; margin-left: 2px!important; margin-right: -20px!important; padding: 0px!important; min-height: 28px!important; min-width: 28px!important; border: none!important; position: relative!important; /* Trick to work around negative margin interfering with clicking on the button. */ } .playButton[paused="true"] { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwE2J5a/M+gAAAOXSURBVFhHvVdJTFNRFNVoYmLEENMEJJUZCpWhzNDS0jJ0gDJDoRQKlBmasFFYkBhjHhtRI91pwgJMXIExLmVFTDBhoXFBojuCG911g24I13N/+NHIUCi/bXLy0+a/e8497917+y5dOvzEx8dnZWRk6OXvUX/q9frHoyMj5Ha7n2VnZ8dFXYDJZJr3+/3kn5qigYGB762trZMQcSVqQoxGoxgbG6PBwUEaHR2l8fFx8ng8H+vr621REWEwGAQTI3sa6O+XnmP47oOgrq6uVxUVFZqICmEBw8PD5PV6/6KvTxLDwnp7e4PYlocxMTE3IyIEGQqfz8dER+HxUD+EDA0NUXd391dsS6/iIsrKygRn2+N2nwoWwi61t7e/N5vNypVtSUmJ6IPl2O+QgAvUDxEul2u/sbHxhVarvXNhR1hAT08PdXZ2ng0dHZLQPmwZ3Phhs9nuQcS1sIUUFRUJDtjW1nZuwAlyw5WmpqbPVVVVzWGJKCgoEJx9S0vL+dHcLK1xYT0n4HA43iIh3bmE5OfnC16MPb0Q4AJ1YHucTuevmpqahdTUVNWZhOTl5YlmZIISUwScSCtcsdtsO5WVlcMQcflUITk5OaLR6eQFisLZ0MBuENz4gINefaIIlJJw2O1UV1urPOrqJFeteGLqLqekpBwt26ysLGG1Wqm6ujoisFgsZDIapYM6Pz8fOOJEZmamgE2EMlIcBr2eLGYzD7a95eXlpwcHBwnHCkBrJRwYxYD5QoxOVMXCwsKbvb29whPPQHp6umCL9FhwISDb8vJyKi4uJjvO1MzMzKetra22kKWIehVsFYZS+CgtJTQ0yUGM9p+rq6v3Yff1kOT8QnJysmByVh4OdDodoftxJ9wPBAIvQZx6JmL5pcTERMHEnMFZUVhYSOighB5CXEFzc3Pru7u7xnMRyy+r1WohB+SgoYDOSShdrmuamJj4tr6+7iWisLilReqEBKEDcS6yCQWNRiMJxPAKLi0tPYLdt8JnPlyZAAG5ubmEjngs7uJ39ArSAJj9JIR4DWLthYnlALgZCSZhW/8HE6N9SnZPT09vbm9v2xUjlgPFxcUJJmYyGbiqUVJSErEzuCPsrK2tTWKfrypOzgFZABOjIUlAVVBaWhoPkd+Li4vPYfftiBDLQVUqlZAzRkUQ7gk0Ozv7LhgMFkeU+B8BT9huLi/8//+ysbHhigqxTBIbG2uE3ZsrKysPYPeNaJH/AVYHb/UqnA8GAAAAAElFTkSuQmCC') no-repeat center!important; } .muteButton { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwILOHMZyPoAAALWSURBVDhPnZTPT9JxGMerg7aSQy6T4agocjJhCBgCAooIDFB+M34JiA5ZAoF5bauZtjlrDa95Y3Xqb+jopYNbxw6tWLZ1aevSt05P7werwTKGfrf3vt/Ph8/n9Tzvz/N8OHPmhI9MJrsSiURsJ9x2/PLBwcGBRDx+UFhZoVqtJrLb7YZoNJo7FVwqlYpj0ehBsVikpaWln3t7e33BYPBhtVqlXC6nPxEUNqXI5G2hUKBsNkuLi4tCvV4XeTyeYLlU4nG9a6BCoZBHwuF3y8vLlEomaSGVovTCglDb2ro8Pj4uS6fTPD4sl8s9x0HPY7L3t3q0Wq0+EAg0spkMxWKxpuLxOCUSCWFzc1OCdWdDodBnhsK2ohV4zuFw1PHjR7/P98F3pPd+v/8HA8KhEIXD4aZQYYJ9YX19/SoD5ufnX/MxJJNJXyvwosft/soZ/NnIbxw6IQAB/FfImOeFSqVyjQEup/M5LFM8Gi23AZFhA1mR1+vtqLm5OUJWQqlUus6AqampB5wIgmy0AW02W8PtdpPT6ewol8tFkIAi3GCA0Wi803Ti9z9pA5rN5oZjdpZmbLaOss/MECSsrq7eZIBep1thV8h8tw2ISI3p6WmyWCwdZbVaCTaFfD7fzFCrVldwjgR3T1uBfeipT+bJSTIaDB1lMhpp0mQS0CYyBqjV6secNWrwqBXYq9FovphMJjJMTBwJ4Am8Eegf6fV6Aa3SrLJKpXpphSuc6922xkYTe2G7BsguCwGeYe4VRJqxMRprEeYE9KKUAaOjo284OM4x0Ab830CpVG4wTKVUEr6bgk0hlUqJsecCruY3HYLiPiu7AvKikZGR+8iEsJnwzVBhbW3tUn9/v47n4OZwf3+fr233z/DwcJVheDP0+/b2dp9EIskzEJV/0T2pZSX+xoq35HKSQ7gpIrFYfI+LhmtoORWQNw0NDZVxpo2dnZ0BDEWZTOZ2K+wXQOZxwo5FlBYAAAAASUVORK5CYII=') no-repeat center!important; /* Remove the native button appearance and styling */ -moz-appearance: none!important; margin: 0px!important; padding: 0px!important; min-height: 28px!important; min-width: 33px!important; border: none!important; } .muteButton[muted="true"] { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwIKGSZr6eUAAAHISURBVDhPpZRdS8JQGIC9iSB2EQiB14KKH/g5Nc38nulwblPnVyi2VNCB+j+Cor/Qz4gugnVT0E33If2FfsDbewxDEzaZg4ednY/nvOc958xkMv5Qoigyxodvjjyq1+uPymQCs9nMua+UqlarT5PxGIbDIUyn06hhIUVRxzVRfB6NRtDr9eCq34f5fE4bEprN5hNBEF6vZRk6nQ5cIt1uFxRF2Ul4iLOuOPD7/Q6O4z5IVI1GY0mz2YR2uw0YrbaQYZgb3L1FheMWKCF8ViqV7xYKMHcbSJIEsixrC8vl8juZfX2wKAiA0i1wYn3hRaGgksEsy+qC0ZM8akeYzWbVUqkEuHRdisUitFotbWEymVSZfB4y6bQu+VwOarWatjAWi6lplCUSCV1SqRTwPK8tDIfDL2fxOJxGo7qQfjzLagsDgcBbHDtGI5FfUBzBNx0KQegfpB43T1vo8/nOcdl32PmeEAwGb/FgPyBAwPY/sI1s3E43Zet6ut1uxev1gsfjASwvId+ZTMaYkMxgt9uHLpcLnE4nOBwOIOW9hERqtVovUQw2m20pxdNgPMJVHlAqIUspTdPG/4fribVYLBLm8GswGLjX638Aic4WrMAJeqkAAAAASUVORK5CYII=') no-repeat center!important; } .volumeStack { width: 26px!important; height: 70px!important; background-color: #E9E9E9 !important; /* use negative margin to place stack over the mute button to its left. */ margin: -100px -1px 34px -25px!important; overflow: hidden!important; /* crop it when sliding down, don't grow the control bar */ position: relative!important; /* Trick to work around negative margin interfering with dragging the thumb. */ padding-top: 4px!important; padding-bottom: 7px!important; -moz-border-radius: 0px!important; border-left: 1px dotted #999999 !important; border-top: 1px dotted #999999 !important; border-right: 1px #999999 dotted !important; } .volumeControl { min-height: 64px!important; } /* .scale-thumb is an element inside the <scale> implementation. */ .volumeControl .scale-thumb { /* Override the default thumb appearance with a custom image. */ -moz-appearance: none!important; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAASdAAAEnQB3mYfeAAAAAd0SU1FB9kGFwQ5AlzoOYsAAAGdSURBVEhLrZJLTgJBEIbF6MIjEB6BQCAzMgQIbwIY3nF0CAIjDCIMgYQV4jH0MBg3Jt6kXLrxCi7LassblJ186erFfPV3TXuOeJ3+gX9nyeahj7+V4GQ4HL4uFouPmeOAlJXrQr/ff1LiM5J9Pux2uN1uxTzu9zgajd5+xbZtw2azweVyKUaFGwwGh18xdYDVaoXz+VzMZr1Gy7JYTB2AZoyO44hxXRevTZPF1AHuZjO8tW0x93TrXq/HYtM0YTKZ4PDmRowznWK73WZxt9sFenJIz0TMeDzGZrPJ4larBX3LQkouhv4X1mo1Fl/U62BeXmK30xFzfXWFlUqFxVRAh6SNRkMMjRWLhQKLi8UiKCldQQzNF7PZLIupgGq1iuVyWUydwqXTaRanUikolUqYz+fFqHCGYbDYSCQgl8thJpMRo8Lpus5iXdOA4mMymRSjwsXjcRbHYjGg1Hiu62KShoHRaJTFkUgENE1TncTQGDAcDrM4FAoBpVadxKhwwWCQxVR8/afY7/e/K/Gx1+t9psOLz+c7SFGeQCCw/wFvUPjocm+LswAAAABJRU5ErkJggg==') no-repeat center!important; min-width: 22px!important; min-height: 14px!important; -moz-border-radius: 8px!important; } .volumeBackgroundBar { /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */ margin: 0px 8px 0px 8px!important; background-color: #B9B9B9 !important; -moz-border-radius: 8px!important; } .durationBox { -moz-box-pack: center!important; } .durationLabel { margin-left: -22px!important; /* 1/2 of scrubber thumb width, for overhang. */ padding-left: 10px!important; /* don't bump into the scrubber bar */ padding-top: 0px!important; /* center vertically with scrubber bar */ color: #000000!important; font-size: 24px !important; text-shadow: 0px 0px 0px black, 0px 2px 3px !important; font-family: Arial, sans-serif !important; } .backgroundBar { /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ margin: 10px 22px 10px 22px!important; background-color: #7C7C7C !important; -moz-border-radius: 4px 4px!important; } .bufferBar, .progressBar { /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ margin: 10px 22px 10px 22px!important; -moz-appearance: none!important; border: none!important; background-color: transparent!important; min-width: 0px!important; min-height: 14px !important; } /* .progress-bar is an element inside the <progressmeter> implementation. */ .bufferBar .progress-bar { /* * Note that this is drawn on top of the .backgroundBar. So although this * has the same background-color specified, the semitransparent * compositing gives it a different visual appearance. */ background-color: #C0C0C0 !important; -moz-border-radius: 0px!important; border: 3px #C0C0C0 solid !important; -moz-border-radius: 4px 4px !important; -moz-appearance: none!important; } .progressBar .progress-bar { background-color: #000000 !important; border: 3px #C0C0C0 solid !important; -moz-border-radius: 0px!important; -moz-appearance: none!important; } /* .scale-slider is an element inside the <scale> implementation. */ .scrubber .scale-slider, .volumeControl .scale-slider { /* Hide the default horizontal bar. */ -moz-appearance: none!important; background: none!important; margin: 0!important; } .scrubber .scale-slider { /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ margin-top: -10px!important; margin-bottom: 10px!important; } /* .scale-thumb is an element inside the <scale> implementation. */ .scrubber .scale-thumb { /* Override the default thumb appearance with a custom image. */ -moz-appearance: none!important; background: transparent!important; border: none!important; } .timeThumb { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAcCAYAAAAX4C3rAAAAB3RJTUUH2QYXAi0go6vTiAAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAACYSURBVHja7dc9DoAgDAbQ1jCwQeJdvKfH8EqsXgAOoAjRSePPUNOS9EtKB5LmQVhAAMjQQExdYozcjsd476HjRnyNQhUqPQpVqPQoVKHSo1CFSo+hGOKcu91LKZFAm7lRBILPXc73IxCR+4wXrC215j21W27TEzYc0EA9m/qNTqcuM+Umh1JL7dyWN2hfaq6d2/IFO/4xdwPj50IVHT03dgAAAABJRU5ErkJggg==') no-repeat center!important; min-width: 42px!important; min-height: 28px!important; margin-right: 8px!important; margin-left: 8px!important; -moz-box-pack: center!important; } .timeThumb[showhours="true"] { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAgCAYAAAC2COBlAAAAB3RJTUUH2QYXAhoda8Q/rQAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAChSURBVHja7ZPBCYNAEEXVFmIHWohgW3PcBtJGLlYg2IQ37SA5pAHND+xBvO8uf/gPPh/mMvMWtqocU5vZWfqIVDSlD5Cc5CTnB8mxIjlWJMeK5FiRHCuSY0VyrEiOlTr1AjP7P+CMDJfxgowhhINaLgp2qO0y6iG2p96bRS4KvlEP5AOxNsfOnH9uurUruRdyxnYntyLf2P7Av3uWvkEw8APB+Br5jrZwkQAAAABJRU5ErkJggg==') no-repeat center!important; } .timeLabel { color: #000000 !important; font-size: 18px !important; font-family: Arial, sans-serif!important; text-shadow: 0px 0px 0px black, 0px 1px 1px !important; padding-top: 0px!important; } .statusOverlay { background-color: rgba(0,0,0,0.55)!important; } .statusIcon { margin-bottom: 28px!important; /* same height as .controlBar, to keep icon centered above it */ width: 36px!important; height: 36px!important; } .statusIcon[type="throbber"] { background: url(chrome://global/skin/media/throbber.png) no-repeat center!important; } .statusIcon[type="error"] { background: url(chrome://global/skin/media/error.png) no-repeat center!important; }

Black-Gloss Controls

Update:
The time duration label text (large 2:51 in the screen shot)
has been changed from 16px to 12px.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* Original videocontrols.css by Mozilla. Skins by Ken Saunders - www.AccessFirefox.org */ .controlBar { height: 28px!important; background-color: #FFFFFF !important; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAIAAACcd2qBAAAAB3RJTUUH2QYYBRI2Uo1KNgAAAAlwSFlzAAALEQAACxEBf2RfkQAAAARnQU1BAACxjwv8YQUAAABJSURBVHja7c25CQAxDARAG67/RgUK9CAEClzBpd7AOw3MWiBbVSHxNzOYuLsfi6uK8Z04Mxnfid0dE0cEJjYzTCwikJiIiOjXAb6LKGJqQ2VSAAAAAElFTkSuQmCC') !important; } .playButton { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAB3RJTUUH2QYYABwdZnlcEwAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAEySURBVHja7ZUxS8NQFIUTqVFKBZUsmroUMomD1FBcdfYn+Ov8CZ07l1KdWrFWcKgKJYNTGzWBpueWWyiPl8ReMr4DH/f1nvQebmgayzIyMlJk/+OafVADe/z5D8xADJwM71caSGGNx17nebN51bq9QPkEdXiDdT/FuKB1c47je1ZopSCwCgLfv1T7Td6wqfECMJUG0q3yDo4O1f4ZGFLVeN7GLd46kOQskoXa2wU7VDWekzesKJCG2h+Tia6/QuPZ7Ik3tF7HY5EnDpyGocgTB85n9GjZGd68/ECvfprjnZQf6LquyJME0m8+jaIfXX+FxkvZE28Yj0Yvai/hoYnGi/OGFf2XHoM7cA987r2BB9AF1xleG3xLNoxAn88e1y/wBEKuqtfn74k2JJX6ejIy2lpLIjlhCqFw9wkAAAAASUVORK5CYII=') no-repeat center!important; /* Remove the native button appearance and styling */ -moz-appearance: none!important; margin: 0px!important; padding: 0px!important; min-height: 28px!important; min-width: 28px!important; border: none!important; margin-right: -22px!important; /* 1/2 of scrubber thumb width, for overhang. */ position: relative!important; /* Trick to work around negative margin interfering with clicking on the button. */ } .playButton[paused="true"] { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAB3RJTUUH2QYYABkClgalowAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAIeSURBVHjaY2AYBSMFMEExxYCRgDwL1CIWKP8PEP9DwlS1EGQJBxBzATEnVOwXEH8H4h9QNsmWMuORYwNifiCWAmI5IJYAYj4gZgXi/1AMs/A/pRaCgpEbaona/j0bF378+In9xs3bbFBxJjRL/5FiKa7gFANiOyAu+fju3X8Qnj1z5j0JCYn5IDEg9gdiAyCWBGIeBkQ8k20hyCAPIO769x8BHz95/DM4OPgoULwbiJOgjlIGYgFoNJBtoTTUF9P+/PrzHx2vWb3mpaSE5BKgfCHUYaoMkDjG61N8ccgDtVQtMT7B+NPHjwzIWEpSkjs8PEL7y5cvXJcuXXoDVPcVin8yQLIPTp8QAkw3b93C6eDoqGh7M1Mz6d6+3qYHDx88A4p9hDoYa5YhKqJfvHqFV/7t+3cMf/7+IcYooiz89/XLFwZsZcSPHz/+bty04cihQwc3ALmPgPgbA6I0IstCUN76Ky0jhSFx4sSJVzNnztz9/v37s0DuDSAGBednBjzxR8hCkCtBCeCLiIgIXPDNmze/JkyYcObAgQPHgNzrQHwHiJ+CQpYBUuSRbeFfaBC9+vbtO1hg376992fPnn3w7du3V4Hc20D8EIhfQn1G0DJ8FoJ8Byqc3wHxg/Pnz73fsGHD1uPHj1+B+uYBED8H4vdQRxFdkOOrLUA1hSADpDwVhTruKzTo3iL5iqSqiu7VE90rYGIB1ZoYo2DoAwCdWu2IZ0pxLAAAAABJRU5ErkJggg==) no-repeat center!important; } .muteButton { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAcCAYAAADvANYcAAAAB3RJTUUH2QYYACI0ZQ7fAgAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAALvSURBVHjaY2AYBaMAFTBTwQwmqDmMA+UIViDmA2IhIGYD4j9A/I+ejgA5YPGiBdNyJCXFOU+fOf8OyP8KxL+goQLC/4kxiIkMyxlhDpg0sT/cwzPA/MOHbzpAvhwQcwMxDxALA7EAEHOQaQdOx4IsZodatHLu7Ln/f//8DcbBQcGHgGLJQNx+6MChifr6+qFAtgsQq0EdRbFDQAbwArE8EGsD8eZ58+f9/4cE/f39zwHF+x0cHMD8z18+/4qLi1sLFEsCYi2ow3EmXBYiHNE4f/4Ct+/fvvF+/vxZRFlZWdTPz5/hz6+/cAX//v0DOVTN1tYOLM7OysHa3zfB/+nTp2x79+79AZT7AsQ/GSAJlyxH1Dg7OKIIvHj2DIX/4/sPkC/3TJ8+jVGAj88zNAQUGwzMBXn5dkBHXAWybwPxa0ocwfDgwQO88t++fQNRX9+8eZNXXFqymIWF1cLQwICBn48flH2lGCCJFGdOJMoRz1+9wiv/89dPGBPk00NHjh21kJCSgomxQe2hKE0wfP70Ga/8n9/wUAb51k5BXgFZzy+o43CWGUQ54tfPn3jlgQkTRIESZ6m3l4+FooIiWM/Dhw8/gQISiD8A8V9c+olxRMu1G9fcvn//LvTv318FOzt7Fm5ubhQFbOygEGeIz8rKtgBmU7j4tBnTjgOpK0AMis/flDiifsqUyV0MkFLQ9OjRowv6+/u5eHh44Ao4ODhAQXHx8uVLFuHhYQxAB/9ZuXLlkStXLm8Eil8C4rf4QoJYACsxQcWwnYaGxqvVq9f8P3LkKBjb29uDfJwCxIvmzZu/0cbGNgPI9mGAFG78DNSprTEcJM3Ly3tz4sRJ/zdv3vLfyclpHVAsnAFSqoJqVFDWEANiLgYiimxyXAhK5V9+/fq1+siRww7y8nI/nj9/vu/u3btnGSCJEJQtQLUpqPD4zUBETUp2QwSqF5Qi+aE+/g7EHxkgxTNRVTg1HAHTzwTFIIv/kuqAUTAKBi0AANH8DPqjZKQNAAAAAElFTkSuQmCC') no-repeat center!important; /* Remove the native button appearance and styling */ -moz-appearance: none!important; margin: 0px!important; padding: 0px!important; min-height: 28px!important; min-width: 33px!important; border: none!important; } .muteButton[muted="true"] { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAcCAYAAADvANYcAAAAB3RJTUUH2QYYACU0Kk9JxQAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAIQSURBVHjaY2AYBaMAFTBTwQwmqDmM5BpAtkYgYAdiESSPfAfiT0D8C4j/0yMkOIBYF4h9lyycUSsiKsx39tzFN0D+FyD+SaojmMhwACcQ6wFx4vx5c8rcPPwsP336rg3ky0IdR3LospDgWBaoA3SAOHbJoiUx4eHh3CDJX7/+SAEpPnJDlpAjWIFYCIj5obQSEHsvWbokMCoqihOm6M/fPzxIZlE9JEAJL2DB/IXxX75+Efj29auAqqqakLe3N+ufX3/hiv79+wezmKyETowj/J0cHMyRBV88e4ai6OePn+TYTZQjQL4CRYfogwcP8Bry7ds3RnJDgZiQABv+/NUrvIp+/KRdSIAAKL////zpM15Ff/78oZkjQA74DcSvfxHw6f9//0gqnEgNCVApuPHajWuC379/E2ZkZBKztrbm5ebmRlHExs4GczTNHLFuypTJ+4C0NBBbHD9+LKa7u1sD6BB4QmRnZ4c5gCyHECq2QdHxEojvAPExIF5y9erV7srKytNv3rz9x8zMwgDBzKD4ghUcJDuE2GIWZDAo9YFS6OOXL18+3LVrp4COjq4sGxsby4kTx88Ds/FZoNxDBkglRtNaFGQ4qMp+9uPHj6dHjx79ICcnK/rs2bOD9+7dOw0Nte+kOoLcAgakjwuIRRkg6eofEH8F4o8MZFTllDRqQIAJagYT1OK/pDpgFIyCQQsAKuaq5hwIqRYAAAAASUVORK5CYII=') no-repeat center!important; } .volumeStack { width: 28px!important; height: 70px!important; background-color: transparent !important; /* use negative margin to place stack over the mute button to its left. */ margin: -70px 3px 28px -31px!important; overflow: hidden!important; /* crop it when sliding down, don't grow the control bar */ position: relative!important; /* Trick to work around negative margin interfering with dragging the thumb. */ padding-top: 6px!important; } .volumeControl { min-height: 64px!important; } /* .scale-thumb is an element inside the <scale> implementation. */ .volumeControl .scale-thumb { /* Override the default thumb appearance with a custom image. */ -moz-appearance: none!important; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAAAB3RJTUUH2QYYBTM4Oapy0gAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAACfSURBVHjaY2CgEWgA4vtA/J8Avg9VixXMb2ho+H///v3/hABIDUgtSA9MMyOUTujo6JgfFBREkvPXrVvHUFFRkQhkLgAb5OXl9TI7O1uMnLCYOnXqq23btomzgDja2tpit2/fJitQQXqBBjGADfr27RsDuQbBANggSg2hqkEwcJ6BcNrBhc8jG5RAgUEJ6K6aT4Yh8xlwgAIGKmSRYQYAw0qOrQQK104AAAAASUVORK5CYII=') no-repeat center!important; border: none!important; min-width: 18px!important; min-height: 16px!important; } .volumeBackgroundBar { /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */ margin: 0px 10px 0px 10px!important; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAACWCAYAAADjY8m4AAAAB3RJTUUH2QYYADoGL8IW2wAAAAlwSFlzAACZogAAmaIBqhLIugAAAARnQU1BAACxjwv8YQUAAABtSURBVHja7dCxCYAwEEbhPw6httoprmRWDiJGHCIzRLCy0SAiAXlXXPU4Ps5I6rbV+aYdNDmnefGq6lIhBFk79oUuJx77JtDrwJyDmMfwDJnpUSBBggQJEiRIkCBBggT5J2TSkLwAEiRIkF8jdxWfLVTzUyLfAAAAAElFTkSuQmCC')!important; background-color: rgba(255,255,255,10)!important; -moz-border-radius: 4px 4px 0px 0px !important; } .durationBox { -moz-box-pack: center!important; } .durationLabel { margin-left: -22px!important; /* 1/2 of scrubber thumb width, for overhang. */ padding-left: 8px!important; /* don't bump into the scrubber bar */ padding-top: 0px!important; /* center vertically with scrubber bar */ color: #FFFFFF !important; font-size: 12px!important; text-shadow: 0px -2px 0.5px black!important; font-family: Arial, sans-serif!important; } .backgroundBar { /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ margin: 9px 22px 9px 22px!important; background-color: #C7C7C7 !important; -moz-border-radius: 4px 4px!important; border-top: 1px solid #000000 !important; border-bottom: 1px solid #FFFFFF !important; border-right: 1px solid #FFFFFF !important; border-left: 1px solid #000000 !important; } .bufferBar, .progressBar { /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ margin: 9px 22px 9px 22px!important; -moz-appearance: none!important; border: none!important; background-color: transparent!important; min-width: 0px!important; min-height: 0px!important; } /* .progress-bar is an element inside the <progressmeter> implementation. */ .bufferBar .progress-bar { /* * Note that this is drawn on top of the .backgroundBar. So although this * has the same background-color specified, the semitransparent * compositing gives it a different visual appearance. */ background-color: #000000 !important; -moz-border-radius: 4px 4px!important; -moz-appearance: none!important; border-top: 1px solid #000000 !important; border-bottom: 1px solid #FFFFFF !important; border-right: 1px solid #FFFFFF !important; border-left: 1px solid #000000 !important; } .progressBar .progress-bar { background-color: #747474 !important; -moz-border-radius: 4px 0px 0px 4px!important; -moz-appearance: none!important; border-top: 1px solid #000000 !important; border-bottom: 1px solid #FFFFFF !important; border-right: 1px solid #FFFFFF !important; border-left: 1px solid #000000 !important; } /* .scale-slider is an element inside the <scale> implementation. */ .scrubber .scale-slider, .volumeControl .scale-slider { /* Hide the default horizontal bar. */ -moz-appearance: none!important; background: none!important; margin: 0!important; } .scrubber .scale-slider { /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ margin-top: -10px!important; margin-bottom: 10px!important; } /* .scale-thumb is an element inside the <scale> implementation. */ .scrubber .scale-thumb { /* Override the default thumb appearance with a custom image. */ -moz-appearance: none!important; background: transparent!important; border: none!important; } .timeThumb { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAgCAYAAAB+ZAqzAAAAB3RJTUUH2QYYBSk5/oC4nwAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAJ4SURBVHja7ZbPixJhGMefcUbdUKRYJBQWhCCMJDwFBrGKYwgd+we6eAoEDx0KpMK2PRRrCZ08d+8SCCp6aqGTG0LQYVdYVpFhKVylzZlxel59NRmcdtymmYX2Cx/G98e878eZed8ZgPMsF0ZHHxa5jESQJD1eRC4gdtou07GUubKI/EC+I9tIiR67tP2vxCJ2u/1lIBC4yvP8pWQyyYbDYcbtdoPD4QCWZcFms8FoNAKGYUBRlFlZlmUYDofQ7/eh0WgopVJJrlQq31qt1ldRFB9SyaXFbiGbiUQinM1mPT6fD1wuF3AcN5YZn8j8PpUITcXU9SREUpIkGAwG0Ol0IJfL9crlcgObHiEf9Yo9icfjD9LptNfv94PH4xlfBaNCrmav14N2uw2FQkGoVqtvsfrZSWJPM5nM42g0avd6vYYKLRIUBAHq9bqYz+dfkLm1xG6kUqlPsVjMSZ4hs0KewVqt9rNYLN7E4udpPTf9EQqFXgWDQSfpSDAzZF4yf7PZvLNILELuvdlSJOS2kvlRbFY3E8PVxJIVY1XI/PPlmRiukl3cEq5bJYZbye5CsW63u4Gr8B0zvxGZFNzvFLydG1rtTkSAyWvFbAQ6v2YSiGSylETnPTH3kD2TpPbofLqzjjxH9v+R0D4df30ZqWnIJw2PbCIHBgkd0PF4Or5m9KxAjg50DYkjd0/xJz8gVeQLUoHJc2Vo1pDXyJHOK3RE+68ZLaKV+zD50PuT1DbtZ3quIDsaUju03bLcRo5VUse03vJsqcS2rBaaZkUltmK10HwOqdShUQMa9VH/XnU8MyEvYQV0vozNzCpMNtNVq0UW5Y3VAv93fgFy/2WOfYCBSgAAAABJRU5ErkJggg==') no-repeat center!important; min-width: 45px!important; min-height: 28px!important; -moz-box-pack: center!important; } .timeThumb[showhours="true"] { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAYAAAD1PDaSAAAAB3RJTUUH2QYYBTAzhVX4mQAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAALMSURBVHja1ZcxaBphFMff6SmITSh2CxWFFLJVKd1MHMzQDs1WSnQqKXQJpTYg3Tp0K4GQUFwCLZ106eYihNohBBKokLRrB8VZSYxFMXde/8/7Isaq9RrPs3/44/F93vt+9967u+8k+rv8cBSOwD7YCzthm5hXYLs41rrGu9WCJXGswnLXeBMuwUU4B6fhwjAgacDYLfgxvOb3++9Ho1EpEomQz+cjr9dLTqeTbDadTVEUstt1Zk3TOuNXiFstkiR9KVVVSZblzniz2aRSqUTFYpFyuRyl02mtUCh8w/RH+DNcFskYCL2M4Fsej+fOysqKKxaLScFgsLPgJMQXfnx8TKlUSstkMvVKpfITYxuY+tILzb/vQ6HQ00Qi4eZsulyuicL2g6/X6+0qbG5u/jo4OPiE4Rc81aZCSXfj8fgztIBtZmbGECwHb1/1COcY+W/3Oefn59w6re3t7Q9oqed89vL6+np2aWlJ5l4dJu7By0UnXQXu/f39fSWZTD6UA4FAcmFhQa5WqxOF+BcxJ/PK6OPbDFyr1cYWnEtqRiW40swrl8vlOhZwOxwOS2+8URJxcXFBzCs3Go382dnZg2kG7gZnXikcDnuR5e+4CW+OK3B3AsbZKrgZT5Htu+1oaO4NgL9DcPm6gc0SLl4B8OuTk5OtyxTY8Ip+i+f1SxzfsBqwj2q4CXfwqn9D+n7liu7BR3BDTGoWuiU4jgTXUPHuh3d0WbhC+q5skrCqWDcrOOxkULPwGpznEpG+DTUDVBHx82K92Wu2U0du+BG8B5+OoQKqiLMn4rrHBTpIvGkOwF9J38QbgW2K8wLU/4PBdPHTZxH+MULmVfG/Rer/8TFx8fP9Cel92Q+4Juan8j3wiv58VLbE+NSKe/SwB/qQLOpdI5rvgZ63GmhUNQRww4zgZpUt1/P7X2iV9EyvWg1iRHOkt8ac1SBGtWNW4N/sG4JKEzHR8QAAAABJRU5ErkJggg==') no-repeat center!important; } .timeLabel { color: #FFFFFF !important; font-size: 10px!important; font-family: Arial, sans-serif!important; text-shadow: 0px -2px 0px black!important; padding-top: 2px!important; } .statusOverlay { background-color: rgba(0,0,0,0.55)!important; } .statusIcon { margin-bottom: 28px!important; /* same height as .controlBar, to keep icon centered above it */ width: 36px!important; height: 36px!important; } .statusIcon[type="throbber"] { background: url(chrome://global/skin/media/throbber.png) no-repeat center!important; } .statusIcon[type="error"] { background: url(chrome://global/skin/media/error.png) no-repeat center!important; }

Chrome-ish Controls

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* Original videocontrols.css by Mozilla. Skins by Ken Saunders - www.AccessFirefox.org */ .controlBar { height: 28px!important; background-color: #FFFFFF !important; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAIAAACcd2qBAAAAB3RJTUUH2QYYAAcnCUNOOwAAAAlwSFlzAAALEQAACxEBf2RfkQAAAARnQU1BAACxjwv8YQUAAACQSURBVHjaxdbdDcIwDEZRDH6KCjTipfvv0QEqMUtakgjqJP1hi+sFjizL/izvabwQpU8/MLDvXwgsv/Rl4FYaA+/HjsBXRP2XHhsEt1oZOKbEwJ95ZuAQAtRxjAwcU2bg1VYGNjMGLlYYeGtMSOhNlYHvj46Bve8Z2DnHwErNWEQYuFZonXKGbjUWi8vCPAInu3M2qQHtfP8AAAAASUVORK5CYII=') !important; } .playButton { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAB3RJTUUH2QYYABwdZnlcEwAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAEySURBVHja7ZUxS8NQFIUTqVFKBZUsmroUMomD1FBcdfYn+Ov8CZ07l1KdWrFWcKgKJYNTGzWBpueWWyiPl8ReMr4DH/f1nvQebmgayzIyMlJk/+OafVADe/z5D8xADJwM71caSGGNx17nebN51bq9QPkEdXiDdT/FuKB1c47je1ZopSCwCgLfv1T7Td6wqfECMJUG0q3yDo4O1f4ZGFLVeN7GLd46kOQskoXa2wU7VDWekzesKJCG2h+Tia6/QuPZ7Ik3tF7HY5EnDpyGocgTB85n9GjZGd68/ECvfprjnZQf6LquyJME0m8+jaIfXX+FxkvZE28Yj0Yvai/hoYnGi/OGFf2XHoM7cA987r2BB9AF1xleG3xLNoxAn88e1y/wBEKuqtfn74k2JJX6ejIy2lpLIjlhCqFw9wkAAAAASUVORK5CYII=') no-repeat center!important; /* Remove the native button appearance and styling */ -moz-appearance: none!important; margin: 0px!important; padding: 0px!important; min-height: 28px!important; min-width: 28px!important; border: none!important; margin-right: -22px!important; /* 1/2 of scrubber thumb width, for overhang. */ position: relative!important; /* Trick to work around negative margin interfering with clicking on the button. */ } .playButton[paused="true"] { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAB3RJTUUH2QYYABkClgalowAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAIeSURBVHjaY2AYBSMFMEExxYCRgDwL1CIWKP8PEP9DwlS1EGQJBxBzATEnVOwXEH8H4h9QNsmWMuORYwNifiCWAmI5IJYAYj4gZgXi/1AMs/A/pRaCgpEbaona/j0bF378+In9xs3bbFBxJjRL/5FiKa7gFANiOyAu+fju3X8Qnj1z5j0JCYn5IDEg9gdiAyCWBGIeBkQ8k20hyCAPIO769x8BHz95/DM4OPgoULwbiJOgjlIGYgFoNJBtoTTUF9P+/PrzHx2vWb3mpaSE5BKgfCHUYaoMkDjG61N8ccgDtVQtMT7B+NPHjwzIWEpSkjs8PEL7y5cvXJcuXXoDVPcVin8yQLIPTp8QAkw3b93C6eDoqGh7M1Mz6d6+3qYHDx88A4p9hDoYa5YhKqJfvHqFV/7t+3cMf/7+IcYooiz89/XLFwZsZcSPHz/+bty04cihQwc3ALmPgPgbA6I0IstCUN76Ky0jhSFx4sSJVzNnztz9/v37s0DuDSAGBednBjzxR8hCkCtBCeCLiIgIXPDNmze/JkyYcObAgQPHgNzrQHwHiJ+CQpYBUuSRbeFfaBC9+vbtO1hg376992fPnn3w7du3V4Hc20D8EIhfQn1G0DJ8FoJ8Byqc3wHxg/Pnz73fsGHD1uPHj1+B+uYBED8H4vdQRxFdkOOrLUA1hSADpDwVhTruKzTo3iL5iqSqiu7VE90rYGIB1ZoYo2DoAwCdWu2IZ0pxLAAAAABJRU5ErkJggg==) no-repeat center!important; } .muteButton { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAcCAYAAADvANYcAAAAB3RJTUUH2QYYACI0ZQ7fAgAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAALvSURBVHjaY2AYBaMAFTBTwQwmqDmMA+UIViDmA2IhIGYD4j9A/I+ejgA5YPGiBdNyJCXFOU+fOf8OyP8KxL+goQLC/4kxiIkMyxlhDpg0sT/cwzPA/MOHbzpAvhwQcwMxDxALA7EAEHOQaQdOx4IsZodatHLu7Ln/f//8DcbBQcGHgGLJQNx+6MChifr6+qFAtgsQq0EdRbFDQAbwArE8EGsD8eZ58+f9/4cE/f39zwHF+x0cHMD8z18+/4qLi1sLFEsCYi2ow3EmXBYiHNE4f/4Ct+/fvvF+/vxZRFlZWdTPz5/hz6+/cAX//v0DOVTN1tYOLM7OysHa3zfB/+nTp2x79+79AZT7AsQ/GSAJlyxH1Dg7OKIIvHj2DIX/4/sPkC/3TJ8+jVGAj88zNAQUGwzMBXn5dkBHXAWybwPxa0ocwfDgwQO88t++fQNRX9+8eZNXXFqymIWF1cLQwICBn48flH2lGCCJFGdOJMoRz1+9wiv/89dPGBPk00NHjh21kJCSgomxQe2hKE0wfP70Ga/8n9/wUAb51k5BXgFZzy+o43CWGUQ54tfPn3jlgQkTRIESZ6m3l4+FooIiWM/Dhw8/gQISiD8A8V9c+olxRMu1G9fcvn//LvTv318FOzt7Fm5ubhQFbOygEGeIz8rKtgBmU7j4tBnTjgOpK0AMis/flDiifsqUyV0MkFLQ9OjRowv6+/u5eHh44Ao4ODhAQXHx8uVLFuHhYQxAB/9ZuXLlkStXLm8Eil8C4rf4QoJYACsxQcWwnYaGxqvVq9f8P3LkKBjb29uDfJwCxIvmzZu/0cbGNgPI9mGAFG78DNSprTEcJM3Ly3tz4sRJ/zdv3vLfyclpHVAsnAFSqoJqVFDWEANiLgYiimxyXAhK5V9+/fq1+siRww7y8nI/nj9/vu/u3btnGSCJEJQtQLUpqPD4zUBETUp2QwSqF5Qi+aE+/g7EHxkgxTNRVTg1HAHTzwTFIIv/kuqAUTAKBi0AANH8DPqjZKQNAAAAAElFTkSuQmCC') no-repeat center!important; /* Remove the native button appearance and styling */ -moz-appearance: none!important; margin: 0px!important; padding: 0px!important; min-height: 28px!important; min-width: 33px!important; border: none!important; } .muteButton[muted="true"] { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAcCAYAAADvANYcAAAAB3RJTUUH2QYYACU0Kk9JxQAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAIQSURBVHjaY2AYBaMAFTBTwQwmqDmM5BpAtkYgYAdiESSPfAfiT0D8C4j/0yMkOIBYF4h9lyycUSsiKsx39tzFN0D+FyD+SaojmMhwACcQ6wFx4vx5c8rcPPwsP336rg3ky0IdR3LospDgWBaoA3SAOHbJoiUx4eHh3CDJX7/+SAEpPnJDlpAjWIFYCIj5obQSEHsvWbokMCoqihOm6M/fPzxIZlE9JEAJL2DB/IXxX75+Efj29auAqqqakLe3N+ufX3/hiv79+wezmKyETowj/J0cHMyRBV88e4ai6OePn+TYTZQjQL4CRYfogwcP8Bry7ds3RnJDgZiQABv+/NUrvIp+/KRdSIAAKL////zpM15Ff/78oZkjQA74DcSvfxHw6f9//0gqnEgNCVApuPHajWuC379/E2ZkZBKztrbm5ebmRlHExs4GczTNHLFuypTJ+4C0NBBbHD9+LKa7u1sD6BB4QmRnZ4c5gCyHECq2QdHxEojvAPExIF5y9erV7srKytNv3rz9x8zMwgDBzKD4ghUcJDuE2GIWZDAo9YFS6OOXL18+3LVrp4COjq4sGxsby4kTx88Ds/FZoNxDBkglRtNaFGQ4qMp+9uPHj6dHjx79ICcnK/rs2bOD9+7dOw0Nte+kOoLcAgakjwuIRRkg6eofEH8F4o8MZFTllDRqQIAJagYT1OK/pDpgFIyCQQsAKuaq5hwIqRYAAAAASUVORK5CYII=') no-repeat center!important; } .volumeStack { width: 28px!important; height: 70px!important; background-color: transparent !important; /* use negative margin to place stack over the mute button to its left. */ margin: -70px 3px 28px -31px!important; overflow: hidden!important; /* crop it when sliding down, don't grow the control bar */ position: relative!important; /* Trick to work around negative margin interfering with dragging the thumb. */ padding-top: 6px!important; } .volumeControl { min-height: 64px!important; } /* .scale-thumb is an element inside the <scale> implementation. */ .volumeControl .scale-thumb { /* Override the default thumb appearance with a custom image. */ -moz-appearance: none!important; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAAAB3RJTUUH2QYYACkici6zmAAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAAF7SURBVHjarZPPS8JgGMffckZQrhktD17EkKQukub+gKKL/0F/Rofo6DECs3u3juG5qCA8eBEVY+GPEGQQBBbZWuoh1+z75AQrUJu947PtHXs+PO/zvg9j/zQm+t4nQQj4AD8kTgMVkAVGv8gOtg72ozuhYCDI8465gRbt7TWbu8nt7kUPMb0EbfrOAeni7FxuqFrnL1AMxZoOJsSP4qdGx9pFseSgpfnKxXLa4/E4rRRZUZQX/4pfopTEVrPpLBYKVjeMEhBJNFupVsfbezhIxNWf6+OKOBLpzVZDc7lc/PdjNdqo1Wp0pnQSNUqlYiYcXt+wkkoyeZ0hhw236Xw+3/Z6lwJut9thGAYblVQq9RCLxY7huKW1CGAVbEYikW1JkryCIHCDslBVVZdl+T6RSJxgegUKJKKgebAM1oAfLIApM65XuI75fAe0O3cgB0o07/1EMmrURSCCGWBjv6tPsg/QAk/gkXUbuP2z++2m1DakxiTTWbdZv7r/E5Px9LovfAvcAAAAAElFTkSuQmCC') no-repeat center!important; border: none!important; min-width: 18px!important; min-height: 16px!important; } .volumeBackgroundBar { /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */ margin: 0px 10px 0px 10px!important; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAACWCAYAAADjY8m4AAAAB3RJTUUH2QYYADoGL8IW2wAAAAlwSFlzAACZogAAmaIBqhLIugAAAARnQU1BAACxjwv8YQUAAABtSURBVHja7dCxCYAwEEbhPw6httoprmRWDiJGHCIzRLCy0SAiAXlXXPU4Ps5I6rbV+aYdNDmnefGq6lIhBFk79oUuJx77JtDrwJyDmMfwDJnpUSBBggQJEiRIkCBBggT5J2TSkLwAEiRIkF8jdxWfLVTzUyLfAAAAAElFTkSuQmCC')!important; background-color: rgba(255,255,255,10)!important; -moz-border-radius: 4px 4px 0px 0px !important; } .durationBox { -moz-box-pack: center!important; } .durationLabel { margin-left: -22px!important; /* 1/2 of scrubber thumb width, for overhang. */ padding-left: 8px!important; /* don't bump into the scrubber bar */ padding-top: 0px!important; /* center vertically with scrubber bar */ color: #000000 !important; font-size: 16px!important; text-shadow: 1px 1px 0px white!important; font-family: Arial, sans-serif!important; } .backgroundBar { /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ margin: 9px 22px 9px 22px!important; background-color: #C7C7C7 !important; -moz-border-radius: 4px 4px!important; border-top: 1px solid #000000 !important; border-bottom: 1px solid #FFFFFF !important; border-right: 1px solid #FFFFFF !important; border-left: 1px solid #000000 !important; } .bufferBar, .progressBar { /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ margin: 9px 22px 9px 22px!important; -moz-appearance: none!important; border: none!important; background-color: transparent!important; min-width: 0px!important; min-height: 0px!important; } /* .progress-bar is an element inside the <progressmeter> implementation. */ .bufferBar .progress-bar { /* * Note that this is drawn on top of the .backgroundBar. So although this * has the same background-color specified, the semitransparent * compositing gives it a different visual appearance. */ background-color: #000000 !important; -moz-border-radius: 4px 4px!important; -moz-appearance: none!important; border-top: 1px solid #000000 !important; border-bottom: 1px solid #FFFFFF !important; border-right: 1px solid #FFFFFF !important; border-left: 1px solid #000000 !important; } .progressBar .progress-bar { background-color: #747474 !important; -moz-border-radius: 4px 0px 0px 4px!important; -moz-appearance: none!important; border-top: 1px solid #000000 !important; border-bottom: 1px solid #FFFFFF !important; border-right: 1px solid #FFFFFF !important; border-left: 1px solid #000000 !important; } /* .scale-slider is an element inside the <scale> implementation. */ .scrubber .scale-slider, .volumeControl .scale-slider { /* Hide the default horizontal bar. */ -moz-appearance: none!important; background: none!important; margin: 0!important; } .scrubber .scale-slider { /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ margin-top: -10px!important; margin-bottom: 10px!important; } /* .scale-thumb is an element inside the <scale> implementation. */ .scrubber .scale-thumb { /* Override the default thumb appearance with a custom image. */ -moz-appearance: none!important; background: transparent!important; border: none!important; } .timeThumb { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAgCAYAAAB+ZAqzAAAAB3RJTUUH2QYYAyEvxgD7dAAAAAlwSFlzAACZygAAmcoB45GkIgAAAARnQU1BAACxjwv8YQUAAATcSURBVHjaxZhtTFtVGMfPvaV3lL6sW9th11X6ZeuYGrK5+boZEyDGDxAwRkxcjEONMTH6EaN+nE3clzljYozKjMlQjBFaEowp1c3O1/HyAYEtixvYlQotoba3LfTlXp+n91xamnYFyuqBPyfn3N77/Pqcc57nuTCkfGPyeqZgbiNNzOvFgrmyRktdQ7EgBVUN7dkC0FJAKAGUAaVpn6Fz+aAbApMNIoAStANUC1JR7aDzits8QzaIECnQKihBtULHKXq9KCBTZIxe4UB1II1Go9517Ohh24njDx89eHD/Q/V7THaOU9axrIJjWUbBwh9BEESGYYgoikQew29GEDLJZDIVX1gMXrt69fpv3su/jl4ZnZjl+dgyPJsHxUFJ6k2xFBhLgdArO0GGN15/7bGurqdfUavV9RzHAQyLINllRJA19wCQDFY4j50gNaSMx2Kxhf7+bz4+98GHP8G1JdC/1JNJusTrwFi6RFqQ6Z2332p5tuuZV3U6nVmlUmkozLY0JEwkEnwkEgl81f/1R6ffdYzAdBAUpUss5O8njnrJ7HF7eg41HmoBKCMuy3YBFQEUAS40PTM90tza/B5MBaj3kvKy4p7SgxovXbz0ZTQS5dOptFgtoT20i/YpR40MjyfO0vNmT3eUj4Zh21b9B+2ifeSgPNmV0oAOTE5OetLpdEY6UdUV2kX7yEF52Br5NNbvuesAERlWyJQNynegMWzWvrTXWXl/IUkmFAwu1KlUlnVxoEoNwoqI9kku4GbBcJBwupyuk8+dbFIoFDWVGNlKy0BD+0SKZ1k49A6mF73ZbLYPDbpcELd2VRsM4tpyW0d7eyAQuAbDMCiN3sGAloDJwIW+C2c6OzpPY4SvFhRmhIHBgTNon3osm+BlMIy4y2fPve9iWFbzwLEHu7VarflOQ0Wj0cAfV37vRbtonxREfrnHE4FH1XjqVPcTVuvdjzc0NByHLG7abiCe54Nzc3OXfb6/L54/3/s9TIWIlNTXon5hEkcPYlWh0+v1pra29mar1frIvn3WRyGRGysFggQeunXL97PP5/tlaMjlCYfDmCMjRKoy0qRIEs8fK0iuytCCxwydHU+1AmijwWC8z2KxHN4skN/vn1haCk0CyMzA4Ldu8BhWFZi05apiLUyUApPn8gtFBFSjF48cuf+elubWF/Za9p7glJy6HFAylYzN++e9Ix735+PjY1PUOzEKtKlCsRQgLjGWRTqQ6aUXX37eZrM9CR7cX+pm8ND12dnZ7z797JMviFTWINQqyZXYty2ty4UF+eb8EnllfGJ8ZmV15abdbr9Xt1O3W8kpSb4gKf/ldA46IGg64fP/ECk2JUhuH5XNexuNV4WAKdjAywbD7nhTUxMeDGVtbS1BQeZIeDwjZ4eHhzEpLxJpL8nV6YYT8WYqU/mNB43g0Q719fW55+f9P2i1GiILxzhP1oeATUFV0vALYVixGY3GNq/XK4BE7HGM8/T6lkvyrd6I3x6XNBYKhRbi8fgivhZgj2MinbxUJV6qBExOZZEbN27+CLUewZ7kTl9Fy1fJ249AvcKPjY26Ie+J2BNpX6VIXhSvNhg2PP6JqanpP4PB4CL2JBcW/teG4QY3eb3D4ejFno4rLpsqLaPzcytmB/RU0dxXbTD5GfJ/f+RDUXHM+g9x8oOgI5+JsQAAAABJRU5ErkJggg==') no-repeat center!important; min-width: 45px!important; min-height: 28px!important; -moz-box-pack: center!important; } .timeThumb[showhours="true"] { background: url(chrome://global/skin/media/scrubberThumbWide.png) no-repeat center!important; } .timeLabel { color: #000000 !important; font-size: 10px!important; font-family: Arial, sans-serif!important; text-shadow: 1px 1px 0px #FFFFFF !important; padding-top: 2px!important; } .statusOverlay { background-color: rgba(0,0,0,0.55)!important; } .statusIcon { margin-bottom: 28px!important; /* same height as .controlBar, to keep icon centered above it */ width: 36px!important; height: 36px!important; } .statusIcon[type="throbber"] { background: url(chrome://global/skin/media/throbber.png) no-repeat center!important; } .statusIcon[type="error"] { background: url(chrome://global/skin/media/error.png) no-repeat center!important; }