« back to all changes in this revision
Viewing changes to lib/videojs/video-js.css
- browse files at revision 1
- compare with another revision
- download diff
- download tarball
- view history from revision 1
- Committer: Karl Williams
- Date: 2014-02-12 10:37:32 UTC
- Revision ID: karl.williams@canonical.com-20140212103732-kvd9tuemd5qpg0zb
initial import from Matt's design updates
- files added:
- css
- images
- js
- lib
- lib/videojs
- lib/videojs/font
- lib/videojs/plugins
- test
added
removed
lib/videojs/video-js.css
1
/*!
2
Video.js Default Styles (http://videojs.com)
3
Version 4.1.0
4
*/
5
6
/*
7
REQUIRED STYLES (be careful overriding)
8
================================================================================ */
9
/* When loading the player, the video tag is replaced with a DIV,
10
that will hold the video tag or object tag for other playback methods.
11
The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.
12
13
** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
14
Otherwise you risk messing up control positioning and full window mode. **
15
*/
16
.video-js {
17
background-color: #000;
18
position: relative;
19
padding: 0;
20
/* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
21
font-size: 10px;
22
/* Allow poster to be vertially aligned. */
23
vertical-align: middle;
24
/* display: table-cell; */ /*This works in Safari but not Firefox.*/
25
26
/* Turn off user selection (text highlighting) by default.
27
The majority of player components will not be text blocks.
28
Text areas will need to turn user selection back on. */
29
-webkit-user-select: none; /* Chrome all / Safari all */
30
-moz-user-select: none; /* Firefox all */
31
-ms-user-select: none; /* IE 10+ */
32
-o-user-select: none;
33
user-select: none;
34
}
35
36
/* Playback technology elements expand to the width/height of the containing div.
37
<video> or <object> */
38
.video-js .vjs-tech {
39
position: absolute;
40
top: 0;
41
left: 0;
42
width: 100%;
43
height: 100%;
44
}
45
46
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
47
.video-js:-moz-full-screen { position: absolute; }
48
49
/* Fullscreen Styles */
50
body.vjs-full-window {
51
padding: 0;
52
margin: 0;
53
height: 100%;
54
overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
55
}
56
.video-js.vjs-fullscreen {
57
position: fixed;
58
overflow: hidden;
59
z-index: 1000;
60
left: 0;
61
top: 0;
62
bottom: 0;
63
right: 0;
64
width: 100% !important;
65
height: 100% !important;
66
_position: absolute; /* IE6 Full-window (underscore hack) */
67
}
68
.video-js:-webkit-full-screen {
69
width: 100% !important; height: 100% !important;
70
}
71
72
/* Poster Styles */
73
.vjs-poster {
74
background-repeat: no-repeat;
75
background-position: 50% 50%;
76
background-size: contain;
77
cursor: pointer;
78
height: 100%;
79
margin: 0;
80
padding: 0;
81
position: relative;
82
width: 100%;
83
}
84
.vjs-poster img {
85
display: block;
86
margin: 0 auto;
87
max-height: 100%;
88
padding: 0;
89
width: 100%;
90
}
91
92
/* Text Track Styles */
93
/* Overall track holder for both captions and subtitles */
94
.video-js .vjs-text-track-display {
95
text-align: center;
96
position: absolute;
97
bottom: 4em;
98
left: 1em; /* Leave padding on left and right */
99
right: 1em;
100
font-family: Arial, sans-serif;
101
}
102
/* Individual tracks */
103
.video-js .vjs-text-track {
104
display: none;
105
font-size: 1.4em;
106
text-align: center;
107
margin-bottom: 0.1em;
108
/* Transparent black background, or fallback to all black (oldIE) */
109
background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
110
}
111
.video-js .vjs-subtitles { color: #fff; } /* Subtitles are white */
112
.video-js .vjs-captions { color: #fc6; } /* Captions are yellow */
113
.vjs-tt-cue { display: block; }
114
115
/* Fading sytles, used to fade control bar. */
116
.vjs-fade-in {
117
display: block !important;
118
visibility: visible; /* Needed to make sure things hide in older browsers too. */
119
opacity: 1;
120
121
-webkit-transition: visibility 0.1s, opacity 0.1s;
122
-moz-transition: visibility 0.1s, opacity 0.1s;
123
-ms-transition: visibility 0.1s, opacity 0.1s;
124
-o-transition: visibility 0.1s, opacity 0.1s;
125
transition: visibility 0.1s, opacity 0.1s;
126
}
127
.vjs-fade-out {
128
display: block !important;
129
visibility: hidden;
130
opacity: 0;
131
132
-webkit-transition: visibility 1.5s, opacity 1.5s;
133
-moz-transition: visibility 1.5s, opacity 1.5s;
134
-ms-transition: visibility 1.5s, opacity 1.5s;
135
-o-transition: visibility 1.5s, opacity 1.5s;
136
transition: visibility 1.5s, opacity 1.5s;
137
138
/* Wait a moment before fading out the control bar */
139
-webkit-transition-delay: 2s;
140
-moz-transition-delay: 2s;
141
-ms-transition-delay: 2s;
142
-o-transition-delay: 2s;
143
transition-delay: 2s;
144
}
145
/* Hide disabled or unsupported controls */
146
.vjs-default-skin .vjs-hidden { display: none; }
147
148
.vjs-lock-showing {
149
display: block !important;
150
opacity: 1;
151
visibility: visible;
152
}
153
154
/* DEFAULT SKIN (override in another file to create new skins)
155
================================================================================
156
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
157
so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
158
159
/* Base UI Component Classes
160
-------------------------------------------------------------------------------- */
161
@font-face{
162
font-family: 'VideoJS';
163
src: url('font/vjs.eot');
164
src: url('font/vjs.eot?#iefix') format('embedded-opentype'),
165
url('font/vjs.woff') format('woff'),
166
url('font/vjs.ttf') format('truetype');
167
font-weight: normal;
168
font-style: normal;
169
}
170
171
.vjs-default-skin {
172
color: #ccc;
173
}
174
175
/* Slider - used for Volume bar and Seek bar */
176
.vjs-default-skin .vjs-slider {
177
outline: 0; /* Replace browser focus hightlight with handle highlight */
178
position: relative;
179
cursor: pointer;
180
padding: 0;
181
182
background: rgb(50, 50, 50); /* IE8- Fallback */
183
background: rgba(100, 100, 100, 0.5);
184
}
185
186
.vjs-default-skin .vjs-slider:focus {
187
background: rgb(70, 70, 70); /* IE8- Fallback */
188
background: rgba(100, 100, 100, 0.70);
189
190
-webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
191
-moz-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
192
box-shadow: 0 0 2em rgba(255, 255, 255, 1);
193
}
194
195
.vjs-default-skin .vjs-slider-handle {
196
position: absolute;
197
/* Needed for IE6 */
198
left: 0;
199
top: 0;
200
}
201
202
.vjs-default-skin .vjs-slider-handle:before {
203
/*content: "\f111";*/ /* Circle icon = f111 */
204
content: "\e009"; /* Square icon */
205
font-family: VideoJS;
206
font-size: 1em;
207
line-height: 1;
208
text-align: center;
209
text-shadow: 0em 0em 1em #fff;
210
211
position: absolute;
212
top: 0;
213
left: 0;
214
215
/* Rotate the square icon to make a diamond */
216
-webkit-transform: rotate(-45deg);
217
-moz-transform: rotate(-45deg);
218
-ms-transform: rotate(-45deg);
219
-o-transform: rotate(-45deg);
220
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
221
}
222
223
/* Control Bar
224
-------------------------------------------------------------------------------- */
225
/* The default control bar. Created by controls.js */
226
.vjs-default-skin .vjs-control-bar {
227
display: none; /* Start hidden */
228
position: absolute;
229
/* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
230
bottom: 0;
231
/* 100% width of player div */
232
left: 0;
233
right: 0;
234
/* Controls are absolutely position, so no padding necessary */
235
padding: 0;
236
margin: 0;
237
/* Height includes any margin you want above or below control items */
238
height: 3.0em;
239
background-color: rgb(0, 0, 0);
240
/* Slight blue so it can be seen more easily on black. */
241
background-color: rgba(7, 40, 50, 0.7);
242
/* Default font settings */
243
font-style: normal;
244
font-weight: normal;
245
font-family: Arial, sans-serif;
246
}
247
248
/* General styles for individual controls. */
249
.vjs-default-skin .vjs-control {
250
outline: none;
251
position: relative;
252
float: left;
253
text-align: center;
254
margin: 0;
255
padding: 0;
256
height: 3.0em;
257
width: 4em;
258
}
259
260
/* FontAwsome button icons */
261
.vjs-default-skin .vjs-control:before {
262
font-family: VideoJS;
263
font-size: 1.5em;
264
line-height: 2;
265
position: absolute;
266
top: 0;
267
left: 0;
268
width: 100%;
269
height: 100%;
270
text-align: center;
271
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
272
}
273
274
/* Replacement for focus outline */
275
.vjs-default-skin .vjs-control:focus:before,
276
.vjs-default-skin .vjs-control:hover:before {
277
text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
278
}
279
280
.vjs-default-skin .vjs-control:focus { /* outline: 0; */ /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ }
281
282
/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
283
.vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
284
285
/* Play/Pause
286
-------------------------------------------------------------------------------- */
287
.vjs-default-skin .vjs-play-control {
288
width: 5em;
289
cursor: pointer;
290
}
291
.vjs-default-skin .vjs-play-control:before {
292
content: "\e001"; /* Play Icon */
293
}
294
.vjs-default-skin.vjs-playing .vjs-play-control:before {
295
content: "\e002"; /* Pause Icon */
296
}
297
298
/* Rewind
299
-------------------------------------------------------------------------------- */
300
/*.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
301
.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
302
*/
303
304
/* Volume/Mute
305
-------------------------------------------------------------------------------- */
306
.vjs-default-skin .vjs-mute-control,
307
.vjs-default-skin .vjs-volume-menu-button {
308
cursor: pointer;
309
float: right;
310
}
311
.vjs-default-skin .vjs-mute-control:before,
312
.vjs-default-skin .vjs-volume-menu-button:before {
313
content: "\e006"; /* Full volume */
314
}
315
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
316
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
317
content: "\e003"; /* No volume */
318
}
319
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
320
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
321
content: "\e004"; /* Half volume */
322
}
323
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
324
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
325
content: "\e005"; /* Full volume */
326
}
327
328
.vjs-default-skin .vjs-volume-control {
329
width: 5em;
330
float: right;
331
}
332
.vjs-default-skin .vjs-volume-bar {
333
width: 5em;
334
height: 0.6em;
335
margin: 1.1em auto 0;
336
}
337
338
.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
339
height: 2.9em;
340
}
341
342
.vjs-default-skin .vjs-volume-level {
343
position: absolute;
344
top: 0;
345
left: 0;
346
height: 0.5em;
347
348
background: #66A8CC
349
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
350
-50% 0 repeat;
351
}
352
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
353
width: 0.5em;
354
height: 0.5em;
355
}
356
357
.vjs-default-skin .vjs-volume-handle:before {
358
font-size: 0.9em;
359
top: -0.2em;
360
left: -0.2em;
361
362
width: 1em;
363
height: 1em;
364
}
365
366
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
367
width: 6em;
368
left: -4em;
369
}
370
371
/*.vjs-default-skin .vjs-menu-button .vjs-volume-control {
372
height: 1.5em;
373
}*/
374
375
/* Progress
376
-------------------------------------------------------------------------------- */
377
.vjs-default-skin .vjs-progress-control {
378
position: absolute;
379
left: 0;
380
right: 0;
381
width: auto;
382
font-size: 0.3em;
383
height: 1em;
384
/* Set above the rest of the controls. */
385
top: -1em;
386
387
/* Shrink the bar slower than it grows. */
388
-webkit-transition: top 0.4s, height 0.4s, font-size 0.4s, -webkit-transform 0.4s;
389
-moz-transition: top 0.4s, height 0.4s, font-size 0.4s, -moz-transform 0.4s;
390
-o-transition: top 0.4s, height 0.4s, font-size 0.4s, -o-transform 0.4s;
391
transition: top 0.4s, height 0.4s, font-size 0.4s, transform 0.4s;
392
393
}
394
395
/* On hover, make the progress bar grow to something that's more clickable.
396
This simply changes the overall font for the progress bar, and this
397
updates both the em-based widths and heights, as wells as the icon font */
398
.vjs-default-skin:hover .vjs-progress-control {
399
font-size: .9em;
400
401
/* Even though we're not changing the top/height, we need to include them in
402
the transition so they're handled correctly. */
403
-webkit-transition: top 0.2s, height 0.2s, font-size 0.2s, -webkit-transform 0.2s;
404
-moz-transition: top 0.2s, height 0.2s, font-size 0.2s, -moz-transform 0.2s;
405
-o-transition: top 0.2s, height 0.2s, font-size 0.2s, -o-transform 0.2s;
406
transition: top 0.2s, height 0.2s, font-size 0.2s, transform 0.2s;
407
}
408
409
/* Box containing play and load progresses. Also acts as seek scrubber. */
410
.vjs-default-skin .vjs-progress-holder {
411
/* Placement within the progress control item */
412
height: 100%;
413
}
414
415
/* Progress Bars */
416
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
417
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
418
position: absolute;
419
display: block;
420
height: 100%;
421
margin: 0;
422
padding: 0;
423
/* Needed for IE6 */
424
left: 0;
425
top: 0;
426
}
427
428
.vjs-default-skin .vjs-play-progress {
429
/*
430
Using a data URI to create the white diagonal lines with a transparent
431
background. Surprising works in IE8.
432
Created using http://www.patternify.com
433
Changing the first color value will change the bar color.
434
Also using a paralax effect to make the lines move backwards.
435
The -50% left position makes that happen.
436
*/
437
background: #66A8CC
438
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
439
-50% 0 repeat;
440
}
441
.vjs-default-skin .vjs-load-progress {
442
background: rgb(100, 100, 100); /* IE8- Fallback */
443
background: rgba(255, 255, 255, 0.4);
444
}
445
446
.vjs-default-skin .vjs-seek-handle {
447
width: 1.5em;
448
height: 100%;
449
}
450
451
.vjs-default-skin .vjs-seek-handle:before {
452
padding-top: 0.1em; /* Minor adjustment */
453
}
454
455
/* Time Display
456
-------------------------------------------------------------------------------- */
457
.vjs-default-skin .vjs-time-controls {
458
font-size: 1em;
459
/* Align vertically by making the line height the same as the control bar */
460
line-height: 3em;
461
}
462
.vjs-default-skin .vjs-current-time { float: left; }
463
.vjs-default-skin .vjs-duration { float: left; }
464
/* Remaining time is in the HTML, but not included in default design */
465
.vjs-default-skin .vjs-remaining-time { display: none; float: left; }
466
.vjs-time-divider { float: left; line-height: 3em; }
467
468
/* Fullscreen
469
-------------------------------------------------------------------------------- */
470
.vjs-default-skin .vjs-fullscreen-control {
471
width: 3.8em;
472
cursor: pointer;
473
float: right;
474
}
475
.vjs-default-skin .vjs-fullscreen-control:before {
476
content: "\e000"; /* Enter full screen */
477
}
478
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
479
content: "\e00b"; /* Exit full screen */
480
}
481
482
/* Big Play Button (at start)
483
---------------------------------------------------------*/
484
.vjs-default-skin .vjs-big-play-button {
485
display: block;
486
z-index: 2;
487
position: absolute;
488
top: 2em;
489
left: 2em;
490
width: 12.0em;
491
height: 8.0em;
492
margin: 0;
493
text-align: center;
494
vertical-align: middle;
495
cursor: pointer;
496
opacity: 1;
497
498
/* Need a slightly gray bg so it can be seen on black backgrounds */
499
background-color: rgb(40, 40, 40);
500
background-color: rgba(7, 40, 50, 0.7);
501
502
border: 0.3em solid rgb(50, 50, 50);
503
border-color: rgba(255, 255, 255, 0.25);
504
505
-webkit-border-radius: 25px;
506
-moz-border-radius: 25px;
507
border-radius: 25px;
508
509
-webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
510
-moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
511
box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
512
513
-webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
514
-moz-transition: border 0.4s, -moz-box-shadow 0.4s, -moz-transform 0.4s;
515
-o-transition: border 0.4s, -o-box-shadow 0.4s, -o-transform 0.4s;
516
transition: border 0.4s, box-shadow 0.4s, transform 0.4s;
517
}
518
519
.vjs-default-skin:hover .vjs-big-play-button,
520
.vjs-default-skin .vjs-big-play-button:focus {
521
outline: 0;
522
border-color: rgb(255, 255, 255);
523
border-color: rgba(255, 255, 255, 1);
524
/* IE8 needs a non-glow hover state */
525
background-color: rgb(80, 80, 80);
526
background-color: rgba(50, 50, 50, 0.75);
527
528
-webkit-box-shadow: 0 0 3em #fff;
529
-moz-box-shadow: 0 0 3em #fff;
530
box-shadow: 0 0 3em #fff;
531
532
-webkit-transition: border 0s, -webkit-box-shadow 0s, -webkit-transform 0s;
533
-moz-transition: border 0s, -moz-box-shadow 0s, -moz-transform 0s;
534
-o-transition: border 0s, -o-box-shadow 0s, -o-transform 0s;
535
transition: border 0s, box-shadow 0s, transform 0s;
536
}
537
538
.vjs-default-skin .vjs-big-play-button:before {
539
content: "\e001"; /* Play icon */
540
font-family: VideoJS;
541
font-size: 3em;
542
line-height: 2.66;
543
text-shadow: 0.05em 0.05em 0.1em #000;
544
text-align: center; /* Needed for IE8 */
545
546
position: absolute;
547
left: 0;
548
width: 100%;
549
height: 100%;
550
}
551
552
/* Loading Spinner
553
---------------------------------------------------------*/
554
.vjs-loading-spinner {
555
display: none;
556
position: absolute;
557
top: 50%;
558
left: 50%;
559
560
font-size: 5em;
561
line-height: 1;
562
563
width: 1em;
564
height: 1em;
565
566
margin-left: -0.5em;
567
margin-top: -0.5em;
568
569
opacity: 0.75;
570
571
-webkit-animation: spin 1.5s infinite linear;
572
-moz-animation: spin 1.5s infinite linear;
573
-o-animation: spin 1.5s infinite linear;
574
animation: spin 1.5s infinite linear;
575
}
576
577
.vjs-default-skin .vjs-loading-spinner:before {
578
content: "\e00a"; /* Loading spinner icon */
579
font-family: VideoJS;
580
581
position: absolute;
582
width: 1em;
583
height: 1em;
584
text-align: center;
585
text-shadow: 0em 0em 0.1em #000;
586
}
587
588
/* Add a gradient to the spinner by overlaying another copy.
589
Text gradient plus a text shadow doesn't work
590
and `background-clip: text` only works in Webkit. */
591
.vjs-default-skin .vjs-loading-spinner:after {
592
content: "\e00a"; /* Loading spinner icon */
593
font-family: VideoJS;
594
595
position: absolute;
596
width: 1em;
597
height: 1em;
598
text-align: center;
599
600
-webkit-background-clip: text;
601
-webkit-text-fill-color: transparent;
602
}
603
604
@-moz-keyframes spin {
605
0% { -moz-transform: rotate(0deg); }
606
100% { -moz-transform: rotate(359deg); }
607
}
608
@-webkit-keyframes spin {
609
0% { -webkit-transform: rotate(0deg); }
610
100% { -webkit-transform: rotate(359deg); }
611
}
612
@-o-keyframes spin {
613
0% { -o-transform: rotate(0deg); }
614
100% { -o-transform: rotate(359deg); }
615
}
616
@-ms-keyframes spin {
617
0% { -ms-transform: rotate(0deg); }
618
100% { -ms-transform: rotate(359deg); }
619
}
620
@keyframes spin {
621
0% { transform: rotate(0deg); }
622
100% { transform: rotate(359deg); }
623
}
624
625
/* Menu Buttons (Captions/Subtitles/etc.)
626
-------------------------------------------------------------------------------- */
627
.vjs-default-skin .vjs-menu-button {
628
float: right;
629
cursor: pointer;
630
}
631
632
.vjs-default-skin .vjs-menu {
633
display: none;
634
position: absolute;
635
bottom: 0;
636
left: 0em; /* (Width of vjs-menu - width of button) / 2 */
637
width: 0em;
638
height: 0em;
639
margin-bottom: 3em;
640
641
border-left: 2em solid transparent;
642
border-right: 2em solid transparent;
643
644
border-top: 1.55em solid rgb(0, 0, 0); /* Same top as ul bottom */
645
border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
646
}
647
648
/* Button Pop-up Menu */
649
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
650
display: block;
651
padding: 0; margin: 0;
652
position: absolute;
653
width: 10em;
654
bottom: 1.5em; /* Same bottom as vjs-menu border-top */
655
max-height: 15em;
656
overflow: auto;
657
658
left: -5em; /* Width of menu - width of button / 2 */
659
660
background-color: rgb(0, 0, 0);
661
background-color: rgba(7, 40, 50, 0.7);
662
663
-webkit-box-shadow: -20px -20px 0px rgba(255, 255, 255, 0.5);
664
-moz-box-shadow: 0 0 1em rgba(255, 255, 255, 0.5);
665
box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
666
}
667
668
/*.vjs-default-skin .vjs-menu-button:focus ul,*/ /* This is not needed because keyboard accessibility for the caption button is not handled with the focus any more. */
669
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
670
display: block;
671
}
672
.vjs-default-skin .vjs-menu-button ul li {
673
list-style: none;
674
margin: 0;
675
padding: 0.3em 0 0.3em 0;
676
line-height: 1.4em;
677
font-size: 1.2em;
678
font-weight: normal;
679
text-align: center;
680
text-transform: lowercase;
681
}
682
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
683
background-color: #000;
684
}
685
.vjs-default-skin .vjs-menu-button ul li:focus,
686
.vjs-default-skin .vjs-menu-button ul li:hover,
687
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
688
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
689
background-color: rgb(255, 255, 255);
690
background-color: rgba(255, 255, 255, 0.75);
691
color: #111;
692
outline: 0;
693
694
-webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
695
-moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
696
box-shadow: 0 0 1em rgba(255, 255, 255, 1);
697
}
698
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
699
text-align: center;
700
text-transform: uppercase;
701
font-size: 1em;
702
line-height: 2em;
703
padding: 0;
704
margin: 0 0 0.3em 0;
705
font-weight: bold;
706
cursor: default;
707
}
708
709
/* Subtitles Button */
710
.vjs-default-skin .vjs-subtitles-button:before { content: "\e00c"; }
711
712
/* There's unfortunately no CC button in FontAwesome, so we need
713
to use another font. Please +1 the fontawesome request.
714
https://github.com/FortAwesome/Font-Awesome/issues/968 */
715
.vjs-default-skin .vjs-captions-button:before {
716
content: "\e008";
717
}
718
719
720
/* Replacement for focus outline */
721
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
722
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
723
-webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
724
-moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
725
box-shadow: 0 0 1em rgba(255, 255, 255, 1);
726
}
Loggerhead is a web-based interface for Breezy
Version: 2.0.1