Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css

   1 /*
   2  * Copyright (C) 2012, 2013, 2014, 2015 Apple Inc.  All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions
   6  * are met:
   7  * 1. Redistributions of source code must retain the above copyright
   8  *    notice, this list of conditions and the following disclaimer.
   9  * 2. Redistributions in binary form must reproduce the above copyright
  10  *    notice, this list of conditions and the following disclaimer in the
  11  *    documentation and/or other materials provided with the distribution.
  12  *
  13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
  14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  15  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  16  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
  17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  19  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  20  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  21  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  22  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  23  */
  24
  25 /* You'll see a lot of !important rules in this file. This is because
  26    the inheritance and specificity of Shadow DOM trees is slightly
  27    tricky. The page might have accidentally set a style and we have
  28    to make sure it is reset. */
  29
  30 audio {
  31     min-width: 260px;
  32     height: 39px;
  33 }
  34
  35 body:-webkit-full-page-media {
  36     background-color: rgb(38, 38, 38);
  37 }
  38
  39 video:-webkit-full-page-media {
  40     margin: auto;
  41     position: absolute;
  42     top: 0;
  43     right: 0;
  44     bottom: 0;
  45     left: 0;
  46 }
  47
  48 video:-webkit-full-page-media::-webkit-media-controls-panel {
  49     bottom: 0px;
  50 }
  51
  52 ::-webkit-media-controls {
  53     width: inherit;
  54     height: inherit;
  55     position: relative;
  56     display: -webkit-flex;
  57     -webkit-align-items: stretch;
  58     -webkit-justify-content: flex-end;
  59     -webkit-flex-direction: column;
  60     font-family: -apple-system-font;
  61     overflow: hidden;
  62 }
  63
  64 video::-webkit-media-controls-panel input[type="button"],
  65 audio::-webkit-media-controls-panel input[type="button"],
  66 video::-webkit-media-controls-panel button,
  67 audio::-webkit-media-controls-panel button {
  68     padding: 0;
  69     border: none;
  70     -webkit-appearance: none;
  71 }
  72
  73 video::-webkit-media-controls-inline-playback-placeholder,
  74 audio::-webkit-media-controls-inline-playback-placeholder {
  75     display: block;
  76     z-index: 0;
  77     width: 100%;
  78     height: 100%;
  79     background-color: black;
  80     background-repeat: no-repeat;
  81     background-position: 50% 50%;
  82     background-size: 100% 50%;
  83 }
  84
  85 video::-webkit-media-controls-inline-playback-placeholder.hidden,
  86 audio::-webkit-media-controls-inline-playback-placeholder.hidden {
  87     display: none;
  88 }
  89
  90 video::-webkit-media-text-track-container,
  91 audio::-webkit-media-text-track-container {
  92     position: relative;
  93     -webkit-flex: 1 1 auto;
  94 }
  95
  96 video::-webkit-media-controls-panel-container {
  97     -webkit-transform: translateZ(0);
  98     width: 100%;
  99     direction: ltr;
 100     height: 50px;
 101     position: absolute;
 102     bottom: 0;
 103 }
 104
 105 audio::-webkit-media-controls-panel-container {
 106     -webkit-transform: translateZ(0);
 107     width: 100%;
 108     direction: ltr;
 109     height: 39px;
 110     position: absolute;
 111     bottom: 0;
 112 }
 113
 114 video::-webkit-media-controls-panel-background {
 115     -webkit-transform: translateZ(0);
 116     width: 101%; /* Due to some rounding issues we make this a little bit wider than should be necessary. */
 117     height: 51px; /* And taller. */
 118     -webkit-appearance: media-controls-light-bar-background;
 119     transition: opacity 0.25s linear;
 120     opacity: 0;
 121 }
 122
 123 audio::-webkit-media-controls-panel-background {
 124     display: none;
 125 }
 126
 127 video::-webkit-media-controls-panel-background.show,
 128 video::-webkit-media-controls-panel-background.paused {
 129     opacity: 1;
 130 }
 131
 132 audio::-webkit-media-controls-panel,
 133 video::-webkit-media-controls-panel {
 134     box-sizing: border-box;
 135     position: absolute;
 136     bottom: 0;
 137     width: 100%;
 138     padding: 0;
 139
 140     -webkit-user-select: none;
 141
 142     display: -webkit-flex;
 143     -webkit-flex-direction: row;
 144     -webkit-flex-wrap: nowrap;
 145     -webkit-justify-content: flex-start;
 146     -webkit-align-items: center;
 147
 148     transition: opacity 0.25s linear;
 149     -webkit-transform-origin: bottom left;
 150 }
 151
 152 video::-webkit-media-controls-panel .hidden,
 153 audio::-webkit-media-controls-panel .hidden {
 154     display: none;
 155 }
 156
 157 video::-webkit-media-controls-panel {
 158     height: 50px;
 159     opacity: 0;
 160     -webkit-transform: translate3d(0, 0, 0);
 161 }
 162
 163 audio::-webkit-media-controls-panel {
 164     height: 39px;
 165     background-color: rgba(228, 228, 228, 1);
 166 }
 167
 168 video::-webkit-media-controls-panel.show,
 169 video::-webkit-media-controls-panel.paused {
 170     opacity: 1;
 171 }
 172
 173 video::-webkit-media-controls-rewind-button,
 174 audio::-webkit-media-controls-rewind-button,
 175 video::-webkit-media-controls-panel .mute-box,
 176 audio::-webkit-media-controls-panel .mute-box,
 177 video::-webkit-media-controls-mute-button,
 178 audio::-webkit-media-controls-mute-button,
 179 video::-webkit-media-controls-volume-max-button,
 180 video::-webkit-media-controls-panel .volume-box,
 181 audio::-webkit-media-controls-panel .volume-box,
 182 audio::-webkit-media-controls-volume-slider,
 183 video::-webkit-media-controls-volume-slider {
 184     display: none !important;
 185 }
 186
 187 video::-webkit-media-controls-start-playback-button,
 188 audio::-webkit-media-controls-start-playback-button {
 189     -webkit-appearance: none;
 190     display: block;
 191     padding: 0;
 192     border: 0;
 193     position: absolute;
 194     width: 72px;
 195     height: 72px;
 196     left: calc(50% - 36px);
 197     top: calc(50% - 36px);
 198     background-origin: content-box;
 199     background-repeat: no-repeat;
 200     background-position: center;
 201     background-image: url('data:image/svg+xml,<svg viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg"><circle cx="72" cy="72" r="70" fill="rgba(247, 247, 247, .82)"/><path d="M48,36v74L109,74L48,36z" fill="rgba(129, 129, 129, .9)"/></svg>');
 202 }
 203
 204 video::-webkit-media-controls-start-playback-button:active,
 205 audio::-webkit-media-controls-start-playback-button:active {
 206     background-image: url('data:image/svg+xml,<svg viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg"><circle cx="72" cy="72" r="70" fill="rgba(192, 192, 192, .82)"/><path d="M48,36v74L109,74L48,36z" fill="rgba(96, 96, 96, .9)"/></svg>');
 207 }
 208
 209 video::-webkit-media-controls-start-playback-button.failed,
 210 audio::-webkit-media-controls-start-playback-button.failed {
 211     background-image: url('data:image/svg+xml,<svg viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg"><circle cx="72" cy="72" r="70" fill="rgba(247, 247, 247, .82)"/><g fill="rgba(129, 129, 129, .9)"><rect x="14" y="70.4" transform="matrix(0.8493 0.5279 -0.5279 0.8493 48.8614 -27.1595)" width="116" height="3.2"/><polygon points="109,74 48,36 48,52.3 95.6,81.9 "/><polygon points="48,110 87.7,86.6 48,61.9 "/></g></svg>');
 212 }
 213
 214 /* ================== ALL INLINE BUTTONS ====================== */
 215
 216 video::-webkit-media-controls-play-button,
 217 audio::-webkit-media-controls-play-button,
 218 video::-webkit-media-controls-fullscreen-button,
 219 audio::-webkit-media-controls-fullscreen-button,
 220 audio::-webkit-media-controls-wireless-playback-picker-button,
 221 video::-webkit-media-controls-wireless-playback-picker-button,
 222 video::-webkit-media-controls-optimized-fullscreen-button,
 223 audio::-webkit-media-controls-optimized-fullscreen-button {
 224     -webkit-appearance: none;
 225     display: block;
 226     padding: 0;
 227     border: 0;
 228     -webkit-user-select: none;
 229     background-repeat: no-repeat;
 230     background-position: 50% 50%;
 231     mix-blend-mode: plus-darker;
 232     opacity: 0.55;
 233     -webkit-transform: translate3d(0, 0, 0);
 234 }
 235
 236 video::-webkit-media-controls-play-button:active,
 237 audio::-webkit-media-controls-play-button:active,
 238 video::-webkit-media-controls-fullscreen-button:active,
 239 audio::-webkit-media-controls-fullscreen-button:active,
 240 audio::-webkit-media-controls-wireless-playback-picker-button:active,
 241 video::-webkit-media-controls-wireless-playback-picker-button:active,
 242 video::-webkit-media-controls-optimized-fullscreen-button:active,
 243 audio::-webkit-media-controls-optimized-fullscreen-button:active {
 244     mix-blend-mode: normal;
 245     opacity: 1;
 246 }
 247
 248 /* ================== PLAY BUTTON ====================== */
 249
 250 audio::-webkit-media-controls-play-button,
 251 video::-webkit-media-controls-play-button {
 252     margin-left: 4px;
 253     background-size: 18px 22px;
 254     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAsCAYAAAANUxr1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0E5REFDQ0JBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0E5REFDQ0FBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhBRjdGMDc4RTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhBRjdGMDc5RTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+D59QlAAAAFVJREFUeNrs2bENgEAMA0AHsf/EIB5GcIGgOEvpIuf6TJIjXfZyv+qfe67ywJT7Vf+WnwUICAgICAgICAgICAgICAgICAgICAjoyzxvgvPlG1X/EmAASwgGTpkrSW0AAAAASUVORK5CYII=');
 255     -webkit-order: 1;
 256 }
 257
 258 audio::-webkit-media-controls-play-button {
 259     width: 42px;
 260     height: 39px;
 261 }
 262
 263 video::-webkit-media-controls-play-button {
 264     width: 44px;
 265     height: 50px;
 266 }
 267
 268 audio::-webkit-media-controls-play-button:active,
 269 video::-webkit-media-controls-play-button:active {
 270     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAsCAYAAAANUxr1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0E5REFDQ0ZBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0E5REFDQ0VBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhBRjdGMDc4RTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhBRjdGMDc5RTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5aIXPQAAAFJJREFUeNrs2LENwCAQBMHHpv+KsR65hAuQHczG6H5iRnevyprh+5WO33W2aP+qnwUEBAQEBAQEBAQEBAQEBAQEBAQEBAT0Ze9P/nP4RrS/BRgAZAEHVf7/o+YAAAAASUVORK5CYII=');
 271 }
 272
 273 audio::-webkit-media-controls-play-button.paused,
 274 video::-webkit-media-controls-play-button.paused {
 275     background-size: 21px 22px;
 276     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODIyMTJEMTRBNUFCMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODIyMTJEMTNBNUFCMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhBRjdGMDdDRTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCQzEzNEY0RTNBMzExRTI5MzQ4QzU0RDI5RUIzNDk5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+JBpORQAAAcRJREFUeNrU2T8ohHEcx/HH05NSShkMBoZb3OAmFhYyyCKTzWa7zWTyZ/CvKwxKMYhBKSWFW2RxCyklg4FicIWIXC5/z+dX3289dM6/5+75PL96lXSnt+s5vt/nbMuyOqDIIj82rMAutLHHZlwS0BKEULUFjUEIVXGoD0Ko8QarEGEPVa+wBGH2UHfwAoTYQ9UzzEI1e6h6hCmoZA9VDzAOFeyh6h5GoJw9VN3CAJSxh6pr6IVS9lB1AT1Qwh6qziEKxeyh6hS6wWEPVcfQJbNxzsHZ7xOSf8mH0PlVE0OonrAMPfvQ/nk9YgrVE5Gxcse9HjGG6jED+4asR83MoXrMJWA7xIF70CfrkMUYegD9cp1m9JtMoUcSuCx72ofDEHoCg7Aoa07W42foGQzBHLx892A/QpMwLPvW00+fVMjQSxiDaUj/9smFCL2BmCyAqb/+kHyG3sEETMrX/zr5CE3JqxeTV9OT42VoWq6/Ubjy+rf3ItS8c2dkRU6y3tIxgVWst3TMH+d55ptketuxhvW2oxkQzAcStX4PBbki16GOZbzKFrgJDWyDqjtwG5pYR34TaD4Qa2VenBzZodfcYz/jeRdgAMHrnv9Jf7YjAAAAAElFTkSuQmCC');
 277 }
 278
 279 audio::-webkit-media-controls-play-button.paused:active,
 280 video::-webkit-media-controls-play-button.paused:active {
 281     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0E5REFDQzdBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0E5REFDQzZBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhBRjdGMDdDRTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCQzEzNEY0RTNBMzExRTI5MzQ4QzU0RDI5RUIzNDk5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Pkw0sAAAAglJREFUeNrMl0tERGEYhs8cR0TELFrMpkWrNq1q1Wq0qU1atWvXrlWt2nTVVbosImoRUUQkUqLSIjE1DDWLkYpatCgiYsg0p/fn/TjSfc7le3nMWZzhOb///7/vs13XbQMxYGnGtixrE5yCFktxbP7Wgx1wDJo0i0oawT445LNaUUmSq7sLGjSLSppBCmyBOs2iJjHQCjJgHdRqFfW+2w6yYAXUaBX1/qcD5MASqNYqKnFAJ7gE8yChVVRSBrrAFZgBVVpFJeWgG1yDcRDXKiqpAL3gBgyCSq2iEiM4QOFefoBKUUmcW8FsiR5uEZWiEnPIpnnoungIVYpKErzOLnm9OVpFJdUsGDkWEFurqKSGJTnLEm1rFZXUsunJsAmKaRWV1LGtTHnHI42ikgbPeJTULOrth21HsWAa9HMcsjSKnrP0mn3qentKLclRcAMUP2t+o47pAYbAGnj7rkuPKrdgFCyDwm/GibBzD8ZYPl//MveElQcwCRZA/j8DWtB5AlPsmF5KmSSDyjOYBXN8LilBiL5w9aa4mr7ET9E8998EePT76/0QNSd3kXPRfVD7qBTRAu/AEXAX9In8j6ipHqtgmFUllPxFtMg6PMC6HGp+I+qykzEt10VU9fYn0R2uYDrqzuUr0QOu4ImWHvCjqJlP+sCRtm5aRM8ouKd1LnE4Q297236NeRdgAAP83/qfKob+AAAAAElFTkSuQmCC');
 282 }
 283
 284 /* ================== FULLSCREEN BUTTON ====================== */
 285
 286 video::-webkit-media-controls-fullscreen-button {
 287     width: 44px;
 288     height: 50px;
 289     background-size: 15px 15px;
 290     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDY1NjBEMUE1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDY1NjBEMkE1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwNjU2MENGQTVBRjExRTQ4QjQ2RENDM0VDQUZBM0U3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQwNjU2MEQwQTVBRjExRTQ4QjQ2RENDM0VDQUZBM0U3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+OuvolQAAAMpJREFUeNrs1UEOgkAMBdDWcAQXeARXXMq4cuEBjWfQjR6nFjMQREY6SX9hYZOfAJtHh9AyEQkZSkSYHGtDC9UYfmp2bXfjIOG7Zq+5MnMd0bWkbDW3dP3Q1NopodLD6SYM/4Aj8S84Cp+EI/AsjMYtbwbBrccyxI9h8AA/eB01dx966Vn9h9cP60Y7F201pyl0Kv3PveDiIeM5e014v/+dB/8sDoEtOAyew6HwLxwO5/AQOIO/4ZDtpBOtxS+apntWARBZ9ZJ4CTAAmUZswlMSWgoAAAAASUVORK5CYII=');
 291     -webkit-order: 5;
 292 }
 293
 294 video::-webkit-media-controls-fullscreen-button:active {
 295     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NEE1MUQxNkE1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3NEE1MUQxN0E1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc0QTUxRDE0QTVBRjExRTQ4QjQ2RENDM0VDQUZBM0U3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc0QTUxRDE1QTVBRjExRTQ4QjQ2RENDM0VDQUZBM0U3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hm7UbgAAAMxJREFUeNrs1sEJwkAQBdBZsYQcYgmebMJzsBAPFmQpwRr0ok2kh/gjEcOSjbMwf5SQDx9CCDxC2JmEFhFdghhmJT9KDD/QTf92cWnwDd2iF7Skv3L7SYFe++s7Wnafn9UhLJ54DLvhY7ALnoLp+BRMxTUPUXDN5GrQ/eCcVxbHOOhHtRToAT17wzLLJbHAOTllbTWjgXDMPedWcPaQsRz8Wjw5n9k4BdbgNPgbToWncDqcwl3gMfwVr+3UrdQa3b1vrBm/6n+9JJ4CDAB4KPbj9o9c0wAAAABJRU5ErkJggg==');
 296 }
 297
 298 /* ================== AIRPLAY BUTTON ====================== */
 299
 300 audio::-webkit-media-controls-wireless-playback-picker-button,
 301 video::-webkit-media-controls-wireless-playback-picker-button {
 302     background-size: 21px 18px;
 303     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWZJREFUeNpiYWBg+M8wRAATwxACLDDG////GQerIxkZGf8PuZAddeyoY0cdO+rYUceOOnbUsaOOHXXskHQssO3JD8TrgFh0UDsW6EA2ILUOiAOBeDOQzzUoHQt0GKinMQ+InaBC5kA8Cyo+6EK2Doij0cRA/DZqhu5/SBfsPwO5GOqofzCzsOBMCs2HmUOZY6HR/hOPQ0H4DxD7Uc2xROJLQMyPZIguEH8gUu8XkHokvaDMd4JE+4lW+BiIZZAsk4CK/afADFDxdp9o/WRGCzmhgjV2SMFMZBRRzEBqObRoIgeAks46aJlM86JrMiizUFgCgTLlDNLLLdKiv4LMqMeFK0iynwSH+kGLIGo6FlQ2R1PVsdD0+ZXKDoVhUBntRJUMBswIKqBGCbQEoAVgg2Y4LYoyGLSZtx1aHtIS8APxRkLNSiYCzb01QKxCp7a1CqFmJROB5p4dnTsDoLyxHFqWYwCAAAMAXS6KZKmsGPwAAAAASUVORK5CYII=');
 304     -webkit-order: 3;
 305 }
 306
 307 audio::-webkit-media-controls-wireless-playback-picker-button {
 308     width: 44px;
 309     height: 39px;
 310 }
 311
 312 video::-webkit-media-controls-wireless-playback-picker-button {
 313     width: 44px;
 314     height: 50px;
 315 }
 316
 317 audio::-webkit-media-controls-wireless-playback-picker-button:active,
 318 video::-webkit-media-controls-wireless-playback-picker-button:active {
 319     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAU1JREFUeNpi/A8EDEMEMDEMIcCCxGYcxO78P+RCdtSxo44ddeyoY0cdO+rYUceOOnbUsUPVsfxAvA6IRQe7Y9mgDg0E4s1AzDVYHQvqacwDYico3xyIZ1GzB0JNx9YBcTSaGIjfRr3ODQIwUICjgfjff9wgk0LzwYAaIesEjX580T0ZiP2omQz+E4EvQXM7DOhCMxQbAXuYgXgZVD0MgDLfCSLtJTnNPgFiLyD+COVLAPE2NMfjA9xQ9TJQ/jcg9gXiB6SMG5CTW0GhsgHJYmKBDNTBtlBPvwZiRVqWBqAoXQ4tmsgBxCYdqjiWGpkFlCln0NqxFUCcSaVSMxFqHk0cCwrNFipXz21YKhKKHWsOTafMVHYsehVNsWNVaNEowdL40aLUsaBm3nZaNPewNCs3ErKHiYCP10BDlh6AYAwyEUhLdnTuDODNGwABBgCho8gNeNsIzwAAAABJRU5ErkJggg==');
 320 }
 321
 322 audio::-webkit-media-controls-wireless-playback-picker-button.playing,
 323 video::-webkit-media-controls-wireless-playback-picker-button.playing {
 324     opacity: 1;
 325     mix-blend-mode: normal;
 326     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWRJREFUeNpikQ37/59hiAAmhiEEWJDYjAPhgEcrCauRC2f4P+RCdtSxo44ddeyoY0cdO+rYUceOOnbUsUPVsfxAvA6IRQe7Y9mgDg0E4s1AzDVYHQvqacwDYico3xyIZ1GzB0JNx9YBcTSaGIjfNtgcC3JUPQ65CiDOHCyOdYJGP77ongzEfhSnMxLHDS4DsS0Qf4TydYH4MLQEIAS+ArEl1AwGaObbB03bVA/ZJ0DsheRQCSDeRqRDQYAbql4Gyv8GxL5A/ICUcQNycisoVDYgWUwskIE6GBY7rx+tZFCkZZplBuLlpEQfGtCFlsVs9Mhg1MgsoEw5g9aOpVoxBASJUPNo4lhQaLZQuXpukwvHqEgodqw5NJ0yU9mx4Coa6GAnajlWhRaNEvTGD9DBWpQ6FtTM206L5h6WZuVGoINFyXUsyMdroCFLDwCOQaCDuUh1LKy5Z0fnzgA4bwAdjDVvAAQYAKnHNWwjWYklAAAAAElFTkSuQmCC');
 327 }
 328
 329 /* ================== OPTIMIZED FULLSCREEN BUTTON ====================== */
 330
 331 video::-webkit-media-controls-optimized-fullscreen-button {
 332     width: 35px;
 333     height: 44px;
 334     background-size: 23px 18px;
 335     -webkit-order: 5;
 336 }
 337
 338 /* ================== SPACER ====================== */
 339
 340 video::-webkit-media-controls-spacer,
 341 audio::-webkit-media-controls-spacer {
 342     -webkit-appearance: none !important;
 343     -webkit-flex: 1 1 0; /* Should be the same as the timeline container. */
 344     -webkit-order: 2;
 345     height: 8px;
 346     margin: 0;
 347     background-color: transparent !important;
 348 }
 349
 350 /* ================== TIMELINE ====================== */
 351
 352 video::-webkit-media-controls-timeline,
 353 audio::-webkit-media-controls-timeline {
 354     -webkit-appearance: none !important;
 355     -webkit-flex: 1 1 0;
 356     height: 8px;
 357     margin: 0;
 358     background-color: transparent !important;
 359     background-size: 100% 100%;
 360     border: none !important;
 361     border-radius: 0 !important;
 362     box-sizing: content-box !important;
 363     -webkit-transform: translate3d(0, 0, 0);
 364 }
 365
 366 audio::-webkit-media-controls-timeline::-webkit-slider-runnable-track,
 367 video::-webkit-media-controls-timeline::-webkit-slider-runnable-track {
 368     -webkit-appearance: none !important;
 369     background: none !important;
 370     border: none !important;
 371 }
 372
 373 video::-webkit-media-controls-timeline::-webkit-slider-thumb,
 374 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
 375     -webkit-appearance: none !important;
 376     width: 15px;
 377     height: 50px;
 378     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAiCAYAAABIiGl0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iUGl4ZWxtYXRvciAyLjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTkwQ0UwODdBQTcxMTFFNEE5QTZGQTVGMjFBNkUxN0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTkwQ0UwODhBQTcxMTFFNEE5QTZGQTVGMjFBNkUxN0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1OTBDRTA4NUFBNzExMUU0QTlBNkZBNUYyMUE2RTE3RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1OTBDRTA4NkFBNzExMUU0QTlBNkZBNUYyMUE2RTE3RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pofoz4wAAAJGSURBVHjaxJfNTsJAEMfbLmoNaKIhIE18A+LReOXmi/gQnnwSLz6Fnjh4Id4kHElI5EDwpIkgImWdf/Nfs5ISCrR1kkmg7c5vZz/mw3WSy66oL7ojqqiQkPotOhGdaq1XGnMTvC+KlprN5kW9Xr8sFotnhUKhCsUHs9lsCB2NRu1Op3PfaDRa8vhDdCSqnQ0E3lX7/f6NGH7RCQXfYgzG0sZacthut6/G4/Gj3lAwFjZgKyn0qNfrXYdh+Ka3FNiALdhc6Sk+1CkL4Us997E0aXga5zmX3Y87vdVt9jTJnvPA/blJJZxEnbHwtJds8Mk6V2ZTAQMsAD1EJAQHpdSpk7GAARaYAPuISE5OQpYfeYwwmBeYrMhjZeJuHkKWAtj7B7DnJchQaQsylgvwHGktL6qwXsH0TE7NETw091gjiecFFtYzmNFSo3LICyysBzBxsI5xoWUJWllHL8lSfTnViFyTyGO4PhgMbrP2lgxNpnPAdBXkkBYDsg48lqbRDLrd7t18Pn9P21PYhG3zl8yoXsY+1zCjDEufgIxjMqPCHMm5wpdBBsVeQK2QpUzZs8dKsGY+SrG8DSxvj8j6DdOKHUPZhkO3KOiDBWiZDGW3MC4f7FPVYvKQyuE8YQvzFJMUcJg+qfit3YVKc4clqB8H3zAThWzmJmzstGN1fI511LVJXYzl7hZQ00F+2dA4sH3P7Am4a0zAeDklEODZYueoVgz+DS4rWk5tTdj2cmqt4tr9sccJFqyG3N4CGxrSu3AZ0MiPAAMAZrLkuVVmRJsAAAAASUVORK5CYII=');
 379     background-repeat: no-repeat;
 380     background-size: 15px 17px;
 381     background-position: 0px 18px;
 382     background-color: transparent !important;
 383     border: none !important;
 384     -webkit-transform: rotateZ(0deg);
 385 }
 386
 387 video::-webkit-media-controls-timeline::-webkit-slider-thumb:active,
 388 audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active {
 389     background-color: transparent !important;
 390 }
 391
 392 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
 393     height: 39px;
 394     background-position: 0px 12px;
 395 }
 396
 397 video::-webkit-media-controls-current-time-display,
 398 video::-webkit-media-controls-time-remaining-display,
 399 audio::-webkit-media-controls-current-time-display,
 400 audio::-webkit-media-controls-time-remaining-display {
 401     -webkit-user-select: none;
 402     -webkit-flex: 0 0 0;
 403     display: -webkit-flex;
 404     -webkit-align-items: center;
 405     overflow-y: hidden;
 406     overflow-x: hidden;
 407     letter-spacing: normal;
 408     word-spacing: normal;
 409     line-height: normal;
 410     text-transform: none;
 411     text-indent: 0px;
 412     text-decoration: none;
 413     color: black;
 414     mix-blend-mode: plus-darker;
 415     opacity: 0.55;
 416     height: 50px;
 417     font-size: 13px;
 418 }
 419
 420 audio::-webkit-media-controls-current-time-display,
 421 video::-webkit-media-controls-current-time-display {
 422     min-width: 32px;
 423     -webkit-justify-content: right;
 424     padding-right: 6px;
 425 }
 426
 427 audio::-webkit-media-controls-time-remaining-display,
 428 video::-webkit-media-controls-time-remaining-display {
 429     min-width: 38px;
 430     -webkit-justify-content: left;
 431     padding-left: 6px;
 432     margin-right: 6px;
 433 }
 434
 435 video::-webkit-media-controls-timeline-container,
 436 audio::-webkit-media-controls-timeline-container {
 437     display: -webkit-flex;
 438     -webkit-flex-direction: row;
 439     -webkit-align-items: center;
 440     -webkit-user-select: none;
 441     -webkit-flex: 1 1 0; /* Any changes here should also be made on the spacer. */
 442     position: relative;
 443     padding: 0;
 444     -webkit-order: 2;
 445 }
 446
 447 audio::-webkit-media-controls-timeline-container {
 448     padding-right: 10px;
 449 }
 450
 451 audio::-webkit-media-controls-current-time-display.three-digit-time,
 452 video::-webkit-media-controls-current-time-display.three-digit-time {
 453     min-width: 31px;
 454 }
 455
 456 audio::-webkit-media-controls-time-remaining-display.three-digit-time,
 457 video::-webkit-media-controls-time-remaining-display.three-digit-time {
 458     min-width: 40px;
 459 }
 460
 461 audio::-webkit-media-controls-current-time-display.four-digit-time,
 462 video::-webkit-media-controls-current-time-display.four-digit-time {
 463     min-width: 40px;
 464 }
 465
 466 audio::-webkit-media-controls-time-remaining-display.four-digit-time,
 467 video::-webkit-media-controls-time-remaining-display.four-digit-time {
 468     min-width: 49px;
 469 }
 470
 471 audio::-webkit-media-controls-current-time-display.five-digit-time,
 472 video::-webkit-media-controls-current-time-display.five-digit-time {
 473     min-width: 51px;
 474 }
 475
 476 audio::-webkit-media-controls-time-remaining-display.five-digit-time,
 477 video::-webkit-media-controls-time-remaining-display.five-digit-time {
 478     min-width: 60px;
 479 }
 480
 481 audio::-webkit-media-controls-current-time-display.six-digit-time,
 482 video::-webkit-media-controls-current-time-display.six-digit-time {
 483     min-width: 60px;
 484 }
 485
 486 audio::-webkit-media-controls-time-remaining-display.six-digit-time,
 487 video::-webkit-media-controls-time-remaining-display.six-digit-time {
 488     min-width: 69px;
 489 }
 490
 491 /* ================== STATUS DISPLAY ====================== */
 492
 493 video::-webkit-media-controls-status-display,
 494 audio::-webkit-media-controls-status-display {
 495
 496     overflow: hidden;
 497     font-family: -apple-system-font;
 498     letter-spacing: normal;
 499     word-spacing: normal;
 500     line-height: normal;
 501     text-transform: none;
 502     text-indent: 0px;
 503     text-decoration: none;
 504     color: black;
 505     mix-blend-mode: plus-darker;
 506     opacity: 0.55;
 507     -webkit-order: 2;
 508 }
 509
 510 /* ================== CAPTIONS ====================== */
 511
 512 video::-webkit-media-text-track-container {
 513     position: relative;
 514     width: 100%;
 515     overflow: hidden;
 516     padding-bottom: 5px;
 517     z-index: 0;
 518
 519     text-align: center;
 520     color: rgba(255, 255, 255, 1);
 521
 522     letter-spacing: normal;
 523     word-spacing: normal;
 524     text-transform: none;
 525     text-indent: 0;
 526     text-decoration: none;
 527     pointer-events: none;
 528     -webkit-user-select: none;
 529     word-break: break-word;
 530
 531     -webkit-flex: 1 1;
 532
 533     -webkit-line-box-contain: block inline-box replaced;
 534 }
 535
 536 video::cue {
 537     background-color: rgba(0, 0, 0, 0.8);
 538 }
 539
 540 video::-webkit-media-text-track-display {
 541     position: absolute;
 542     overflow: hidden;
 543     white-space: pre-wrap;
 544     -webkit-box-sizing: border-box;
 545     font: 22px sans-serif;
 546 }
 547
 548 video::-webkit-media-text-track-display-backdrop {
 549     display: inline-block;
 550 }
 551
 552 video::cue(:future) {
 553     color: gray;
 554 }
 555
 556 video::-webkit-media-text-track-container b {
 557     font-weight: bold;
 558 }
 559
 560 video::-webkit-media-text-track-container u {
 561     text-decoration: underline;
 562 }
 563
 564 video::-webkit-media-text-track-container i {
 565     font-style: italic;
 566 }
 567
 568 /* ==================== AIRPLAY PLACARD ==================== */
 569
 570 video::-webkit-media-controls-wireless-playback-status,
 571 audio::-webkit-media-controls-wireless-playback-status {
 572     display: block;
 573     width: 100%;
 574     height: 100%;
 575     background-color: black;
 576     background-repeat: no-repeat;
 577     background-position: 50% 50%;
 578     background-size: 100% 50%;
 579 }
 580
 581 video::-webkit-media-controls-wireless-playback-status.hidden,
 582 audio::-webkit-media-controls-wireless-playback-status.hidden {
 583     display: none;
 584 }