LCARStrek/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(156,156,255,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 .playButton:hover, .muteButton:hover {
  25   background-color: rgba(255,207,0,0.75);
  26 }
  27 .playButton:focus > .button-box,
  28 .muteButton:focus > .button-box {
  29   border: 1px dotted rgba(0,0,0,0.75);
  30 }
  31
  32 .playButton {
  33   background-image: url("chrome://global/skin/media/pauseButton.png");
  34 }
  35 .playButton:hover {
  36   background-image: url("chrome://global/skin/media/pauseButton-hover.png");
  37 }
  38 .playButton[paused="true"] {
  39   background-image: url("chrome://global/skin/media/playButton.png");
  40 }
  41 .playButton[paused="true"]:hover {
  42   background-image: url("chrome://global/skin/media/playButton-hover.png");
  43 }
  44
  45 .muteButton {
  46   background-image: url("chrome://global/skin/media/muteButton.png");
  47 }
  48 .muteButton:hover {
  49   background-image: url("chrome://global/skin/media/muteButton-hover.png");
  50 }
  51 .muteButton[muted="true"] {
  52   background-image: url("chrome://global/skin/media/unmuteButton.png");
  53 }
  54 .muteButton[muted="true"]:hover {
  55   background-image: url("chrome://global/skin/media/unmuteButton-hover.png");
  56 }
  57
  58 .backgroundBar {
  59   /* make bar 8px tall (control height = 28, minus 2 * 10 margin) */
  60   margin: 10px 2px;
  61   background-color: rgba(0,0,0,0.75);
  62   -moz-border-radius: 3px 3px;
  63 }
  64
  65 .bufferBar, .progressBar {
  66   /* make bar 8px tall (control height = 28, minus 2 * 10 margin) */
  67   margin: 10px 2px;
  68   border: none;
  69   background-color: transparent;
  70   min-width: 0px;
  71   min-height: 0px;
  72 }
  73
  74 /* .progress-bar is an element inside the <progressmeter> implementation. */
  75 .bufferBar .progress-bar {
  76   /*
  77    * Note that this is drawn on top of the .backgroundBar. So although this
  78    * has the same background-color specified, the semitransparent
  79    * compositing gives it a different visual appearance.
  80    */
  81   background-color: rgba(255,159,0,0.75);
  82   -moz-border-radius: 3px 3px;
  83   -moz-appearance: none;
  84 }
  85
  86 .progressBar .progress-bar {
  87   background-color: #008484;
  88   -moz-border-radius: 3px 3px;
  89   -moz-appearance: none;
  90 }
  91
  92 /* .scale-slider is an element inside the <scale> implementation. */
  93 .scale-slider {
  94   /* Hide the default horizontal bar. */
  95   background: none;
  96   margin: 0 2px;
  97 }
  98
  99 /* .scale-thumb is an element inside the <scale> implementation. */
 100 .scale-thumb {
 101   /* Override the default thumb appearance with a custom image. */
 102   background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center;
 103   border: none !important;
 104   min-width: 11px;
 105   min-height: 20px;
 106 }
 107
 108 .scale-thumb:hover, .scale-thumb:active {
 109   background-image: url("chrome://global/skin/media/scrubberThumb-hover.png");
 110 }