├── .gitignore ├── Gruntfile.js ├── README.md ├── dist ├── preview │ ├── preview.css │ ├── preview.css.map │ └── preview.js ├── videojs-skin-twitchy.css └── videojs-skin-twitchy.css.map ├── index.html ├── package.json └── src ├── _colors.scss ├── _utilities.scss ├── components ├── _base.scss ├── _big-play.scss ├── _control-bar.scss ├── _fullscreen.scss ├── _play.scss ├── _progress.scss ├── _slider.scss ├── _spacer.scss ├── _time.scss └── _volume.scss ├── preview ├── _highlightjs.scss ├── preview.js └── preview.scss └── videojs-skin-twitchy.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache 3 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | // Project configuration. 4 | grunt.initConfig({ 5 | watch: { 6 | scripts: { 7 | files: ['./src/**/*'], 8 | tasks: ['sass', 'browserify'], 9 | options: { 10 | spawn: false, 11 | }, 12 | }, 13 | }, 14 | sass: { // Task 15 | dist: { // Target 16 | options: { // Target options 17 | style: 'expanded' 18 | }, 19 | files: [{ 20 | expand: true, 21 | cwd: 'src', 22 | src: ['**/*.scss'], 23 | dest: 'dist', 24 | ext: '.css' 25 | }] 26 | } 27 | }, 28 | connect: { 29 | dev: { 30 | options: { 31 | port: 9999, 32 | livereload: true 33 | } 34 | } 35 | }, 36 | browserify: { 37 | dist: { 38 | files: { 39 | 'dist/preview/preview.js': ['src/preview/preview.js'], 40 | } 41 | } 42 | } 43 | }); 44 | 45 | // Load the plugin that provides the "uglify" task. 46 | grunt.loadNpmTasks('grunt-contrib-watch'); 47 | grunt.loadNpmTasks('grunt-sass'); 48 | grunt.loadNpmTasks('grunt-contrib-connect'); 49 | grunt.loadNpmTasks('grunt-browserify'); 50 | 51 | // Default task(s). 52 | grunt.registerTask('default', ['sass', 'browserify']); 53 | grunt.registerTask('connect-watch', ['connect', 'watch']); 54 | 55 | }; 56 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # videojs-skin-twitchy 2 | 3 | Videojs skin that happens to resemble a certain video game streaming site. 4 | -------------------------------------------------------------------------------- /dist/preview/preview.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | .hljs { 7 | display: block; 8 | overflow-x: auto; 9 | padding: 0.5em; 10 | color: #333; 11 | background: #f8f8f8; 12 | -webkit-text-size-adjust: none; 13 | } 14 | 15 | .hljs-comment, 16 | .diff .hljs-header, 17 | .hljs-javadoc { 18 | color: #998; 19 | font-style: italic; 20 | } 21 | 22 | .hljs-keyword, 23 | .css .rule .hljs-keyword, 24 | .hljs-winutils, 25 | .nginx .hljs-title, 26 | .hljs-subst, 27 | .hljs-request, 28 | .hljs-status { 29 | color: #333; 30 | font-weight: bold; 31 | } 32 | 33 | .hljs-number, 34 | .hljs-hexcolor, 35 | .ruby .hljs-constant { 36 | color: #008080; 37 | } 38 | 39 | .hljs-string, 40 | .hljs-tag .hljs-value, 41 | .hljs-phpdoc, 42 | .hljs-dartdoc, 43 | .tex .hljs-formula { 44 | color: #d14; 45 | } 46 | 47 | .hljs-title, 48 | .hljs-id, 49 | .scss .hljs-preprocessor { 50 | color: #900; 51 | font-weight: bold; 52 | } 53 | 54 | .hljs-list .hljs-keyword, 55 | .hljs-subst { 56 | font-weight: normal; 57 | } 58 | 59 | .hljs-class .hljs-title, 60 | .hljs-type, 61 | .vhdl .hljs-literal, 62 | .tex .hljs-command { 63 | color: #458; 64 | font-weight: bold; 65 | } 66 | 67 | .hljs-tag, 68 | .hljs-tag .hljs-title, 69 | .hljs-rules .hljs-property, 70 | .django .hljs-tag .hljs-keyword { 71 | color: #000080; 72 | font-weight: normal; 73 | } 74 | 75 | .hljs-attribute, 76 | .hljs-variable, 77 | .lisp .hljs-body { 78 | color: #008080; 79 | } 80 | 81 | .hljs-regexp { 82 | color: #009926; 83 | } 84 | 85 | .hljs-symbol, 86 | .ruby .hljs-symbol .hljs-string, 87 | .lisp .hljs-keyword, 88 | .clojure .hljs-keyword, 89 | .scheme .hljs-keyword, 90 | .tex .hljs-special, 91 | .hljs-prompt { 92 | color: #990073; 93 | } 94 | 95 | .hljs-built_in { 96 | color: #0086b3; 97 | } 98 | 99 | .hljs-preprocessor, 100 | .hljs-pragma, 101 | .hljs-pi, 102 | .hljs-doctype, 103 | .hljs-shebang, 104 | .hljs-cdata { 105 | color: #999; 106 | font-weight: bold; 107 | } 108 | 109 | .hljs-deletion { 110 | background: #fdd; 111 | } 112 | 113 | .hljs-addition { 114 | background: #dfd; 115 | } 116 | 117 | .diff .hljs-change { 118 | background: #0086b3; 119 | } 120 | 121 | .hljs-chunk { 122 | color: #aaa; 123 | } 124 | 125 | html, body { 126 | margin: 0; 127 | height: 100%; 128 | width: 100%; 129 | } 130 | 131 | body { 132 | font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 133 | text-align: center; 134 | margin: 0; 135 | background-color: #f1f1f1; 136 | height: 100%; 137 | } 138 | 139 | header { 140 | z-index: 10; 141 | position: absolute; 142 | top: 0; 143 | left: 0; 144 | right: 0; 145 | } 146 | 147 | .video-js { 148 | margin: 40px auto; 149 | box-shadow: 0 10px 70px 4px rgba(0, 0, 0, 0.56); 150 | } 151 | 152 | h1.skin-name { 153 | margin: 0; 154 | } 155 | 156 | a { 157 | color: #b99beb; 158 | text-decoration: none; 159 | } 160 | a:hover { 161 | text-decoration: underline; 162 | } 163 | 164 | ul.links { 165 | list-style: none; 166 | margin: 40px 0 0 0; 167 | padding: 0; 168 | } 169 | 170 | ul.links li { 171 | display: inline; 172 | padding: 0 10px; 173 | } 174 | 175 | section { 176 | width: 100%; 177 | height: 100%; 178 | min-height: 100%; 179 | } 180 | 181 | section .content { 182 | width: 720px; 183 | margin: 0 auto; 184 | padding: 20px; 185 | } 186 | 187 | section.preview { 188 | background-color: #ffffff; 189 | display: -webkit-box; 190 | display: -webkit-flex; 191 | display: -ms-flexbox; 192 | display: flex; 193 | -webkit-box-align: center; 194 | -webkit-align-items: center; 195 | -ms-flex-align: center; 196 | align-items: center; 197 | -webkit-box-pack: center; 198 | -webkit-justify-content: center; 199 | -ms-flex-pack: center; 200 | justify-content: center; 201 | padding: 0; 202 | } 203 | section.preview .content { 204 | flex: none; 205 | } 206 | 207 | section.usage { 208 | background-color: #f1f1f1; 209 | text-align: left; 210 | } 211 | 212 | section.usage h2 { 213 | text-align: center; 214 | } 215 | 216 | pre { 217 | border: 1px solid #ddd; 218 | border-radius: 5px; 219 | } 220 | 221 | .btn { 222 | background-color: #b99beb; 223 | color: #fff; 224 | padding: 10px; 225 | border-radius: 5px; 226 | } 227 | .btn:hover { 228 | text-decoration: none; 229 | background-color: #c8b0ef; 230 | } 231 | 232 | .btn.btn-download { 233 | display: block; 234 | text-align: center; 235 | width: 100%; 236 | } 237 | 238 | .usage-method { 239 | margin: 50px 0; 240 | } 241 | 242 | .usage-method h3 { 243 | border-bottom: 1px solid #bebebe; 244 | } 245 | 246 | /*# sourceMappingURL=preview.css.map */ 247 | -------------------------------------------------------------------------------- /dist/preview/preview.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../../src/preview/_highlightjs.scss","../../src/preview/preview.scss"], 5 | "names": [], 6 | "file": "preview.css" 7 | } 8 | -------------------------------------------------------------------------------- /dist/videojs-skin-twitchy.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .vjs-skin-twitchy { 3 | color: #e6e6e6; 4 | } 5 | .vjs-skin-twitchy .vjs-big-play-button { 6 | top: 50%; 7 | left: 50%; 8 | transform: translateY(-50%) translateX(-50%); 9 | -moz-transform: translateY(-50%) translateX(-50%); 10 | -ms-transform: translateY(-50%) translateX(-50%); 11 | -webkit-transform: translateY(-50%) translateX(-50%); 12 | border: none; 13 | background-color: #1B1D1F; 14 | background-color: rgba(27, 29, 31, 0.9); 15 | } 16 | .vjs-skin-twitchy:hover .vjs-big-play-button, 17 | .vjs-skin-twitchy .vjs-big-play-button:focus { 18 | background-color: #33373a; 19 | background-color: rgba(51, 55, 58, 0.9); 20 | } 21 | .vjs-skin-twitchy .vjs-control-bar { 22 | background-color: #1B1D1F; 23 | /* Fallback Color */ 24 | background-image: -webkit-gradient(linear, left top, left bottom, from(#4a5056), to(#1B1D1F)); 25 | /* Saf4+, Chrome */ 26 | background-image: -webkit-linear-gradient(top, #4a5056, #1B1D1F); 27 | /* Chrome 10+, Saf5.1+, iOS 5+ */ 28 | background-image: -moz-linear-gradient(top, #4a5056, #1B1D1F); 29 | /* FF3.6 */ 30 | background-image: -ms-linear-gradient(top, #4a5056, #1B1D1F); 31 | /* IE10 */ 32 | background-image: -o-linear-gradient(top, #4a5056, #1B1D1F); 33 | /* Opera 11.10+ */ 34 | background-image: linear-gradient(top, #4a5056, #1B1D1F); 35 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#4a5056', EndColorStr='#1B1D1F'); 36 | } 37 | .vjs-skin-twitchy .vjs-play-control { 38 | width: 2.5em; 39 | } 40 | .vjs-skin-twitchy .vjs-time-controls { 41 | -webkit-box-ordinal-group: 9; 42 | -moz-box-ordinal-group: 9; 43 | -ms-flex-order: 9; 44 | -webkit-order: 9; 45 | order: 9; 46 | } 47 | .vjs-skin-twitchy .vjs-current-time, .vjs-skin-twitchy .vjs-no-flex .vjs-current-time { 48 | display: block; 49 | } 50 | .vjs-skin-twitchy .vjs-duration, .vjs-skin-twitchy .vjs-no-flex .vjs-duration { 51 | display: block; 52 | } 53 | .vjs-skin-twitchy .vjs-time-divider { 54 | display: block; 55 | } 56 | .vjs-skin-twitchy .vjs-slider { 57 | background-color: #1B1D1F; 58 | } 59 | .vjs-skin-twitchy .vjs-slider { 60 | margin: 0; 61 | } 62 | .vjs-skin-twitchy .vjs-control.vjs-progress-control { 63 | height: 0.3em; 64 | width: 100%; 65 | } 66 | .vjs-skin-twitchy:hover .vjs-control.vjs-progress-control { 67 | height: 3em; 68 | top: -3em; 69 | } 70 | .vjs-skin-twitchy:hover .vjs-control.vjs-progress-control .vjs-play-progress, .vjs-skin-twitchy:hover .vjs-control.vjs-progress-control .vjs-load-progress { 71 | height: 3em; 72 | } 73 | .vjs-skin-twitchy .vjs-progress-control { 74 | display: border-box; 75 | position: absolute; 76 | top: -0.3em; 77 | left: 0; 78 | right: 0; 79 | } 80 | .vjs-skin-twitchy .vjs-load-progress div { 81 | background: #333333; 82 | } 83 | .vjs-skin-twitchy .vjs-load-progress { 84 | background: #333333; 85 | } 86 | .vjs-skin-twitchy .vjs-play-progress { 87 | background-color: #b99beb; 88 | } 89 | .vjs-skin-twitchy .vjs-progress-control:hover .vjs-progress-holder { 90 | font-size: 1em; 91 | } 92 | .vjs-skin-twitchy .vjs-play-progress:before { 93 | display: none; 94 | } 95 | .vjs-skin-twitchy .vjs-progress-holder { 96 | height: 100%; 97 | -webkit-transition: height 0.5s; 98 | -moz-transition: height 0.5s; 99 | -ms-transition: height 0.5s; 100 | -o-transition: height 0.5s; 101 | transition: height 0.5s; 102 | } 103 | .vjs-skin-twitchy .vjs-progress-control:hover .vjs-mouse-display, .vjs-skin-twitchy .vjs-progress-control:hover .vjs-mouse-display:after, .vjs-skin-twitchy .vjs-progress-control:hover .vjs-play-progress:after { 104 | display: none; 105 | } 106 | .vjs-skin-twitchy .vjs-volume-bar.vjs-slider-horizontal { 107 | width: 5em; 108 | height: 0.3em; 109 | } 110 | .vjs-skin-twitchy .vjs-volume-level { 111 | background-color: #b99beb; 112 | } 113 | .vjs-skin-twitchy .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { 114 | width: 100%; 115 | } 116 | .vjs-skin-twitchy .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-handle { 117 | left: 4.3em; 118 | } 119 | .vjs-skin-twitchy .vjs-mute-control { 120 | width: 2.5em; 121 | } 122 | .vjs-skin-twitchy .vjs-volume-bar .vjs-volume-handle:before { 123 | font-size: 2em; 124 | top: -0.35em; 125 | left: -0.1em; 126 | content: "▮"; 127 | } 128 | .vjs-skin-twitchy .vjs-custom-control-spacer { 129 | display: flex; 130 | -webkit-box-flex: auto; 131 | -moz-box-flex: auto; 132 | -webkit-flex: auto; 133 | -ms-flex: auto; 134 | flex: auto; 135 | } 136 | .vjs-skin-twitchy .vjs-fullscreen-control { 137 | text-align: right; 138 | padding-right: 5px; 139 | -webkit-box-ordinal-group: 10; 140 | -moz-box-ordinal-group: 10; 141 | -ms-flex-order: 10; 142 | -webkit-order: 10; 143 | order: 10; 144 | } 145 | .vjs-skin-twitchy .vjs-fullscreen-control:before { 146 | position: relative; 147 | } 148 | 149 | /*# sourceMappingURL=videojs-skin-twitchy.css.map */ 150 | -------------------------------------------------------------------------------- /dist/videojs-skin-twitchy.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../src/components/_base.scss","../src/_colors.scss","../src/components/_big-play.scss","../src/_utilities.scss","../src/components/_control-bar.scss","../src/components/_play.scss","../src/components/_time.scss","../src/components/_slider.scss","../src/components/_progress.scss","../src/components/_volume.scss","../src/components/_spacer.scss","../src/components/_fullscreen.scss"], 5 | "names": [], 6 | "file": "videojs-skin-twitchy.css" 7 | } 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video.js Skin Colors: Preview 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 |
18 |
19 |

