e2495620451571fb762958d05b548a14476ff828
[WebKit-https.git] / 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 }