The Tor Browser: b2g/chrome/content/touchcontrols.css@b8a032363ba2

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/. */

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

     7 /* video controls */

     8 .controlsOverlay {

     9   -moz-box-pack: center;

    10   -moz-box-align: end;

    11   padding: 20px;

    12   -moz-box-flex: 1;

    13   -moz-box-orient: horizontal;

    14 }

    16 .controlBar {

    17   -moz-box-flex: 1;

    18   font-size: 16pt;

    19   padding: 10px;

    20   background-color: rgba(50,50,50,0.8);

    21   border-radius: 8px;

    22   width: 100%;

    23 }

    25 .controlsSpacer {

    26   display: none;

    27   -moz-box-flex: 0;

    28 }

    30 .fullscreenButton,

    31 .playButton,

    32 .castingButton,

    33 .muteButton {

    34   -moz-appearance: none;

    35   min-height: 42px;

    36   min-width: 42px;

    37   border: none !important;

    38 }

    40 .fullscreenButton {

    41   background: url("chrome://b2g/content/images/fullscreen-hdpi.png") no-repeat center;

    42 }

    44 .fullscreenButton[fullscreened="true"] {

    45   background: url("chrome://b2g/content/images/exitfullscreen-hdpi.png") no-repeat center;

    46 }

    48 .playButton {

    49   background: url("chrome://b2g/content/images/pause-hdpi.png") no-repeat center;

    50 }

    52 /*

    53  * Normally the button bar has fullscreen spacer play spacer mute, but if

    54  * this is an audio control rather than a video control, the fullscreen button

    55  * is hidden by videocontrols.xml, and that alters the position of the

    56  * play button.  This workaround moves it back to center.

    57  */

    58 .controlBar.audio-only .playButton {

    59   transform: translateX(28px);

    60 }

    62 .playButton[paused="true"] {

    63   background: url("chrome://b2g/content/images/play-hdpi.png") no-repeat center;

    64 }

    66 .castingButton {

    67   display: none;

    68 }

    70 .muteButton {

    71   background: url("chrome://b2g/content/images/mute-hdpi.png") no-repeat center;

    72 }

    74 .muteButton[muted="true"] {

    75   background: url("chrome://b2g/content/images/unmute-hdpi.png") no-repeat center;

    76 }

    78 /* bars */

    79 .scrubberStack {

    80   width: 100%;

    81   min-height: 32px;

    82   max-height: 32px;

    83   padding: 0px 8px;

    84   margin: 0px;

    85 }

    87 .bufferBar,

    88 .bufferBar .progress-bar,

    89 .progressBar,

    90 .progressBar .progress-bar,

    91 .scrubber,

    92 .scrubber .scale-slider,

    93 .scrubber .scale-thumb {

    94   -moz-appearance: none;

    95   border: none;

    96   padding: 0px;

    97   margin: 0px;

    98   background-color: transparent;

    99   border-radius: 3px;

   100 }

   102 .bufferBar {

   103   border: 1px solid #5e6166;

   104 }

   106 .bufferBar,

   107 .progressBar {

   108   margin: 11px 0px 9px 0px;

   109   height: 8px

   110 }

   112 .bufferBar .progress-bar {

   113   background-color: #5e6166;

   114 }

   116 .progressBar .progress-bar {

   117   background-color: white;

   118 }

   120 .scrubber {

   121   margin-left: -16px;

   122   margin-right: -16px;

   123 }

   125 .scrubber .scale-thumb {

   126   display: -moz-box;

   127   margin: 0px !important;

   128   padding: 0px !important;

   129   background: url("chrome://b2g/content/images/scrubber-hdpi.png") no-repeat;

   130   background-size: 32px 32px;

   131   height: 32px;

   132   width: 32px;

   133 }

   135 .durationBox {

   136   -moz-box-orient: horizontal;

   137   -moz-box-pack: start;

   138   -moz-box-align: center;

   139   color: white;

   140   font-weight: bold;

   141   padding: 0px 8px;

   142   margin-top: -6px;

   143 }

   145 .positionLabel {

   146   -moz-box-flex: 1;

   147 }

   149 .statusOverlay {

   150   -moz-box-align: center;

   151   -moz-box-pack: center;

   152   background-color: rgb(50,50,50);

   153 }

   155 .statusIcon {

   156   margin-bottom: 28px;

   157   width: 36px;

   158   height: 36px;

   159 }

   161 .statusIcon[type="throbber"] {

   162   background: url("chrome://b2g/content/images/throbber.png") no-repeat center;

   163 }

   165 .statusIcon[type="error"] {

   166   background: url("chrome://b2g/content/images/error.png") no-repeat center;

   167 }

   169 /* CSS Transitions */

   170 .controlBar:not([immediate]) {

   171   transition-property: opacity;

   172   transition-duration: 200ms;

   173 }

   175 .controlBar[fadeout] {

   176   opacity: 0;

   177 }

   179 .statusOverlay:not([immediate]) {

   180   transition-property: opacity;

   181   transition-duration: 300ms;

   182   transition-delay: 750ms;

   183 }

   185 .statusOverlay[fadeout] {

   186   opacity: 0;

   187 }

   189 .volumeStack,

   190 .controlBar[firstshow="true"] .fullscreenButton,

   191 .controlBar[firstshow="true"] .muteButton,

   192 .controlBar[firstshow="true"] .scrubberStack,

   193 .controlBar[firstshow="true"] .durationBox,

   194 .timeLabel {

   195   display: none;

   196 }

   198 /* Error description formatting */

   199 .errorLabel {

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

   201   font-size: 11px;

   202   color: #bbb;

   203   text-shadow:

   204     -1px -1px 0 #000,

   205     1px -1px 0 #000,

   206     -1px 1px 0 #000,

   207     1px 1px 0 #000;

   208   padding: 0 10px;

   209   text-align: center;

   210 }

The Tor Browser / file revision