Source/WebCore/css/mediaControls.css

   1 /*
   2  * Copyright (C) 2009, 2010, 2011 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 /* media controls */
  26
  27 audio {
  28     width: 200px;
  29     height: 16px;
  30 }
  31
  32 ::-webkit-media-controls {
  33     width: inherit;
  34     height: inherit;
  35     position: relative;
  36     display: block;
  37 }
  38
  39 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
  40     display: -webkit-box;
  41     -webkit-box-orient: horizontal;
  42     -webkit-box-align: center;
  43     -webkit-user-select: none;
  44     position: absolute;
  45     bottom: 0;
  46     width: 100%;
  47     z-index: 0;
  48     overflow: hidden;
  49     height: 16px;
  50     text-align: right;
  51 }
  52
  53 video:-webkit-full-page-media::-webkit-media-controls-panel {
  54     bottom: 0px;
  55 }
  56
  57 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
  58     -webkit-appearance: media-mute-button;
  59     display: -webkit-box;
  60     width: 16px;
  61     height: 16px;
  62     background-color: initial;
  63     border: initial;
  64     color: inherit;
  65 }
  66
  67 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
  68     -webkit-appearance: media-play-button;
  69     display: -webkit-box;
  70     width: 16px;
  71     height: 16px;
  72     background-color: initial;
  73     border: initial;
  74     color: inherit;
  75 }
  76
  77 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
  78     -webkit-appearance: media-controls-background;
  79     display: -webkit-box;
  80     -webkit-box-orient: horizontal;
  81     -webkit-box-align: center;
  82     -webkit-box-pack: end;
  83     -webkit-box-flex: 1;
  84     -webkit-user-select: none;
  85     height: 16px;
  86 }
  87
  88 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
  89     display: none;
  90 }
  91
  92 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
  93     display: none;
  94 }
  95
  96 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
  97     -webkit-appearance: media-slider;
  98     display: -webkit-box;
  99     -webkit-box-flex: 1;
 100     height: 16px;
 101     padding: 0px 2px;
 102     background-color: initial;
 103     border: initial;
 104     color: inherit;
 105     margin: initial;
 106 }
 107
 108 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
 109     background-color: initial;
 110     border: initial;
 111     color: inherit;
 112     margin: initial;
 113 }
 114
 115 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
 116     -webkit-appearance: media-seek-back-button;
 117     display: -webkit-box;
 118     width: 16px;
 119     height: 16px;
 120     background-color: initial;
 121     border: initial;
 122     color: inherit;
 123 }
 124
 125 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
 126     -webkit-appearance: media-seek-forward-button;
 127     display: -webkit-box;
 128     width: 16px;
 129     height: 16px;
 130     background-color: initial;
 131     border: initial;
 132     color: inherit;
 133 }
 134
 135 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
 136     -webkit-appearance: media-fullscreen-button;
 137     display: -webkit-box;
 138     width: 16px;
 139     height: 16px;
 140     background-color: initial;
 141     border: initial;
 142     color: inherit;
 143 }
 144
 145 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
 146     display: none;
 147     background-color: initial;
 148     border: initial;
 149     color: inherit;
 150 }
 151
 152 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
 153     display: none;
 154     background-color: initial;
 155     border: initial;
 156     color: inherit;
 157 }
 158
 159 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
 160     -webkit-appearance: media-toggle-closed-captions-button;
 161     display: -webkit-box;
 162     width: 16px;
 163     height: 16px;
 164     background-color: initial;
 165     border: initial;
 166     color: inherit;
 167 }
 168
 169 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
 170     -webkit-appearance: media-volume-slider-mute-button;
 171     display: none;
 172     background-color: initial;
 173     border: initial;
 174     color: inherit;
 175 }
 176
 177 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
 178     display: none;
 179 }
 180
 181 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button {
 182     display: none;
 183 }
 184
 185 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button {
 186     display: none;
 187 }