Fix the overlay play button position on android
[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     max-width: 800px;
90     text-indent: 0;
91     box-sizing: border-box;
92     overflow: hidden;
93 }
94
95 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
96     display: none;
97 }
98
99 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
100     -webkit-appearance: media-play-button;
101     display: inline;
102     border: none;
103     box-sizing: border-box;
104     width: 35px;
105     height: 35px;
106     line-height: 35px;
107     margin-left: 9px;
108     margin-right: 9px;
109     padding: 0;
110 }
111
112 video::-webkit-media-controls-overlay-play-button {
113     -webkit-appearance: media-overlay-play-button;
114     -webkit-align-items: center;
115     display: -webkit-flex;
116     border: none;
117     box-sizing: border-box;
118     background-color: transparent;
119     width: 80px;
120     height: 80px;
121     padding: 0;
122 }
123
124 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
125 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
126     -webkit-appearance: media-current-time-display;
127     -webkit-user-select: none;
128     display: block;
129     border: none;
130     cursor: default;
131
132     height: 35px;
133     margin: 0 9px 0 0;
134     padding: 0;
135
136     line-height: 35px;
137     font-family: Arial, Helvetica, sans-serif;
138     font-size: 18px;
139     font-weight: bold;
140     color: white;
141
142     letter-spacing: normal;
143     word-spacing: normal;
144     text-transform: none;
145     text-indent: 0;
146     text-shadow: none;
147     text-decoration: none;
148 }
149
150 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
151     -webkit-appearance: media-slider;
152     display: -webkit-flex;
153     -webkit-flex: 1 1;
154     height: 8px;
155     margin: 0 15px 0 0;
156     padding: 0;
157     background-color: transparent;
158     min-width: 25px;
159 }
160
161
162 video::-webkit-media-controls-fullscreen-button {
163     -webkit-appearance: media-enter-fullscreen-button;
164     display: inline;
165     border: none;
166     box-sizing: border-box;
167     width: 35px;
168     height: 35px;
169     line-height: 35px;
170     margin-left: -5px;
171     margin-right: 9px;
172     padding: 0;
173 }
174
175 input[type="range"]::-webkit-media-slider-container {
176     display: -webkit-flex;
177     -webkit-align-items: center;
178     -webkit-flex-direction: row;
179     box-sizing: border-box;
180     height: 100%;
181     width: 100%;
182     border: 1px solid rgba(230, 230, 230, 0.35);
183     border-radius: 4px;
184     background-color: transparent;
185 }
186
187 /* The negative right margin causes the track to overflow its container. */
188 input[type="range"]::-webkit-media-slider-container > div {
189     margin-right: -14px;
190 }
191
192 input[type="range"]::-webkit-media-slider-thumb {
193     margin-left: -7px;
194     margin-right: -7px;
195 }
196
197 audio::-webkit-media-controls-fullscreen-button {
198     display: none;
199 }
200
201 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
202     display: none;
203 }