sufia 3.6.1 → 3.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +1 -4
  3. data/Gemfile +0 -3
  4. data/History.md +29 -0
  5. data/README.md +2 -4
  6. data/SUFIA_VERSION +1 -1
  7. data/app/assets/javascripts/sufia.js +2 -20
  8. data/app/assets/javascripts/sufia/audio.js +28 -0
  9. data/app/assets/javascripts/sufia/single_use_link.js +35 -0
  10. data/app/assets/stylesheets/sufia-audio-overrides.css +9 -0
  11. data/app/assets/stylesheets/sufia.css.scss +1 -1
  12. data/app/assets/stylesheets/video-js.css +700 -433
  13. data/app/controllers/concerns/sufia/dashboard_controller_behavior.rb +0 -12
  14. data/app/controllers/concerns/sufia/users_controller_behavior.rb +12 -18
  15. data/app/controllers/dashboard_controller.rb +1 -2
  16. data/app/helpers/sufia_helper.rb +6 -5
  17. data/app/helpers/trophy_helper.rb +1 -1
  18. data/app/views/catalog/_index_partials/_default_group.html.erb +1 -2
  19. data/app/views/catalog/_results_pagination.html.erb +3 -3
  20. data/app/views/catalog/index.html.erb +0 -3
  21. data/app/views/dashboard/_index_partials/_thumbnail_display.html.erb +2 -2
  22. data/app/views/dashboard/_results_pagination.html.erb +5 -21
  23. data/app/views/dashboard/facet.html.erb +1 -1
  24. data/app/views/dashboard/index.html.erb +5 -35
  25. data/app/views/generic_files/_media_display.html.erb +4 -4
  26. data/app/views/layouts/sufia-two-column.html.erb +0 -16
  27. data/app/views/users/_contributions.html.erb +20 -28
  28. data/app/views/users/_profile_actions.html.erb +8 -9
  29. data/config/routes.rb +7 -8
  30. data/lib/sufia/version.rb +1 -1
  31. data/spec/controllers/users_controller_spec.rb +51 -13
  32. data/spec/features/browse_files_spec.rb +14 -12
  33. data/spec/helpers/sufia_helper_spec.rb +21 -0
  34. data/spec/models/generic_file_spec.rb +24 -66
  35. data/spec/models/user_spec.rb +16 -4
  36. data/sufia-models/app/models/checksum_audit_log.rb +0 -1
  37. data/sufia-models/app/models/concerns/sufia/user.rb +6 -13
  38. data/sufia-models/app/models/domain_term.rb +1 -6
  39. data/sufia-models/app/models/local_authority.rb +2 -10
  40. data/sufia-models/app/models/local_authority_entry.rb +0 -1
  41. data/sufia-models/app/models/single_use_link.rb +1 -3
  42. data/sufia-models/app/models/trophy.rb +0 -2
  43. data/sufia-models/app/models/version_committer.rb +0 -1
  44. data/sufia-models/lib/sufia/models/engine.rb +0 -2
  45. data/sufia-models/lib/sufia/models/generic_file.rb +7 -0
  46. data/sufia-models/sufia-models.gemspec +3 -1
  47. data/sufia.gemspec +1 -1
  48. data/tasks/sufia-dev.rake +0 -1
  49. data/vendor/assets/javascripts/video.js +129 -4569
  50. metadata +22 -23
  51. data/sufia-models/lib/sufia/models/active_record/deprecated_attr_accessible.rb +0 -16
  52. data/sufia-models/lib/sufia/models/active_support/core_ext/marshal.rb +0 -22
  53. data/tasks/sufia.rake +0 -173
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: b53a899aa9c270ada0aab595ca8da81fc10d7325
4
- data.tar.gz: 2acd0577db3a932cc963588569d7bde1e96a8bb5
3
+ metadata.gz: cd1c1d869e175044e6997471f0e6c3dcf2e89cbc
4
+ data.tar.gz: 8020119fe464f600fc9d645d543ded8f053da959
5
5
  SHA512:
6
- metadata.gz: a85c16093df9b3a1baded8276f9bdd8f38f93c45c448c36658cba440fc4d5527c0b7fa031a0a8f78d01c89cd73deb2930df1be6eaa36721b949233f3c8339be0
7
- data.tar.gz: 81ef3a1faa2ceba2551cf4039ae9fffc8a87e78b853fc8eeb250ffac73579f15d75edf6f62b829b08a936ee9bc3403d4f63108c72edd16d9c4f058330e490c90
6
+ metadata.gz: 051e1e361d4cf1403c1ad55619403efab4dae5a5c72d1d427034c1124a3f07ebebd9c2473c12c8f341b0464c8f1f603e87accb2bc8bfacac3dfd344c650a873c
7
+ data.tar.gz: df859a53507cff81e851d5f318990f7cc69f5db67fa70de01cbca865138c665b31f7ff5124915d9d6cd26d4da7679ecfd18f07791199fd41183476f7c74a4998
@@ -1,10 +1,7 @@
1
1
  language: ruby
2
- before_install:
3
- - sudo apt-get install libclamav-dev clamav-data clamav-daemon
4
- - sudo freshclam -v
5
2
  rvm:
3
+ - "2.1.0"
6
4
  - "2.0.0"
7
- - "2.1.0-preview2"
8
5
  env:
9
6
  global:
10
7
  - NOKOGIRI_USE_SYSTEM_LIBRARIES=true
data/Gemfile CHANGED
@@ -8,9 +8,6 @@ gem 'kaminari', github: 'harai/kaminari', branch: 'route_prefix_prototype'
8
8
  gem 'sufia-models', path: './sufia-models'
9
9
 
10
10
  group :development, :test do
11
- gem 'devise'
12
- # gem 'byebug'
13
- gem 'clamav'
14
11
  gem 'sqlite3'
15
12
  gem 'rspec-rails'
16
13
  gem 'launchy' unless ENV['TRAVIS']
data/History.md CHANGED
@@ -1,4 +1,33 @@
1
1
  # History of Sufia releases
