@@ -12,6 +12,8 @@ module.exports = function (grunt) { | |||||
// show elapsed time at the end | // show elapsed time at the end | ||||
require('time-grunt')(grunt); | require('time-grunt')(grunt); | ||||
grunt.loadNpmTasks('grunt-npm-command'); | |||||
// configurable paths | // configurable paths | ||||
var yeomanConfig = { | var yeomanConfig = { | ||||
app: require('./bower.json').appPath || 'src', | app: require('./bower.json').appPath || 'src', | ||||
@@ -37,11 +39,11 @@ module.exports = function (grunt) { | |||||
livereload: '<%= connect.options.livereload %>' | livereload: '<%= connect.options.livereload %>' | ||||
}, | }, | ||||
files: [ | files: [ | ||||
'<%= yeoman.app %>/*.html', | |||||
'{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', | |||||
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', | |||||
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' | |||||
], | |||||
'<%= yeoman.app %>/*.html', | |||||
'{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', | |||||
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', | |||||
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' | |||||
], | |||||
tasks: ['includes:server'] | tasks: ['includes:server'] | ||||
} | } | ||||
}, | }, | ||||
@@ -56,19 +58,19 @@ module.exports = function (grunt) { | |||||
options: { | options: { | ||||
open: true, | open: true, | ||||
base: [ | base: [ | ||||
'.tmp', | |||||
'<%= yeoman.app %>' | |||||
] | |||||
'.tmp', | |||||
'<%= yeoman.app %>' | |||||
] | |||||
} | } | ||||
}, | }, | ||||
test: { | test: { | ||||
options: { | options: { | ||||
port: 9001, | port: 9001, | ||||
base: [ | base: [ | ||||
'.tmp', | |||||
'test', | |||||
'<%= yeoman.app %>' | |||||
] | |||||
'.tmp', | |||||
'test', | |||||
'<%= yeoman.app %>' | |||||
] | |||||
} | } | ||||
}, | }, | ||||
dist: { | dist: { | ||||
@@ -82,11 +84,11 @@ module.exports = function (grunt) { | |||||
files: [{ | files: [{ | ||||
dot: true, | dot: true, | ||||
src: [ | src: [ | ||||
'.tmp', | |||||
'<%= yeoman.dist %>/*', | |||||
'!<%= yeoman.dist %>/.git*' | |||||
] | |||||
}] | |||||
'.tmp', | |||||
'<%= yeoman.dist %>/*', | |||||
'!<%= yeoman.dist %>/.git*' | |||||
] | |||||
}] | |||||
}, | }, | ||||
server: '.tmp' | server: '.tmp' | ||||
}, | }, | ||||
@@ -96,11 +98,11 @@ module.exports = function (grunt) { | |||||
reporter: require('jshint-stylish') | reporter: require('jshint-stylish') | ||||
}, | }, | ||||
all: [ | all: [ | ||||
'Gruntfile.js', | |||||
'<%= yeoman.app %>/scripts/{,*/}*.js', | |||||
'!<%= yeoman.app %>/scripts/vendor/*', | |||||
'test/spec/{,*/}*.js' | |||||
] | |||||
'Gruntfile.js', | |||||
'<%= yeoman.app %>/scripts/{,*/}*.js', | |||||
'!<%= yeoman.app %>/scripts/vendor/*', | |||||
'test/spec/{,*/}*.js' | |||||
] | |||||
}, | }, | ||||
@@ -153,11 +155,11 @@ module.exports = function (grunt) { | |||||
dist: { | dist: { | ||||
files: { | files: { | ||||
src: [ | src: [ | ||||
'<%= yeoman.dist %>/scripts/{,*/}*.js', | |||||
'<%= yeoman.dist %>/styles/{,*/}*.css', | |||||
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', | |||||
'<%= yeoman.dist %>/fonts/{,*/}*.*' | |||||
] | |||||
'<%= yeoman.dist %>/scripts/{,*/}*.js', | |||||
'<%= yeoman.dist %>/styles/{,*/}*.css', | |||||
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', | |||||
'<%= yeoman.dist %>/fonts/{,*/}*.*' | |||||
] | |||||
} | } | ||||
} | } | ||||
}, | }, | ||||
@@ -181,7 +183,7 @@ module.exports = function (grunt) { | |||||
cwd: '<%= yeoman.app %>/images', | cwd: '<%= yeoman.app %>/images', | ||||
src: '{,*/}*.{png,jpg,jpeg}', | src: '{,*/}*.{png,jpg,jpeg}', | ||||
dest: '<%= yeoman.dist %>/images' | dest: '<%= yeoman.dist %>/images' | ||||
}] | |||||
}] | |||||
} | } | ||||
}, | }, | ||||
@@ -189,9 +191,9 @@ module.exports = function (grunt) { | |||||
dist: { | dist: { | ||||
files: { | files: { | ||||
'<%= yeoman.dist %>/styles/main.css': [ | '<%= yeoman.dist %>/styles/main.css': [ | ||||
'.tmp/styles/{,*/}*.css', | |||||
'<%= yeoman.app %>/styles/{,*/}*.css' | |||||
] | |||||
'.tmp/styles/{,*/}*.css', | |||||
'<%= yeoman.app %>/styles/{,*/}*.css' | |||||
] | |||||
} | } | ||||
} | } | ||||
}, | }, | ||||
@@ -213,10 +215,24 @@ module.exports = function (grunt) { | |||||
cwd: '<%= yeoman.app %>', | cwd: '<%= yeoman.app %>', | ||||
src: '*.html', | src: '*.html', | ||||
dest: '<%= yeoman.dist %>' | dest: '<%= yeoman.dist %>' | ||||
}] | |||||
}] | |||||
} | } | ||||
}, | }, | ||||
copy: { | |||||
'npm-command': { | |||||
'videojs-install': { | |||||
options: { | |||||
cwd: '<%= yeoman.app %>/bower_components/videojs/' | |||||
} | |||||
}, | |||||
'videojs-build': { | |||||
options: { | |||||
cmd: 'run-script', | |||||
args: ['build'], | |||||
cwd: '<%= yeoman.app %>/bower_components/videojs/' | |||||
} | |||||
} | |||||
} | |||||
,copy: { | |||||
dist: { | dist: { | ||||
files: [{ | files: [{ | ||||
expand: true, | expand: true, | ||||
@@ -224,53 +240,55 @@ module.exports = function (grunt) { | |||||
cwd: '<%= yeoman.app %>', | cwd: '<%= yeoman.app %>', | ||||
dest: '<%= yeoman.dist %>', | dest: '<%= yeoman.dist %>', | ||||
src: [ | src: [ | ||||
'*.{ico,png,txt}', | |||||
'fonts/{,*/}*.*', | |||||
'.htaccess', | |||||
'index.txt', | |||||
'404.txt', | |||||
'images/{,*/}*.{webp,gif,svg}' | |||||
] | |||||
}] | |||||
'*.{ico,png,txt}', | |||||
'fonts/{,*/}*.*', | |||||
'.htaccess', | |||||
'index.txt', | |||||
'404.txt', | |||||
'images/{,*/}*.{webp,gif,svg}' | |||||
] | |||||
}] | |||||
}, | }, | ||||
server: { | server: { | ||||
files: [{ | files: [{ | ||||
expand: true, | |||||
dot: true, | |||||
cwd: '<%= yeoman.app %>/bower_components/font-awesome/fonts/', | |||||
dest: '<%= yeoman.app %>/fonts/font-awesome', | |||||
src: ['*'] | |||||
expand: true, | |||||
dot: true, | |||||
cwd: '<%= yeoman.app %>/bower_components/font-awesome/fonts/', | |||||
dest: '<%= yeoman.app %>/fonts/font-awesome', | |||||
src: ['*'] | |||||
}, { | }, { | ||||
expand: true, | |||||
dot: true, | |||||
cwd: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/', | |||||
dest: '<%= yeoman.app %>/fonts/glyphicons', | |||||
src: ['*'] | |||||
expand: true, | |||||
dot: true, | |||||
cwd: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/', | |||||
dest: '<%= yeoman.app %>/fonts/glyphicons', | |||||
src: ['*'] | |||||
}] | }] | ||||
} | } | ||||
}, | }, | ||||
concurrent: { | concurrent: { | ||||
dist: [ | dist: [ | ||||
'less', | |||||
'imagemin', | |||||
'htmlmin' | |||||
] | |||||
'less', | |||||
'imagemin', | |||||
'htmlmin' | |||||
] | |||||
} | } | ||||
}); | }); | ||||
grunt.loadNpmTasks('grunt-npm-command'); | |||||
grunt.registerTask('serve', function (target) { | grunt.registerTask('serve', function (target) { | ||||
if (target === 'dist') { | if (target === 'dist') { | ||||
return grunt.task.run(['build', 'connect:dist:keepalive']); | return grunt.task.run(['build', 'connect:dist:keepalive']); | ||||
} | } | ||||
grunt.task.run([ | grunt.task.run([ | ||||
'clean:server', | |||||
'less', | |||||
'includes:server', | |||||
'copy:server', | |||||
'connect:livereload', | |||||
'watch' | |||||
]); | |||||
'clean:server', | |||||
'less', | |||||
'includes:server', | |||||
'copy:server', | |||||
'connect:livereload', | |||||
'watch' | |||||
]); | |||||
}); | }); | ||||
grunt.registerTask('server', function () { | grunt.registerTask('server', function () { | ||||
@@ -279,30 +297,30 @@ module.exports = function (grunt) { | |||||
}); | }); | ||||
grunt.registerTask('test', [ | grunt.registerTask('test', [ | ||||
'clean:server', | |||||
'less', | |||||
'copy:server', | |||||
'connect:test', | |||||
]); | |||||
'clean:server', | |||||
'less', | |||||
'copy:server', | |||||
'connect:test', | |||||
]); | |||||
grunt.registerTask('build', [ | grunt.registerTask('build', [ | ||||
'clean:dist', | |||||
'clean:dist', | |||||
'npm-command', | |||||
'copy:server', | |||||
'useminPrepare', | |||||
'concurrent', | |||||
'cssmin', | |||||
'concat', | |||||
'includes:build', | |||||
'uglify', | |||||
'copy', | |||||
'usemin', | |||||
'copy:server', | |||||
'useminPrepare', | |||||
'concurrent', | |||||
'cssmin', | |||||
'concat', | |||||
'includes:build', | |||||
'uglify', | |||||
'copy', | |||||
'usemin', | |||||
]); | |||||
]); | |||||
grunt.registerTask('default', [ | grunt.registerTask('default', [ | ||||
'jshint', | |||||
'test', | |||||
'build' | |||||
]); | |||||
'jshint', | |||||
'test', | |||||
'build' | |||||
]); | |||||
}; | }; |
@@ -20,6 +20,7 @@ | |||||
"grunt-contrib-watch": "~0.6.1", | "grunt-contrib-watch": "~0.6.1", | ||||
"grunt-include-replace": "^2.0.0", | "grunt-include-replace": "^2.0.0", | ||||
"grunt-includes": "^0.4.5", | "grunt-includes": "^0.4.5", | ||||
"grunt-npm-command": "^0.1.2", | |||||
"grunt-rev": "~0.1.0", | "grunt-rev": "~0.1.0", | ||||
"grunt-svgmin": "1.0.0", | "grunt-svgmin": "1.0.0", | ||||
"grunt-usemin": "~2.4.0", | "grunt-usemin": "~2.4.0", | ||||
@@ -25,8 +25,8 @@ include "includes/head.html" | |||||
</div> | </div> | ||||
<div id="terminal" class="terminal preview-image"> | <div id="terminal" class="terminal preview-image"> | ||||
<audio id="video-player" | |||||
class="video-js" | |||||
<audio id="audio-player" | |||||
class="video-js vjs-default-skin" | |||||
controls | controls | ||||
preload="auto" | preload="auto" | ||||
data-setup='{}'> | data-setup='{}'> | ||||
@@ -43,8 +43,8 @@ include "includes/head.html" | |||||
include "includes/footer.html" | include "includes/footer.html" | ||||
include "includes/js.html" | include "includes/js.html" | ||||
<!-- build:js scripts/vendor/video.js --> | |||||
<script src="bower_components/videojs/src/js/video.js"></script> | |||||
<!-- build:js /scripts/vendor/video.js --> | |||||
<script src="bower_components/videojs/dist/alt/video.novtt.min.js"></script> | |||||
<!-- endbuild --> | <!-- endbuild --> | ||||
</body> | </body> | ||||
@@ -25,7 +25,7 @@ include "includes/head.html" | |||||
</div> | </div> | ||||
<div id="terminal" class="terminal preview-image"> | <div id="terminal" class="terminal preview-image"> | ||||
<video id="video-player" | <video id="video-player" | ||||
class="video-js" | |||||
class="video-js vjs-default-skin" | |||||
controls | controls | ||||
preload="auto" | preload="auto" | ||||
data-setup='{}'> | data-setup='{}'> | ||||
@@ -42,8 +42,8 @@ include "includes/head.html" | |||||
include "includes/footer.html" | include "includes/footer.html" | ||||
include "includes/js.html" | include "includes/js.html" | ||||
<!-- build:js scripts/vendor/video.js --> | |||||
<script src="bower_components/videojs/src/js/video.js"></script> | |||||
<!-- build:js /scripts/vendor/video.js --> | |||||
<script src="bower_components/videojs/dist/alt/video.novtt.min.js"></script> | |||||
<!-- endbuild --> | <!-- endbuild --> | ||||
</body> | </body> | ||||
@@ -106,11 +106,6 @@ padding: 0px; | |||||
padding-bottom: 30px; | padding-bottom: 30px; | ||||
} | } | ||||
video, audio { | |||||
margin: 0 auto; | |||||
width: 100%; | |||||
} | |||||
.wrap { | .wrap { | ||||
width: 40%; | width: 40%; | ||||
height: 40%; | height: 40%; | ||||
@@ -12,29 +12,42 @@ | |||||
https://codepen.io/heff/pen/EarCt/left/?editors=010 | https://codepen.io/heff/pen/EarCt/left/?editors=010 | ||||
*/ | */ | ||||
// The following are SCSS variables to automate some of the values. | // The following are SCSS variables to automate some of the values. | ||||
// But don't feel limited by them. Change/replace whatever you want. | |||||
// But don't feel limited by them. Change/replace whatever you want. | |||||
// The color of icons, text, and the big play button border. | // The color of icons, text, and the big play button border. | ||||
// Try changing to #0f0 | // Try changing to #0f0 | ||||
$primary-foreground-color: #fff; // #fff default | |||||
@primary-foreground-color: #fff; // #fff default | |||||
// The default color of control backgrounds is mostly black but with a little | // The default color of control backgrounds is mostly black but with a little | ||||
// bit of blue so it can still be seen on all-black video frames, which are common. | // bit of blue so it can still be seen on all-black video frames, which are common. | ||||
// Try changing to #900 | // Try changing to #900 | ||||
$primary-background-color: @blue; // #2B333F default | |||||
@primary-background-color: @blue; // #2B333F default | |||||
@red-primary-background-color: red(@primary-background-color); | |||||
@green-primary-background-color: green(@primary-background-color); | |||||
@blue-primary-background-color: blue(@primary-background-color); | |||||
// Try changing to true | // Try changing to true | ||||
$center-big-play-button: true; // true default | |||||
@center-big-play-button: true; // true default | |||||
/* We're using SCSS vars here because the values are used in multiple places. | |||||
Now that font size is set, the following em values will be a multiple of the | |||||
new font size. If the font-size is 3em (30px), then setting any of | |||||
the following values to 3em would equal 30px. 3 * font-size. */ | |||||
@big-play-width: 3em; | |||||
/* 1.5em = 45px default */ | |||||
@big-play-height: 1.5em; | |||||
.video-js { | .video-js { | ||||
/* The base font size controls the size of everything, not just text. | /* The base font size controls the size of everything, not just text. | ||||
All dimensions use em-based sizes so that the scale along with the font size. | All dimensions use em-based sizes so that the scale along with the font size. | ||||
Try increasing it to 15px and see what happens. */ | Try increasing it to 15px and see what happens. */ | ||||
font-size: 10px; | font-size: 10px; | ||||
width: 100%; | |||||
/* The main font color changes the ICON COLORS as well as the text */ | /* The main font color changes the ICON COLORS as well as the text */ | ||||
color: $primary-foreground-color; | |||||
color: @primary-foreground-color; | |||||
} | } | ||||
/* The "Big Play Button" is the play button that shows before the video plays. | /* The "Big Play Button" is the play button that shows before the video plays. | ||||
@@ -42,40 +55,33 @@ $center-big-play-button: true; // true default | |||||
of the button is the center, but there is trend towards moving it to a corner | of the button is the center, but there is trend towards moving it to a corner | ||||
where it gets out of the way of valuable content in the poster image.*/ | where it gets out of the way of valuable content in the poster image.*/ | ||||
.vjs-default-skin .vjs-big-play-button { | .vjs-default-skin .vjs-big-play-button { | ||||
/* The font size is what makes the big play button...big. | |||||
/* The font size is what makes the big play button...big. | |||||
All width/height values use ems, which are a multiple of the font size. | All width/height values use ems, which are a multiple of the font size. | ||||
If the .video-js font-size is 10px, then 3em equals 30px.*/ | If the .video-js font-size is 10px, then 3em equals 30px.*/ | ||||
font-size: 3em; | font-size: 3em; | ||||
/* We're using SCSS vars here because the values are used in multiple places. | |||||
Now that font size is set, the following em values will be a multiple of the | |||||
new font size. If the font-size is 3em (30px), then setting any of | |||||
the following values to 3em would equal 30px. 3 * font-size. */ | |||||
$big-play-width: 3em; | |||||
/* 1.5em = 45px default */ | |||||
$big-play-height: 1.5em; | |||||
line-height: $big-play-height; | |||||
height: $big-play-height; | |||||
width: $big-play-width; | |||||
line-height: @big-play-height; | |||||
height: @big-play-height; | |||||
width: @big-play-width; | |||||
/* 0.06666em = 2px default */ | /* 0.06666em = 2px default */ | ||||
border: 0.06666em solid $primary-foreground-color; | |||||
border: 0.06666em solid @primary-foreground-color; | |||||
/* 0.3em = 9px default */ | /* 0.3em = 9px default */ | ||||
border-radius: 0.3em; | border-radius: 0.3em; | ||||
@if $center-big-play-button { | |||||
} | |||||
.vjs-default-skin .vjs-big-play-button when (@center-big-play-button = true) { | |||||
/* Align center */ | /* Align center */ | ||||
left: 50%; | left: 50%; | ||||
top: 50%; | top: 50%; | ||||
margin-left: -($big-play-width / 2); | |||||
margin-top: -($big-play-height / 2); | |||||
} @else { | |||||
margin-left: -(@big-play-width / 2); | |||||
margin-top: -(@big-play-height / 2); | |||||
} | |||||
.vjs-default-skin .vjs-big-play-button when not (@center-big-play-button = true) { | |||||
/* Align top left. 0.5em = 15px default */ | /* Align top left. 0.5em = 15px default */ | ||||
left: 0.5em; | left: 0.5em; | ||||
top: 0.5em; | top: 0.5em; | ||||
} | } | ||||
} | |||||
/* The default color of control backgrounds is mostly black but with a little | /* The default color of control backgrounds is mostly black but with a little | ||||
bit of blue so it can still be seen on all-black video frames, which are common. */ | bit of blue so it can still be seen on all-black video frames, which are common. */ | ||||
@@ -83,19 +89,22 @@ $center-big-play-button: true; // true default | |||||
.video-js .vjs-big-play-button, | .video-js .vjs-big-play-button, | ||||
.video-js .vjs-menu-button .vjs-menu-content { | .video-js .vjs-menu-button .vjs-menu-content { | ||||
/* IE8 - has no alpha support */ | /* IE8 - has no alpha support */ | ||||
background-color: $primary-background-color; | |||||
background-color: @primary-background-color; | |||||
/* Opacity: 1.0 = 100%, 0.0 = 0% */ | /* Opacity: 1.0 = 100%, 0.0 = 0% */ | ||||
background-color: rgba($primary-background-color, 0.7); | |||||
background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7); | |||||
} | } | ||||
// Make a slightly lighter version of the main background | // Make a slightly lighter version of the main background | ||||
// for the slider background. | // for the slider background. | ||||
$slider-bg-color: lighten($primary-background-color, 33%); | |||||
@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%); | |||||
@red-slider-bg-color: red(@slider-bg-color); | |||||
@green-slider-bg-color: green(@slider-bg-color); | |||||
@blue-slider-bg-color: blue(@slider-bg-color); | |||||
/* Slider - used for Volume bar and Progress bar */ | /* Slider - used for Volume bar and Progress bar */ | ||||
.video-js .vjs-slider { | .video-js .vjs-slider { | ||||
background-color: $slider-bg-color; | |||||
background-color: rgba($slider-bg-color, 0.5); | |||||
background-color: @slider-bg-color; | |||||
background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5); | |||||
} | } | ||||
/* The slider bar color is used for the progress bar and the volume bar | /* The slider bar color is used for the progress bar and the volume bar | ||||
@@ -103,24 +112,36 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||||
.video-js .vjs-volume-level, | .video-js .vjs-volume-level, | ||||
.video-js .vjs-play-progress, | .video-js .vjs-play-progress, | ||||
.video-js .vjs-slider-bar { | .video-js .vjs-slider-bar { | ||||
background: $primary-foreground-color; | |||||
background: @primary-foreground-color; | |||||
} | } | ||||
/* The main progress bar also has a bar that shows how much has been loaded. */ | /* The main progress bar also has a bar that shows how much has been loaded. */ | ||||
.video-js .vjs-load-progress { | .video-js .vjs-load-progress { | ||||
/* For IE8 we'll lighten the color */ | /* For IE8 we'll lighten the color */ | ||||
background: lighten($slider-bg-color, 25%); | |||||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%); | |||||
/* Otherwise we'll rely on stacked opacities */ | /* Otherwise we'll rely on stacked opacities */ | ||||
background: rgba($slider-bg-color, 0.5); | |||||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5); | |||||
} | } | ||||
/* The load progress bar also has internal divs that represent | /* The load progress bar also has internal divs that represent | ||||
smaller disconnected loaded time ranges */ | smaller disconnected loaded time ranges */ | ||||
.video-js .vjs-load-progress div { | .video-js .vjs-load-progress div { | ||||
/* For IE8 we'll lighten the color */ | /* For IE8 we'll lighten the color */ | ||||
background: lighten($slider-bg-color, 50%); | |||||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%); | |||||
/* Otherwise we'll rely on stacked opacities */ | /* Otherwise we'll rely on stacked opacities */ | ||||
background: rgba($slider-bg-color, 0.75); | |||||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75); | |||||
} | |||||
:not(.vjs-has-started) .vjs-control-bar { | |||||
display: flex; | |||||
} | } | ||||
.vjs-audio .vjs-big-play-button { | |||||
display: none; | |||||
} | |||||
.vjs-audio.audio-player-dimensions { | |||||
height: 30px; | |||||
} | |||||
@@ -1,6 +1,5 @@ | |||||
@charset "UTF-8"; | @charset "UTF-8"; | ||||
@import "../bower_components/videojs/src/css/video-js.scss"; | |||||
@import "includes/video-js.scss"; | |||||
@import "../bower_components/videojs/dist/video-js.min.css"; | |||||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ | /*! normalize.css v2.1.3 | MIT License | git.io/normalize */ | ||||
article, | article, | ||||
aside, | aside, | ||||
@@ -6292,6 +6291,103 @@ blockquote.tweet-xl a { | |||||
font-size: 17px; | font-size: 17px; | ||||
} | } | ||||
} | } | ||||
/* | |||||
Player Skin Designer for Video.js | |||||
http://videojs.com | |||||
To customize the player skin edit | |||||
the CSS below. Click "details" | |||||
below to add comments or questions. | |||||
This file uses some SCSS. Learn more | |||||
at http://sass-lang.com/guide) | |||||
This designer can be linked to at: | |||||
https://codepen.io/heff/pen/EarCt/left/?editors=010 | |||||
*/ | |||||
/* We're using SCSS vars here because the values are used in multiple places. | |||||
Now that font size is set, the following em values will be a multiple of the | |||||
new font size. If the font-size is 3em (30px), then setting any of | |||||
the following values to 3em would equal 30px. 3 * font-size. */ | |||||
/* 1.5em = 45px default */ | |||||
.video-js { | |||||
/* The base font size controls the size of everything, not just text. | |||||
All dimensions use em-based sizes so that the scale along with the font size. | |||||
Try increasing it to 15px and see what happens. */ | |||||
font-size: 10px; | |||||
width: 100%; | |||||
/* The main font color changes the ICON COLORS as well as the text */ | |||||
color: #ffffff; | |||||
} | |||||
/* The "Big Play Button" is the play button that shows before the video plays. | |||||
To center it set the align values to center and middle. The typical location | |||||
of the button is the center, but there is trend towards moving it to a corner | |||||
where it gets out of the way of valuable content in the poster image.*/ | |||||
.vjs-default-skin .vjs-big-play-button { | |||||
/* The font size is what makes the big play button...big. | |||||
All width/height values use ems, which are a multiple of the font size. | |||||
If the .video-js font-size is 10px, then 3em equals 30px.*/ | |||||
font-size: 3em; | |||||
line-height: 1.5em; | |||||
height: 1.5em; | |||||
width: 3em; | |||||
/* 0.06666em = 2px default */ | |||||
border: 0.06666em solid #ffffff; | |||||
/* 0.3em = 9px default */ | |||||
border-radius: 0.3em; | |||||
} | |||||
.vjs-default-skin .vjs-big-play-button { | |||||
/* Align center */ | |||||
left: 50%; | |||||
top: 50%; | |||||
margin-left: -1.5em; | |||||
margin-top: -0.75em; | |||||
} | |||||
/* The default color of control backgrounds is mostly black but with a little | |||||
bit of blue so it can still be seen on all-black video frames, which are common. */ | |||||
.video-js .vjs-control-bar, | |||||
.video-js .vjs-big-play-button, | |||||
.video-js .vjs-menu-button .vjs-menu-content { | |||||
/* IE8 - has no alpha support */ | |||||
background-color: #85b5bb; | |||||
/* Opacity: 1.0 = 100%, 0.0 = 0% */ | |||||
background-color: rgba(133, 181, 187, 0.7); | |||||
} | |||||
/* Slider - used for Volume bar and Progress bar */ | |||||
.video-js .vjs-slider { | |||||
background-color: #f1f7f7; | |||||
background-color: rgba(241, 247, 247, 0.5); | |||||
} | |||||
/* The slider bar color is used for the progress bar and the volume bar | |||||
(the first two can be removed after a fix that's coming) */ | |||||
.video-js .vjs-volume-level, | |||||
.video-js .vjs-play-progress, | |||||
.video-js .vjs-slider-bar { | |||||
background: #ffffff; | |||||
} | |||||
/* The main progress bar also has a bar that shows how much has been loaded. */ | |||||
.video-js .vjs-load-progress { | |||||
/* For IE8 we'll lighten the color */ | |||||
background: #ffffff; | |||||
/* Otherwise we'll rely on stacked opacities */ | |||||
background: rgba(241, 247, 247, 0.5); | |||||
} | |||||
/* The load progress bar also has internal divs that represent | |||||
smaller disconnected loaded time ranges */ | |||||
.video-js .vjs-load-progress div { | |||||
/* For IE8 we'll lighten the color */ | |||||
background: #ffffff; | |||||
/* Otherwise we'll rely on stacked opacities */ | |||||
background: rgba(241, 247, 247, 0.75); | |||||
} | |||||
:not(.vjs-has-started) .vjs-control-bar { | |||||
display: flex; | |||||
} | |||||
.vjs-audio .vjs-big-play-button { | |||||
display: none; | |||||
} | |||||
.vjs-audio.audio-player-dimensions { | |||||
height: 30px; | |||||
} | |||||
@font-face { | @font-face { | ||||
font-family: "transfersh"; | font-family: "transfersh"; | ||||
src: url("../fonts/transfersh.eot"); | src: url("../fonts/transfersh.eot"); | ||||
@@ -6466,11 +6562,6 @@ html { | |||||
#md-preview { | #md-preview { | ||||
padding-bottom: 30px; | padding-bottom: 30px; | ||||
} | } | ||||
video, | |||||
audio { | |||||
margin: 0 auto; | |||||
width: 100%; | |||||
} | |||||
.wrap { | .wrap { | ||||
width: 40%; | width: 40%; | ||||
height: 40%; | height: 40%; | ||||
@@ -7,9 +7,9 @@ | |||||
@import "includes/global"; | @import "includes/global"; | ||||
@import "includes/home"; | @import "includes/home"; | ||||
@import "includes/pages"; | @import "includes/pages"; | ||||
@import "../bower_components/videojs/src/css/video-js.scss"; | |||||
@import "includes/reviews"; | @import "includes/reviews"; | ||||
@import "includes/video-js.scss"; | |||||
@import "../bower_components/videojs/dist/video-js.min.css"; | |||||
@import "includes/video-js"; | |||||
@import "includes/transfersh-icons"; | @import "includes/transfersh-icons"; | ||||
@import "includes/preview"; | @import "includes/preview"; | ||||