2009-07-10 Eric Carlson <eric.carlson@apple.com>
[WebKit.git] / WebCore / css / mediaControlsQT.css
1 /*
2  * Copyright (C) 2009 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     height: 25px;
36 }
37
38 video:-webkit-full-page-media::-webkit-media-controls-panel {
39     bottom: -25px;
40 }
41
42 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
43     -webkit-box-ordinal-group: 2; /* Before the fullscreen button */
44     width: 15px;
45     height: 14px;
46     margin-left: 2px;
47     margin-right: 8px;
48 }
49
50 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
51     width: 16px;
52     height: 16px;
53     margin-left: 6px;
54     margin-right: 1px;
55 }
56
57 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
58     -webkit-appearance: none;
59     -webkit-box-orient: horizontal;
60     -webkit-box-align: center;
61     -webkit-box-pack: center;
62     -webkit-box-flex: 1;
63     text-align: right;
64     height: auto;
65 }
66
67 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
68     -webkit-user-select: none;
69     display: -webkit-box;
70     -webkit-box-flex: 0;
71     -webkit-box-pack: center;
72     -webkit-box-align: center;
73     cursor: default;
74     font: -webkit-small-control;
75     font-size: 9px;
76     overflow: hidden;
77     height: 13px;
78     width: 45px;
79     color: white;
80     text-shadow: black 0px 1px 1px;
81
82     letter-spacing: normal;
83     word-spacing: normal;
84     line-height: normal;
85     text-transform: none;
86     text-indent: 0;
87     text-decoration: none;
88 }
89
90 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
91     -webkit-user-select: none;
92     display: -webkit-box;
93     -webkit-box-flex: 0;
94     -webkit-box-pack: center;
95     -webkit-box-align: center;
96     cursor: default;
97     font: -webkit-small-control;
98     font-size: 9px;
99     overflow: hidden;
100     height: 13px;
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: 4px;
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: 3; /* 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 }