1/*
2 * Copyright (C) 2012 Google Inc.
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 for Chromium on Android */
26
27/* WARNING: This css file can only style <audio> and <video> elements */
28
29audio {
30    height: 35px;
31}
32
33audio::-webkit-media-controls-enclosure {
34    height: 35px;
35}
36
37video::-webkit-media-controls-enclosure {
38    height: 40px;
39}
40
41audio::-webkit-media-controls-overlay-enclosure {
42    display: none;
43}
44
45video::-webkit-media-controls-overlay-enclosure {
46    display: flex;
47    position: relative;
48    flex-direction: column;
49    justify-content: flex-end;
50    align-items: center;
51    flex: 1 1;
52    width: 100%;
53    max-width: 800px;
54    text-indent: 0;
55    box-sizing: border-box;
56    overflow: hidden;
57}
58
59audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
60    height: 35px;
61}
62
63audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
64    display: none;
65}
66
67video::-webkit-media-controls-overlay-play-button {
68    -webkit-appearance: media-overlay-play-button;
69    display: flex;
70    position: absolute;
71    top: 50%;
72    left: 50%;
73    margin-left: -40px;
74    margin-top: -40px;
75    border: none;
76    box-sizing: border-box;
77    background-color: transparent;
78    width: 80px;
79    height: 80px;
80    padding: 0;
81}
82
83audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
84    width: 35px;
85    height: 35px;
86    line-height: 35px;
87}
88
89audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
90audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
91    height: 35px;
92    line-height: 35px;
93    font-size: 18px;
94}
95
96audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
97    display: none;
98}
99
100video::-webkit-media-controls-fullscreen-button {
101    width: 35px;
102    height: 35px;
103    line-height: 35px;
104}
105
106audio::-webkit-media-controls-fullscreen-button {
107    display: none;
108}
109
110video::-webkit-media-controls-toggle-closed-captions-button {
111    width: 35px;
112    height: 35px;
113    line-height: 35px;
114}
115