src/third_party/WebKit/Source/core/css/mediaControls.css

   1 /*
   2  * Copyright (C) 2009 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Google Inc.
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  * 1. Redistributions of source code must retain the above copyright
   9  *    notice, this list of conditions and the following disclaimer.
  10  * 2. Redistributions in binary form must reproduce the above copyright
  11  *    notice, this list of conditions and the following disclaimer in the
  12  *    documentation and/or other materials provided with the distribution.
  13  *
  14  * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
  15  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  16  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  17  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
  18  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  19  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  20  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  21  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  24  */
  25
  26 /* Chromium default media controls */
  27
  28 /* WARNING: This css file can only style <audio> and <video> elements */
  29
  30 audio {
  31     width: 300px;
  32     height: 30px;
  33 }
  34
  35 audio::-webkit-media-controls,
  36 video::-webkit-media-controls {
  37     width: inherit;
  38     height: inherit;
  39     position: relative;
  40     direction: ltr;
  41     display: flex;
  42     flex-direction: column;
  43     justify-content: flex-end;
  44     align-items: center;
  45 }
  46
  47 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
  48     width: 100%;
  49     max-width: 800px;
  50     height: 30px;
  51     flex-shrink: 0;
  52     bottom: 0;
  53     text-indent: 0;
  54     padding: 0;
  55     box-sizing: border-box;
  56 }
  57
  58 video::-webkit-media-controls-enclosure {
  59     padding: 0px 5px 5px 5px;
  60     height: 35px;
  61     flex-shrink: 0;
  62 }
  63
  64 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
  65     display: flex;
  66     flex-direction: row;
  67     align-items: center;
  68     /* We use flex-start here to ensure that the play button is visible even
  69      * if we are too small to show all controls.
  70      */
  71     justify-content: flex-start;
  72     -webkit-user-select: none;
  73     position: relative;
  74     width: 100%;
  75     z-index: 0;
  76     overflow: hidden;
  77     text-align: right;
  78     bottom: auto;
  79     height: 30px;
  80     background-color: rgba(20, 20, 20, 0.8);
  81     border-radius: 5px;
  82     /* The duration is also specified in MediaControlElements.cpp and LayoutTests/media/media-controls.js */
  83     transition: opacity 0.3s;
  84 }
  85
  86 video:-webkit-full-page-media {
  87     margin: auto;
  88     position: absolute;
  89     top: 0;
  90     right: 0;
  91     bottom: 0;
  92     left: 0;
  93 }
  94
  95 audio:-webkit-full-page-media, video:-webkit-full-page-media {
  96     max-height: 100%;
  97     max-width: 100%;
  98 }
  99
 100 audio:-webkit-full-page-media::-webkit-media-controls-panel,
 101 video:-webkit-full-page-media::-webkit-media-controls-panel {
 102     bottom: 0px;
 103 }
 104
 105 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
 106     -webkit-appearance: media-mute-button;
 107     display: flex;
 108     flex: none;
 109     border: none;
 110     box-sizing: border-box;
 111     width: 35px;
 112     height: 30px;
 113     line-height: 30px;
 114     margin: 0 6px 0 0;
 115     padding: 0;
 116     background-color: initial;
 117     color: inherit;
 118 }
 119
 120 audio::-webkit-media-controls-overlay-enclosure {
 121     display: none;
 122 }
 123
 124 video::-webkit-media-controls-overlay-enclosure {
 125     display: flex;
 126     position: relative;
 127     flex-direction: column;
 128     justify-content: flex-end;
 129     align-items: center;
 130     flex: 1 1;
 131     width: 100%;
 132     max-width: 800px;
 133     text-indent: 0;
 134     box-sizing: border-box;
 135     overflow: hidden;
 136 }
 137
 138 video::-webkit-media-controls-overlay-play-button {
 139     -webkit-appearance: media-overlay-play-button;
 140     display: flex;
 141     position: absolute;
 142     top: 50%;
 143     left: 50%;
 144     margin-left: -40px;
 145     margin-top: -40px;
 146     border: none;
 147     box-sizing: border-box;
 148     background-color: transparent;
 149     width: 80px;
 150     height: 80px;
 151     padding: 0;
 152 }
 153
 154 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
 155     -webkit-appearance: media-play-button;
 156     display: flex;
 157     flex: none;
 158     border: none;
 159     box-sizing: border-box;
 160     width: 30px;
 161     height: 30px;
 162     line-height: 30px;
 163     margin-left: 9px;
 164     margin-right: 9px;
 165     padding: 0;
 166     background-color: initial;
 167     color: inherit;
 168 }
 169
 170 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
 171     -webkit-appearance: media-controls-background;
 172     display: flex;
 173     flex-direction: row;
 174     align-items: center;
 175     justify-content: flex-end;
 176     flex: 1 1;
 177     -webkit-user-select: none;
 178     height: 16px;
 179     min-width: 0;
 180 }
 181
 182 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
 183 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
 184     -webkit-appearance: media-current-time-display;
 185     -webkit-user-select: none;
 186     flex: none;
 187     display: flex;
 188     border: none;
 189     cursor: default;
 190
 191     height: 30px;
 192     margin: 0 9px 0 0;
 193     padding: 0;
 194
 195     line-height: 30px;
 196     font-family: Arial, Helvetica, sans-serif;
 197     font-size: 13px;
 198     font-weight: bold;
 199     font-style: normal;
 200     color: white;
 201
 202     letter-spacing: normal;
 203     word-spacing: normal;
 204     text-transform: none;
 205     text-indent: 0;
 206     text-shadow: none;
 207     text-decoration: none;
 208 }
 209
 210 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
 211     -webkit-appearance: media-slider;
 212     display: flex;
 213     flex: 1 1 auto;
 214     height: 8px;
 215     margin: 0 15px 0 0;
 216     padding: 0;
 217     background-color: transparent;
 218     min-width: 25px;
 219     border: initial;
 220     color: inherit;
 221 }
 222
 223 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
 224     -webkit-appearance: media-volume-slider;
 225     display: flex;
 226     /* The 1.9 value was empirically chosen to match old-flexbox behaviour
 227      * and be aesthetically pleasing.
 228      */
 229     flex: 1 1.9 auto;
 230     height: 8px;
 231     max-width: 70px;
 232     margin: 0 15px 0 0;
 233     padding: 0;
 234     background-color: transparent;
 235     min-width: 15px;
 236     border: initial;
 237     color: inherit;
 238 }
 239
 240 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules.
 241    https://code.google.com/p/chromium/issues/detail?id=112508
 242    https://bugs.webkit.org/show_bug.cgi?id=62218
 243 */
 244 input[type="range" i]::-webkit-media-slider-container {
 245     display: flex;
 246     align-items: center;
 247     flex-direction: row; /* This property is updated by C++ code. */
 248     box-sizing: border-box;
 249     height: 100%;
 250     width: 100%;
 251     border: 1px solid rgba(230, 230, 230, 0.35);
 252     border-radius: 4px;
 253     background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
 254 }
 255
 256 /* The negative right margin causes the track to overflow its container. */
 257 input[type="range" i]::-webkit-media-slider-container > div {
 258     margin-right: -14px;
 259 }
 260
 261 input[type="range" i]::-webkit-media-slider-thumb {
 262     margin-left: -7px;
 263     margin-right: -7px;
 264 }
 265
 266 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
 267     -webkit-appearance: media-enter-fullscreen-button;
 268     display: flex;
 269     flex: none;
 270     border: none;
 271     box-sizing: border-box;
 272     width: 30px;
 273     height: 30px;
 274     line-height: 30px;
 275     margin-left: -5px;
 276     margin-right: 9px;
 277     padding: 0;
 278     background-color: initial;
 279     color: inherit;
 280 }
 281
 282 audio::-webkit-media-controls-toggle-closed-captions-button {
 283     display: none;
 284 }
 285
 286 video::-webkit-media-controls-toggle-closed-captions-button {
 287     -webkit-appearance: media-toggle-closed-captions-button;
 288     display: flex;
 289     flex: none;
 290     border: none;
 291     box-sizing: border-box;
 292     width: 30px;
 293     height: 30px;
 294     line-height: 30px;
 295     margin-left: -5px;
 296     margin-right: 9px;
 297     padding: 0;
 298     background-color: initial;
 299     color: inherit;
 300 }
 301
 302 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
 303     display: none;
 304 }
 305
 306 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button {
 307     display: none;
 308 }
 309
 310 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button {
 311     display: none;
 312 }
 313
 314 video::-webkit-media-text-track-container {
 315     position: relative;
 316     width: 100%;
 317     overflow: hidden;
 318     padding-bottom: 5px;
 319
 320     font: 22px sans-serif;
 321     text-align: center;
 322     color: rgba(255, 255, 255, 1);
 323
 324     letter-spacing: normal;
 325     word-spacing: normal;
 326     text-transform: none;
 327     text-indent: 0;
 328     text-decoration: none;
 329     pointer-events: none;
 330     -webkit-user-select: none;
 331     word-break: break-word;
 332
 333     flex: 1 1;
 334 }
 335
 336 video::cue {
 337     display: inline;
 338
 339     background-color: rgba(0, 0, 0, 0.8);
 340     padding: 2px 2px;
 341 }
 342
 343 video::-webkit-media-text-track-region {
 344     position: absolute;
 345     line-height: 5.33vh;
 346     writing-mode: horizontal-tb;
 347     background: rgba(0, 0, 0, 0.8);
 348     color: rgba(255, 255, 255, 1);
 349     word-wrap: break-word;
 350     overflow-wrap: break-word;
 351     overflow: hidden;
 352 }
 353
 354 video::-webkit-media-text-track-region-container {
 355     position: relative;
 356
 357     display: flex;
 358     flex-flow: column;
 359     flex-direction: column;
 360 }
 361
 362 video::-webkit-media-text-track-region-container.scrolling {
 363     transition: top 433ms linear;
 364 }
 365
 366
 367 video::-webkit-media-text-track-display {
 368     position: absolute;
 369     overflow: hidden;
 370     white-space: pre-wrap;
 371     -webkit-box-sizing: border-box;
 372     flex: 0 0 auto;
 373 }
 374
 375 video::cue(:future) {
 376     color: gray;
 377 }
 378
 379 video::-webkit-media-text-track-container b {
 380     font-weight: bold;
 381 }
 382
 383 video::-webkit-media-text-track-container u {
 384     text-decoration: underline;
 385 }
 386
 387 video::-webkit-media-text-track-container i {
 388     font-style: italic;
 389 }