1
+ /*
2
+ VideoJS Default Styles (http://videojs.com)
3
+ Version 2.0.2
4
+
5
+ REQUIRED STYLES (be careful overriding)
6
+ ================================================================================ */
7
+ /* Box containing video, controls, and download links.
8
+ Will be set to the width of the video element through JS
9
+ If you want to add some kind of frame or special positioning, use another containing element, not video-js-box. */
10
+ .video-js-box { text-align : left; position : relative; line-height : 0 !important ; margin : 0 ; padding : 0 !important ; border : none !important ; }
11
+
12
+ /* Video Element */
13
+ video .video-js { background-color : # 000 ; position : relative; padding : 0 ; }
14
+
15
+ .vjs-flash-fallback { display : block; }
16
+
17
+ /* Poster Overlay Style */
18
+ .video-js-box img .vjs-poster { display : block; position : absolute; left : 0 ; top : 0 ; width : 100% ; height : 100% ; margin : 0 ; padding : 0 ; cursor : pointer; }
19
+ /* Subtiles Style */
20
+ .video-js-box .vjs-subtitles { color : # fff ; font-size : 20px ; text-align : center; position : absolute; bottom : 40px ; left : 0 ; right : 0 ; }
21
+
22
+ /* Fullscreen styles for main elements */
23
+ .video-js-box .vjs-fullscreen { position : fixed; left : 0 ; top : 0 ; right : 0 ; bottom : 0 ; overflow : hidden; z-index : 1000 ; }
24
+ .video-js-box .vjs-fullscreen video .video-js ,
25
+ .video-js-box .vjs-fullscreen .vjs-flash-fallback { position : relative; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : 1000 ; }
26
+ .video-js-box .vjs-fullscreen img .vjs-poster { z-index : 1001 ; }
27
+ .video-js-box .vjs-fullscreen .vjs-spinner { z-index : 1001 ; }
28
+ .video-js-box .vjs-fullscreen .vjs-controls { z-index : 1003 ; }
29
+ .video-js-box .vjs-fullscreen .vjs-big-play-button { z-index : 1004 ; }
30
+ .video-js-box .vjs-fullscreen .vjs-subtitles { z-index : 1004 ; }
31
+
32
+ /* Styles Loaded Check */
33
+ .vjs-styles-check { height : 5px ; position : absolute; }
34
+ /* Controls Below Video */
35
+ .video-js-box .vjs-controls-below .vjs-controls { position : relative; opacity : 1 ; background-color : # 000 ; }
36
+ .video-js-box .vjs-controls-below .vjs-subtitles { bottom : 75px ; } /* Account for height of controls below video */
37
+
38
+ /* DEFAULT SKIN (override in another file)
39
+ ================================================================================
40
+ Using all CSS to draw the controls. Images could be used if desired.
41
+ Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
42
+ so you can upgrade to newer versions easier. */
43
+
44
+ /* Controls Layout
45
+ Using absolute positioning to position controls */
46
+ .video-js-box .vjs-controls {
47
+ position : absolute; margin : 0 ; opacity : 0.85 ; color : # fff ;
48
+ display : none; /* Start hidden */
49
+ left : 0 ; right : 0 ; /* 100% width of video-js-box */
50
+ width : 100% ;
51
+ bottom : 0px ; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
52
+ height : 35px ; /* Including any margin you want above or below control items */
53
+ padding : 0 ; /* Controls are absolutely position, so no padding necessary */
54
+ }
55
+
56
+ .video-js-box .vjs-controls > div { /* Direct div children of control bar */
57
+ position : absolute; /* Use top, bottom, left, and right to specifically position the control. */
58
+ text-align : center; margin : 0 ; padding : 0 ;
59
+ height : 25px ; /* Default height of individual controls */
60
+ top : 5px ; /* Top margin to put space between video and controls when controls are below */
61
+
62
+ /* CSS Background Gradients
63
+ Using to give the aqua-ish look. */
64
+ /* Default */ background-color : # 0B151A ;
65
+ /* Webkit */ background : # 1F3744 -webkit-gradient (linear, left top, left bottom, from (# 0B151A ), to (# 1F3744 )) left 12px ;
66
+ /* Firefox */ background : # 1F3744 -moz-linear-gradient (top, # 0B151A, # 1F3744 ) left 12px ;
67
+
68
+ /* CSS Curved Corners */
69
+ border-radius : 5px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ;
70
+
71
+ /* CSS Shadows */
72
+ box-shadow : 1px 1px 2px # 000 ; -webkit-box-shadow : 1px 1px 2px # 000 ; -moz-box-shadow : 1px 1px 2px # 000 ;
73
+ }
74
+
75
+ /* Placement of Control Items
76
+ - Left side of pogress bar, use left & width
77
+ - Rigth side of progress bar, use right & width
78
+ - Expand with the video (like progress bar) use left & right */
79
+ .vjs-controls > div .vjs-play-control { left : 5px ; width : 25px ; }
80
+ .vjs-controls > div .vjs-progress-control { left : 35px ; right : 165px ; } /* Using left & right so it expands with the width of the video */
81
+ .vjs-controls > div .vjs-time-control { width : 75px ; right : 90px ; } /* Time control and progress bar are combined to look like one */
82
+ .vjs-controls > div .vjs-volume-control { width : 50px ; right : 35px ; }
83
+ .vjs-controls > div .vjs-fullscreen-control { width : 25px ; right : 5px ; }
84
+
85
+ /* Removing curved corners on progress control and time control to join them. */
86
+ .vjs-controls > div .vjs-progress-control {
87
+ border-top-right-radius : 0 ; -webkit-border-top-right-radius : 0 ; -moz-border-radius-topright : 0 ;
88
+ border-bottom-right-radius : 0 ; -webkit-border-bottom-right-radius : 0 ; -moz-border-radius-bottomright : 0 ;
89
+ }
90
+ .vjs-controls > div .vjs-time-control {
91
+ border-top-left-radius : 0 ; -webkit-border-top-left-radius : 0 ; -moz-border-radius-topleft : 0 ;
92
+ border-bottom-left-radius : 0 ; -webkit-border-bottom-left-radius : 0 ; -moz-border-radius-bottomleft : 0 ;
93
+ }
94
+
95
+ /* Play/Pause
96
+ -------------------------------------------------------------------------------- */
97
+ .vjs-play-control { cursor : pointer !important ; }
98
+ /* Play Icon */
99
+ .vjs-play-control span { display : block; font-size : 0 ; line-height : 0 ; }
100
+ .vjs-paused .vjs-play-control span {
101
+ width : 0 ; height : 0 ; margin : 8px 0 0 8px ;
102
+ /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
103
+ border-left : 10px solid # fff ; /* Width & Color of play icon */
104
+ /* Height of play icon is total top & bottom border widths. Color is transparent. */
105
+ border-top : 5px solid rgba (0 , 0 , 0 , 0 ); border-bottom : 5px solid rgba (0 , 0 , 0 , 0 );
106
+ }
107
+ .vjs-playing .vjs-play-control span {
108
+ width : 3px ; height : 10px ; margin : 8px auto 0 ;
109
+ /* Drawing the pause bars with borders */
110
+ border-top : 0px ; border-left : 3px solid # fff ; border-bottom : 0px ; border-right : 3px solid # fff ;
111
+ }
112
+
113
+ /* Progress
114
+ -------------------------------------------------------------------------------- */
115
+ .vjs-progress-holder { /* Box containing play and load progresses */
116
+ position : relative; padding : 0 ; overflow : hidden; cursor : pointer !important ;
117
+ height : 9px ; border : 1px solid # 777 ;
118
+ margin : 7px 1px 0 5px ; /* Placement within the progress control item */
119
+ border-radius : 5px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ;
120
+ }
121
+ .vjs-progress-holder div { /* Progress Bars */
122
+ position : absolute; display : block; width : 0 ; height : 9px ; margin : 0 ; padding : 0 ;
123
+ border-radius : 5px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ;
124
+ }
125
+ .vjs-play-progress {
126
+ /* CSS Gradient */
127
+ /* Default */ background : # fff ;
128
+ /* Webkit */ background : -webkit-gradient (linear, left top, left bottom, from (# fff ), to (# 777 ));
129
+ /* Firefox */ background : -moz-linear-gradient (top, # fff, # 777 );
130
+ }
131
+ .vjs-load-progress {
132
+ opacity : 0.8 ;
133
+ /* CSS Gradient */
134
+ /* Default */ background-color : # 555 ;
135
+ /* Webkit */ background : -webkit-gradient (linear, left top, left bottom, from (# 555 ), to (# aaa ));
136
+ /* Firefox */ background : -moz-linear-gradient (top, # 555, # aaa );
137
+ }
138
+
139
+ /* Time Display
140
+ -------------------------------------------------------------------------------- */
141
+ .vjs-controls .vjs-time-control { font-size : 10px ; line-height : 1 ; font-weight : normal; font-family : Helvetica, Arial, sans-serif; }
142
+ .vjs-controls .vjs-time-control span { line-height : 25px ; /* Centering vertically */ }
143
+
144
+ /* Volume
145
+ -------------------------------------------------------------------------------- */
146
+ .vjs-volume-control { cursor : pointer !important ; }
147
+ .vjs-volume-control div { display : block; margin : 0 5px 0 5px ; padding : 4px 0 0 0 ; }
148
+ /* Drawing the volume icon using 6 span elements */
149
+ .vjs-volume-control div span { /* Individual volume bars */
150
+ float : left; padding : 0 ;
151
+ margin : 0 2px 0 0 ; /* Space between */
152
+ width : 5px ; height : 0px ; /* Total height is height + bottom border */
153
+ border-bottom : 18px solid # 555 ; /* Default (off) color and height of visible portion */
154
+ }
155
+ .vjs-volume-control div span .vjs-volume-level-on { border-color : # fff ; /* Volume on bar color */ }
156
+ /* Creating differnt bar heights through height (transparent) and bottom border (visible). */
157
+ .vjs-volume-control div span : nth-child (1 ) { border-bottom-width : 2px ; height : 16px ; }
158
+ .vjs-volume-control div span : nth-child (2 ) { border-bottom-width : 4px ; height : 14px ; }
159
+ .vjs-volume-control div span : nth-child (3 ) { border-bottom-width : 7px ; height : 11px ; }
160
+ .vjs-volume-control div span : nth-child (4 ) { border-bottom-width : 10px ; height : 8px ; }
161
+ .vjs-volume-control div span : nth-child (5 ) { border-bottom-width : 14px ; height : 4px ; }
162
+ .vjs-volume-control div span : nth-child (6 ) { margin-right : 0 ; }
163
+
164
+ /* Fullscreen
165
+ -------------------------------------------------------------------------------- */
166
+ .vjs-fullscreen-control { cursor : pointer !important ; }
167
+ .vjs-fullscreen-control div {
168
+ padding : 0 ; text-align : left; vertical-align : top; cursor : pointer !important ;
169
+ margin : 5px 0 0 5px ; /* Placement within the fullscreen control item */
170
+ width : 20px ; height : 20px ;
171
+ }
172
+ /* Drawing the fullscreen icon using 4 span elements */
173
+ .vjs-fullscreen-control div span { float : left; margin : 0 ; padding : 0 ; font-size : 0 ; line-height : 0 ; width : 0 ; text-align : left; vertical-align : top; }
174
+ .vjs-fullscreen-control div span : nth-child (1 ) { /* Top-left triangle */
175
+ margin-right : 3px ; /* Space between top-left and top-right */
176
+ margin-bottom : 3px ; /* Space between top-left and bottom-left */
177
+ border-top : 6px solid # fff ; /* Height and color */
178
+ border-right : 6px solid rgba (0 , 0 , 0 , 0 ); /* Width */
179
+ }
180
+ .vjs-fullscreen-control div span : nth-child (2 ) { border-top : 6px solid # fff ; border-left : 6px solid rgba (0 , 0 , 0 , 0 ); }
181
+ .vjs-fullscreen-control div span : nth-child (3 ) { clear : both; margin : 0 3px 0 0 ; border-bottom : 6px solid # fff ; border-right : 6px solid rgba (0 , 0 , 0 , 0 ); }
182
+ .vjs-fullscreen-control div span : nth-child (4 ) { border-bottom : 6px solid # fff ; border-left : 6px solid rgba (0 , 0 , 0 , 0 ); }
183
+ /* Icon when video is in fullscreen mode */
184
+ .vjs-fullscreen .vjs-fullscreen-control div span : nth-child (1 ) { border : none; border-bottom : 6px solid # fff ; border-left : 6px solid rgba (0 , 0 , 0 , 0 ); }
185
+ .vjs-fullscreen .vjs-fullscreen-control div span : nth-child (2 ) { border : none; border-bottom : 6px solid # fff ; border-right : 6px solid rgba (0 , 0 , 0 , 0 ); }
186
+ .vjs-fullscreen .vjs-fullscreen-control div span : nth-child (3 ) { border : none; border-top : 6px solid # fff ; border-left : 6px solid rgba (0 , 0 , 0 , 0 ); }
187
+ .vjs-fullscreen .vjs-fullscreen-control div span : nth-child (4 ) { border : none; border-top : 6px solid # fff ; border-right : 6px solid rgba (0 , 0 , 0 , 0 ); }
188
+
189
+ /* Download Links - Used for browsers that don't support any video.
190
+ ---------------------------------------------------------*/
191
+ .vjs-no-video { font-size : small; line-height : 1.5 ; }
192
+
193
+ /* Big Play Button (at start)
194
+ ---------------------------------------------------------*/
195
+ div .vjs-big-play-button {
196
+ display : none; /* Start hidden */ z-index : 2 ;
197
+ position : absolute; top : 50% ; left : 50% ; width : 80px ; height : 80px ; margin : -43px 0 0 -43px ; text-align : center; vertical-align : center; cursor : pointer !important ;
198
+ border : 3px solid # fff ; opacity : 0.9 ;
199
+ border-radius : 20px ; -webkit-border-radius : 20px ; -moz-border-radius : 20px ;
200
+
201
+ /* CSS Background Gradients */
202
+ /* Default */ background-color : # 0B151A ;
203
+ /* Webkit */ background : # 1F3744 -webkit-gradient (linear, left top, left bottom, from (# 0B151A ), to (# 1F3744 )) left 40px ;
204
+ /* Firefox */ background : # 1F3744 -moz-linear-gradient (top, # 0B151A, # 1F3744 ) left 40px ;
205
+
206
+ /* CSS Shadows */
207
+ box-shadow : 4px 4px 8px # 000 ; -webkit-box-shadow : 4px 4px 8px # 000 ; -moz-box-shadow : 4px 4px 8px # 000 ;
208
+ }
209
+ div .vjs-big-play-button : hover {
210
+ box-shadow : 0px 0px 80px # fff ; -webkit-box-shadow : 0px 0px 80px # fff ; -moz-box-shadow : 0px 0px 80px # fff ;
211
+ }
212
+
213
+ div .vjs-big-play-button span {
214
+ display : block; font-size : 0 ; line-height : 0 ;
215
+ width : 0 ; height : 0 ; margin : 20px 0 0 23px ;
216
+ /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
217
+ border-left : 40px solid # fff ; /* Width & Color of play icon */
218
+ /* Height of play icon is total top & bottom border widths. Color is transparent. */
219
+ border-top : 20px solid rgba (0 , 0 , 0 , 0 ); border-bottom : 20px solid rgba (0 , 0 , 0 , 0 );
220
+ }
221
+
222
+ /* Spinner Styles
223
+ ---------------------------------------------------------*/
224
+ /* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
225
+ .vjs-spinner { display : none; position : absolute; top : 50% ; left : 50% ; width : 100px ; height : 100px ; z-index : 1 ; margin : -50px 0 0 -50px ;
226
+ /* Scaling makes the circles look smoother. */
227
+ transform : scale (0.5 ); -webkit-transform : scale (0.5 ); -moz-transform : scale (0.5 );
228
+ }
229
+ /* Spinner circles */
230
+ .vjs-spinner div { position : absolute; left : 40px ; top : 40px ; width : 20px ; height : 20px ; background : # fff ;
231
+ border-radius : 20px ; -webkit-border-radius : 20px ; -moz-border-radius : 20px ;
232
+ border : 1px solid # ccc ; /* Added border so can be visible on white backgrounds */
233
+ }
234
+ /* Each circle */
235
+ .vjs-spinner div : nth-child (1 ) { opacity : 0.12 ; transform : rotate (000deg ) translate (0 , -40px ) scale (0.1 ); -webkit-transform : rotate (000deg ) translate (0 , -40px ) scale (0.1 ); -moz-transform : rotate (000deg ) translate (0 , -40px ) scale (0.1 ); }
236
+ .vjs-spinner div : nth-child (2 ) { opacity : 0.25 ; transform : rotate (045deg ) translate (0 , -40px ) scale (0.2 ); -webkit-transform : rotate (045deg ) translate (0 , -40px ) scale (0.2 ); -moz-transform : rotate (045deg ) translate (0 , -40px ) scale (0.2 ); }
237
+ .vjs-spinner div : nth-child (3 ) { opacity : 0.37 ; transform : rotate (090deg ) translate (0 , -40px ) scale (0.4 ); -webkit-transform : rotate (090deg ) translate (0 , -40px ) scale (0.4 ); -moz-transform : rotate (090deg ) translate (0 , -40px ) scale (0.4 ); }
238
+ .vjs-spinner div : nth-child (4 ) { opacity : 0.50 ; transform : rotate (135deg ) translate (0 , -40px ) scale (0.6 ); -webkit-transform : rotate (135deg ) translate (0 , -40px ) scale (0.6 ); -moz-transform : rotate (135deg ) translate (0 , -40px ) scale (0.6 ); }
239
+ .vjs-spinner div : nth-child (5 ) { opacity : 0.62 ; transform : rotate (180deg ) translate (0 , -40px ) scale (0.8 ); -webkit-transform : rotate (180deg ) translate (0 , -40px ) scale (0.8 ); -moz-transform : rotate (180deg ) translate (0 , -40px ) scale (0.8 ); }
240
+ .vjs-spinner div : nth-child (6 ) { opacity : 0.75 ; transform : rotate (225deg ) translate (0 , -40px ) scale (1.0 ); -webkit-transform : rotate (225deg ) translate (0 , -40px ) scale (1.0 ); -moz-transform : rotate (225deg ) translate (0 , -40px ) scale (1.0 ); }
241
+ .vjs-spinner div : nth-child (7 ) { opacity : 0.87 ; transform : rotate (270deg ) translate (0 , -40px ) scale (1.1 ); -webkit-transform : rotate (270deg ) translate (0 , -40px ) scale (1.1 ); -moz-transform : rotate (270deg ) translate (0 , -40px ) scale (1.1 ); }
242
+ .vjs-spinner div : nth-child (8 ) { opacity : 1.00 ; transform : rotate (315deg ) translate (0 , -40px ) scale (1.3 ); -webkit-transform : rotate (315deg ) translate (0 , -40px ) scale (1.3 ); -moz-transform : rotate (315deg ) translate (0 , -40px ) scale (1.3 ); }
0 commit comments