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