web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-17 10:46:00 +02:00
Code Releases Activity

@heff improved css selector strengths. closes #2583

Browse Source
This commit is contained in:
heff 2015-09-14 16:01:50 -07:00
parent 4d6c737a21
commit 32aa9ed7e4
14 changed files with 71 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -127,6 +127,7 @@ CHANGELOG
* @heff fixed the inline volume control and made it the default ([view](https://github.com/videojs/video.js/pull/2553))
* @forbesjo fixed webkit deprecation warnings ([view](https://github.com/videojs/video.js/pull/2558))
* @forbesjo added Android and iOS browser testing ([view](https://github.com/videojs/video.js/pull/2538))
* @heff improved css selector strengths ([view](https://github.com/videojs/video.js/pull/2583))
--------------------

13
src/css/components/_big-play.scss
View File

@ -28,20 +28,13 @@
}
// Allow people that hate their poster image to center the big play button.
.video-js.vjs-big-play-centered .vjs-big-play-button {
.vjs-big-play-centered .vjs-big-play-button {
top: 50%;
left: 50%;
margin-top: -($big-play-button--height / 2);
margin-left: -($big-play-button--width / 2);
}
// 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;
@ -51,6 +44,10 @@
@include transition(all 0s);
}
// Hide if controls are disabled, the video is playing, or native controls are used.
.vjs-controls-disabled .vjs-big-play-button,
.vjs-has-started .vjs-big-play-button,
.vjs-using-native-controls .vjs-big-play-button,
.vjs-error .vjs-big-play-button {
display: none;
}

4
src/css/components/_button.scss
View File

@ -6,6 +6,10 @@
overflow: visible; // IE8
font-size: inherit; // IE in general. WTF.
line-height: inherit;
text-transform: none;
text-decoration: none;
transition: none;
-webkit-appearance: none;
-moz-appearance: none;

8
src/css/components/_chapters.scss
View File

@ -2,11 +2,11 @@
@extend .vjs-icon-chapters;
}
.video-js .vjs-chapters-button.vjs-menu-button .vjs-menu {
left: 2em;
.vjs-chapters-button .vjs-menu {
left: -10em; /* (Width of vjs-menu - width of vjs-control) / 2 */
width: 0;
}
.video-js .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
.vjs-chapters-button .vjs-menu ul {
width: 24em;
left: -12em;
}

19
src/css/components/_control-bar.scss
View File

@ -11,7 +11,7 @@
}
// Video has started playing
.video-js.vjs-has-started .vjs-control-bar {
.vjs-has-started .vjs-control-bar {
@include display-flex;
visibility: visible;
opacity: 1;
@ -21,7 +21,7 @@
}
// Video has started playing AND user is inactive
.video-js.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
visibility: hidden;
opacity: 0;
@ -29,14 +29,15 @@
@include transition($trans);
}
.video-js.video-js.video-js.vjs-controls-disabled .vjs-control-bar,
.video-js.video-js.video-js.vjs-using-native-controls .vjs-control-bar,
.video-js.video-js.video-js.vjs-error .vjs-control-bar {
display: none;
.vjs-controls-disabled .vjs-control-bar,
.vjs-using-native-controls .vjs-control-bar,
.vjs-error .vjs-control-bar {
/* !important is ok in this context. */
display: none !important;
}
// Don't hide the control bar if it's audio
.video-js.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
opacity: 1;
visibility: visible;
}
@ -47,11 +48,11 @@ fonts to show/hide properly.
- Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
*/
$ie8screen: "\0screen";
.video-js.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
@media #{$ie8screen} { content: ""; }
}
/* IE 8 + 9 Support */
.video-js.vjs-has-started.vjs-no-flex .vjs-control-bar {
.vjs-has-started.vjs-no-flex .vjs-control-bar {
display: table;
}

3
src/css/components/_control.scss
View File

@ -1,3 +1,6 @@
// vjs-control might be better named vjs-button now.
// It's used on both real buttons (play button)
// and div buttons (menu buttons)
.video-js .vjs-control {
outline: none;
position: relative;

15
src/css/components/_layout.scss
View File

@ -14,6 +14,7 @@
/* Start with 10px for base font size so other dimensions can be em based and
easily calculable. */
font-size: $base-font-size;
line-height: 1;
/* Provide some basic defaults for fonts */
font-weight: normal;
@ -40,6 +41,20 @@
box-sizing: inherit;
}
/* List style reset */
.video-js ul {
font-family: inherit;
font-size: inherit;
line-height: inherit;
list-style-position: outside;
/* Important to specify each */
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
/* Fill the width of the containing element and use padding to create the
desired aspect ratio. Default to 16x9 unless another ratio is given. */
@mixin apply-aspect-ratio($width, $height) {

10
src/css/components/_playback-rate.scss
View File

@ -1,5 +1,5 @@
// TODO: I feel like this should be a generic menu. Research later.
.video-js .vjs-playback-rate .vjs-playback-rate-value {
.vjs-playback-rate .vjs-playback-rate-value {
font-size: 1.5em;
line-height: 2;
position: absolute;
@ -10,11 +10,7 @@
text-align: center;
}
.video-js .vjs-playback-rate .vjs-menu {
.vjs-playback-rate .vjs-menu {
width: 4em;
left: 0em;
}
.video-js .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
width: 4em;
left: 0;
list-style: none;
}

10
src/css/components/_poster.scss
View File

@ -14,6 +14,8 @@
left: 0;
height: 100%;
}
/* Used for IE8 fallback */
.vjs-poster img {
display: block;
vertical-align: middle;
@ -24,22 +26,22 @@
}
/* Hide the poster after the video has started playing */
.video-js.vjs-has-started .vjs-poster {
.vjs-has-started .vjs-poster {
display: none;
}
/* Don't hide the poster if we're playing audio */
.video-js.vjs-audio.vjs-has-started .vjs-poster {
.vjs-audio.vjs-has-started .vjs-poster {
display: block;
}
/* Hide the poster when controls are disabled because it's clickable
and the native poster can take over */
.video-js.vjs-controls-disabled .vjs-poster {
.vjs-controls-disabled .vjs-poster {
display: none;
}
/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
.vjs-using-native-controls .vjs-poster {
display: none;
}

2
src/css/components/_progress.scss
View File

@ -69,8 +69,6 @@
top: -0.333333333333333em;
right: -0.5em;
font-size: 0.9em;
height: 1em;
line-height: 1em;
}
}

6
src/css/components/_text-track.scss
View File

@ -1,4 +1,4 @@
.video-js .vjs-text-track-display {
.vjs-text-track-display {
position: absolute;
bottom: 3em;
left: 0;
@ -21,6 +21,6 @@
@include background-color-with-alpha($primary-bg, 0.5);
}
.video-js .vjs-subtitles { color: #fff /* Subtitles are white */; }
.video-js .vjs-captions { color: #fc6 /* Captions are yellow */; }
.vjs-subtitles { color: #fff /* Subtitles are white */; }
.vjs-captions { color: #fc6 /* Captions are yellow */; }
.vjs-tt-cue { display: block; }

4
src/css/components/_time.scss
View File

@ -10,12 +10,12 @@
/* We need the extra specificity that referencing .vjs-no-flex provides. */
.video-js .vjs-current-time,
.video-js.vjs-no-flex .vjs-current-time {
.vjs-no-flex .vjs-current-time {
display: none;
}
.video-js .vjs-duration,
.video-js.vjs-no-flex .vjs-duration {
.vjs-no-flex .vjs-duration {
display: none;
}

8
src/css/components/menu/_menu-popup.scss
View File

@ -2,21 +2,19 @@
display: none;
position: absolute;
bottom: 0;
width: 10em;
left: -3em; /* (Width of vjs-menu - width of button) / 2 */
width: 0em;
height: 0em;
margin-bottom: 1.5em;
border-top-color: rgba(7, 40, 50, $control-bar--transparency); /* Same as ul background */
}
/* Button Pop-up Menu */
.vjs-menu-button-popup .vjs-menu-content {
.vjs-menu-button-popup .vjs-menu ul {
@include background-color-with-alpha($primary-bg, 0.7);
}
.vjs-menu-button-popup .vjs-menu-content {
position: absolute;
width: 10em;
width: 100%;
bottom: 1.5em; /* Same bottom as vjs-menu border-top */
max-height: 15em;
}

22
src/css/components/menu/_menu.scss
View File

@ -1,19 +1,19 @@
.video-js .vjs-menu-button {
.vjs-menu-button {
cursor: pointer;
}
.video-js .vjs-menu .vjs-menu-content {
.vjs-menu .vjs-menu-content {
display: block;
padding: 0; margin: 0;
overflow: auto;
}
/* prevent menus from opening while scrubbing (FF, IE) */
.video-js.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
display: none;
}
.video-js .vjs-menu ul li {
.vjs-menu li {
list-style: none;
margin: 0;
padding: 0.2em 0;
@ -23,19 +23,21 @@
text-transform: lowercase;
}
.video-js .vjs-menu ul li.vjs-selected {
.vjs-menu li.vjs-selected {
background-color: $primary-bg;
}
.video-js .vjs-menu ul li:focus,
.video-js .vjs-menu ul li:hover,
.video-js .vjs-menu ul li.vjs-selected:focus,
.video-js .vjs-menu ul li.vjs-selected:hover {
.vjs-menu li:focus,
.vjs-menu li:hover,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover {
outline: 0;
color: $primary-bg;
@include background-color-with-alpha($primary-text, 0.75);
}
.video-js .vjs-menu ul li.vjs-menu-title {
.vjs-menu li.vjs-menu-title {
text-align: center;
text-transform: uppercase;
font-size: 1em;