Twitchy

20 |

Videojs skin that happens to resemble a certain awesome video game streaming site.

21 | 22 | 30 | 31 | 36 | 37 |
38 |
39 | 40 |
41 |
42 |

Getting Started

43 | 44 |
45 |

Using it via a CDN

46 |

47 | Simply include the appropriate CSS file! Thanks to RawGit, you can simply include the CSS 48 | file directly from the Git repo based on the current version tag. 49 |

50 | 51 | 
<link href="//cdn.rawgit.com/mmcc/videojs-skin-twitchy/v1.0.0/dist/videojs-skin-twitchy.css" rel="stylesheet" type="text/css">
52 |
53 | 54 |
55 |

Download the stylesheet

56 |

If you prefer to host things yourself, you can simply download the stylesheet.

57 | 58 | Download 59 |
60 | 61 |
62 |

Your own build pipeline

63 | 64 |

65 | If you're already using Sass, you can simply import the skin's SCSS. First, 66 | install the skin via NPM. 67 |

68 | 
$ npm install --save-dev videojs-skin-twitchy
69 | 70 |

You can set any variables you'd like before importing (namely the $custom-colors map).

71 | 
$primary-text: #fff !default;
72 | $progress-bar: #0000ff;
73 | $progress-bar-bg: #1B1D1F;
74 | $progress-bar-loading: #333333;
75 | @import "/path/to/node_modules/vjs-skin-twitchy/src/videojs-skin-twitchy";
76 |
77 | 78 |
79 |

