The Tor Browser / file revision

toolkit/themes/windows/global/media/videocontrols.css@b8a032363ba2

toolkit/themes/windows/global/media/videocontrols.css

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

     1 /* This Source Code Form is subject to the terms of the Mozilla Public

     2  * License, v. 2.0. If a copy of the MPL was not distributed with this

     3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

     4 

     5 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

     6 @namespace html url("http://www.w3.org/1999/xhtml");

     7 

     8 .controlBar {

     9   height: 28px;

    10   background-color: rgba(35,31,32,.74);

    11 }

    12 

    13 .playButton,

    14 .muteButton,

    15 .fullscreenButton {

    16   background-color: transparent;

    17   background-repeat: no-repeat;

    18   background-position: center;

    19   -moz-appearance: none;   /* Remove the native button appearance and styling */

    20   margin: 0;

    21   padding: 0;

    22   min-height: 28px;

    23   min-width: 28px;

    24   border: none;

    25   opacity: 0.7;

    26 }

    27 

    28 .playButton:hover,

    29 .muteButton:hover,

    30 .fullscreenButton:hover {

    31   opacity: 1;

    32 }

    33 

    34 .playButton:hover:active,

    35 .muteButton:hover:active,

    36 .fullscreenButton:hover:active {

    37   opacity: 0.4;

    38 }

    39 

    40 .playButton {

    41   background-image: url(chrome://global/skin/media/pauseButton.png);

    42   margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */

    43   position: relative; /* Trick to work around negative margin interfering with clicking on the button. */

    44 }

    45 

    46 .playButton[paused] {

    47   background-image: url(chrome://global/skin/media/playButton.png);

    48 }

    49 

    50 .muteButton {

    51   background-image: url(chrome://global/skin/media/muteButton.png);

    52   min-width: 33px;

    53 }

    54 .muteButton[muted] {

    55   background-image: url(chrome://global/skin/media/unmuteButton.png);

    56 }

    57 

    58 .muteButton[noAudio] {

    59   background-image: url(chrome://global/skin/media/noAudio.png);

    60 }

    61 

    62 .muteButton[noAudio] + .volumeStack {

    63   display: none;

    64 }

    65 

    66 .fullscreenButton {

    67   background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);

    68 }

    69 

    70 .fullscreenButton[fullscreened] {

    71   background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);

    72 }

    73 

    74 .volumeControl {

    75   width: 32px;

    76   opacity: 0;

    77 }

    78 

    79 .volumeBackground,

    80 .volumeForeground {

    81   background-repeat: no-repeat;

    82   background-position: center;

    83   width: 32px;

    84 }

    85 

    86 .volumeBackground {

    87   background-image: url(chrome://global/skin/media/volume-empty.png);

    88 }

    89 

    90 .volumeForeground {

    91   background-image: url(chrome://global/skin/media/volume-full.png);

    92   background-clip: content-box;

    93 }

    94 

    95 .controlBar[audio-only] > .volumeStack {

    96   /* This value is duplicated in the videocontrols.xml adjustControlSize function. */

    97   -moz-margin-end: 8px;

    98 }

    99 

   100 .volumeControl .scale-thumb {

   101   min-width: 0;

   102   opacity: 0;

   103 }

   104 

   105 .durationBox {

   106   -moz-box-pack: center;

   107 }

   108 

   109 .durationLabel {

   110   margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */

   111   padding-left: 8px; /* don't bump into the scrubber bar */

   112   padding-top: 0; /* center vertically with scrubber bar */

   113   color: rgba(255,255,255,.75);

   114   font-size: 11px;

   115   font-family: Arial, sans-serif;

   116 }

   117 

   118 .positionLabel {

   119   display: none;

   120 }

   121 

   122 .backgroundBar {

   123   /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */

   124   /* margin left/right: 1/2 of scrubber thumb width, for overhang. */

   125   margin: 10px 22px;

   126   background-color: rgba(255,255,255,.5);

   127   border-radius: 2.5px;

   128 }

   129 

   130 .bufferBar,

   131 .progressBar {

   132   /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */

   133   /* margin left/right: 1/2 of scrubber thumb width, for overhang. */

   134   margin: 10px 22px;

   135   -moz-appearance: none;

   136   border: none;

   137   background-color: transparent;

   138   min-width: 0;

   139   min-height: 0;

   140 }

   141 

   142 /* .progress-bar is an element inside the <progressmeter> implementation. */

   143 .bufferBar .progress-bar {

   144   /*

   145    * Note that this is drawn on top of the .backgroundBar. So although this

   146    * has the same background-color specified, the semitransparent

   147    * compositing gives it a different visual appearance.

   148    */

   149   background-color: rgba(255,255,255,.5);

   150   border-radius: 2.5px;

   151   -moz-appearance: none;

   152 }

   153 

   154 .progressBar .progress-bar {

   155   background-color: white;

   156   border-radius: 2.5px;

   157   -moz-appearance: none;

   158 }

   159 

   160 /* .scale-slider is an element inside the <scale> implementation. */

   161 .scrubber .scale-slider,

   162 .volumeControl .scale-slider {

   163   /* Hide the default horizontal bar. */

   164   -moz-appearance: none;

   165   background: none;

   166   margin: 0;

   167 }

   168 

   169 .scrubber .scale-slider {

   170   /* abs(margin-top) + margin-bottom + bar height == timeThumb height */

   171   margin-top: -10px;

   172   margin-bottom: 10px;

   173 }

   174 

   175 /* .scale-thumb is an element inside the <scale> implementation. */

   176 .scrubber .scale-thumb,

   177 .volumeControl .scale-thumb {

   178   /* Override the default thumb appearance with a custom image. */

   179   -moz-appearance: none;

   180   background: transparent;

   181   border: none;

   182 }

   183 

   184 .timeThumb {

   185   background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center;

   186   min-width: 45px;

   187   min-height: 28px;

   188   -moz-box-pack: center;

   189 }

   190 

   191 .timeThumb[showhours="true"] {

   192   background-image: url(chrome://global/skin/media/scrubberThumbWide.png);

   193 }

   194 

   195 .timeLabel {

   196   color: rgba(255,255,255,.75);

   197   font-size: 10px;

   198   font-family: Arial, sans-serif;

   199   text-shadow: rgba(0,0,0,.3) 0 1px;

   200   padding-top: 5px;

   201 }

   202 

   203 .statusOverlay {

   204   -moz-box-align: center;

   205   -moz-box-pack: center;

   206   background-color: rgba(0,0,0,.55);

   207 }

   208 

   209 .statusIcon {

   210   margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */

   211   width: 36px;

   212   height: 36px;

   213 }

   214 

   215 .statusIcon[type="throbber"] {

   216   background: url(chrome://global/skin/media/throbber.png) no-repeat center;

   217 }

   218 

   219 .statusIcon[type="throbber"][stalled] {

   220   background: url(chrome://global/skin/media/stalled.png) no-repeat center;

   221 }

   222 

   223 .statusIcon[type="error"] {

   224   background: url(chrome://global/skin/media/error.png) no-repeat center;

   225 }

   226 

   227 /* Overlay Play button */

   228 .clickToPlay {

   229   width: 64px;

   230   height: 64px;

   231   -moz-box-pack: center;

   232   -moz-box-align: center;

   233   opacity: 0.7;

   234   background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),

   235                     url(chrome://global/skin/media/videoClickToPlayButton.svg);

   236   background-repeat: repeat, no-repeat;

   237   background-position: center, center;

   238   background-size: auto, 64px 64px;

   239   background-color: hsla(0,0%,10%,.5);

   240 }

   241 .clickToPlay:hover {

   242   opacity: 1;

   243 }

   244 

   245 /* Statistics formatting */

   246 html|*.statsDiv {

   247   position: relative;

   248 }

   249 html|td {

   250   height: 1em;

   251   max-height: 1em;

   252   padding: 0 2px;

   253 }

   254 html|table {

   255   font-family: Helvetica, Arial, sans-serif;

   256   font-size: 11px;

   257   color: white;

   258   text-shadow:

   259     -1px -1px 0 #000,

   260     1px -1px 0 #000,

   261     -1px 1px 0 #000,

   262     1px 1px 0 #000;

   263   min-width: 100%;

   264   background: rgba(68,68,68,.7);

   265   table-layout: fixed;

   266   border-collapse: collapse;

   267   position: absolute;

   268 }

   269 

   270 /* CSS Transitions */

   271 .clickToPlay {

   272   transition-property: opacity, background-size;

   273   transition-duration: 400ms, 400ms;

   274 }

   275 .clickToPlay[fadeout] {

   276   background-size: auto, 192px 192px;

   277   opacity: 0;

   278 }

   279 .clickToPlay[fadeout][immediate] {

   280   transition-property: opacity, background-size;

   281   transition-duration: 0s, 0s;

   282 }

   283 .controlBar:not([immediate]) {

   284   transition-property: opacity;

   285   transition-duration: 200ms;

   286 }

   287 .controlBar[fadeout] {

   288   opacity: 0;

   289 }

   290 .volumeStack:not([immediate]) {

   291   transition-property: opacity, margin-top;

   292   transition-duration: 200ms, 200ms;

   293 }

   294 .volumeStack[fadeout] {

   295   opacity: 0;

   296   margin-top: 0;

   297 }

   298 .statusOverlay:not([immediate]) {

   299   transition-property: opacity;

   300   transition-duration: 300ms;

   301   transition-delay: 750ms;

   302 }

   303 .statusOverlay[fadeout] {

   304   opacity: 0;

   305 }

   306 

   307 /* Error description formatting */

   308 .errorLabel {

   309   font-family: Helvetica, Arial, sans-serif;

   310   font-size: 11px;

   311   color: #bbb;

   312   text-shadow:

   313     -1px -1px 0 #000,

   314     1px -1px 0 #000,

   315     -1px 1px 0 #000,

   316     1px 1px 0 #000;

   317   padding: 0 10px;

   318   text-align: center;

   319 }

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial