Source/WebCore/css/mediaControlsChromium.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 body:-webkit-full-page-media {
  29     background-color: rgb(0, 0, 0);
  30 }
  31
  32 audio {
  33     width: 300px;
  34     height: 32px;
  35 }
  36
  37 audio:-webkit-full-page-media, video:-webkit-full-page-media {
  38     max-height: 100%;
  39     max-width: 100%;
  40 }
  41
  42 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
  43     width: 100%;
  44     height: 32px;
  45     bottom: 0;
  46 }
  47
  48 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
  49     -webkit-user-select: none;
  50     -webkit-box-pack: end;
  51     position: relative;
  52     overflow: visible;
  53     bottom: 0;
  54     width: 100%;
  55     height: 32px;
  56     z-index: 0;
  57     background-color: rgba(0, 0, 0, 0.6);
  58 }
  59
  60 video:-webkit-full-page-media::-webkit-media-controls-panel {
  61     bottom: 0px;
  62 }
  63
  64 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
  65     -webkit-box-align: end;
  66 }
  67
  68 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
  69     -webkit-appearance: media-mute-button;
  70     position: relative;
  71     top: auto;
  72     bottom: 0;
  73     right: 0;
  74     left: auto;
  75
  76     width: 34px;
  77     height: 32px;
  78 }
  79
  80 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
  81     -webkit-appearance: media-play-button;
  82
  83     position: absolute;
  84     top: auto;
  85     bottom: 7px;
  86     left: 7px;
  87     right: 6px;
  88
  89     width: 18px;
  90     height: 19px;
  91 }
  92
  93 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
  94     -webkit-appearance: media-timeline-container;
  95     -webkit-user-select: none;
  96     -webkit-box-orient: horizontal;
  97     -webkit-box-align: center;
  98     -webkit-box-pack: center;
  99     -webkit-box-flex: 1;
 100
 101     position: absolute;
 102     top: auto;
 103     bottom: 0;
 104     left: 30px;
 105     right: 34px;
 106
 107     width: auto;
 108     height: 32px;
 109
 110     border-left: 1px solid rgba(255, 255, 255, 0.2);
 111     border-right: 1px solid rgba(255, 255, 255, 0.2);
 112 }
 113
 114 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
 115     -webkit-appearance: media-current-time-display;
 116     -webkit-user-select: none;
 117     display: -webkit-box;
 118     -webkit-box-flex: 0;
 119     -webkit-box-pack: center;
 120     -webkit-box-align: center;
 121
 122     overflow: hidden;
 123     cursor: default;
 124
 125     line-height: 21px;
 126     height: 20px;
 127     width: 58px;
 128
 129     text-align: center;
 130     font-family: Arial;
 131     font-size: 16px;
 132     font-weight: bold;
 133     color: white;
 134
 135     letter-spacing: normal;
 136     word-spacing: normal;
 137     text-transform: none;
 138     text-indent: 0;
 139     text-shadow: none;
 140     text-decoration: none;
 141 }
 142
 143 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
 144     -webkit-appearance: media-slider;
 145     display: -webkit-box;
 146     box-sizing: border-box;
 147     -webkit-box-flex: 1;
 148
 149     padding: 0px;
 150     margin: 0px 6px;
 151     height: 18px;
 152
 153     border-color: rgba(255, 255, 255, 0.2);
 154     border-style: solid;
 155     border-width: 1px;
 156     border-radius: 2px;
 157     background-color: rgba(255, 255, 255, 0.08);
 158     color: rgb(50, 140, 223);
 159 }
 160
 161 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
 162     -webkit-appearance: media-volume-slider-container;
 163     position: absolute;
 164     bottom: 32px;
 165
 166     width: 34px;
 167     height: 100px;
 168
 169     background-color: rgba(0, 0, 0, 0.6);
 170 }
 171
 172 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
 173     -webkit-appearance: media-volume-slider;
 174     display: inline;
 175     position: absolute;
 176
 177     top: 10px;
 178     left: 12px;
 179
 180     width: 10px;
 181     height: 80px;
 182 }