1/*
2 * Copyright (C) 2011 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 fullscreen.css */
26
27video:-webkit-full-screen::-webkit-media-controls-panel {
28    -webkit-align-items: flex-start !important;
29    -webkit-justify-content: flex-end !important;
30    -webkit-appearance: none !important;
31
32    padding: 12px 0 0 10px !important;
33    width: 430px !important;
34    height: 48px !important;
35    margin: 0 auto 50px auto !important;
36
37    background-image: -webkit-gradient(
38        linear,
39        left top,
40        left bottom,
41        color-stop(0, rgba(30, 30, 30, .97)),
42        color-stop(0.333, rgba(45, 45, 45, .97)),
43        color-stop(0.35,  rgba(25, 25, 25, .97)),
44        color-stop(0.366, rgba(25, 25, 25, .97)),
45        color-stop(0.366, rgba(12, 12, 12, .97)),
46        color-stop(1, rgba(19, 19, 19, .97))
47    ) !important;
48
49    -webkit-box-shadow:
50        inset 0 -1px 1px rgba(0, 0, 0, 0.5),
51        inset 0  1px 0 0px   rgba(255, 255, 255, 0.15),
52        inset 0 -1px 0 0px   rgba(202, 202, 202, 0.09),
53        0  0   0 1px rgba(0, 0, 0, 0.5);
54    border-radius: 8px !important;
55
56    -webkit-transition: opacity 0.3s linear !important;
57}
58
59video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
60    opacity: 0 ! important;
61    -webkit-transition: opacity 0 ! important;
62}
63
64video:-webkit-full-screen::-webkit-media-controls-mute-button {
65    display: none;
66}
67
68video:-webkit-full-screen::-webkit-media-controls-volume-slider-container {
69    display: none;
70}
71
72video:-webkit-full-screen::-webkit-media-controls-volume-slider {
73    display: none;
74}
75
76video:-webkit-full-screen::-webkit-media-controls-volume-slider-mute-button {
77    display: none;
78}
79
80video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-min-button {
81    -webkit-appearance: media-mute-button;
82    display: block;
83    position: absolute;
84    left: 11px;
85    top: 15px;
86    width: 17px;
87    height: 14px;
88}
89
90video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-slider {
91    -webkit-appearance: media-fullscreen-volume-slider;
92    display: block;
93    position: absolute;
94    left: 28px;
95    top: 14px;
96    height: 11px;
97    width: 50px;
98}
99
100video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-max-button {
101    -webkit-appearance: media-mute-button;
102    display: block;
103    position: absolute;
104    left: 84px;
105    top: 15px;
106    width: 17px;
107    height: 14px;
108}
109
110video:-webkit-full-screen::-webkit-media-controls-play-button {
111    position: absolute;
112    width: 22px;
113    height: 23px;
114    left: 209px;
115    top: 9px;
116}
117
118video:-webkit-full-screen::-webkit-media-controls-rewind-button {
119    position: absolute;
120    left: 162px;
121    top: 13px;
122    width: 18px;
123    height: 18px;
124}
125
126video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
127    position: absolute;
128    display: -webkit-flex;
129    width: 23px;
130    height: 16px;
131    left: 162px;
132    top: 13px;
133}
134
135video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
136    position: absolute;
137    display: -webkit-flex;
138    width: 29px;
139    height: 16px;
140    left: 262px;
141    top: 13px;
142}
143
144video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
145    position: absolute;
146    display: -webkit-flex;
147    width: 23px;
148    height: 16px;
149    left: 262px;
150    top: 13px;
151}
152
153video:-webkit-full-screen::-webkit-media-controls-timeline-container {
154    height: auto;
155    width: 420px;
156    position: absolute;
157    bottom: 9px;
158    left: 8px;
159    right: 8px;
160}
161
162video:-webkit-full-screen::-webkit-media-controls-status-display {
163    width: 420px;
164    position: absolute;
165    bottom: 9px;
166    left: 8px;
167    right: 8px;
168}
169
170video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
171    bottom: 114px;
172    right: -webkit-calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */
173    max-width: -webkit-calc(50% + 173px); /* right + 10px */
174    max-height: -webkit-calc(100% - 124px); /* bottom + 10px */
175}
176