├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── dist ├── videojs-sublime-skin.css └── videojs-sublime-skin.min.css ├── gulpfile.coffee ├── package.json ├── screenshot.png └── src ├── videojs-sublime-skin.sass ├── videojs.sass ├── vol-trans.png └── vol-white.png /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | bower_components 3 | node_modules 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Cabin 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # videojs-sublime-skin 2 | > A [Video.js][] skin modeled on [SublimeVideo][]. 3 | 4 | [Video.js]: http://www.videojs.com/ 5 | [SublimeVideo]: http://www.sublimevideo.net/ 6 | 7 | ![](screenshot.png) 8 | 9 | Install via bower: 10 | 11 | % bower install --save videojs-sublime-skin 12 | 13 | Then include `dist/videojs-sublime-skin.min.css` in your HTML, and replace the 14 | `vjs-default-skin` in the class of your `video` elements with 15 | `vjs-sublime-skin`. 16 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "videojs-sublime-skin", 3 | "version": "1.0.3", 4 | "authors": [ 5 | "Zak Johnson " 6 | ], 7 | "description": "A Video.js skin modeled on SublimeVideo.", 8 | "main": "dist/videojs-sublime-skin.css", 9 | "keywords": [ 10 | "videojs", 11 | "video" 12 | ], 13 | "license": "MIT", 14 | "ignore": [ 15 | "**/.*", 16 | "gulpfile.coffee", 17 | "screenshot.png", 18 | "src" 19 | ], 20 | "devDependencies": { 21 | "bourbon": "~4.0.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /dist/videojs-sublime-skin.css: -------------------------------------------------------------------------------- 1 | .vjs-sublime-skin { 2 | color: white; } 3 | .vjs-sublime-skin .vjs-poster:focus, .vjs-sublime-skin .vjs-control:focus { 4 | outline: none; } 5 | .vjs-sublime-skin .vjs-big-play-button { 6 | line-height: 50px; 7 | margin: -25px; 8 | opacity: 1; 9 | position: absolute; 10 | top: 50%; 11 | left: 50%; 12 | height: 50px; 13 | width: 50px; 14 | -webkit-transition: opacity 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 15 | -moz-transition: opacity 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 16 | transition: opacity 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 17 | z-index: 2; } 18 | .vjs-sublime-skin .vjs-big-play-button:before { 19 | border-color: transparent transparent transparent white; 20 | border-style: solid; 21 | border-width: 25px 0 25px 50px; 22 | content: ""; 23 | display: block; } 24 | .vjs-sublime-skin.vjs-controls-disabled .vjs-big-play-button, .vjs-sublime-skin.vjs-has-started .vjs-big-play-button, .vjs-sublime-skin.vjs-using-native-controls .vjs-big-play-button { 25 | opacity: 0; 26 | pointer-events: none; } 27 | .vjs-sublime-skin .vjs-control-bar { 28 | height: 50px; 29 | opacity: 0; 30 | pointer-events: none; 31 | position: absolute; 32 | right: 0; 33 | bottom: 0; 34 | left: 0; 35 | z-index: 2; } 36 | .vjs-sublime-skin.vjs-has-started .vjs-control-bar { 37 | opacity: 1; 38 | pointer-events: auto; 39 | -webkit-transition: opacity 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 40 | -moz-transition: opacity 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955); 41 | transition: opacity 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955); } 42 | .vjs-sublime-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { 43 | opacity: 0; 44 | -webkit-transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); 45 | -moz-transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); 46 | transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); } 47 | .vjs-sublime-skin.vjs-has-started .vjs-poster { 48 | display: none; } 49 | .vjs-sublime-skin.vjs-using-native-controls .vjs-control-bar, .vjs-sublime-skin.vjs-controls-disabled .vjs-control-bar { 50 | display: none; } 51 | .vjs-sublime-skin .vjs-progress-control { 52 | position: absolute; 53 | top: 0; 54 | right: 95px; 55 | bottom: 0; 56 | left: 50px; } 57 | .vjs-sublime-skin .vjs-progress-control .vjs-progress-holder { 58 | cursor: pointer; 59 | height: 20px; 60 | margin-top: -10px; 61 | position: absolute; 62 | top: 50%; 63 | right: 0; 64 | left: 0; } 65 | .vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after { 66 | background-color: rgba(255, 255, 255, 0.3); 67 | border-radius: 2px; 68 | content: ""; 69 | display: block; 70 | height: 4px; 71 | margin-top: -2px; 72 | position: absolute; 73 | top: 50%; 74 | right: 0; 75 | left: 0; } 76 | .vjs-sublime-skin .vjs-progress-control .vjs-play-progress { 77 | background-color: rgba(255, 255, 255, 0.7); 78 | border-radius: 2px; 79 | height: 4px; 80 | margin-top: -2px; 81 | position: absolute; 82 | top: 50%; 83 | right: 0; 84 | left: 0; } 85 | .vjs-sublime-skin .vjs-play-control { 86 | cursor: pointer; 87 | margin-top: -8px; 88 | position: absolute; 89 | top: 50%; 90 | left: 20px; 91 | height: 16px; 92 | width: 15px; } 93 | .vjs-sublime-skin .vjs-play-control:before { 94 | border-color: transparent transparent transparent white; 95 | border-style: solid; 96 | border-width: 8px 0 8px 15px; 97 | content: ""; 98 | display: block; } 99 | .vjs-sublime-skin.vjs-playing .vjs-play-control:before, .vjs-sublime-skin.vjs-playing .vjs-play-control:after { 100 | background-color: white; 101 | border: none; 102 | content: ""; 103 | display: block; 104 | height: 100%; 105 | position: absolute; 106 | top: 0; 107 | bottom: 0; 108 | left: 0; 109 | width: 6px; } 110 | .vjs-sublime-skin.vjs-playing .vjs-play-control:after { 111 | left: auto; 112 | right: 0; } 113 | .vjs-sublime-skin .vjs-fullscreen-control { 114 | border: 3px solid white; 115 | box-sizing: border-box; 116 | cursor: pointer; 117 | margin-top: -7px; 118 | position: absolute; 119 | top: 50%; 120 | right: 20px; 121 | height: 14px; 122 | width: 22px; } 123 | .vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control { 124 | background: white; } 125 | .vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after { 126 | background: black; 127 | content: ""; 128 | display: block; 129 | position: absolute; 130 | bottom: 0; 131 | left: 0; 132 | height: 5px; 133 | width: 5px; } 134 | .vjs-sublime-skin .vjs-volume-control { 135 | cursor: pointer; 136 | margin-top: -7px; 137 | position: absolute; 138 | top: 50%; 139 | right: 55px; 140 | height: 14px; 141 | width: 22px; } 142 | .vjs-sublime-skin .vjs-volume-bar { 143 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC); 144 | background-size: 22px 14px; 145 | height: 100%; 146 | width: 100%; } 147 | .vjs-sublime-skin .vjs-volume-level { 148 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC); 149 | background-size: 22px 14px; 150 | height: 100%; } 151 | .vjs-sublime-skin .vjs-current-time, 152 | .vjs-sublime-skin .vjs-time-divider, 153 | .vjs-sublime-skin .vjs-duration, 154 | .vjs-sublime-skin .vjs-remaining-time, 155 | .vjs-sublime-skin .vjs-load-progress, 156 | .vjs-sublime-skin .vjs-play-progress .vjs-control-text, 157 | .vjs-sublime-skin .vjs-play-control .vjs-control-content, 158 | .vjs-sublime-skin .vjs-fullscreen-control .vjs-control-text, 159 | .vjs-sublime-skin .vjs-slider-handle, 160 | .vjs-sublime-skin .vjs-volume-handle, 161 | .vjs-sublime-skin .vjs-live-controls, 162 | .vjs-sublime-skin .vjs-playback-rate, 163 | .vjs-sublime-skin .vjs-subtitles-button, 164 | .vjs-sublime-skin .vjs-captions-button, 165 | .vjs-sublime-skin .vjs-mute-control, 166 | .vjs-sublime-skin .vjs-hidden { 167 | display: none; } 168 | 169 | .video-js { 170 | background-color: black; 171 | padding: 0; 172 | position: relative; 173 | -webkit-user-select: none; 174 | -moz-user-select: none; 175 | -ms-user-select: none; 176 | user-select: none; 177 | vertical-align: middle; } 178 | .video-js .vjs-tech { 179 | position: absolute; 180 | top: 0; 181 | left: 0; 182 | height: 100%; 183 | width: 100%; } 184 | .video-js:-moz-full-screen { 185 | position: absolute; } 186 | .video-js.vjs-fullscreen { 187 | position: fixed; 188 | overflow: hidden; 189 | z-index: 1000; 190 | left: 0; 191 | top: 0; 192 | bottom: 0; 193 | right: 0; 194 | width: 100% !important; 195 | height: 100% !important; } 196 | .video-js:-webkit-full-screen { 197 | width: 100% !important; 198 | height: 100% !important; } 199 | .video-js.vjs-fullscreen.vjs-user-inactive { 200 | cursor: none; } 201 | 202 | body.vjs-full-window { 203 | height: 100%; 204 | margin: 0; 205 | overflow-y: auto; 206 | padding: 0; } 207 | 208 | .vjs-poster { 209 | background-repeat: no-repeat; 210 | background-position: 50% 50%; 211 | background-size: contain; 212 | cursor: pointer; 213 | height: 100%; 214 | margin: 0; 215 | padding: 0; 216 | position: relative; 217 | width: 100%; } 218 | .vjs-poster img { 219 | display: block; 220 | margin: 0 auto; 221 | max-height: 100%; 222 | padding: 0; 223 | width: 100%; } 224 | .video-js.vjs-using-native-controls .vjs-poster { 225 | display: none; } 226 | -------------------------------------------------------------------------------- /dist/videojs-sublime-skin.min.css: -------------------------------------------------------------------------------- 1 | .vjs-sublime-skin{color:#fff}.vjs-sublime-skin .vjs-poster:focus,.vjs-sublime-skin .vjs-control:focus{outline:none}.vjs-sublime-skin .vjs-big-play-button{line-height:50px;margin:-25px;opacity:1;position:absolute;top:50%;left:50%;height:50px;width:50px;-webkit-transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);-moz-transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);z-index:2}.vjs-sublime-skin .vjs-big-play-button:before{border-color:transparent transparent transparent #fff;border-style:solid;border-width:25px 0 25px 50px;content:"";display:block}.vjs-sublime-skin.vjs-controls-disabled .vjs-big-play-button,.vjs-sublime-skin.vjs-has-started .vjs-big-play-button,.vjs-sublime-skin.vjs-using-native-controls .vjs-big-play-button{opacity:0;pointer-events:none}.vjs-sublime-skin .vjs-control-bar{height:50px;opacity:0;pointer-events:none;position:absolute;right:0;bottom:0;left:0;z-index:2}.vjs-sublime-skin.vjs-has-started .vjs-control-bar{opacity:1;pointer-events:auto;-webkit-transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);-moz-transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);transition:opacity 100ms cubic-bezier(.455,.03,.515,.955)}.vjs-sublime-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:0;-webkit-transition:opacity 1s cubic-bezier(.455,.03,.515,.955);-moz-transition:opacity 1s cubic-bezier(.455,.03,.515,.955);transition:opacity 1s cubic-bezier(.455,.03,.515,.955)}.vjs-sublime-skin.vjs-has-started .vjs-poster,.vjs-sublime-skin.vjs-using-native-controls .vjs-control-bar,.vjs-sublime-skin.vjs-controls-disabled .vjs-control-bar{display:none}.vjs-sublime-skin .vjs-progress-control{position:absolute;top:0;right:95px;bottom:0;left:50px}.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder{cursor:pointer;height:20px;margin-top:-10px;position:absolute;top:50%;right:0;left:0}.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after{background-color:rgba(255,255,255,.3);border-radius:2px;content:"";display:block;height:4px;margin-top:-2px;position:absolute;top:50%;right:0;left:0}.vjs-sublime-skin .vjs-progress-control .vjs-play-progress{background-color:rgba(255,255,255,.7);border-radius:2px;height:4px;margin-top:-2px;position:absolute;top:50%;right:0;left:0}.vjs-sublime-skin .vjs-play-control{cursor:pointer;margin-top:-8px;position:absolute;top:50%;left:20px;height:16px;width:15px}.vjs-sublime-skin .vjs-play-control:before{border-color:transparent transparent transparent #fff;border-style:solid;border-width:8px 0 8px 15px;content:"";display:block}.vjs-sublime-skin.vjs-playing .vjs-play-control:before,.vjs-sublime-skin.vjs-playing .vjs-play-control:after{background-color:#fff;border:none;content:"";display:block;height:100%;position:absolute;top:0;bottom:0;left:0;width:6px}.vjs-sublime-skin.vjs-playing .vjs-play-control:after{left:auto;right:0}.vjs-sublime-skin .vjs-fullscreen-control{border:3px solid #fff;box-sizing:border-box;cursor:pointer;margin-top:-7px;position:absolute;top:50%;right:20px;height:14px;width:22px}.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control{background:#fff}.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after{background:#000;content:"";display:block;position:absolute;bottom:0;left:0;height:5px;width:5px}.vjs-sublime-skin .vjs-volume-control{cursor:pointer;margin-top:-7px;position:absolute;top:50%;right:55px;height:14px;width:22px}.vjs-sublime-skin .vjs-volume-bar{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC);background-size:22px 14px;height:100%;width:100%}.vjs-sublime-skin .vjs-volume-level{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC);background-size:22px 14px;height:100%}.vjs-sublime-skin .vjs-current-time,.vjs-sublime-skin .vjs-time-divider,.vjs-sublime-skin .vjs-duration,.vjs-sublime-skin .vjs-remaining-time,.vjs-sublime-skin .vjs-load-progress,.vjs-sublime-skin .vjs-play-progress .vjs-control-text,.vjs-sublime-skin .vjs-play-control .vjs-control-content,.vjs-sublime-skin .vjs-fullscreen-control .vjs-control-text,.vjs-sublime-skin .vjs-slider-handle,.vjs-sublime-skin .vjs-volume-handle,.vjs-sublime-skin .vjs-live-controls,.vjs-sublime-skin .vjs-playback-rate,.vjs-sublime-skin .vjs-subtitles-button,.vjs-sublime-skin .vjs-captions-button,.vjs-sublime-skin .vjs-mute-control,.vjs-sublime-skin .vjs-hidden{display:none}.video-js{background-color:#000;padding:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.video-js .vjs-tech{position:absolute;top:0;left:0;height:100%;width:100%}.video-js:-moz-full-screen{position:absolute}.video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}body.vjs-full-window{height:100%;margin:0;overflow-y:auto;padding:0}.vjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.vjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.video-js.vjs-using-native-controls .vjs-poster{display:none} -------------------------------------------------------------------------------- /gulpfile.coffee: -------------------------------------------------------------------------------- 1 | gulp = require('gulp') 2 | base64 = require('gulp-base64') 3 | concat = require('gulp-concat') 4 | csso = require('gulp-csso') 5 | plumber = require('gulp-plumber') 6 | rename = require('gulp-rename') 7 | sass = require('gulp-ruby-sass') 8 | 9 | 10 | gulp.task('build', ['sass']) 11 | 12 | gulp.task 'sass', -> 13 | gulp.src('src/**/*.sass') 14 | .pipe(plumber()) 15 | .pipe(sass(loadPath: ['bower_components/bourbon/dist'])) 16 | .pipe(concat('videojs-sublime-skin.css')) 17 | .pipe(base64()) 18 | .pipe(gulp.dest('dist')) 19 | .pipe(csso()) 20 | .pipe(rename(extname: '.min.css')) 21 | .pipe(gulp.dest('dist')) 22 | 23 | gulp.task 'watch', -> 24 | gulp.watch('src/**/*', ['sass']) 25 | 26 | gulp.task('default', ['build', 'watch']) 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "videojs-sublime-skin", 3 | "version": "1.0.3", 4 | "description": "A Video.js skin modeled on SublimeVideo.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/cabin/videojs-sublime-skin.git" 8 | }, 9 | "keywords": [ 10 | "videojs", 11 | "video" 12 | ], 13 | "author": "Zak Johnson ", 14 | "license": "MIT", 15 | "devDependencies": { 16 | "coffee-script": "^1.9.2", 17 | "gulp": "^3.8.11", 18 | "gulp-base64": "0.1.2", 19 | "gulp-concat": "^2.5.2", 20 | "gulp-csso": "^1.0.0", 21 | "gulp-plumber": "^1.0.0", 22 | "gulp-rename": "^1.2.2", 23 | "gulp-ruby-sass": "^0.5.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cabin/videojs-sublime-skin/354a1a7f3f4f5e85d384f418b9327477c08022b3/screenshot.png -------------------------------------------------------------------------------- /src/videojs-sublime-skin.sass: -------------------------------------------------------------------------------- 1 | @import bourbon 2 | 3 | $play-button-size: 50px 4 | $control-height: 50px 5 | $control-padding: 20px 6 | $play-width: 15px 7 | $play-height: 16px 8 | $volume-width: 22px 9 | $volume-height: 14px 10 | $fullscreen-width: 22px 11 | $fullscreen-height: 14px 12 | 13 | 14 | .vjs-sublime-skin 15 | color: white 16 | 17 | .vjs-poster:focus, .vjs-control:focus 18 | outline: none 19 | 20 | .vjs-big-play-button 21 | line-height: $play-button-size 22 | margin: -($play-button-size / 2) 23 | opacity: 1 24 | +position(absolute, 50% null null 50%) 25 | +size($play-button-size) 26 | +transition(opacity 100ms $ease-in-out-quad) 27 | z-index: 2 28 | 29 | &:before 30 | border-color: transparent transparent transparent white 31 | border-style: solid 32 | border-width: $play-button-size / 2 0 $play-button-size / 2 $play-button-size 33 | content: "" 34 | display: block 35 | +size(0) 36 | 37 | // Hide play button when the controls are disabled, the video has started, or 38 | // on mobile. 39 | &.vjs-controls-disabled, &.vjs-has-started, &.vjs-using-native-controls 40 | .vjs-big-play-button 41 | opacity: 0 42 | pointer-events: none 43 | 44 | .vjs-control-bar 45 | height: $control-height 46 | opacity: 0 47 | pointer-events: none 48 | +position(absolute, null 0 0 0) 49 | z-index: 2 50 | // Fade the control bar in quickly when the video starts. 51 | &.vjs-has-started .vjs-control-bar 52 | opacity: 1 53 | pointer-events: auto 54 | +transition(opacity 100ms $ease-in-out-quad) 55 | // Fade the control bar out slowly when the video is playing for a while. 56 | &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar 57 | opacity: 0 58 | +transition(opacity 1s $ease-in-out-quad) 59 | &.vjs-has-started .vjs-poster 60 | display: none 61 | // Hide the control bar when it's not needed/wanted. 62 | &.vjs-using-native-controls .vjs-control-bar, 63 | &.vjs-controls-disabled .vjs-control-bar 64 | display: none 65 | 66 | .vjs-progress-control 67 | $clickable-height: 20px 68 | $visible-height: 4px 69 | +position(absolute, 0 95px 0 50px) 70 | 71 | .vjs-progress-holder 72 | cursor: pointer 73 | height: $clickable-height 74 | margin-top: -($clickable-height / 2) 75 | +position(absolute, 50% 0 null 0) 76 | &:after 77 | background-color: rgba(white, .3) 78 | border-radius: $visible-height / 2 79 | content: "" 80 | display: block 81 | height: $visible-height 82 | margin-top: -($visible-height / 2) 83 | +position(absolute, 50% 0 null 0) 84 | 85 | .vjs-play-progress 86 | background-color: rgba(white, .7) 87 | border-radius: $visible-height / 2 88 | height: $visible-height 89 | margin-top: -($visible-height / 2) 90 | +position(absolute, 50% 0 null 0) 91 | 92 | .vjs-play-control 93 | cursor: pointer 94 | margin-top: -($play-height / 2) 95 | +position(absolute, 50% null null $control-padding) 96 | +size($play-width $play-height) 97 | &:before 98 | border-color: transparent transparent transparent white 99 | border-style: solid 100 | border-width: ($play-height / 2) 0 ($play-height / 2) $play-width 101 | content: "" 102 | display: block 103 | +size(0) 104 | &.vjs-playing .vjs-play-control 105 | &:before, &:after 106 | background-color: white 107 | border: none 108 | content: "" 109 | display: block 110 | height: 100% 111 | +position(absolute, 0 null 0 0) 112 | width: 6px 113 | &:after 114 | left: auto 115 | right: 0 116 | 117 | .vjs-fullscreen-control 118 | border: 3px solid white 119 | box-sizing: border-box 120 | cursor: pointer 121 | margin-top: -($fullscreen-height / 2) 122 | +position(absolute, 50% $control-padding null null) 123 | +size($fullscreen-width $fullscreen-height) 124 | &.vjs-fullscreen .vjs-fullscreen-control 125 | background: white 126 | &:after 127 | background: black 128 | content: "" 129 | display: block 130 | +position(absolute, null null 0 0) 131 | +size(5px) 132 | 133 | .vjs-volume-control 134 | $right: $control-padding + $fullscreen-width + 13 135 | cursor: pointer 136 | margin-top: -($volume-height / 2) 137 | +position(absolute, 50% $right null null) 138 | +size($volume-width $volume-height) 139 | 140 | .vjs-volume-bar 141 | background: url(vol-trans.png) 142 | background-size: $volume-width $volume-height 143 | +size(100%) 144 | 145 | .vjs-volume-level 146 | background: url(vol-white.png) 147 | background-size: $volume-width $volume-height 148 | height: 100% 149 | 150 | // Hide extra controls. 151 | .vjs-current-time, 152 | .vjs-time-divider, 153 | .vjs-duration, 154 | .vjs-remaining-time, 155 | .vjs-load-progress, 156 | .vjs-play-progress .vjs-control-text, 157 | .vjs-play-control .vjs-control-content, 158 | .vjs-fullscreen-control .vjs-control-text, 159 | .vjs-slider-handle, 160 | .vjs-volume-handle, 161 | .vjs-live-controls, 162 | .vjs-playback-rate, 163 | .vjs-subtitles-button, 164 | .vjs-captions-button, 165 | .vjs-mute-control, 166 | .vjs-hidden, 167 | display: none 168 | -------------------------------------------------------------------------------- /src/videojs.sass: -------------------------------------------------------------------------------- 1 | @import bourbon 2 | 3 | 4 | // Base .video-js styles are ripped from the standard video.js theme. 5 | 6 | .video-js 7 | background-color: black 8 | padding: 0 9 | position: relative 10 | +user-select(none) 11 | vertical-align: middle 12 | 13 | .vjs-tech 14 | +position(absolute, 0 null null 0) 15 | +size(100%) 16 | 17 | &:-moz-full-screen 18 | position: absolute 19 | &.vjs-fullscreen 20 | position: fixed 21 | overflow: hidden 22 | z-index: 1000 23 | left: 0 24 | top: 0 25 | bottom: 0 26 | right: 0 27 | width: 100% !important 28 | height: 100% !important 29 | &:-webkit-full-screen 30 | width: 100% !important 31 | height: 100% !important 32 | &.vjs-fullscreen.vjs-user-inactive 33 | cursor: none 34 | 35 | body.vjs-full-window 36 | height: 100% 37 | margin: 0 38 | overflow-y: auto 39 | padding: 0 40 | 41 | .vjs-poster 42 | background-repeat: no-repeat 43 | background-position: 50% 50% 44 | background-size: contain 45 | cursor: pointer 46 | height: 100% 47 | margin: 0 48 | padding: 0 49 | position: relative 50 | width: 100% 51 | img 52 | display: block 53 | margin: 0 auto 54 | max-height: 100% 55 | padding: 0 56 | width: 100% 57 | .video-js.vjs-using-native-controls & 58 | display: none 59 | -------------------------------------------------------------------------------- /src/vol-trans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cabin/videojs-sublime-skin/354a1a7f3f4f5e85d384f418b9327477c08022b3/src/vol-trans.png -------------------------------------------------------------------------------- /src/vol-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cabin/videojs-sublime-skin/354a1a7f3f4f5e85d384f418b9327477c08022b3/src/vol-white.png --------------------------------------------------------------------------------