Source/WebCore/Modules/modern-media-controls/controls/media-controls.css

   1 /*
   2  * Copyright (C) 2016 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  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
  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 :host(audio) {
  27     width: 200px;
  28     height: 50px;
  29 }
  30
  31 /* We need to use relative positioning due to webkit.org/b/163603 */
  32 .media-controls-container {
  33     position: relative;
  34 }
  35
  36 .media-controls-container,
  37 .media-controls-container > * {
  38     left: 0;
  39     top: 0;
  40     width: 100%;
  41 }
  42
  43 .media-controls-container,
  44 .media-controls-container * {
  45     -webkit-text-zoom: reset;
  46     -webkit-text-size-adjust: auto;
  47 }
  48
  49 .media-controls-container > * {
  50     position: absolute;
  51 }
  52
  53 .media-controls {
  54     height: 100%;
  55     font-family: -apple-system;
  56     -webkit-user-select: none;
  57     cursor: default;
  58 }
  59
  60 :host(:-webkit-animating-full-screen-transition) .media-controls {
  61     display: none;
  62 }
  63
  64 .media-controls > .controls-bar {
  65     position: absolute;
  66 }
  67
  68 .media-controls.fade-in {
  69     animation-name: fade-in;
  70     animation-duration: 350ms;
  71 }
  72
  73 @keyframes fade-in {
  74     from { opacity: 0 }
  75     to   { opacity: 1 }
  76 }