2009-07-02 Pierre d'Herbemont <pdherbemont@apple.com>
[WebKit-https.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     height: 25px;
60 }
61
62 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
63     -webkit-appearance: media-current-time-display;
64     -webkit-user-select: none;
65     display: inline-block;
66     cursor: default;
67     font: -webkit-small-control;
68     font-size: .09em;
69     text-align: center;
70     overflow: hidden;
71     line-height: 13px;
72     height: 13px;
73     width: 45px;
74 }
75
76 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
77     -webkit-appearance: media-time-remaining-display;
78     -webkit-user-select: none;
79     display: inline-block;
80     cursor: default;
81     font: -webkit-small-control;
82     font-size: .09em;
83     text-align: center;
84     overflow: hidden;
85     line-height: 13px;
86     height: 13px;
87     width: 45px;
88 }
89
90 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
91     height: 13px;
92 }
93
94 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
95     display: none;
96     width: 0px;
97 }
98
99 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
100     display: none;
101     width: 0px;
102 }
103
104 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
105     width: 16px;
106     height: 16px;
107     margin-left: 7px;
108     margin-right: 7px;
109     -webkit-box-ordinal-group: 3; /* At the very end */
110 }
111
112 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
113     -webkit-appearance: media-rewind-button;
114     display: -webkit-box;
115     width: 16px;
116     height: 16px;
117     margin-left: 7px;
118     margin-right: 7px;
119 }
120
121 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
122     -webkit-appearance: media-return-to-realtime-button;
123     display: -webkit-box;
124     width: 16px;
125     height: 16px;
126     margin-left: 7px;
127     margin-right: 7px;
128 }
129
130 audio::-webkit-media-controls-status-display, video::-webkit-media-controls-status-display {
131     -webkit-user-select: none;
132     display: -webkit-box;
133     -webkit-box-flex: 1;
134     font: -webkit-small-control;
135     color: white;
136     font-size: 0.6em;
137     line-height: 13px;
138     overflow: hidden;
139     text-shadow: 1px 1px 0px black;
140     margin-left: 10px;
141     margin-right: 10px;
142 }