New Base Theme #1999
+1,196
−1,315
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,29 @@ | ||
| Skins | ||
| ===== | ||
|
|
||
| The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), and by default these styles are added to the dom for you! That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding | ||
| the styles you'd like to change. | ||
|
|
||
| If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = false` before Video.js is loaded. Keep in mind that without these base styles | ||
| enabled, you'll need to manually include them. | ||
|
|
||
| ## Icons | ||
|
|
||
| You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](../../sandbox/icons.html.example) in the sandbox directory. | ||
|
|
||
| ## Customization | ||
|
|
||
| When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. You should include a new class matching the | ||
| name of your theme, then just start overriding! | ||
|
|
||
| ```css | ||
| .vjs-skin-hotdog-stand { color: #FF0000; } | ||
| .vjs-skin-hotdog-stand .vjs-control-bar { background: #FFFF00; } | ||
| .vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; } | ||
| ``` | ||
|
|
||
| This would take care of the major areas of the skin (play progress, the control bar background, and icon colors), but you can skin any other aspect. | ||
| Our suggestion is to use a browser such as Firefox and Chrome, and use the developer tools to inspect the different elements and see what you'd like to change and what classes | ||
| to target when you do so. | ||
|
|
||
| More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Video.js Icons Sandbox</title> | ||
|
|
||
| <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css"> | ||
|
|
||
| <style> | ||
| .icon-list li span { font-size: 150% } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>Video.js Icons</h1> | ||
| <p>This is a list of all of the icons available in the Video.js base stylesheet. The appropriate class is to the right of each icon.</p> | ||
|
|
||
| <ul class="icon-list"> | ||
| <li><span class="vjs-icon-play"></span> <code>.vjs-icon-play</code></li> | ||
| <li><span class="vjs-icon-pause"></span> <code>.vjs-icon-pause</code></li> | ||
| <li><span class="vjs-icon-volume-mute"></span> <code>.vjs-icon-volume-mute</code></li> | ||
| <li><span class="vjs-icon-volume-low"></span> <code>.vjs-icon-volume-low</code></li> | ||
| <li><span class="vjs-icon-volume-mid"></span> <code>.vjs-icon-volume-mid</code></li> | ||
| <li><span class="vjs-icon-volume-high"></span> <code>.vjs-icon-volume-high</code></li> | ||
| <li><span class="vjs-icon-fullscreen-enter"></span> <code>.vjs-icon-fullscreen-enter</code></li> | ||
| <li><span class="vjs-icon-fullscreen-exit"></span> <code>.vjs-icon-fullscreen-exit</code></li> | ||
| <li><span class="vjs-icon-square"></span> <code>.vjs-icon-square</code></li> | ||
| <li><span class="vjs-icon-spinner"></span> <code>.vjs-icon-spinner</code></li> | ||
| <li><span class="vjs-icon-subtitles"></span> <code>.vjs-icon-subtitles</code></li> | ||
| <li><span class="vjs-icon-captions"></span> <code>.vjs-icon-captions</code></li> | ||
| <li><span class="vjs-icon-chapters"></span> <code>.vjs-icon-chapters</code></li> | ||
| <li><span class="vjs-icon-share"></span> <code>.vjs-icon-share</code></li> | ||
| <li><span class="vjs-icon-cog"></span> <code>.vjs-icon-cog</code></li> | ||
| <li><span class="vjs-icon-circle"></span> <code>.vjs-icon-circle</code></li> | ||
| <li><span class="vjs-icon-circle-outline"></span> <code>.vjs-icon-circle-outline</code></li> | ||
| <li><span class="vjs-icon-circle-inner-circle"></span> <code>.vjs-icon-circle-inner-circle</code></li> | ||
| </ul> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| @mixin background-color-with-alpha($color, $alpha) { | ||
| background-color: $color; | ||
| background-color: rgba($color, $alpha); | ||
| } | ||
|
|
||
| @mixin transition($string: $transition--default) { | ||
| -webkit-transition: $string; | ||
| -moz-transition: $string; | ||
| -o-transition: $string; | ||
| transition: $string; | ||
| } | ||
|
|
||
| @mixin hide-visually { | ||
| border: 0; | ||
| clip: rect(0 0 0 0); | ||
| height: 1px; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| padding: 0; | ||
| position: absolute; | ||
| width: 1px; | ||
| } | ||
|
|
||
| @mixin border-radius($radius) { | ||
| -webkit-border-radius: $radius; | ||
| -moz-border-radius: $radius; | ||
| border-radius: $radius; | ||
| } | ||
|
|
||
| @mixin animation($string: spin 1s infinite linear) { | ||
| -webkit-animation: $string; | ||
| -moz-animation: $string; | ||
| -o-animation: $string; | ||
| animation: $string; | ||
| } | ||
|
|
||
| @mixin display-flex($alignment: '', $justification: '') { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
|
|
||
| @if $alignment != '' { | ||
| -webkit-box-align: $alignment; | ||
| -webkit-align-items: $alignment; | ||
| -ms-flex-align: $alignment; | ||
| align-items: $alignment; | ||
| } | ||
|
|
||
| @if $justification != '' { | ||
| -webkit-box-pack: $justification; | ||
| -webkit-justify-content: $justification; | ||
| -ms-flex-pack: $justification; | ||
| justify-content: $justification; | ||
| } | ||
| } | ||
|
|
||
| @mixin flex($value) { | ||
| // @include context('.video-js', '.video-js.vjs-no-flex') { | ||
| // display: table-cell; | ||
| // vertical-align: middle; | ||
| // @if ($value == 'auto') { | ||
| // width: auto; | ||
| // } | ||
| // } | ||
|
|
||
| -webkit-box-flex: $value; | ||
| -moz-box-flex: $value; | ||
| -webkit-flex: $value; | ||
| -ms-flex: $value; | ||
| flex: $value; | ||
| } | ||
|
|
||
| // https://developer.mozilla.org/en-US/docs/Web/CSS/user-select | ||
| @mixin user-select($string: none) { | ||
| -webkit-user-select: $string; | ||
| -moz-user-select: $string; | ||
| -ms-user-select: $string; | ||
| user-select: $string | ||
| } | ||
|
|
||
| // https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow | ||
| @mixin box-shadow ($string: 0 0 1em rgba(0, 0, 0, 0.25)) { | ||
| -webkit-box-shadow: $string; | ||
| -moz-box-shadow: $string; | ||
| box-shadow: $string; | ||
| } | ||
|
|
||
| @mixin order($value) { | ||
| -webkit-box-ordinal-group: $value; | ||
| -moz-box-ordinal-group: $value; | ||
| -ms-flex-order: $value; | ||
| -webkit-order: $value; | ||
| order: $value; | ||
|
|
||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| $primary-text: #fff; | ||
| $secondary-text: #F4A460; // currently just used for visited links in errors and such. | ||
|
|
||
| $primary-bg: #000; | ||
|
There was a problem hiding this comment. we should do something like: // colors.scss
$black: #000
//vars.scss
$primary-bg: $black
// other files
background-color: $primary-bgthat way, if we feel like changing our "black" to be |
||
| $secondary-bg: lighten($primary-bg, 35%); | ||
|
|
||
| $icon-font-family: 'VideoJS'; | ||
| $text-font-family: Arial, sans-serif; | ||
| $base-font-size: 10px; | ||
|
|
||
| $control-bar-bg: #2B333F; | ||
| $control-bar-transparency: 0.5; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| // When the player is absurdly tiny, display nothing but: | ||
| // - Play button | ||
| // - Fullscreen Button | ||
| .video-js.vjs-layout-tiny:not(.vjs-fullscreen) { | ||
| .vjs-custom-control-spacer { @include flex(auto); } | ||
| &.vjs-no-flex .vjs-custom-control-spacer { width: auto; } | ||
|
|
||
| .vjs-current-time, .vjs-captions-button, .vjs-time-divider, | ||
| .vjs-progress-control, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, | ||
| .vjs-mute-control, .vjs-volume-control, .vjs-chapters-button, .vjs-captions-button, | ||
| .vjs-subtitles-button, .vjs-volume-menu-button { display: none; } | ||
| } | ||
|
|
||
| // When the player is x-small, display nothing but: | ||
| // - Play button | ||
| // - Progress bar | ||
| // - Fullscreen Button | ||
| .video-js.vjs-layout-x-small:not(.vjs-fullscreen) { | ||
| .vjs-current-time, .vjs-captions-button, .vjs-time-divider, | ||
| .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-captions-button, | ||
| .vjs-mute-control, .vjs-volume-control, .vjs-chapters-button, | ||
| .vjs-subtitles-button, .vjs-volume-button, .vjs-fullscreen-control { display: none; } | ||
| } | ||
|
|
||
|
|
||
| // When the player is small, display nothing but: | ||
| // - Play button | ||
| // - Progress bar | ||
| // - Volume menu button | ||
| // - Captions Button | ||
| // - Fullscreen button | ||
| .video-js.vjs-layout-small:not(.vjs-fullscreen) { | ||
| .vjs-current-time, .vjs-captions-button, .vjs-time-divider, | ||
| .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, | ||
| .vjs-mute-control, .vjs-volume-control, .vjs-chapters-button, | ||
| .vjs-subtitles-button { display: none; } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| .video-js .vjs-big-play-button { | ||
| font-size: 3em; | ||
| line-height: 1em; | ||
| display: block; | ||
| z-index: 2; | ||
| position: absolute; | ||
| top: 10px; | ||
| left: 10px; | ||
| padding: 0.2em 1em; | ||
| cursor: pointer; | ||
| opacity: 1; | ||
| border: 2px solid $primary-text; | ||
|
|
||
| /* Need a slightly gray bg so it can be seen on black backgrounds */// | ||
| @include background-color-with-alpha($primary-bg, 0.8); | ||
| @include border-radius(0.3em); | ||
| @include transition(all 0.4s); | ||
|
|
||
| @extend .vjs-icon-play; | ||
| } | ||
|
|
||
| /* Hide if controls are disabled, the video is playing, or native controls are used. */ | ||
| .video-js.vjs-controls-disabled .vjs-big-play-button, | ||
| .video-js.vjs-has-started .vjs-big-play-button, | ||
| .video-js.vjs-using-native-controls .vjs-big-play-button { | ||
| display: none; | ||
| } | ||
|
|
||
| .video-js:hover .vjs-big-play-button, | ||
| .video-js .vjs-big-play-button:focus { | ||
| outline: 0; | ||
| border-color: $primary-text; | ||
|
|
||
| @include background-color-with-alpha($secondary-bg, 0.75); | ||
| @include transition(all 0s); | ||
| } | ||
|
|
||
| .vjs-error .vjs-big-play-button { | ||
| display: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .video-js .vjs-captions-button { | ||
| @extend .vjs-icon-captions; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| .video-js .vjs-chapters-button { | ||
| @extend .vjs-icon-chapters; | ||
| } | ||
|
|
||
| .video-js .vjs-chapters-button.vjs-menu-button .vjs-menu { | ||
| left: 2em; | ||
| } | ||
|
|
||
| .video-js .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content { | ||
| width: 24em; | ||
| left: -12em; | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
connect:previewdoesn't look like it's used anywhere else. What's it for?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
grunt connect:previewis the old way of doing things.grunt connect:devis used in conjunction with watch so you can have a server and still get new sass hotness on saves.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a way we can get all the watch tasks and the server into one
command?
Sent from mobile
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I just did it this way to preserve the old way so I wouldn't surprise people. We can definitely just combine everything.