efda4d7247a7905e77bae7958eede20be76b0bce
[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: 16px;
45     height: 16px;
46     margin-left: 7px;
47     margin-right: 7px;
48 }
49
50 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
51     width: 16px;
52     height: 16px;
53     margin-left: 7px;
54     margin-right: 7px;
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-appearance: media-current-time-display;
69     -webkit-user-select: none;
70     display: -webkit-box;
71     -webkit-box-flex: 0;
72     -webkit-box-pack: center;
73     -webkit-box-align: center;
74     cursor: default;
75     font: -webkit-small-control;
76     font-size: 9px;
77     overflow: hidden;
78     height: 13px;
79     width: 45px;
80
81     color: black;
82     letter-spacing: normal;
83     word-spacing: normal;
84     line-height: normal;
85     text-transform: none;
86     text-indent: 0;
87     text-shadow: none;
88     text-decoration: none;
89 }
90
91 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
92     -webkit-appearance: media-time-remaining-display;
93     -webkit-user-select: none;
94     display: -webkit-box;
95     -webkit-box-flex: 0;
96     -webkit-box-pack: center;
97     -webkit-box-align: center;
98     cursor: default;
99     font: -webkit-small-control;
100     font-size: 9px;
101     overflow: hidden;
102     height: 13px;
103     width: 45px;
104
105     color: black;
106     letter-spacing: normal;
107     word-spacing: normal;
108     line-height: normal;
109     text-transform: none;
110     text-indent: 0;
111     text-shadow: none;
112     text-decoration: none;
113 }
114
115 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
116     display: -webkit-box;
117     -webkit-box-flex: 1;
118     height: 13px;
119     padding: 0px;
120     margin: 0px;
121 }
122
123 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
124     display: none;
125     width: 0px;
126 }
127
128 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
129     display: none;
130     width: 0px;
131 }
132
133 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
134     width: 16px;
135     height: 16px;
136     margin-left: 7px;
137     margin-right: 7px;
138     -webkit-box-ordinal-group: 3; /* At the very end */
139 }
140
141 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
142     -webkit-appearance: media-rewind-button;
143     display: -webkit-box;
144     width: 16px;
145     height: 16px;
146     margin-left: 7px;
147     margin-right: 7px;
148 }
149
150 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
151     -webkit-appearance: media-return-to-realtime-button;
152     display: -webkit-box;
153     width: 16px;
154     height: 16px;
155     margin-left: 7px;
156     margin-right: 7px;
157 }
158
159 audio::-webkit-media-controls-status-display, video::-webkit-media-controls-status-display {
160     -webkit-user-select: none;
161     display: -webkit-box;
162     -webkit-box-flex: 1;
163     font: -webkit-small-control;
164     color: white;
165     font-size: 10px;
166     line-height: 13px;
167     overflow: hidden;
168     text-shadow: 1px 1px 0px black;
169     margin-left: 10px;
170     margin-right: 10px;
171
172     letter-spacing: normal;
173     word-spacing: normal;
174     line-height: normal;
175     text-transform: none;
176     text-indent: 0;
177     text-decoration: none;
178 }