2
+ ## 3.7.0
3
+
4
+ * The UsersController needs to set @trophies to a list of GenericFiles [Justin Coyne]
5
+ * Removed patches for rails 3 [Justin Coyne]
6
+ * Short-circuit freshclam for a faster build [Michael J. Giarlo]
7
+ * Use blacklight 4.5 methods for accessing the search_session. Fixes #296 [Justin Coyne]
8
+ * Test with ruby 2.1.0 final release [Justin Coyne]
9
+ * Simplify tests for GenericFile#related_files [Justin Coyne]
10
+ * Remove duplicate includes. Fixes #289 [Justin Coyne]
11
+ * Remove non-functioning rake tasks … [Justin Coyne]
12
+ * Better documentation for GenericFile#related_files [ci skip] [Justin Coyne]
13
+ * Linked in handle seems to have been missed in the permitted attibiute… … [Carolyn Cole]
14
+ * Updated: - Don't need to exlicity add 'jettywrapper' to Gemfile b/c added by hydra:head generator (called by sufia generator)
15
+ - Don't need to remove public/index.html (Rails 4 presumably)
16
+ - Run `rake jetty:clean` instead of hydra:jetty generator -- does the same thing
17
+ - Added note that fits can be installed with homebrew (and may require adding a symlink)
18
+ [David Chandek-Stark]
19
+ * Upgrade blacklight to 4.6 [Justin Coyne]
20
+ * Allowing the link to either be sufia based or blacklight based [Carolyn Cole]
21
+ * Removing extra_head_content, and paginate deprication warnings [Carolyn Cole]
22
+ * Remove deprecated method paginate_rsolr_response. Fixes #312 [Justin Coyne]
23
+ * Moving single use link java script into asset pipeline. [Carolyn Cole]
24
+ * Update to blacklight 4.7 [Justin Coyne]
25
+ * Modifying how zclip works when a flash player is not present, since t… … [Carolyn Cole]
26
+ * Upgrading video.js to the latest version so it will work in firefox, … … [Carolyn Cole]
27
+ * Removing hard coded asset paths, which do not work in production. Whi… … [Carolyn Cole]
28
+ * Fixing audiojs to only display if audio is not supported by the brows… … [Carolyn Cole]
29
+
30
+ ## 3.6.0
2
31
 
3
32
  ## 3.4.0
4
33
  * Handle facets with 3 or more words [Jeremy Friesen]
data/README.md CHANGED
@@ -42,7 +42,6 @@ Sufia has the following features:
42
42
  ```
43
43
  gem 'sufia'
44
44
  gem 'kaminari', github: 'harai/kaminari', branch: 'route_prefix_prototype' # required to handle pagination properly in dashboard. See https://github.com/amatsuda/kaminari/pull/322
45
- gem 'jettywrapper'
46
45
  gem 'font-awesome-sass-rails'
47
46
  ```
48
47
  Then `bundle install`
@@ -52,7 +51,6 @@ Note the line with kaminari listed as a dependency. This is a temporary fix to
52
51
  ### Run the sufia generator
53
52
  ```
54
53
  rails g sufia -f
55
- rm public/index.html
56
54
  ```
57
55
 
58
56
  ### Run the migrations
@@ -63,7 +61,7 @@ rake db:migrate
63
61
 
64
62
  ### Get a copy of hydra-jetty
65
63
  ```
66
- rails g hydra:jetty
64
+ rake jetty:clean
67
65
  rake jetty:config
68
66
  rake jetty:start
69
67
  ```
@@ -95,7 +93,7 @@ Add this line:
95
93
  Turbolinks does not mix well with Blacklight.
96
94
 
97
95
  ### Install Fits.sh
98
- 1. Go to http://code.google.com/p/fits/downloads/list and download a copy of fits & unpack it somewhere on your Machine.
96
+ 1. Go to http://code.google.com/p/fits/downloads/list and download a copy of fits & unpack it somewhere on your machine. You can also install fits on OSX with homebrew `brew install fits` (you may also have to create a symlink from `fits.sh -> fits` in the next step).
99
97
  1. Give your system access to fits
100
98
  1. By adding the path to fits.sh to your excutable PATH. (ex. in your .bashrc)
101
99
  * OR
@@ -1 +1 @@
1
- 3.6.1
1
+ 3.7.0
@@ -44,6 +44,8 @@ limitations under the License.
44
44
  //= require sufia/batch_select_all
45
45
  //= require sufia/multiForm
46
46
  //= require sufia/edit_metadata
47
+ //= require sufia/single_use_link
48
+ //= require sufia/audio
47
49
  //= require hydra/batch_select
48
50
  //= require hydra_collections
49
51
 
@@ -174,23 +176,3 @@ function preg_quote( str ) {
174
176
 
175
177
  return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
176
178
  }
177
-
178
-
179
- function initialize_audio() {
180
-
181
- if (navigator.userAgent.match("Chrome")){
182
- $('audio').each(function() {
183
- this.controls = true;
184
- });
185
- }else {
186
- $('audio').each(function() {
187
- $(this).attr("preload","auto");
188
- });
189
- audiojs.events.ready(function() {
190
- var as = audiojs.createAll({
191
- imageLocation: '/assets/player-graphics.gif',
192
- swfLocation: '/assets/audiojs.swf'
193
- });
194
- });
195
- };
196
- }
@@ -0,0 +1,28 @@
1
+ function initialize_audio() {
2
+
3
+ var test_audio= document.createElement("audio") //try and create sample audio element
4
+ var audiosupport= (test_audio.play)? true : false
5
+
6
+ if (audiosupport){
7
+ $('audio').each(function() {
8
+ this.controls = true;
9
+ });
10
+ }else {
11
+ $('audio').each(function() {
12
+ $(this).attr("preload","auto");
13
+ });
14
+ audiojs.events.ready(function() {
15
+ var as = audiojs.createAll({
16
+ imageLocation: '/assets/player-graphics.gif',
17
+ swfLocation: '/assets/audiojs.swf'
18
+ });
19
+
20
+ // remove html 5 player from veiw on firefox and safari
21
+ $('.audiojs').addClass('no-audio-background')
22
+ $('.audiojs .play-pause').addClass('hide')
23
+ $('.audiojs .scrubber').addClass('hide')
24
+ $('.audiojs .time').addClass('hide')
25
+
26
+ });
27
+ };
28
+ }
@@ -0,0 +1,35 @@
1
+ function getSingleUse(id) {
2
+ var rurl = window.location.protocol+"//"+window.location.host;
3
+ var resp = $.ajax({
4
+ headers: { Accept: "application/javascript" },
5
+ type: 'get',
6
+ url: rurl + "/single_use_link/generate_show/" + id.slice(10),
7
+ async: false
8
+ });
9
+ return rurl + resp.responseText;
10
+ }
11
+
12
+ // short hand for $(document).ready();
13
+ $(function() {
14
+ ZeroClipboard.setDefaults({ moviePath: "/assets/ZeroClipboard.swf" });
15
+ $.each($(".copypaste"), function(idx, item) {
16
+ var clip = new ZeroClipboard();
17
+ clip.on("dataRequested", function(client, args) {
18
+ clip.setText(getSingleUse(this.id));
19
+ })
20
+ clip.on("complete", function(client, args) {
21
+ alert("A single use link to " + args.text + " was copied to your clipboard.")
22
+ })
23
+ clip.on("noflash", function(client, args) {
24
+ $(item).bind('click', function(e) {
25
+ alert("Your single-use link (please copy): " + getSingleUse(item.id));
26
+ } );
27
+ })
28
+ clip.on("wrongflash", function(client, args) {
29
+ $(item).bind('click', function(e) {
30
+ alert("Your single-use link (please copy): " + getSingleUse(item.id));
31
+ } );
32
+ })
33
+ clip.glue($("#" + this.id))
34
+ })
35
+ });
@@ -0,0 +1,9 @@
1
+
2
+ .no-audio-background {
3
+ background: none;
4
+ box-shadow: none;
5
+ }
6
+
7
+ .span40 .audiojs audio {
8
+ left: 10px;
9
+ }
@@ -10,7 +10,7 @@
10
10
  *= require audio-js
