EarlyBlue/global/media/videocontrols.css

   1 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   2
   3 .controlBar {
   4   height: 28px;
   5   background-color: rgba(102,102,153,0.75);
   6 }
   7
   8 .playButton, .muteButton {
   9   /* Remove the usual button appearance and styling */
  10   margin: 0px;
  11   padding: 0px;
  12   border: none;
  13   min-height: 28px;
  14   background-color: transparent;
  15   background-repeat: no-repeat;
  16   background-position: center center;
  17 }
  18 .playButton {
  19   min-width: 28px;
  20 }
  21 .muteButton {
  22   min-width: 33px;
  23 }
  24
  25 .playButton {
  26   background-image: url("chrome://global/skin/media/pauseButton.png");
  27 }
  28 .playButton[paused="true"] {
  29   background-image: url("chrome://global/skin/media/playButton.png");
  30 }
  31
  32 .muteButton {
  33   background-image: url("chrome://global/skin/media/muteButton.png");
  34 }
  35 .muteButton[muted="true"] {
  36   background-image: url("chrome://global/skin/media/unmuteButton.png");
  37 }
  38
  39 .backgroundBar {
  40   /* make bar 8px tall (control height = 28, minus 2 * 10 margin) */
  41   margin: 10px 2px;
  42   background-color: rgba(0,0,0,0.75);
  43 }
  44
  45 .bufferBar, .progressBar {
  46   /* make bar 8px tall (control height = 28, minus 2 * 10 margin) */
  47   margin: 10px 2px;
  48   border: none;
  49   background-color: transparent;
  50   min-width: 0px;
  51   min-height: 0px;
  52 }
  53
  54 /* .progress-bar is an element inside the <progressmeter> implementation. */
  55 .bufferBar .progress-bar {
  56   /*
  57    * Note that this is drawn on top of the .backgroundBar. So although this
  58    * has the same background-color specified, the semitransparent
  59    * compositing gives it a different visual appearance.
  60    */
  61   background-color: rgba(204,208,221,0.75);
  62   -moz-appearance: none;
  63 }
  64
  65 .progressBar .progress-bar {
  66   background-color: #336699;
  67   -moz-appearance: none;
  68 }
  69
  70 /* .scale-slider is an element inside the <scale> implementation. */
  71 .scale-slider {
  72   /* Hide the default horizontal bar. */
  73   background: none;
  74   margin: 0 2px;
  75 }
  76
  77 /* .scale-thumb is an element inside the <scale> implementation. */
  78 .scale-thumb {
  79   /* Override the default thumb appearance with a custom image. */
  80   background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center;
  81   border: none !important;
  82   min-width: 11px;
  83   min-height: 20px;
  84 }