forked from dz0ny/AudioJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaudio-js.css
130 lines (115 loc) · 6.81 KB
/
audio-js.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/* REQUIRED STYLES (be careful overriding)
================================================================================ */
/* Box containing audio, controls, and download links.
If you want to add some kind of frame, use another containing element, not this one. */
.audio-js-box { text-align: left; position: relative; } /* Will be set to the width of the audio element */
/* Video Element */
audio.audio-js { background-color: #000; position: relative; }
/* DEFAULT SKIN (override in another file)
================================================================================
Using all CSS to draw the controls. Images could be used if desired.
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. */
/* Controls Layout
Using a Holy Grail type method to allow the progress bar holder to expand into all available space,
but using abosolute positioning for individual controls. http://www.alistapart.com/articles/holygrail */
.vjs-controls {
list-style: none; position: relative; border: none; opacity: 0.85; color: #fff;
height: 35px; /* Including any margin you want above or below control items */
padding-left: 35px; /* Width of play button + margin */
padding-right: 135px; /* Width of all the controls to the right of the progress control + margins */
}
/* Controls styles when below the audio */
.audio-js-box.vjs-controls-below .vjs-controls { background-color: #000; }
.vjs-controls > li { /* Direct li children of control bar */
position: absolute; list-style: none; float: left; padding: 0; text-align: center;
height: 25px; /* Default height of individual controls */
margin: 5px 0 0 0; /* Top margin to put space between audio and controls when controls are below */
/* CSS Background Gradients */
/* Default */ background-color: #0B151A;
/* Webkit */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
/* Firefox */ background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 12px;
/* CSS Curved Corners */
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
/* CSS Shadows */
box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000;
}
/* Placement of Control Items */
.vjs-controls > li.vjs-play-control { width: 25px; left: 5px; }
.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
.vjs-controls > li.vjs-time-control { width: 75px; right: 60px; }
.vjs-controls > li.vjs-volume-control { width: 50px; right: 5px; }
/* Removing curves on progress control and time control to join them. */
.vjs-controls > li.vjs-progress-control {
border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0;
border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0;
}
.vjs-controls > li.vjs-time-control {
border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0;
border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0;
}
/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-play-control { cursor: pointer !important; }
.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
.vjs-play-control.vjs-play span {
width: 0; height: 0; margin: 8px 0 0 8px;
/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left: 10px solid #fff; /* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */
border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
}
.vjs-play-control.vjs-pause span {
width: 3px; height: 10px; margin: 8px auto 0;
/* Drawing the pause bars with borders */
border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
}
/* Progress
-------------------------------------------------------------------------------- */
.vjs-progress-holder { /* Box containing play and load progresses */
position: relative; list-style: none; padding: 0; overflow:hidden; cursor: pointer !important;
height: 9px; border: 1px solid #777;
margin: 7px 1px 0 5px; /* Placement within the progress control item */
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.vjs-progress-holder li { /* Progress Bars */
position: absolute; display: block; width: 0; height: 9px;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.vjs-play-progress {
/* Default */ background: #fff;
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
/* Firefox */ background: -moz-linear-gradient(top, #fff, #777);
}
.vjs-load-progress {
opacity: 0.8;
/* Default */ background-color: #555;
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
/* Firefox */ background: -moz-linear-gradient(top, #555, #aaa);
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-controls .vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
.vjs-controls .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
/* Volume
-------------------------------------------------------------------------------- */
.vjs-volume-control { cursor: pointer !important; }
.vjs-volume-control ul { list-style: none; display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
/* Drawing the volume icon using 6 li elements */
.vjs-volume-control ul li { /* Individual volume bars */
list-style: none; float: left; padding: 0;
margin: 0 2px 0 0; /* Space between */
width: 5px; height: 0px; /* Total height is height + bottom border */
border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
}
.vjs-volume-control ul li.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
.vjs-volume-control ul li:nth-child(6) { margin-right: 0; }
/* Download Links - Used for browsers that don't support any audio.
-------------------------------------------------------------------------------- */
.vjs-no-audio { font-size: small; }