Once you've got your CSS...

80 |

Simply create a video element as you normally would when using Video.js, but add the vjs-skin-twitchy class.

81 | 82 | 
<video id="vid" class="video-js vjs-skin-twitchy" controls width="640" height="264" data-setup='{}'>
83 |   <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
84 |   <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
85 |   <track kind="captions" src="../build/demo-files/demo.captions.vtt" srclang="en" label="English"></track>
86 |   <p class="vjs-no-js">
87 |     To view this video please enable JavaScript, and consider upgrading to a web browser
88 |     that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
89 |   </p>
90 | </video>
91 |
92 |
93 |
94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "videojs-skin-twitchy", 3 | "version": "2.0.1", 4 | "description": "Videojs skin that happens to resemble a certain video game streaming site", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/mmcc/videojs-skin-twitchy.git" 12 | }, 13 | "keywords": [ 14 | "videojs", 15 | "videojs-skin" 16 | ], 17 | "author": "Matthew McClure ", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/mmcc/videojs-skin-twitchy/issues" 21 | }, 22 | "homepage": "https://github.com/mmcc/videojs-skin-twitchy", 23 | "devDependencies": { 24 | "grunt": "^0.4.5", 25 | "grunt-browserify": "^3.2.1", 26 | "grunt-contrib-connect": "^0.9.0", 27 | "grunt-contrib-watch": "^0.6.1", 28 | "grunt-sass": "^1.1.0", 29 | "highlight.js": "^8.4.0", 30 | "jquery": "^2.1.3", 31 | "video.js": "^5.8" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/_colors.scss: -------------------------------------------------------------------------------- 1 | $purple: #b99beb; 2 | $grey: #333333; 3 | $light-grey: #e6e6e6; 4 | 5 | $primary-text: $light-grey !default; 6 | $progress-bar: $purple !default; 7 | $progress-bar-bg: #1B1D1F !default; 8 | $progress-bar-loading: #333333 !default; 9 | -------------------------------------------------------------------------------- /src/_utilities.scss: -------------------------------------------------------------------------------- 1 | @mixin background-color-with-alpha($color, $alpha) { 2 | background-color: $color; 3 | background-color: rgba($color, $alpha); 4 | } 5 | 6 | @mixin flex($value) { 7 | -webkit-box-flex: $value; 8 | -moz-box-flex: $value; 9 | -webkit-flex: $value; 10 | -ms-flex: $value; 11 | flex: $value; 12 | } 13 | 14 | @mixin order($value) { 15 | -webkit-box-ordinal-group: $value; 16 | -moz-box-ordinal-group: $value; 17 | -ms-flex-order: $value; 18 | -webkit-order: $value; 19 | order: $value; 20 | } 21 | 22 | @mixin transition($args...) { 23 | -webkit-transition: $args; 24 | -moz-transition: $args; 25 | -ms-transition: $args; 26 | -o-transition: $args; 27 | transition: $args; 28 | } 29 | 30 | // http://codeboxers.com/straight-sass-gradient-mixin/ 31 | @mixin linear-gradient($fromColor, $toColor) { 32 | background-color: $toColor; /* Fallback Color */ 33 | background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor)); /* Saf4+, Chrome */ 34 | background-image: -webkit-linear-gradient(top, $fromColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */ 35 | background-image: -moz-linear-gradient(top, $fromColor, $toColor); /* FF3.6 */ 36 | background-image: -ms-linear-gradient(top, $fromColor, $toColor); /* IE10 */ 37 | background-image: -o-linear-gradient(top, $fromColor, $toColor); /* Opera 11.10+ */ 38 | background-image: linear-gradient(top, $fromColor, $toColor); 39 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$fromColor}', EndColorStr='#{$toColor}'); 40 | } 41 | -------------------------------------------------------------------------------- /src/components/_base.scss: -------------------------------------------------------------------------------- 1 | & { 2 | color: $primary-text; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/_big-play.scss: -------------------------------------------------------------------------------- 1 | .vjs-big-play-button { 2 | top: 50%; 3 | left: 50%; 4 | transform: translateY(-50%) translateX(-50%); 5 | -moz-transform: translateY(-50%) translateX(-50%); 6 | -ms-transform: translateY(-50%) translateX(-50%); 7 | -webkit-transform: translateY(-50%) translateX(-50%); 8 | border: none; 9 | 10 | @include background-color-with-alpha($progress-bar-bg, 0.9); 11 | } 12 | 13 | &:hover .vjs-big-play-button, 14 | .vjs-big-play-button:focus { 15 | @include background-color-with-alpha(lighten($progress-bar-bg, 10%), 0.9); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/_control-bar.scss: -------------------------------------------------------------------------------- 1 | .vjs-control-bar { 2 | @include linear-gradient(lighten($progress-bar-bg, 20%), $progress-bar-bg) 3 | } 4 | -------------------------------------------------------------------------------- /src/components/_fullscreen.scss: -------------------------------------------------------------------------------- 1 | .vjs-fullscreen-control { 2 | text-align: right; 3 | padding-right: 5px; 4 | @include order(10); 5 | 6 | &:before { 7 | position: relative; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/_play.scss: -------------------------------------------------------------------------------- 1 | .vjs-play-control { 2 | width: 2.5em; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/_progress.scss: -------------------------------------------------------------------------------- 1 | .vjs-control.vjs-progress-control { 2 | height: 0.3em; 3 | width: 100%; 4 | } 5 | 6 | &:hover .vjs-control.vjs-progress-control { 7 | height: 3em; 8 | top: -3em; 9 | 10 | .vjs-play-progress, .vjs-load-progress { 11 | height: 3em; 12 | } 13 | } 14 | 15 | .vjs-progress-control { 16 | display: border-box; 17 | position: absolute; 18 | top: -0.3em; // the height of the control 19 | left: 0; 20 | right: 0; 21 | } 22 | 23 | .vjs-load-progress div { 24 | background: $progress-bar-loading; 25 | } 26 | 27 | .vjs-load-progress { 28 | background: $progress-bar-loading; 29 | } 30 | 31 | .vjs-play-progress { 32 | background-color: $progress-bar; 33 | } 34 | 35 | .vjs-progress-control:hover { 36 | .vjs-progress-holder { 37 | font-size: 1em; 38 | } 39 | 40 | .vjs-time-tooltip { 41 | font-size: 1em; 42 | height: 2.4em; 43 | padding-top: 0.8em; 44 | top: -3em; 45 | } 46 | } 47 | 48 | .vjs-play-progress:before { 49 | display: none; 50 | } 51 | 52 | .vjs-progress-holder { 53 | height: 100%; 54 | @include transition(height 0.5s); 55 | } 56 | -------------------------------------------------------------------------------- /src/components/_slider.scss: -------------------------------------------------------------------------------- 1 | .vjs-slider { 2 | background-color: $progress-bar-bg; 3 | } 4 | 5 | .vjs-slider { 6 | margin: 0; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/_spacer.scss: -------------------------------------------------------------------------------- 1 | .vjs-custom-control-spacer { 2 | display: flex; 3 | @include flex(auto); 4 | } 5 | -------------------------------------------------------------------------------- /src/components/_time.scss: -------------------------------------------------------------------------------- 1 | .vjs-time-controls { 2 | @include order(9); 3 | } 4 | 5 | .vjs-current-time, .vjs-no-flex .vjs-current-time { display: block; } 6 | .vjs-duration, .vjs-no-flex .vjs-duration { display: block; } 7 | .vjs-time-divider { display: block; } 8 | -------------------------------------------------------------------------------- /src/components/_volume.scss: -------------------------------------------------------------------------------- 1 | .vjs-volume-bar.vjs-slider-horizontal { 2 | width: 5em; 3 | height: 0.3em; 4 | } 5 | 6 | .vjs-volume-level { 7 | background-color: $progress-bar; 8 | } 9 | 10 | .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { width: 100%; } 11 | .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-handle { left: 4.3em; } 12 | 13 | .vjs-mute-control { 14 | width: 2.5em; 15 | } 16 | 17 | .vjs-volume-bar .vjs-volume-handle:before { 18 | font-size: 2em; 19 | top: -0.35em; 20 | left: -0.1em; 21 | content: '\25AE' 22 | } 23 | -------------------------------------------------------------------------------- /src/preview/_highlightjs.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | color: #333; 12 | background: #f8f8f8; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | .hljs-comment, 17 | .diff .hljs-header, 18 | .hljs-javadoc { 19 | color: #998; 20 | font-style: italic; 21 | } 22 | 23 | .hljs-keyword, 24 | .css .rule .hljs-keyword, 25 | .hljs-winutils, 26 | .nginx .hljs-title, 27 | .hljs-subst, 28 | .hljs-request, 29 | .hljs-status { 30 | color: #333; 31 | font-weight: bold; 32 | } 33 | 34 | .hljs-number, 35 | .hljs-hexcolor, 36 | .ruby .hljs-constant { 37 | color: #008080; 38 | } 39 | 40 | .hljs-string, 41 | .hljs-tag .hljs-value, 42 | .hljs-phpdoc, 43 | .hljs-dartdoc, 44 | .tex .hljs-formula { 45 | color: #d14; 46 | } 47 | 48 | .hljs-title, 49 | .hljs-id, 50 | .scss .hljs-preprocessor { 51 | color: #900; 52 | font-weight: bold; 53 | } 54 | 55 | .hljs-list .hljs-keyword, 56 | .hljs-subst { 57 | font-weight: normal; 58 | } 59 | 60 | .hljs-class .hljs-title, 61 | .hljs-type, 62 | .vhdl .hljs-literal, 63 | .tex .hljs-command { 64 | color: #458; 65 | font-weight: bold; 66 | } 67 | 68 | .hljs-tag, 69 | .hljs-tag .hljs-title, 70 | .hljs-rules .hljs-property, 71 | .django .hljs-tag .hljs-keyword { 72 | color: #000080; 73 | font-weight: normal; 74 | } 75 | 76 | .hljs-attribute, 77 | .hljs-variable, 78 | .lisp .hljs-body { 79 | color: #008080; 80 | } 81 | 82 | .hljs-regexp { 83 | color: #009926; 84 | } 85 | 86 | .hljs-symbol, 87 | .ruby .hljs-symbol .hljs-string, 88 | .lisp .hljs-keyword, 89 | .clojure .hljs-keyword, 90 | .scheme .hljs-keyword, 91 | .tex .hljs-special, 92 | .hljs-prompt { 93 | color: #990073; 94 | } 95 | 96 | .hljs-built_in { 97 | color: #0086b3; 98 | } 99 | 100 | .hljs-preprocessor, 101 | .hljs-pragma, 102 | .hljs-pi, 103 | .hljs-doctype, 104 | .hljs-shebang, 105 | .hljs-cdata { 106 | color: #999; 107 | font-weight: bold; 108 | } 109 | 110 | .hljs-deletion { 111 | background: #fdd; 112 | } 113 | 114 | .hljs-addition { 115 | background: #dfd; 116 | } 117 | 118 | .diff .hljs-change { 119 | background: #0086b3; 120 | } 121 | 122 | .hljs-chunk { 123 | color: #aaa; 124 | } 125 | -------------------------------------------------------------------------------- /src/preview/preview.js: -------------------------------------------------------------------------------- 1 | var $ = require('jquery'); 2 | var videojs = require('video.js'); 3 | var hljs = require('highlight.js'); 4 | 5 | hljs.initHighlightingOnLoad(); 6 | 7 | // Set up VJS defaults 8 | videojs.options.controlBar = { 9 | children: { 10 | 'progressControl': {}, 11 | 'playToggle': {}, 12 | 'muteToggle': {}, 13 | 'volumeControl': { 14 | 'volumeBar' : { 15 | 'vertical': false 16 | } 17 | }, 18 | 'currentTimeDisplay': {}, 19 | 'timeDivider': {}, 20 | 'durationDisplay': {}, 21 | 'customControlSpacer': {}, 22 | 'fullscreenToggle': {} 23 | } 24 | }; 25 | 26 | var currentScheme = 'vjs-theme-colors-green'; 27 | var player = videojs('preview-player', { 28 | controlBar: { 29 | progressControl: { 30 | keepTooltipsInside: true 31 | } 32 | } 33 | }); 34 | 35 | var schemes = $('.schemes button'); 36 | schemes.click(function(e) { 37 | player.removeClass(currentScheme); 38 | var newScheme = 'vjs-theme-colors-'+ $(this).attr('id'); 39 | player.addClass(newScheme); 40 | currentScheme = newScheme; 41 | }); 42 | -------------------------------------------------------------------------------- /src/preview/preview.scss: -------------------------------------------------------------------------------- 1 | // Include the CSS for the syntax highlighter 2 | @import "highlightjs"; 3 | @import "../colors"; 4 | 5 | $light-gray: #f1f1f1; 6 | 7 | $preview--bg: #ffffff; 8 | $usage--bg: $light-gray; 9 | 10 | $btn--bg: $purple; 11 | $btn--color: #fff; 12 | 13 | @mixin display-flex-and-center { 14 | display: -webkit-box; 15 | display: -webkit-flex; 16 | display: -ms-flexbox; 17 | display: flex; 18 | -webkit-box-align: center; 19 | -webkit-align-items: center; 20 | -ms-flex-align: center; 21 | align-items: center; 22 | -webkit-box-pack: center; 23 | -webkit-justify-content: center; 24 | -ms-flex-pack: center; 25 | justify-content: center; 26 | } 27 | 28 | html, body { margin: 0; height: 100%; width: 100%; } 29 | 30 | body { 31 | font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 32 | text-align: center; 33 | margin: 0; 34 | background-color: $light-gray; 35 | height: 100%; 36 | } 37 | 38 | header { 39 | z-index: 10; 40 | position: absolute; 41 | top: 0; 42 | left: 0; 43 | right: 0; 44 | } 45 | 46 | .video-js { 47 | margin: 40px auto; 48 | box-shadow: 0 10px 70px 4px rgba(0, 0, 0, .56); 49 | } 50 | 51 | h1.skin-name { 52 | margin: 0; 53 | } 54 | p.tagline { 55 | // padding-bottom: 10px; 56 | } 57 | a { 58 | color: $purple; 59 | text-decoration: none; 60 | 61 | &:hover { 62 | text-decoration: underline; 63 | } 64 | } 65 | 66 | ul.links { 67 | list-style: none; 68 | margin: 40px 0 0 0; 69 | padding: 0; 70 | } 71 | ul.links li { 72 | display: inline; 73 | padding: 0 10px; 74 | } 75 | 76 | section { 77 | width: 100%; 78 | height: 100%; 79 | min-height: 100%; 80 | } 81 | 82 | section .content { 83 | width: 720px; 84 | margin: 0 auto; 85 | padding: 20px; 86 | } 87 | 88 | section.preview { 89 | background-color: $preview--bg; 90 | @include display-flex-and-center; 91 | padding: 0; 92 | .content { flex: none; } 93 | } 94 | section.usage { background-color: $usage--bg; text-align: left; } 95 | section.usage h2 { text-align: center; } 96 | 97 | pre { 98 | border: 1px solid #ddd; 99 | border-radius: 5px; 100 | } 101 | 102 | .btn { 103 | background-color: $btn--bg; 104 | color: $btn--color; 105 | padding: 10px; 106 | border-radius: 5px; 107 | 108 | &:hover { 109 | text-decoration: none; 110 | background-color: lighten($btn--bg, 5%); 111 | } 112 | } 113 | 114 | .btn.btn-download { 115 | display: block; 116 | text-align: center; 117 | width: 100%; } 118 | 119 | .usage-method { margin: 50px 0; } 120 | .usage-method h3 { border-bottom: 1px solid darken($usage--bg, 20%); } 121 | -------------------------------------------------------------------------------- /src/videojs-skin-twitchy.scss: -------------------------------------------------------------------------------- 1 | @import "utilities"; 2 | @import "colors"; 3 | 4 | .vjs-skin-twitchy { 5 | @import "components/base"; 6 | @import "components/big-play"; 7 | @import "components/control-bar"; 8 | @import "components/play"; 9 | @import "components/time"; 10 | @import "components/slider"; 11 | @import "components/progress"; 12 | @import "components/volume"; 13 | @import "components/spacer"; 14 | @import "components/fullscreen"; 15 | } 16 | --------------------------------------------------------------------------------