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 }
  83
  84 video:-webkit-full-page-media {
  85     margin: auto;
  86     position: absolute;
  87     top: 0;
  88     right: 0;
  89     bottom: 0;
  90     left: 0;
  91 }
  92
  93 audio:-webkit-full-page-media, video:-webkit-full-page-media {
  94     max-height: 100%;
  95     max-width: 100%;
  96 }
  97
  98 audio:-webkit-full-page-media::-webkit-media-controls-panel,
  99 video:-webkit-full-page-media::-webkit-media-controls-panel {
 100     bottom: 0px;
 101 }
 102
 103 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
 104     -webkit-appearance: media-mute-button;
 105     display: flex;
 106     flex: none;
 107     border: none;
 108     box-sizing: border-box;
 109     width: 35px;
 110     height: 30px;
 111     line-height: 30px;
 112     margin: 0 6px 0 0;
 113     padding: 0;
 114     background-color: initial;
 115     color: inherit;
 116 }
 117
 118 audio::-webkit-media-controls-overlay-enclosure {
 119     display: none;
 120 }
 121
 122 video::-webkit-media-controls-overlay-enclosure {
 123     display: flex;
 124     position: relative;
 125     flex-direction: column;
 126     justify-content: flex-end;
 127     align-items: center;
 128     flex: 1 1;
 129     width: 100%;
 130     max-width: 800px;
 131     text-indent: 0;
 132     box-sizing: border-box;
 133     overflow: hidden;
 134 }
 135
 136 video::-webkit-media-controls-overlay-play-button {
 137     -webkit-appearance: media-overlay-play-button;
 138     display: flex;
 139     position: absolute;
 140     top: 50%;
 141     left: 50%;
 142     margin-left: -40px;
 143     margin-top: -40px;
 144     border: none;
 145     box-sizing: border-box;
 146     background-color: transparent;
 147     width: 80px;
 148     height: 80px;
 149     padding: 0;
 150 }
 151
 152 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
 153     -webkit-appearance: media-play-button;
 154     display: flex;
 155     flex: none;
 156     border: none;
 157     box-sizing: border-box;
 158     width: 30px;
 159     height: 30px;
 160     line-height: 30px;
 161     margin-left: 9px;
 162     margin-right: 9px;
 163     padding: 0;
 164     background-color: initial;
 165     color: inherit;
 166 }
 167
 168 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
 169     -webkit-appearance: media-controls-background;
 170     display: flex;
 171     flex-direction: row;
 172     align-items: center;
 173     justify-content: flex-end;
 174     flex: 1 1;
 175     -webkit-user-select: none;
 176     height: 16px;
 177     min-width: 0;
 178 }
 179
 180 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
 181 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
 182     -webkit-appearance: media-current-time-display;
 183     -webkit-user-select: none;
 184     flex: none;
 185     display: flex;
 186     border: none;
 187     cursor: default;
 188
 189     height: 30px;
 190     margin: 0 9px 0 0;
 191     padding: 0;
 192
 193     line-height: 30px;
 194     font-family: Arial, Helvetica, sans-serif;
 195     font-size: 13px;
 196     font-weight: bold;
 197     font-style: normal;
 198     color: white;
 199
 200     letter-spacing: normal;
 201     word-spacing: normal;
 202     text-transform: none;
 203     text-indent: 0;
 204     text-shadow: none;
 205     text-decoration: none;
 206 }
 207
 208 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
 209     -webkit-appearance: media-slider;
 210     display: flex;
 211     flex: 1 1 auto;
 212     height: 8px;
 213     margin: 0 15px 0 0;
 214     padding: 0;
 215     background-color: transparent;
 216     min-width: 25px;
 217     border: initial;
 218     color: inherit;
 219 }
 220
 221 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
 222     -webkit-appearance: media-volume-slider;
 223     display: flex;
 224     /* The 1.9 value was empirically chosen to match old-flexbox behaviour
 225      * and be aesthetically pleasing.
 226      */
 227     flex: 1 1.9 auto;
 228     height: 8px;
 229     max-width: 70px;
 230     margin: 0 15px 0 0;
 231     padding: 0;
 232     background-color: transparent;
 233     min-width: 15px;
 234     border: initial;
 235     color: inherit;
 236 }
 237
 238 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules.
 239    https://code.google.com/p/chromium/issues/detail?id=112508
 240    https://bugs.webkit.org/show_bug.cgi?id=62218
 241 */
 242 input[type="range"]::-webkit-media-slider-container {
 243     display: flex;
 244     align-items: center;
 245     flex-direction: row; /* This property is updated by C++ code. */
 246     box-sizing: border-box;
 247     height: 100%;
 248     width: 100%;
 249     border: 1px solid rgba(230, 230, 230, 0.35);
 250     border-radius: 4px;
 251     background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
 252 }
 253
 254 /* The negative right margin causes the track to overflow its container. */
 255 input[type="range"]::-webkit-media-slider-container > div {
 256     margin-right: -14px;
 257 }
 258
 259 input[type="range"]::-webkit-media-slider-thumb {
 260     margin-left: -7px;
 261     margin-right: -7px;
 262 }
 263
 264 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
 265     -webkit-appearance: media-enter-fullscreen-button;
 266     display: flex;
 267     flex: none;
 268     border: none;
 269     box-sizing: border-box;
 270     width: 30px;
 271     height: 30px;
 272     line-height: 30px;
 273     margin-left: -5px;
 274     margin-right: 9px;
 275     padding: 0;
 276     background-color: initial;
 277     color: inherit;
 278 }
 279
 280 audio::-webkit-media-controls-toggle-closed-captions-button {
 281     display: none;
 282 }
 283
 284 video::-webkit-media-controls-toggle-closed-captions-button {
 285     -webkit-appearance: media-toggle-closed-captions-button;
 286     display: flex;
 287     flex: none;
 288     border: none;
 289     box-sizing: border-box;
 290     width: 30px;
 291     height: 30px;
 292     line-height: 30px;
 293     margin-left: -5px;
 294     margin-right: 9px;
 295     padding: 0;
 296     background-color: initial;
 297     color: inherit;
 298 }
 299
 300 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
 301     display: none;
 302 }
 303
 304 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button {
 305     display: none;
 306 }
 307
 308 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button {
 309     display: none;
 310 }
 311
 312 video::-webkit-media-text-track-container {
 313     position: relative;
 314     width: 100%;
 315     overflow: hidden;
 316     padding-bottom: 5px;
 317
 318     font: 22px sans-serif;
 319     text-align: center;
 320     color: rgba(255, 255, 255, 1);
 321
 322     letter-spacing: normal;
 323     word-spacing: normal;
 324     text-transform: none;
 325     text-indent: 0;
 326     text-decoration: none;
 327     pointer-events: none;
 328     -webkit-user-select: none;
 329     word-break: break-word;
 330
 331     flex: 1 1;
 332 }
 333
 334 video::cue {
 335     display: inline;
 336
 337     background-color: rgba(0, 0, 0, 0.8);
 338     padding: 2px 2px;
 339 }
 340
 341 video::-webkit-media-text-track-region {
 342     position: absolute;
 343     line-height: 5.33vh;
 344     writing-mode: horizontal-tb;
 345     background: rgba(0, 0, 0, 0.8);
 346     color: rgba(255, 255, 255, 1);
 347     word-wrap: break-word;
 348     overflow-wrap: break-word;
 349     overflow: hidden;
 350 }
 351
 352 video::-webkit-media-text-track-region-container {
 353     position: relative;
 354
 355     display: flex;
 356     flex-flow: column;
 357     flex-direction: column;
 358 }
 359
 360 video::-webkit-media-text-track-region-container.scrolling {
 361     transition: top 433ms linear;
 362 }
 363
 364
 365 video::-webkit-media-text-track-display {
 366     position: absolute;
 367     overflow: hidden;
 368     white-space: pre-wrap;
 369     -webkit-box-sizing: border-box;
 370     flex: 0 0 auto;
 371 }
 372
 373 video::cue(:future) {
 374     color: gray;
 375 }
 376
 377 video::-webkit-media-text-track-container b {
 378     font-weight: bold;
 379 }
 380
 381 video::-webkit-media-text-track-container u {
 382     text-decoration: underline;
 383 }
 384
 385 video::-webkit-media-text-track-container i {
 386     font-style: italic;
 387 }