WebCore/css/mediaControlsQuickTime.css

   1 /*
   2  * Copyright (C) 2009, 2010 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 COMPUTER, 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 COMPUTER, INC. OR
  17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  19  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  20  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  21  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  22  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  23  */
  24
  25 /* alternate media controls - Extend mediaControls.css */
  26
  27 audio {
  28     width: 200px;
  29     height: 25px;
  30 }
  31
  32 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
  33     /* In mediaControls.css */
  34     -webkit-appearance: media-controls-background;
  35     overflow: visible;
  36     height: 25px;
  37 }
  38
  39 video:-webkit-full-page-media::-webkit-media-controls-panel {
  40     bottom: -25px;
  41 }
  42
  43 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
  44     -webkit-box-ordinal-group: 2; /* Before the fullscreen button */
  45
  46     width: 14px;
  47     height: 12px;
  48     margin-left: 2px;
  49     margin-right: 9px;
  50 }
  51
  52 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
  53     width: 16px;
  54     height: 16px;
  55     margin-left: 6px;
  56     margin-right: 1px;
  57 }
  58
  59 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
  60     -webkit-appearance: none;
  61     -webkit-box-orient: horizontal;
  62     -webkit-box-align: center;
  63     -webkit-box-pack: center;
  64     -webkit-box-flex: 1;
  65     text-align: right;
  66     height: auto;
  67 }
  68
  69 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
  70     -webkit-user-select: none;
  71     display: -webkit-box;
  72     -webkit-box-flex: 0;
  73     -webkit-box-pack: center;
  74     -webkit-box-align: center;
  75     cursor: default;
  76     font: -webkit-small-control;
  77     font-size: 9px;
  78     overflow: hidden;
  79     width: 45px;
  80     color: white;
  81     text-shadow: black 0px 1px 1px;
  82
  83     letter-spacing: normal;
  84     word-spacing: normal;
  85     line-height: normal;
  86     text-transform: none;
  87     text-indent: 0;
  88     text-decoration: none;
  89 }
  90
  91 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
  92     -webkit-user-select: none;
  93     display: -webkit-box;
  94     -webkit-box-flex: 0;
  95     -webkit-box-pack: center;
  96     -webkit-box-align: center;
  97     cursor: default;
  98     font: -webkit-small-control;
  99     font-size: 9px;
 100     overflow: hidden;
 101     width: 45px;
 102     color: white;
 103     text-shadow: black 0px 1px 1px;
 104
 105     letter-spacing: normal;
 106     word-spacing: normal;
 107     line-height: normal;
 108     text-transform: none;
 109     text-indent: 0;
 110     text-decoration: none;
 111 }
 112
 113 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
 114     display: -webkit-box;
 115     -webkit-box-flex: 1;
 116     height: 13px;
 117     padding: 0px;
 118     margin: 0px;
 119     margin-top: 2px;
 120 }
 121
 122 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
 123     display: none;
 124     width: 0px;
 125 }
 126
 127 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
 128     display: none;
 129     width: 0px;
 130 }
 131
 132 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
 133     width: 16px;
 134     height: 16px;
 135     margin-left: 7px;
 136     margin-right: 7px;
 137     -webkit-box-ordinal-group: 4; /* At the very end */
 138 }
 139
 140 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
 141     display: -webkit-box;
 142     -webkit-appearance: media-rewind-button;
 143     width: 18px;
 144     height: 18px;
 145     margin-bottom: 1px;
 146     margin-left: 6px;
 147     margin-right: 2px;
 148 }
 149
 150 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
 151     display: none;
 152     -webkit-appearance: media-return-to-realtime-button;
 153     width: 16px;
 154     height: 11px;
 155     margin-left: 6px;
 156     margin-right: 2px;
 157 }
 158
 159 audio::-webkit-media-controls-status-display, video::-webkit-media-controls-status-display {
 160     -webkit-user-select: none;
 161     cursor: default;
 162     display: -webkit-box;
 163     -webkit-box-flex: 1;
 164     font: -webkit-small-control;
 165     color: white;
 166     font-size: 10px;
 167     line-height: 13px;
 168     overflow: hidden;
 169     text-shadow: black 0px 1px 1px;
 170     margin-left: 10px;
 171     margin-right: 10px;
 172
 173     letter-spacing: normal;
 174     word-spacing: normal;
 175     line-height: normal;
 176     text-transform: none;
 177     text-indent: 0;
 178     text-decoration: none;
 179 }
 180
 181 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
 182     -webkit-appearance: media-toggle-closed-captions-button;
 183     display: -webkit-box;
 184     width: 16px;
 185     height: 16px;
 186     margin-left: 7px;
 187     margin-right: 7px;
 188     -webkit-box-ordinal-group: 3; /* between mute and fullscreen */
 189 }
 190
 191 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
 192     -webkit-appearance: media-volume-slider-container;
 193     position: absolute;
 194
 195     top: 0;
 196     left: 0;
 197
 198     width: 22px;
 199     height: 114px;
 200 }
 201
 202 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
 203     -webkit-appearance: media-volume-slider;
 204     display: inline;
 205     position: absolute;
 206
 207     top: 7px;
 208     left: 6px;
 209
 210     width: 10px;
 211     height: 80px;
 212 }
 213
 214 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
 215     -webkit-appearance: media-volume-slider-mute-button;
 216     display: inline;
 217     position: absolute;
 218
 219     bottom: 5px;
 220     left: 4px;
 221
 222     width: 14px;
 223     height: 12px;
 224 }