1/*
2 * WebKitGTK+ specific overrides for HTML5 media elements.
3 *
4 * Copyright (C) 2009 Zan Dobersek <zandobersek@gmail.com>
5 *
6 * This library is free software; you can redistribute it and/or
7 * modify it under the terms of the GNU Library General Public
8 * License as published by the Free Software Foundation; either
9 * version 2 of the License, or (at your option) any later version.
10 *
11 * This library is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
14 * Library General Public License for more details.
15 *
16 * You should have received a copy of the GNU Library General Public License
17 * along with this library; see the file COPYING.LIB.  If not, write to
18 * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
19 * Boston, MA 02110-1301, USA.
20 *
21 */
22
23audio {
24    height: 20px;
25    width: 300px;
26}
27
28audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
29    display: -webkit-box;
30    -webkit-box-orient: horizontal;
31    -webkit-box-align: end;
32    -webkit-user-select: none;
33    position: absolute;
34    bottom: 0;
35    width: 100%;
36    z-index: 0;
37    overflow: hidden;
38    text-align: right;
39    height: 100%;
40}
41
42audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
43    width: 20px;
44    height: 20px;
45}
46
47audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
48    width: 20px;
49    height: 20px;
50}
51
52audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
53    height: 20px;
54    border-left: 1px solid rgba(255, 255, 255, 0.2);
55    border-right: 1px solid rgba(255, 255, 255, 0.2);
56}
57
58audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
59    height: 20px;
60}
61
62audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
63    -webkit-appearance: media-current-time-display;
64    -webkit-user-select: none;
65    display: inline-block;
66    height: 20px;
67
68    padding: 5px;
69
70    text-align: center;
71    font-size: 10px;
72}
73
74audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
75    width: 20px;
76    height: 20px;
77}
78
79audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
80    width: 20px;
81    height: 20px;
82}
83
84audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
85    width: 20px;
86    height: 20px;
87}
88
89audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
90    -webkit-appearance: media-volume-slider-container;
91    position: absolute;
92    height: 100px;
93    width: 20px;
94}
95
96audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
97    -webkit-appearance: media-volume-slider;
98    display: inline;
99    position: absolute;
100    width: 14px;
101    height: 95px;
102
103    left: 3px;
104    top: 5px;
105}