12ca14a5b9f7a7809b0a070d0135ef7b58add96d
[WebKit.git] / WebCore / css / mediaControls.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 /* media controls */
26
27 audio {
28     width: 200px;
29     height: 16px;
30 }
31
32 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
33     display: -webkit-box;
34     -webkit-box-orient: horizontal;
35     -webkit-box-align: center;
36     -webkit-user-select: none;
37     position: absolute;
38     bottom: 0;
39     width: 100%;
40     z-index: 0;
41     overflow: hidden;
42     height: 16px;
43     text-align: right;
44 }
45
46 video:-webkit-full-page-media::-webkit-media-controls-panel {
47     bottom: -16px;
48 }
49
50 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
51     -webkit-appearance: media-mute-button;
52     display: -webkit-box;
53     width: 16px;
54     height: 16px;
55 }
56
57 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
58     -webkit-appearance: media-play-button;
59     display: -webkit-box;
60     width: 16px;
61     height: 16px;
62 }
63
64 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
65     -webkit-appearance: media-controls-background;
66     display: -webkit-box;
67     -webkit-box-orient: horizontal;
68     -webkit-box-align: center;
69     -webkit-box-pack: end;
70     -webkit-box-flex: 1;
71     -webkit-user-select: none;
72     height: 16px;
73 }
74
75 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
76     display: none;
77 }
78
79 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
80     display: none;
81 }
82
83 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
84     -webkit-appearance: media-slider;
85     display: -webkit-box;
86     -webkit-box-flex: 1;
87     height: 16px;
88     padding: 0px 2px;
89 }
90
91 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
92     display: none;
93 }
94
95 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
96     display: none;
97 }
98
99 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
100     -webkit-appearance: media-seek-back-button;
101     display: -webkit-box;
102     width: 16px;
103     height: 16px;
104 }
105
106 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
107     -webkit-appearance: media-seek-forward-button;
108     display: -webkit-box;
109     width: 16px;
110     height: 16px;
111 }
112
113 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
114     -webkit-appearance: media-fullscreen-button;
115     display: -webkit-box;
116     width: 16px;
117     height: 16px;
118 }
119
120 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
121     display: none;
122 }
123
124 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
125     display: none;
126 }
127
128 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
129     display: none;
130 }