Change the volume slider to horizontal rendering for Chrome video controls.
[WebKit-https.git] / Source / WebCore / css / mediaControlsChromium.css
1 /*
2  * Copyright (C) 2009 Apple Inc.  All rights reserved.
3  * Copyright (C) 2009 Google Inc.
4  *
5  * Redistribution and use in source and binary forms, with or without
6  * modification, are permitted provided that the following conditions
7  * are met:
8  * 1. Redistributions of source code must retain the above copyright
9  *    notice, this list of conditions and the following disclaimer.
10  * 2. Redistributions in binary form must reproduce the above copyright
11  *    notice, this list of conditions and the following disclaimer in the
12  *    documentation and/or other materials provided with the distribution.
13  *
14  * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
15  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
16  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
17  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
18  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
19  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
20  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 /* Chromium default media controls */
27
28 body:-webkit-full-page-media {
29     background-color: rgb(0, 0, 0);
30 }
31
32 audio {
33     width: 300px;
34     height: 32px;
35 }
36
37 audio:-webkit-full-page-media, video:-webkit-full-page-media {
38     max-height: 100%;
39     max-width: 100%;
40 }
41
42 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
43     width: 100%;
44     height: 32px;
45     bottom: 0;
46 }
47
48 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
49     -webkit-user-select: none;
50     -webkit-box-pack: end;
51     position: relative;
52     overflow: visible;
53     bottom: 0;
54     width: 100%;
55     height: 32px;
56     z-index: 0;
57     background-color: rgba(0, 0, 0, 0.6);
58 }
59
60 video:-webkit-full-page-media::-webkit-media-controls-panel {
61     bottom: 0px;
62 }
63
64 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
65     -webkit-box-align: end;
66 }
67
68 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
69     -webkit-appearance: media-mute-button;
70     width: 34px;
71     height: 32px;
72 }
73
74 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
75     -webkit-appearance: media-play-button;
76     margin: 7px 8px 6px 8px;
77     width: 18px;
78     height: 19px;
79 }
80
81 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
82     -webkit-appearance: media-timeline-container;
83     -webkit-user-select: none;
84     -webkit-box-orient: horizontal;
85     -webkit-box-align: center;
86     -webkit-box-pack: center;
87     -webkit-box-flex: 1;
88     width: auto;
89     height: 32px;
90
91     border-left: 1px solid rgba(255, 255, 255, 0.2);
92     border-right: 1px solid rgba(255, 255, 255, 0.2);
93 }
94
95 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
96     -webkit-appearance: media-current-time-display;
97     -webkit-user-select: none;
98     display: inline;
99
100     overflow: hidden;
101     cursor: default;
102
103     line-height: 21px;
104     height: 20px;
105     width: 58px;
106
107     text-align: center;
108     font-family: Arial;
109     font-size: 16px;
110     font-weight: bold;
111     color: white;
112
113     letter-spacing: normal;
114     word-spacing: normal;
115     text-transform: none;
116     text-indent: 0;
117     text-shadow: none;
118     text-decoration: none;
119 }
120
121 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
122     -webkit-appearance: media-slider;
123     display: -webkit-box;
124     box-sizing: border-box;
125     -webkit-box-flex: 1;
126
127     padding: 0px;
128     margin: 0px 6px;
129     height: 18px;
130
131     border-color: rgba(255, 255, 255, 0.2);
132     border-style: solid;
133     border-width: 1px;
134     border-radius: 2px;
135     background-color: rgba(255, 255, 255, 0.08);
136     color: rgb(50, 140, 223);
137 }
138
139 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
140     -webkit-appearance: media-volume-slider;
141     display: -webkit-box;
142     -webkit-box-flex: 1;
143     margin-right: 5px;
144     max-width: 100px;
145     height: 32px;
146 }