e8d33899f38f1acf3573ccf44ccdf1f9dea5283a
[WebKit-https.git] / Source / WebCore / css / mediaControlsChromiumAndroid.css
1 /*
2  * Copyright (C) 2012 Google Inc.
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 for Chromium on Android*/
26
27 body:-webkit-full-page-media {
28     background-color: rgb(0, 0, 0);
29 }
30
31 audio {
32     width: 300px;
33     height: 35px;
34 }
35
36 audio:-webkit-full-page-media, video:-webkit-full-page-media {
37     max-height: 100%;
38     max-width: 100%;
39 }
40
41 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
42     display: -webkit-flex;
43     -webkit-flex-direction: row;
44     -webkit-align-items: center;
45     -webkit-justify-content: center;
46     bottom: auto;
47     height: 35px;
48     background-color: rgba(20, 20, 20, 0.8);
49 }
50
51 audio:-webkit-full-page-media::-webkit-media-controls-panel,
52 video:-webkit-full-page-media::-webkit-media-controls-panel {
53     bottom: 0px;
54 }
55
56 ::-webkit-media-controls {
57     display: -webkit-flex;
58     -webkit-flex-direction: column;
59     -webkit-justify-content: flex-end;
60     -webkit-align-items: center;
61 }
62
63 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
64     width: 100%;
65     max-width: 800px;
66     height: 35px;
67     bottom: 0;
68     text-indent: 0;
69     padding: 0;
70     box-sizing: border-box;
71 }
72
73 video::-webkit-media-controls-enclosure {
74     padding: 0px 5px 5px 5px;
75     height: 35px;
76 }
77
78 audio::-webkit-media-controls-overlay-enclosure {
79     display: none;
80 }
81
82 video::-webkit-media-controls-overlay-enclosure {
83     display: -webkit-flex;
84     -webkit-flex-direction: row;
85     -webkit-justify-content: center;
86     -webkit-align-items: center;
87     -webkit-flex: 1 1;
88     width: 100%;
89     height: 100%;
90     max-width: 800px;
91     text-indent: 0;
92     box-sizing: border-box;
93     overflow: hidden;
94 }
95
96 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
97     display: none;
98 }
99
100 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
101     -webkit-appearance: media-play-button;
102     display: inline;
103     border: none;
104     box-sizing: border-box;
105     width: 35px;
106     height: 35px;
107     line-height: 35px;
108     margin-left: 9px;
109     margin-right: 9px;
110     padding: 0;
111 }
112
113 video::-webkit-media-controls-overlay-play-button {
114     -webkit-appearance: media-overlay-play-button;
115     -webkit-align-items: center;
116     display: -webkit-flex;
117     border: none;
118     box-sizing: border-box;
119     background-color: transparent;
120     width: 80px;
121     height: 80px;
122     padding: 0;
123 }
124
125 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
126 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
127     -webkit-appearance: media-current-time-display;
128     -webkit-user-select: none;
129     display: block;
130     border: none;
131     cursor: default;
132
133     height: 35px;
134     margin: 0 9px 0 0;
135     padding: 0;
136
137     line-height: 35px;
138     font-family: Arial, Helvetica, sans-serif;
139     font-size: 18px;
140     font-weight: bold;
141     color: white;
142
143     letter-spacing: normal;
144     word-spacing: normal;
145     text-transform: none;
146     text-indent: 0;
147     text-shadow: none;
148     text-decoration: none;
149 }
150
151 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
152     -webkit-appearance: media-slider;
153     display: -webkit-flex;
154     -webkit-flex: 1 1;
155     height: 8px;
156     margin: 0 15px 0 0;
157     padding: 0;
158     background-color: transparent;
159     min-width: 25px;
160 }
161
162
163 video::-webkit-media-controls-fullscreen-button {
164     -webkit-appearance: media-enter-fullscreen-button;
165     display: inline;
166     border: none;
167     box-sizing: border-box;
168     width: 35px;
169     height: 35px;
170     line-height: 35px;
171     margin-left: -5px;
172     margin-right: 9px;
173     padding: 0;
174 }
175
176 input[type="range"]::-webkit-media-slider-container {
177     display: -webkit-flex;
178     -webkit-align-items: center;
179     -webkit-flex-direction: row;
180     box-sizing: border-box;
181     height: 100%;
182     width: 100%;
183     border: 1px solid rgba(230, 230, 230, 0.35);
184     border-radius: 4px;
185     background-color: transparent;
186 }
187
188 /* The negative right margin causes the track to overflow its container. */
189 input[type="range"]::-webkit-media-slider-container > div {
190     margin-right: -14px;
191 }
192
193 input[type="range"]::-webkit-media-slider-thumb {
194     margin-left: -7px;
195     margin-right: -7px;
196 }
197
198 audio::-webkit-media-controls-fullscreen-button {
199     display: none;
200 }
201
202 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
203     display: none;
204 }