1/*
2 * QtWebKit specific overrides for HTML5 media elements.
3 *
4 * Copyright (C) 2009, 2011 Apple Inc.  All rights reserved.
5 * Copyright (C) 2008 Nokia Corporation and/or its subsidiary(-ies)
6 * Copyright (C) 2013 Digia Plc. and/or its subsidiary(-ies)
7 *
8 * Redistribution and use in source and binary forms, with or without
9 * modification, are permitted provided that the following conditions
10 * are met:
11 * 1. Redistributions of source code must retain the above copyright
12 *    notice, this list of conditions and the following disclaimer.
13 * 2. Redistributions in binary form must reproduce the above copyright
14 *    notice, this list of conditions and the following disclaimer in the
15 *    documentation and/or other materials provided with the distribution.
16 *
17 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
18 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
19 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
20 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
21 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
22 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
23 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
24 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
26 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27 */
28
29 /* QtWebKit media controls. Extends mediaControls.css */
30
31audio {
32    height: 34px;
33    width: 400px;
34}
35
36audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
37    overflow: visible;
38    height: 34px;
39    max-width: 800px;
40    margin-left: auto;
41    margin-right: auto;
42}
43
44audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button  {
45    width: 12px;
46    height: 12px;
47    padding: 6px;
48    margin-left: 6px;
49    margin-right: 3px;
50    border: none !important;
51
52    position: relative;
53    z-index: 1;
54}
55
56audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
57    width: 9px;
58    height: 12px;
59    padding: 6px 12px 6px 11px;
60    margin-left: 5px;
61    margin-right: 3px;
62    border: none !important;
63}
64
65audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
66    height: 34px;
67}
68
69audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
70    -webkit-appearance: media-current-time-display;
71    -webkit-user-select: none;
72    display: inline-block;
73    height: 12px;
74    padding: 6px;
75    margin-left: 3px;
76    margin-right: 5px;
77
78    overflow: hidden;
79    cursor: default;
80
81    text-align: center;
82    font: -webkit-small-control;
83    font-size: 10px;
84    font-weight: bold;
85    color: white;
86}
87
88audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
89    display: none;
90}
91
92audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
93    display: -webkit-flex;
94    -webkit-flex: 1 1;
95    height: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
96    padding: 6px 8px;
97}
98
99audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container  {
100    -webkit-appearance: media-volume-slider-container;
101    position: absolute;
102    bottom: 29px;
103    z-index: 2;
104
105    width: 24px;
106    height: 103px;
107}
108
109audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider  {
110    -webkit-appearance: media-volume-slider;
111    display: inline;
112    position: absolute;
113
114    top: 0px;
115    left: 6px;
116
117    width: 12px; /* See RenderThemeQt::adjustSliderThumbSize(). */
118    padding: 6px;
119    height: 88px;
120
121}
122
123audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
124    display: none;
125}
126
127audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
128    display: none;
129}
130
131audio::-webkit-media-controls-fullscreen-button {
132    display: none;
133}
134
135video::-webkit-media-controls-fullscreen-button {
136    top: 0px;
137    right: 0px;
138    width: 12px;
139    height: 12px;
140    padding: 6px;
141    margin: 5px 5px 5px 3px;
142    border: none !important;
143}
144
145audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
146    display: none;
147}
148
149audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
150    display: none;
151}
152
153audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
154    display: none;
155}
156
157::-webkit-media-controls-mute-button,
158::-webkit-media-controls-play-button,
159::-webkit-media-controls-timeline,
160::-webkit-media-controls-volume-slider,
161::-webkit-media-controls-fullscreen-button
162{
163    box-sizing: content-box !important;
164}
165