11
11
  *= require dashboard
12
12
  *= require jquery-ui
13
+ *= require sufia-audio-overrides
13
14
  */
14
15
 
15
16
  @import 'font-awesome';
16
-
@@ -1,499 +1,766 @@
1
- /*
2
- VideoJS Default Styles (http://videojs.com)
3
- Version 3.2.0
1
+ /*!
2
+ Video.js Default Styles (http://videojs.com)
3
+ Version 4.3.0
4
+ Create your own skin at http://designer.videojs.com
4
5
  */
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. **
6
+ /* SKIN
7
+ ================================================================================
8
+ The main class name for all skin-specific styles. To make your own skin,
9
+ replace all occurances of 'vjs-default-skin' with a new name. Then add your new
10
+ skin name to your video tag instead of the default skin.
11
+ e.g. <video class="video-js my-skin-name">
15
12
  */
16
- .video-js {
17
- background-color: #000; position: relative; padding: 0;
18
-
19
- /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
20
- font-size: 10px;
21
-
22
- /* Allow poster to be vertially aligned. */
23
- vertical-align: middle;
24
- /* display: table-cell; */ /*This works in Safari but not Firefox.*/
25
- }
26
-
27
- /* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
28
- .video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
29
-
30
- /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
31
- .video-js:-moz-full-screen { position: absolute; }
32
-
33
- /* Fullscreen Styles */
34
- body.vjs-full-window {
35
- padding: 0; margin: 0;
36
- height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
13
+ .vjs-default-skin {
14
+ color: #cccccc;
37
15
  }
38
- .video-js.vjs-fullscreen {
39
- position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
40
- _position: absolute; /* IE6 Full-window (underscore hack) */
16
+ /* Custom Icon Font
17
+ --------------------------------------------------------------------------------
18
+ The control icons are from a custom font. Each icon corresponds to a character
19
+ (e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
20
+ */
21
+ @font-face {
22
+ font-family: 'VideoJS';
23
+ src: url('font/vjs.eot');
24
+ src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype');
25
+ font-weight: normal;
26
+ font-style: normal;
41
27
  }
42
- .video-js:-webkit-full-screen {
43
- width: 100% !important; height: 100% !important;
28
+ /* Base UI Component Classes
29
+ --------------------------------------------------------------------------------
30
+ */
31
+ /* Slider - used for Volume bar and Seek bar */
32
+ .vjs-default-skin .vjs-slider {
33
+ /* Replace browser focus hightlight with handle highlight */
34
+ outline: 0;
35
+ position: relative;
36
+ cursor: pointer;
37
+ padding: 0;
38
+ /* background-color-with-alpha */
39
+ background-color: #333333;
40
+ background-color: rgba(51, 51, 51, 0.9);
44
41
  }
45
-
46
- /* Poster Styles */
47
- .vjs-poster {
48
- margin: 0 auto; padding: 0; cursor: pointer;
49
-
50
- /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
51
- position: relative; width: 100%; max-height: 100%;
42
+ .vjs-default-skin .vjs-slider:focus {
43
+ /* box-shadow */
44
+ -webkit-box-shadow: 0 0 2em #ffffff;
45
+ -moz-box-shadow: 0 0 2em #ffffff;
46
+ box-shadow: 0 0 2em #ffffff;
52
47
  }
53
-
54
- /* Text Track Styles */
55
- /* Overall track holder for both captions and subtitles */
56
- .video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
57
- /* Individual tracks */
58
- .video-js .vjs-text-track {
59
- display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
60
- /* Transparent black background, or fallback to all black (IE6) */
61
- background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
48
+ .vjs-default-skin .vjs-slider-handle {
49
+ position: absolute;
50
+ /* Needed for IE6 */
51
+ left: 0;
52
+ top: 0;
62
53
  }
63
- .video-js .vjs-subtitles { color: #fff; }
64
- .video-js .vjs-captions { color: #fc6; }
65
- .vjs-tt-cue { display: block; }
66
-
67
- /* Fading sytles, used to fade control bar. */
68
- .vjs-fade-in {
69
- visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
70
- opacity: 1 !important;
71
-
72
- -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
73
- -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
74
- -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
75
- -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
76
- transition: visibility 0s linear 0s, opacity 0.3s linear;
77
- }
78
- .vjs-fade-out {
79
- visibility: hidden !important;
80
- opacity: 0 !important;
81
-
82
- -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
83
- -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
84
- -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
85
- -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
86
- transition: visibility 0s linear 1.5s,opacity 1.5s linear;
54
+ .vjs-default-skin .vjs-slider-handle:before {
55
+ content: "\e009";
56
+ font-family: VideoJS;
57
+ font-size: 1em;
58
+ line-height: 1;
59
+ text-align: center;
60
+ text-shadow: 0em 0em 1em #fff;
61
+ position: absolute;
62
+ top: 0;
63
+ left: 0;
64
+ /* Rotate the square icon to make a diamond */
65
+ /* transform */
66
+ -webkit-transform: rotate(-45deg);
67
+ -moz-transform: rotate(-45deg);
68
+ -ms-transform: rotate(-45deg);
69
+ -o-transform: rotate(-45deg);
70
+ transform: rotate(-45deg);
87
71
  }
88
-
89
- /* DEFAULT SKIN (override in another file to create new skins)
90
- ================================================================================
91
- Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
92
- so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
93
-
94
- /* The default control bar. Created by bar.js */
95
- .vjs-default-skin .vjs-controls {
72
+ /* Control Bar
73
+ --------------------------------------------------------------------------------
74
+ The default control bar that is a container for most of the controls.
75
+ */
76
+ .vjs-default-skin .vjs-control-bar {
77
+ /* Start hidden */
78
+ display: none;
96
79
  position: absolute;
97
- bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
98
- left: 0; right: 0; /* 100% width of div */
99
- margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
100
- height: 2.6em; /* Including any margin you want above or below control items */
101
- color: #fff; border-top: 1px solid #404040;
102
-
103
- /* CSS Gradient */
104
- /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
105
- background: #242424; /* Old browsers */
106
- background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
107
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
108
- background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
109
- background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
110
- background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
111
- /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
112
- /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
113
- background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
114
-
115
- /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
116
- /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
80
+ /* Place control bar at the bottom of the player box/video.
81
+ If you want more margin below the control bar, add more height. */
82
+ bottom: 0;
83
+ /* Use left/right to stretch to 100% width of player div */
84
+ left: 0;
85
+ right: 0;
86
+ /* Height includes any margin you want above or below control items */
87
+ height: 3.0em;
88
+ /* background-color-with-alpha */
89
+ background-color: #07141e;
90
+ background-color: rgba(7, 20, 30, 0.7);
91
+ }
92
+ /* Show the control bar only once the video has started playing */
93
+ .vjs-default-skin.vjs-has-started .vjs-control-bar {
94
+ display: block;
95
+ /* Visibility needed to make sure things hide in older browsers too. */
96
+
97
+ visibility: visible;
98
+ opacity: 1;
99
+ /* transition */
100
+ -webkit-transition: visibility 0.1s, opacity 0.1s;
101
+ -moz-transition: visibility 0.1s, opacity 0.1s;
102
+ -o-transition: visibility 0.1s, opacity 0.1s;
103
+ transition: visibility 0.1s, opacity 0.1s;
104
+ }
105
+ /* Hide the control bar when the video is playing and the user is inactive */
106
+ .vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
107
+ display: block;
117
108
  visibility: hidden;
118
109
  opacity: 0;
110
+ /* transition */
111
+ -webkit-transition: visibility 1s, opacity 1s;
112
+ -moz-transition: visibility 1s, opacity 1s;
113
+ -o-transition: visibility 1s, opacity 1s;
114
+ transition: visibility 1s, opacity 1s;
115
+ }
116
+ .vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
117
+ display: none;
118
+ }
119
+ .vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
120
+ display: none;
121
+ }
122
+ /* IE8 is flakey with fonts, and you have to change the actual content to force
123
+ fonts to show/hide properly.
124
+ - "\9" IE8 hack didn't work for this
125
+ - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
126
+ */
127
+ @media \0screen {
128
+ .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
129
+ content: "";
130
+ }
119
131
  }
120
-
121
132
  /* General styles for individual controls. */
122
133
  .vjs-default-skin .vjs-control {
123
- position: relative; float: left;
124
- text-align: center; margin: 0; padding: 0;
125
- height: 2.6em; width: 2.6em;
134
+ outline: none;
135
+ position: relative;
136
+ float: left;
137
+ text-align: center;
138
+ margin: 0;
139
+ padding: 0;
140
+ height: 3.0em;
141
+ width: 4em;
126
142
  }
127
-
128
- .vjs-default-skin .vjs-control:focus {
129
- outline: 0;
130
- /* background-color: #555;*/
143
+ /* FontAwsome button icons */
144
+ .vjs-default-skin .vjs-control:before {
145
+ font-family: VideoJS;
146
+ font-size: 1.5em;
147
+ line-height: 2;
148
+ position: absolute;
149
+ top: 0;
150
+ left: 0;
151
+ width: 100%;
152
+ height: 100%;
153
+ text-align: center;
154
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
131
155
  }
156
+ /* Replacement for focus outline */
157
+ .vjs-default-skin .vjs-control:focus:before,
158
+ .vjs-default-skin .vjs-control:hover:before {
159
+ text-shadow: 0em 0em 1em #ffffff;
160
+ }
161
+ .vjs-default-skin .vjs-control:focus {
162
+ /* outline: 0; */
163
+ /* keyboard-only users cannot see the focus on several of the UI elements when
164
+ this is set to 0 */
132
165
 
133
- /* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
134
- .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; }
135
-
136
-
166
+ }
167
+ /* Hide control text visually, but have it available for screenreaders */
168
+ .vjs-default-skin .vjs-control-text {
169
+ /* hide-visually */
170
+ border: 0;
171
+ clip: rect(0 0 0 0);
172
+ height: 1px;
173
+ margin: -1px;
174
+ overflow: hidden;
175
+ padding: 0;
176
+ position: absolute;
177
+ width: 1px;
178
+ }
137
179
  /* Play/Pause
138
- -------------------------------------------------------------------------------- */
139
- .vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
140
- /* Play Icon */
141
- .vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png'); margin: 0.5em auto 0; }
142
- .vjs-default-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png') -25px 0; margin: 0.5em auto 0; }
143
-
144
- /* Rewind
145
- -------------------------------------------------------------------------------- */
146
- .vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
147
- .vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
148
-
180
+ --------------------------------------------------------------------------------
181
+ */
182
+ .vjs-default-skin .vjs-play-control {
183
+ width: 5em;
184
+ cursor: pointer;
185
+ }
186
+ .vjs-default-skin .vjs-play-control:before {
187
+ content: "\e001";
188
+ }
189
+ .vjs-default-skin.vjs-playing .vjs-play-control:before {
190
+ content: "\e002";
191
+ }
149
192
  /* Volume/Mute
150
193
  -------------------------------------------------------------------------------- */
151
- .vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
152
- .vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('video-js.png') -75px -25px; margin: 0.5em auto 0; }
153
- .vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('video-js.png') 0 -25px; }
154
- .vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('video-js.png') -25px -25px; }
155
- .vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('video-js.png') -50px -25px; }
156
-
157
-
158
- .vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
194
+ .vjs-default-skin .vjs-mute-control,
195
+ .vjs-default-skin .vjs-volume-menu-button {
196
+ cursor: pointer;
197
+ float: right;
198
+ }
199
+ .vjs-default-skin .vjs-mute-control:before,
200
+ .vjs-default-skin .vjs-volume-menu-button:before {
201
+ content: "\e006";
202
+ }
203
+ .vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
204
+ .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
205
+ content: "\e003";
206
+ }
207
+ .vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
208
+ .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
209
+ content: "\e004";
210
+ }
211
+ .vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
212
+ .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
213
+ content: "\e005";
214
+ }
215
+ .vjs-default-skin .vjs-volume-control {
216
+ width: 5em;
217
+ float: right;
218
+ }
159
219
  .vjs-default-skin .vjs-volume-bar {
160
- position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;
161
-
162
- -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
163
-
164
- background: #666;
165
- background: -moz-linear-gradient(top, #333, #666);
166
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
167
- background: -webkit-linear-gradient(top, #333, #666);
168
- background: -o-linear-gradient(top, #333, #666);
169
- background: -ms-linear-gradient(top, #333, #666);
170
- background: linear-gradient(top, #333, #666);
220
+ width: 5em;
221
+ height: 0.6em;
222
+ margin: 1.1em auto 0;
223
+ }
224
+ .vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
225
+ height: 2.9em;
171
226
  }
172
227
  .vjs-default-skin .vjs-volume-level {
173
- position: absolute; top: 0; left: 0; height: 0.6em;
174
-
175
- -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
176
-
177
- background: #fff;
178
- background: -moz-linear-gradient(top, #fff, #ccc);
179
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
180
- background: -webkit-linear-gradient(top, #fff, #ccc);
181
- background: -o-linear-gradient(top, #fff, #ccc);
182
- background: -ms-linear-gradient(top, #fff, #ccc);
183
- background: linear-gradient(top, #fff, #ccc);
184
- }
185
- .vjs-default-skin .vjs-volume-handle {
186
- position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
187
- border: 1px solid #fff;
188
- -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
228
+ position: absolute;
229
+ top: 0;
230
+ left: 0;
231
+ height: 0.5em;
232
+ background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
233
+ }
234
+ .vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
235
+ width: 0.5em;
236
+ height: 0.5em;
237
+ }
238
+ .vjs-default-skin .vjs-volume-handle:before {
239
+ font-size: 0.9em;
240
+ top: -0.2em;
241
+ left: -0.2em;
242
+ width: 1em;
243
+ height: 1em;
244
+ }
245
+ .vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
246
+ width: 6em;
247
+ left: -4em;
189
248
  }
190
-
191
249
  /* Progress
192
- -------------------------------------------------------------------------------- */
193
- .vjs-default-skin div.vjs-progress-control {
250
+ --------------------------------------------------------------------------------
251
+ */
252
+ .vjs-default-skin .vjs-progress-control {
194
253
  position: absolute;
195
- left: 4.8em; right: 4.8em; /* Leave room for time displays. */
196
- height: 1.0em; width: auto;
197
- top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
198
- border-bottom: 1px solid #1F1F1F;
199
- border-top: 1px solid #222;
200
-
201
- /* CSS Gradient */
202
- background: #333;
203
- background: -moz-linear-gradient(top, #222, #333);
204
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
205
- background: -webkit-linear-gradient(top, #222, #333);
206
- background: -o-linear-gradient(top, #333, #222);
207
- background: -ms-linear-gradient(top, #333, #222);
208
- background: linear-gradient(top, #333, #222);
209
-
210
-
211
- /* 1px top shadow */
212
- /* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
254
+ left: 0;
255
+ right: 0;
256
+ width: auto;
257
+ font-size: 0.3em;
258
+ height: 1em;
259
+ /* Set above the rest of the controls. */
260
+ top: -1em;
261
+ /* Shrink the bar slower than it grows. */
262
+ /* transition */
263
+ -webkit-transition: all 0.4s;
264
+ -moz-transition: all 0.4s;
265
+ -o-transition: all 0.4s;
266
+ transition: all 0.4s;
267
+ }
268
+ /* On hover, make the progress bar grow to something that's more clickable.
269
+ This simply changes the overall font for the progress bar, and this
270
+ updates both the em-based widths and heights, as wells as the icon font */
271
+ .vjs-default-skin:hover .vjs-progress-control {
272
+ font-size: .9em;
273
+ /* Even though we're not changing the top/height, we need to include them in
274
+ the transition so they're handled correctly. */
275
+
276
+ /* transition */
277
+ -webkit-transition: all 0.2s;
278
+ -moz-transition: all 0.2s;
279
+ -o-transition: all 0.2s;
280
+ transition: all 0.2s;
213
281
  }
214
-
215
282
  /* Box containing play and load progresses. Also acts as seek scrubber. */
216
283
  .vjs-default-skin .vjs-progress-holder {
217
- position: relative; cursor: pointer !important; /*overflow: hidden;*/
218
- padding: 0; margin: 0; /* Placement within the progress control item */
219
- height: 1.0em;
220
- -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
221
-
222
- /* CSS Gradient */
223
- background: #111;
224
- background: -moz-linear-gradient(top, #111, #262626);
225
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
226
- background: -webkit-linear-gradient(top, #111, #262626);
227
- background: -o-linear-gradient(top, #111, #262626);
228
- background: -ms-linear-gradient(top, #111, #262626);
229
- background: linear-gradient(top, #111, #262626);
284
+ height: 100%;
230
285
  }
286
+ /* Progress Bars */
231
287
  .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
232
- .vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
233
- position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
234
- left: 0; top: 0; /*Needed for IE6*/
235
- -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
236
-
237
- /*width: 0;*/
288
+ .vjs-default-skin .vjs-progress-holder .vjs-load-progress {
289
+ position: absolute;
290
+ display: block;
291
+ height: 100%;
292
+ margin: 0;
293
+ padding: 0;
294
+ /* Needed for IE6 */
295
+ left: 0;
296
+ top: 0;
238
297
  }
239
-
240
298
  .vjs-default-skin .vjs-play-progress {
241
- /* CSS Gradient. */
242
- background: #fff; /* Old browsers */
243
- background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
244
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
245
- background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
246
- background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
247
- background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
248
- background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
249
-
250
- background: #efefef;
251
- background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
252
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
253
- background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
254
- background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
255
- background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
256
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
257
- background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
299
+ /*
300
+ Using a data URI to create the white diagonal lines with a transparent
301
+ background. Surprisingly works in IE8.
302
+ Created using http://www.patternify.com
303
+ Changing the first color value will change the bar color.
304
+ Also using a paralax effect to make the lines move backwards.
305
+ The -50% left position makes that happen.
306
+ */
307
+
308
+ background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
258
309
  }
259
310
  .vjs-default-skin .vjs-load-progress {
260
- opacity: 0.8;
261
-
262
- /* CSS Gradient */
263
- background: #666;
264
- background: -moz-linear-gradient(top, #666, #333);
265
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
266
- background: -webkit-linear-gradient(top, #666, #333);
267
- background: -o-linear-gradient(top, #666, #333);
268
- background: -ms-linear-gradient(top, #666, #333);
269
- background: linear-gradient(top, #666, #333);
311
+ background: #646464 /* IE8- Fallback */;
312
+ background: rgba(255, 255, 255, 0.4);
270
313
  }
271
-
272
- .vjs-default-skin div.vjs-seek-handle {
273
- position: absolute;
274
- width: 16px; height: 16px; /* Match img pixles */
275
- margin-top: -0.3em;
276
- left: 0; top: 0; /*Needed for IE6*/
277
-
278
- background: url('video-js.png') 0 -50px;
279
- /* CSS Curved Corners. Needed to make shadows curved. */
280
- -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
281
- /* CSS Shadows */
282
- -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
314
+ .vjs-default-skin .vjs-seek-handle {
315
+ width: 1.5em;
316
+ height: 100%;
317
+ }
318
+ .vjs-default-skin .vjs-seek-handle:before {
319
+ padding-top: 0.1em /* Minor adjustment */;
283
320
  }
284
321
  /* Time Display
285
- -------------------------------------------------------------------------------- */
322
+ --------------------------------------------------------------------------------
323
+ */
286
324
  .vjs-default-skin .vjs-time-controls {
287
- position: absolute;
288
- right: 0;
289
- height: 1.0em; width: 4.8em;
290
- top: -1.3em;
291
- border-bottom: 1px solid #1F1F1F;
292
- border-top: 1px solid #222;
293
- background-color: #333;
294
-
295
- font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
296
-
297
- background: #333;
298
- background: -moz-linear-gradient(top, #222, #333);
299
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
300
- background: -webkit-linear-gradient(top, #222, #333);
301
- background: -o-linear-gradient(top, #333, #222);
302
- background: -ms-linear-gradient(top, #333, #222);
303
- background: linear-gradient(top, #333, #222);
304
-
305
- /* 1px top shadow */
306
- /* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
325
+ font-size: 1em;
326
+ /* Align vertically by making the line height the same as the control bar */
327
+ line-height: 3em;
328
+ }
329
+ .vjs-default-skin .vjs-current-time {
330
+ float: left;
331
+ }
332
+ .vjs-default-skin .vjs-duration {
333
+ float: left;
334
+ }
335
+ /* Remaining time is in the HTML, but not included in default design */
336
+ .vjs-default-skin .vjs-remaining-time {
337
+ display: none;
338
+ float: left;
339
+ }
340
+ .vjs-time-divider {
341
+ float: left;
342
+ line-height: 3em;
307
343
  }
308
-
309
- .vjs-default-skin .vjs-current-time { left: 0; }
310
-
311
- .vjs-default-skin .vjs-duration { right: 0; display: none; }
312
- .vjs-default-skin .vjs-remaining-time { right: 0; }
313
-
314
- .vjs-time-divider { display:none; }
315
-
316
- .vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
317
- .vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
318
-
319
344
  /* Fullscreen
320
- -------------------------------------------------------------------------------- */
321
- .vjs-secondary-controls { float: right; }
322
-
323
- .vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
324
- .vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('video-js.png') -50px 0; margin: 0.5em auto 0; }
325
-
326
- .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }
327
-
328
-
329
- /* Big Play Button (at start)
330
- ---------------------------------------------------------*/
345
+ --------------------------------------------------------------------------------
346
+ */
347
+ .vjs-default-skin .vjs-fullscreen-control {
348
+ width: 3.8em;
349
+ cursor: pointer;
350
+ float: right;
351
+ }
352
+ .vjs-default-skin .vjs-fullscreen-control:before {
353
+ content: "\e000";
354
+ }
355
+ /* Switch to the exit icon when the player is in fullscreen */
356
+ .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
357
+ content: "\e00b";
358
+ }
359
+ /* Big Play Button (play button at start)
360
+ --------------------------------------------------------------------------------
361
+ Positioning of the play button in the center or other corners can be done more
362
+ easily in the skin designer. http://designer.videojs.com/
363
+ */
331
364
  .vjs-default-skin .vjs-big-play-button {
332
- display: block; /* Start hidden */ z-index: 2;
333
- position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -42px 0 0 -42px; text-align: center; vertical-align: center; cursor: pointer !important;
334
- border: 0.2em solid #fff; opacity: 0.95;
335
- -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
336
-
337
- background: #454545;
338
- background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
339
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
340
- background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
341
- background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
342
- background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
343
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
344
- background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
345
-
346
- /* CSS Shadows */
347
- -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
365
+ left: 0.5em;
366
+ top: 0.5em;
367
+ font-size: 3em;
368
+ display: block;
369
+ z-index: 2;
370
+ position: absolute;
371
+ width: 4em;
372
+ height: 2.6em;
373
+ text-align: center;
374
+ vertical-align: middle;
375
+ cursor: pointer;
376
+ opacity: 1;
377
+ /* Need a slightly gray bg so it can be seen on black backgrounds */
378
+ /* background-color-with-alpha */
379
+ background-color: #07141e;
380
+ background-color: rgba(7, 20, 30, 0.7);
381
+ border: 0.1em solid #3b4249;
382
+ /* border-radius */
383
+ -webkit-border-radius: 0.8em;
384
+ -moz-border-radius: 0.8em;
385
+ border-radius: 0.8em;
386
+ /* box-shadow */
387
+ -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
388
+ -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
389
+ box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
390
+ /* transition */
391
+ -webkit-transition: all 0.4s;
392
+ -moz-transition: all 0.4s;
393
+ -o-transition: all 0.4s;
394
+ transition: all 0.4s;
348
395
  }
349
-
350
- .vjs-default-skin div.vjs-big-play-button:hover {
351
- -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
396
+ /* Optionally center */
397
+ .vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
398
+ /* Center it horizontally */
399
+ left: 50%;
400
+ margin-left: -2.1em;
401
+ /* Center it vertically */
402
+ top: 50%;
403
+ margin-top: -1.4000000000000001em;
352
404
  }
353
-
354
- .vjs-default-skin div.vjs-big-play-button span {
355
- position: absolute; top: 50%; left: 50%;
356
- display: block; width: 35px; height: 42px;
357
- margin: -20px 0 0 -15px; /* Using negative margin to center image. */
358
- background: url('video-js.png') -100px 0;
405
+ /* Hide if controls are disabled */
406
+ .vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
407
+ display: none;
408
+ }
409
+ /* Hide when video starts playing */
410
+ .vjs-default-skin.vjs-has-started .vjs-big-play-button {
411
+ display: none;
412
+ }
413
+ /* Hide on mobile devices. Remove when we stop using native controls
414
+ by default on mobile */
415
+ .vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
416
+ display: none;
417
+ }
418
+ .vjs-default-skin:hover .vjs-big-play-button,
419
+ .vjs-default-skin .vjs-big-play-button:focus {
420
+ outline: 0;
421
+ border-color: #fff;
422
+ /* IE8 needs a non-glow hover state */
423
+ background-color: #505050;
424
+ background-color: rgba(50, 50, 50, 0.75);
425
+ /* box-shadow */
426
+ -webkit-box-shadow: 0 0 3em #ffffff;
427
+ -moz-box-shadow: 0 0 3em #ffffff;
428
+ box-shadow: 0 0 3em #ffffff;
429
+ /* transition */
430
+ -webkit-transition: all 0s;
431
+ -moz-transition: all 0s;
432
+ -o-transition: all 0s;
433
+ transition: all 0s;
434
+ }
435
+ .vjs-default-skin .vjs-big-play-button:before {
436
+ content: "\e001";
437
+ font-family: VideoJS;
438
+ /* In order to center the play icon vertically we need to set the line height
439
+ to the same as the button height */
440
+
441
+ line-height: 2.6em;
442
+ text-shadow: 0.05em 0.05em 0.1em #000;
443
+ text-align: center /* Needed for IE8 */;
444
+ position: absolute;
445
+ left: 0;
446
+ width: 100%;
447
+ height: 100%;
359
448
  }
360
-
361
449
  /* Loading Spinner
362
- ---------------------------------------------------------*/
363
- /* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
450
+ --------------------------------------------------------------------------------
451
+ */
364
452
  .vjs-loading-spinner {
365
453
  display: none;
366
- position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
367
- margin: -28px 0 0 -28px;
368
- -webkit-animation-name: rotatethis;
369
- -webkit-animation-duration:1s;
370
- -webkit-animation-iteration-count:infinite;
371
- -webkit-animation-timing-function:linear;
372
- -moz-animation-name: rotatethis;
373
- -moz-animation-duration:1s;
374
- -moz-animation-iteration-count:infinite;
375
- -moz-animation-timing-function:linear;
454
+ position: absolute;
455
+ top: 50%;
456
+ left: 50%;
457
+ font-size: 4em;
458
+ line-height: 1;
459
+ width: 1em;
460
+ height: 1em;
461
+ margin-left: -0.5em;
462
+ margin-top: -0.5em;
463
+ opacity: 0.75;
464
+ /* animation */
465
+ -webkit-animation: spin 1.5s infinite linear;
466
+ -moz-animation: spin 1.5s infinite linear;
467
+ -o-animation: spin 1.5s infinite linear;
468
+ animation: spin 1.5s infinite linear;
376
469
  }
377
-
378
- @-webkit-keyframes rotatethis {
379
- 0% {-webkit-transform:scale(0.6) rotate(0deg); }
380
- 12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
381
- 12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
382
- 25% {-webkit-transform:scale(0.6) rotate(45deg); }
383
- 25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
384
- 37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
385
- 37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
386
- 50% {-webkit-transform:scale(0.6) rotate(135deg);}
387
- 50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
388
- 62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
389
- 62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
390
- 75% {-webkit-transform:scale(0.6) rotate(225deg);}
391
- 75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
392
- 87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
393
- 87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
394
- 100% {-webkit-transform:scale(0.6) rotate(315deg);}
470
+ .vjs-default-skin .vjs-loading-spinner:before {
471
+ content: "\e01e";
472
+ font-family: VideoJS;
473
+ position: absolute;
474
+ top: 0;
475
+ left: 0;
476
+ width: 1em;
477
+ height: 1em;
478
+ text-align: center;
479
+ text-shadow: 0em 0em 0.1em #000;
480
+ }
481
+ @-moz-keyframes spin {
482
+ 0% {
483
+ -moz-transform: rotate(0deg);
484
+ }
485
+ 100% {
486
+ -moz-transform: rotate(359deg);
487
+ }
488
+ }
489
+ @-webkit-keyframes spin {
490
+ 0% {
491
+ -webkit-transform: rotate(0deg);
492
+ }
493
+ 100% {
494
+ -webkit-transform: rotate(359deg);
495
+ }
496
+ }
497
+ @-o-keyframes spin {
498
+ 0% {
499
+ -o-transform: rotate(0deg);
500
+ }
501
+ 100% {
502
+ -o-transform: rotate(359deg);
503
+ }
504
+ }
505
+ @keyframes spin {
506
+ 0% {
507
+ transform: rotate(0deg);
508
+ }
509
+ 100% {
510
+ transform: rotate(359deg);
511
+ }
395
512
  }
396
-
397
- @-moz-keyframes rotatethis {
398
- 0% {-moz-transform:scale(0.6) rotate(0deg);}
399
- 12.5% {-moz-transform:scale(0.6) rotate(0deg);}
400
- 12.51% {-moz-transform:scale(0.6) rotate(45deg);}
401
- 25% {-moz-transform:scale(0.6) rotate(45deg);}
402
- 25.01% {-moz-transform:scale(0.6) rotate(90deg);}
403
- 37.5% {-moz-transform:scale(0.6) rotate(90deg);}
404
- 37.51% {-moz-transform:scale(0.6) rotate(135deg);}
405
- 50% {-moz-transform:scale(0.6) rotate(135deg);}
406
- 50.01% {-moz-transform:scale(0.6) rotate(180deg);}
407
- 62.5% {-moz-transform:scale(0.6) rotate(180deg);}
408
- 62.51% {-moz-transform:scale(0.6) rotate(225deg);}
409
- 75% {-moz-transform:scale(0.6) rotate(225deg);}
410
- 75.01% {-moz-transform:scale(0.6) rotate(270deg);}
411
- 87.5% {-moz-transform:scale(0.6) rotate(270deg);}
412
- 87.51% {-moz-transform:scale(0.6) rotate(315deg);}
413
- 100% {-moz-transform:scale(0.6) rotate(315deg);}
414
- }
415
- /* Each circle */
416
- div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
417
- border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
418
-
419
- div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
420
- border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
421
-
422
- div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
423
- border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
424
-
425
- div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
426
- border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
427
-
428
- div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
429
- border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
430
-
431
- div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
432
- border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
433
-
434
- div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
435
- border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
436
-
437
- div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
438
- border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
439
-
440
513
  /* Menu Buttons (Captions/Subtitles/etc.)
441
- -------------------------------------------------------------------------------- */
514
+ --------------------------------------------------------------------------------
515
+ */
442
516
  .vjs-default-skin .vjs-menu-button {
443
- float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
517
+ float: right;
518
+ cursor: pointer;
519
+ }
520
+ .vjs-default-skin .vjs-menu {
521
+ display: none;
522
+ position: absolute;
523
+ bottom: 0;
524
+ left: 0em;
525
+ /* (Width of vjs-menu - width of button) / 2 */
444
526
 
445
- border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
527
+ width: 0em;
528
+ height: 0em;
529
+ margin-bottom: 3em;
530
+ border-left: 2em solid transparent;
531
+ border-right: 2em solid transparent;
532
+ border-top: 1.55em solid #000000;
533
+ /* Same width top as ul bottom */
446
534
 
447
- background: #4d4d4d;
448
- background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
449
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
450
- background: -webkit-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
451
- background: -o-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
452
- background: -ms-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
453
- background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
454
- }
455
- /* Button Icon */
456
- .vjs-default-skin .vjs-menu-button div { background: url('video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
535
+ border-top-color: rgba(7, 40, 50, 0.5);
536
+ /* Same as ul background */
457
537
 
538
+ }
458
539
  /* Button Pop-up Menu */
459
- .vjs-default-skin .vjs-menu-button ul {
460
- display: none; /* Start hidden. Hover will show. */
461
- opacity: 0.8;
462
- padding: 0; margin: 0;
463
- position: absolute; width: 10em; bottom: 2em; max-height: 15em;
464
- left: -3.5em; /* Width of menu - width of button / 2 */
465
- background-color: #111;
466
- border: 2px solid #333;
467
- -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
468
- -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
540
+ .vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
541
+ display: block;
542
+ padding: 0;
543
+ margin: 0;
544
+ position: absolute;
545
+ width: 10em;
546
+ bottom: 1.5em;
547
+ /* Same bottom as vjs-menu border-top */
548
+
549
+ max-height: 15em;
469
550
  overflow: auto;
551
+ left: -5em;
552
+ /* Width of menu - width of button / 2 */
553
+
554
+ /* background-color-with-alpha */
555
+ background-color: #07141e;
556
+ background-color: rgba(7, 20, 30, 0.7);
557
+ /* box-shadow */
558
+ -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
559
+ -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
560
+ box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
561
+ }
562
+ .vjs-default-skin .vjs-menu-button:hover .vjs-menu {
563
+ display: block;
564
+ }
565
+ .vjs-default-skin .vjs-menu-button ul li {
566
+ list-style: none;
567
+ margin: 0;
568
+ padding: 0.3em 0 0.3em 0;
569
+ line-height: 1.4em;
570
+ font-size: 1.2em;
571
+ text-align: center;
572
+ text-transform: lowercase;
573
+ }
574
+ .vjs-default-skin .vjs-menu-button ul li.vjs-selected {
575
+ background-color: #000;
470
576
  }
471
-
472
- .vjs-default-skin .vjs-menu-button:focus ul,
473
- .vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
474
- .vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
475
- .vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('video-js.png') -125px -50px no-repeat; }
476
577
  .vjs-default-skin .vjs-menu-button ul li:focus,
477
578
  .vjs-default-skin .vjs-menu-button ul li:hover,
478
579
  .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
479
- .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
580
+ .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
581
+ outline: 0;
582
+ color: #111;
583
+ /* background-color-with-alpha */
584
+ background-color: #ffffff;
585
+ background-color: rgba(255, 255, 255, 0.75);
586
+ /* box-shadow */
587
+ -webkit-box-shadow: 0 0 1em #ffffff;
588
+ -moz-box-shadow: 0 0 1em #ffffff;
589
+ box-shadow: 0 0 1em #ffffff;
590
+ }
480
591
  .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
481
- text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;
592
+ text-align: center;
593
+ text-transform: uppercase;
594
+ font-size: 1em;
595
+ line-height: 2em;
596
+ padding: 0;
597
+ margin: 0 0 0.3em 0;
598
+ font-weight: bold;
599
+ cursor: default;
600
+ }
601
+ /* Subtitles Button */
602
+ .vjs-default-skin .vjs-subtitles-button:before {
603
+ content: "\e00c";
604
+ }
605
+ /* Captions Button */
606
+ .vjs-default-skin .vjs-captions-button:before {
607
+ content: "\e008";
608
+ }
609
+ /* Replacement for focus outline */
610
+ .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
611
+ .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
612
+ /* box-shadow */
613
+ -webkit-box-shadow: 0 0 1em #ffffff;
614
+ -moz-box-shadow: 0 0 1em #ffffff;
615
+ box-shadow: 0 0 1em #ffffff;
616
+ }
617
+ /*
618
+ REQUIRED STYLES (be careful overriding)
619
+ ================================================================================
620
+ When loading the player, the video tag is replaced with a DIV,
621
+ that will hold the video tag or object tag for other playback methods.
622
+ The div contains the video playback element (Flash or HTML5) and controls,
623
+ and sets the width and height of the video.
624
+
625
+ ** If you want to add some kind of border/padding (e.g. a frame), or special
626
+ positioning, use another containing element. Otherwise you risk messing up
627
+ control positioning and full window mode. **
628
+ */
629
+ .video-js {
630
+ background-color: #000;
631
+ position: relative;
632
+ padding: 0;
633
+ /* Start with 10px for base font size so other dimensions can be em based and
634
+ easily calculable. */
482
635
 
483
- color: #fff; font-weight: bold;
636
+ font-size: 10px;
637
+ /* Allow poster to be vertially aligned. */
484
638
 
485
- cursor: default;
639
+ vertical-align: middle;
640
+ /* display: table-cell; */
641
+ /*This works in Safari but not Firefox.*/
486
642
 
487
- background: #4d4d4d;
488
- background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
489
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
490
- background: -webkit-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
491
- background: -o-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
492
- background: -ms-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
493
- background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
494
- }
643
+ /* Provide some basic defaults for fonts */
495
644
 
496
- /* Subtitles Button */
497
- .vjs-default-skin .vjs-captions-button div { background-position: -25px -75px; }
498
- .vjs-default-skin .vjs-chapters-button div { background-position: -100px -75px; }
499
- .vjs-default-skin .vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }
645
+ font-weight: normal;
646
+ font-style: normal;
647
+ /* Avoiding helvetica: issue #376 */
648
+
649
+ font-family: Arial, sans-serif;
650
+ /* Turn off user selection (text highlighting) by default.
651
+ The majority of player components will not be text blocks.
652
+ Text areas will need to turn user selection back on. */
653
+
654
+ /* user-select */
655
+ -webkit-user-select: none;
656
+ -moz-user-select: none;
657
+ -ms-user-select: none;
658
+ user-select: none;
659
+ }
660
+ /* Playback technology elements expand to the width/height of the containing div
661
+ <video> or <object> */
662
+ .video-js .vjs-tech {
663
+ position: absolute;
664
+ top: 0;
665
+ left: 0;
666
+ width: 100%;
667
+ height: 100%;
668
+ }
669
+ /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
670
+ checking fullScreenEnabled. */
671
+ .video-js:-moz-full-screen {
672
+ position: absolute;
673
+ }
674
+ /* Fullscreen Styles */
675
+ body.vjs-full-window {
676
+ padding: 0;
677
+ margin: 0;
678
+ height: 100%;
679
+ /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
680
+ overflow-y: auto;
681
+ }
682
+ .video-js.vjs-fullscreen {
683
+ position: fixed;
684
+ overflow: hidden;
685
+ z-index: 1000;
686
+ left: 0;
687
+ top: 0;
688
+ bottom: 0;
689
+ right: 0;
690
+ width: 100% !important;
691
+ height: 100% !important;
692
+ /* IE6 full-window (underscore hack) */
693
+ _position: absolute;
694
+ }
695
+ .video-js:-webkit-full-screen {
696
+ width: 100% !important;
697
+ height: 100% !important;
698
+ }
699
+ .video-js.vjs-fullscreen.vjs-user-inactive {
700
+ cursor: none;
701
+ }
702
+ /* Poster Styles */
703
+ .vjs-poster {
704
+ background-repeat: no-repeat;
705
+ background-position: 50% 50%;
706
+ background-size: contain;
707
+ cursor: pointer;
708
+ height: 100%;
709
+ margin: 0;
710
+ padding: 0;
711
+ position: relative;
712
+ width: 100%;
713
+ }
714
+ .vjs-poster img {
715
+ display: block;
716
+ margin: 0 auto;
717
+ max-height: 100%;
718
+ padding: 0;
719
+ width: 100%;
720
+ }
721
+ /* Hide the poster when native controls are used otherwise it covers them */
722
+ .video-js.vjs-using-native-controls .vjs-poster {
723
+ display: none;
724
+ }
725
+ /* Text Track Styles */
726
+ /* Overall track holder for both captions and subtitles */
727
+ .video-js .vjs-text-track-display {
728
+ text-align: center;
729
+ position: absolute;
730
+ bottom: 4em;
731
+ /* Leave padding on left and right */
732
+ left: 1em;
733
+ right: 1em;
734
+ }
735
+ /* Individual tracks */
736
+ .video-js .vjs-text-track {
737
+ display: none;
738
+ font-size: 1.4em;
739
+ text-align: center;
740
+ margin-bottom: 0.1em;
741
+ /* Transparent black background, or fallback to all black (oldIE) */
742
+ /* background-color-with-alpha */
743
+ background-color: #000000;
744
+ background-color: rgba(0, 0, 0, 0.5);
745
+ }
746
+ .video-js .vjs-subtitles {
747
+ color: #ffffff /* Subtitles are white */;
748
+ }
749
+ .video-js .vjs-captions {
750
+ color: #ffcc66 /* Captions are yellow */;
751
+ }
752
+ .vjs-tt-cue {
753
+ display: block;
754
+ }
755
+ /* Hide disabled or unsupported controls */
756
+ .vjs-default-skin .vjs-hidden {
757
+ display: none;
758
+ }
759
+ .vjs-lock-showing {
760
+ display: block !important;
761
+ opacity: 1;
762
+ visibility: visible;
763
+ }
764
+ /* -----------------------------------------------------------------------------
765
+ The original source of this file lives at
766
+ https://github.com/videojs/video.js/blob/master/src/css/video-js.less */