Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve some skin defaults #2642

Closed
wants to merge 9 commits into from
Closed

Improve some skin defaults #2642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d4e5374
Buttons should inherit the font size not rely on a variable
heff Sep 27, 2015
01c5701
Big play button centered class needs to account for border width
heff Sep 27, 2015
25c0f8e
Added the vjs-slider-bar class for easier bar styling
heff Sep 27, 2015
0640413
Removed big play centering changes. Forgot about border-box change
heff Sep 27, 2015
1a4c8da
Fix the spinner in centered pages
heff Sep 27, 2015
b4c143d
Protect the inline volume from menu background changes
heff Sep 27, 2015
ef02518
Fixed aspect ration setting
heff Sep 27, 2015
a0a6cbc
Refactored scss private vars
heff Sep 28, 2015
7f4a6c6
Changed $lighter-background to $secondary-background
heff Sep 28, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions src/css/_private-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
$primary-text: #fff !default;
// currently just used for visited links in errors and such.
$secondary-text: #F4A460 !default;
// Text, icons, hover states
$primary-foreground-color: #fff;

$primary-bg: #000 !default;
$secondary-bg: lighten($primary-bg, 35%) !default;
// Control backgrounds (control bar, big play, menus)
$primary-background-color: #2B333F !default;
$primary-background-transparency: 0.7 !default;

$text-font-family: Arial, Helvetica, sans-serif !default;
$base-font-size: 10px !default;
// Hover states, slider backgrounds
$secondary-background-color: lighten($primary-background-color, 33%) !default;
$secondary-background-transparency: 0.5 !default;

$control-bar--bg: #2B333F !default;
$control-bar--transparency: 0.5 !default;
$text-font-family: Arial, Helvetica, sans-serif !default;

// Using the '--' naming for component-specific styles
$big-play-button--width: 3em !default;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to clear this up after our conversation, add a comment of some kind here solidifying the naming structure for component-specific variables ($component-name--attribute).

$big-play-button--height: 1.5em !default;
$big-play-button--transparency: 0.8 !default;
8 changes: 4 additions & 4 deletions src/css/components/_big-play.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
padding: 0;
cursor: pointer;
opacity: 1;
border: 2px solid $primary-text;
border: 0.06666em solid $primary-foreground-color;

/* Need a slightly gray bg so it can be seen on black backgrounds */
@include background-color-with-alpha($primary-bg, $big-play-button--transparency);
@include background-color-with-alpha($primary-background-color, $primary-background-transparency);
@include border-radius(0.3em);
@include transition(all 0.4s);

Expand All @@ -38,9 +38,9 @@
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
outline: 0;
border-color: $primary-text;
border-color: $primary-foreground-color;

@include background-color-with-alpha($secondary-bg, 0.75);
@include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
@include transition(all 0s);
}

Expand Down
2 changes: 1 addition & 1 deletion src/css/components/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.video-js button {
background: none;
border: none;
color: $primary-text;
color: inherit;
display: inline-block;

overflow: visible; // IE8
Expand Down
7 changes: 3 additions & 4 deletions src/css/components/_captions-settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
.vjs-caption-settings {
position: relative;
top: 1em;
background-color: $primary-bg;
background-color: rgba($primary-bg, 0.75);
color: $primary-text;
background-color: $primary-background-color;
background-color: rgba($primary-background-color, 0.75);
color: $primary-foreground-color;
margin: 0 auto;
padding: 0.5em;
height: 15em;
font-family: $text-font-family;
font-size: 12px;
width: 40em;
}
Expand Down
2 changes: 1 addition & 1 deletion src/css/components/_control-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
right: 0;
height: 3.0em;

@include background-color-with-alpha($control-bar--bg, $control-bar--transparency);
@include background-color-with-alpha($primary-background-color, $primary-background-transparency);
}

// Video has started playing
Expand Down
2 changes: 1 addition & 1 deletion src/css/components/_control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
text-shadow: 0em 0em 1em rgba($primary-text, 1);
text-shadow: 0em 0em 1em rgba($primary-foreground-color, 1);
}

/* Hide control text visually, but have it available for screenreaders */
Expand Down
11 changes: 6 additions & 5 deletions src/css/components/_error.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@
content: 'X';
font-family: $text-font-family;
font-size: 4em;
color: $secondary-bg;
color: #fff;
/* In order to center the play icon vertically we need to set the line height
to the same as the button height */
line-height: 1;
text-shadow: 0.05em 0.05em 0.1em $primary-bg;
text-shadow: 0.05em 0.05em 0.1em #000;
text-align: center /* Needed for IE8 */;
vertical-align: middle;

Expand All @@ -39,9 +39,10 @@
text-align: center;
padding: 3px;

@include background-color-with-alpha($primary-bg, 0.5);
@include background-color-with-alpha(#000, 0.5);
}

.vjs-error-display a, .vjs-error-display a:visited {
color: $secondary-text;
.vjs-error-display a,
.vjs-error-display a:visited {
color: #66A8CC;
}
25 changes: 16 additions & 9 deletions src/css/components/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
vertical-align: top;
box-sizing: border-box;

color: $primary-text;
background-color: $primary-bg;
color: $primary-foreground-color;
background-color: #000;
position: relative;
padding: 0;
/* Start with 10px for base font size so other dimensions can be em based and
easily calculable. */
font-size: $base-font-size;
font-size: 10px;
line-height: 1;

/* Provide some basic defaults for fonts */
Expand Down Expand Up @@ -58,13 +58,19 @@
/* 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) {
padding-top: 100% * ($height/$width);
}

/* Not including a default AR in vjs-fluid because it would override
the user set AR injected into the header. */
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
width: 100%;
max-width: 100%;
height: 0;
padding-top: 100% * ($height/$width);
}

.video-js.vjs-fluid,
.video-js.vjs-16-9 {
@include apply-aspect-ratio(16, 9);
}
Expand Down Expand Up @@ -131,8 +137,8 @@ This optional paragraph inside the video tag can provide a message to users
about what's required to play video. */
.vjs-no-js {
padding: 20px;
color: $primary-text;
background-color: $primary-bg;
color: #fff;
background-color: #000;
font-size: 18px;
font-family: $text-font-family;
text-align: center;
Expand All @@ -141,6 +147,7 @@ about what's required to play video. */
margin: 0px auto;
}

.vjs-no-js a, .vjs-no-js a:visited {
color: $secondary-text;
.vjs-no-js a,
.vjs-no-js a:visited {
color: #66A8CC;
}
21 changes: 12 additions & 9 deletions src/css/components/_loading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@
margin: -25px 0 0 -25px;
opacity: 0.85;

border: 6px solid rgba(113, 119, 129, 0.75);
/* Need to fix centered page layouts */
text-align: left;

border: 6px solid rgba($primary-background-color, $primary-background-transparency);
// border: 6px solid rgba(43, 51, 63, 0.5);

box-sizing: border-box;
Expand Down Expand Up @@ -72,36 +75,36 @@

@keyframes vjs-spinner-fade {
0% {
border-top-color: #a6aab0;
border-top-color: $secondary-background-color;
}
20% {
border-top-color: #a6aab0;
border-top-color: $secondary-background-color;
}
35% {
border-top-color: white;
}
60% {
border-top-color: #a6aab0;
border-top-color: $secondary-background-color;
}
100% {
border-top-color: #a6aab0;
border-top-color: $secondary-background-color;
}
}

@-webkit-keyframes vjs-spinner-fade {
0% {
border-top-color: #a6aab0;
border-top-color: $secondary-background-color;
}
20% {
border-top-color: #a6aab0;
border-top-color: $secondary-background-color;
}
35% {
border-top-color: white;
}
60% {
border-top-color: #a6aab0;
border-top-color: $secondary-background-color;
}
100% {
border-top-color: #a6aab0;
border-top-color: $secondary-background-color;
}
}
23 changes: 14 additions & 9 deletions src/css/components/_progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
}
}
.video-js .vjs-play-progress {
background-color: $primary-text;
background-color: $primary-foreground-color;
@extend .vjs-icon-circle;

// Progress handle
Expand All @@ -89,10 +89,10 @@
top: -2.4em;
right: -1.5em;
font-size: 0.9em;
color: $primary-bg;
color: #000;
content: attr(data-current-time);
padding: 0.2em 0.5em;
@include background-color-with-alpha($primary-text, 0.8);
@include background-color-with-alpha(#fff, 0.8);
@include border-radius(0.3em);
}
.video-js .vjs-play-progress:before,
Expand All @@ -101,14 +101,19 @@
}

.video-js .vjs-load-progress {
background: rgb(100, 100, 100) /* IE8- Fallback */;
background: rgba(255, 255, 255, 0.2);
/* For IE8 we'll lighten the color */
background: ligthen($secondary-background-color, 25%);
/* Otherwise we'll rely on stacked opacities */
background: rgba($secondary-background-color, $secondary-background-transparency);
}

/* there are child elements of the load progress bar that represent the
specific time ranges that have been buffered */
.video-js .vjs-load-progress div {
background: rgba($secondary-bg, 0.1);
/* For IE8 we'll lighten the color */
background: ligthen($secondary-background-color, 50%);
/* Otherwise we'll rely on stacked opacities */
background: rgba($secondary-background-color, 0.75);
}

.video-js.vjs-no-flex .vjs-progress-control {
Expand All @@ -120,7 +125,7 @@ specific time ranges that have been buffered */
position: absolute;
width: 1px;
height: 100%;
background-color: $primary-bg;
background-color: #000;
z-index: 1;
}
.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
Expand All @@ -141,6 +146,6 @@ specific time ranges that have been buffered */
display: none;
}
.video-js .vjs-progress-control .vjs-mouse-display:after {
color: $primary-text;
@include background-color-with-alpha($primary-bg, 0.8);
color: #fff;
@include background-color-with-alpha(#000, 0.8);
}
6 changes: 3 additions & 3 deletions src/css/components/_slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
padding: 0;
margin: 0 0.45em 0 0.45em;

@include background-color-with-alpha($secondary-bg, 0.9);
@include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
}

.video-js .vjs-slider:focus {
text-shadow: 0em 0em 1em rgba($primary-text, 1);
text-shadow: 0em 0em 1em rgba($primary-foreground-color, 1);

@include box-shadow(0 0 1em $primary-text);
@include box-shadow(0 0 1em $primary-foreground-color);
}
2 changes: 1 addition & 1 deletion src/css/components/_text-track.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
text-align: center;
margin-bottom: 0.1em;
/* Transparent black background, or fallback to all black (oldIE) */
@include background-color-with-alpha($primary-bg, 0.5);
@include background-color-with-alpha(#000, 0.5);
}

.vjs-subtitles { color: #fff /* Subtitles are white */; }
Expand Down
8 changes: 7 additions & 1 deletion src/css/components/_volume.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
bottom: 0;
left: 0;

background-color: $primary-text;
background-color: $primary-foreground-color;

@extend .vjs-icon-circle;

Expand Down Expand Up @@ -121,3 +121,9 @@ width and height to zero. */
height: 2.9em;
width: 8em;
}

.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
/* An inline volume should never have a menu background color.
This protects it from external changes to background colors. */
background-color: transparent !important;
}
4 changes: 2 additions & 2 deletions src/css/components/menu/_menu-popup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
left: -3em; /* (Width of vjs-menu - width of button) / 2 */
height: 0em;
margin-bottom: 1.5em;
border-top-color: rgba(7, 40, 50, $control-bar--transparency); /* Same as ul background */
border-top-color: rgba($primary-background-color, $primary-background-transparency); /* Same as ul background */
}

/* Button Pop-up Menu */
.vjs-menu-button-popup .vjs-menu ul {
@include background-color-with-alpha($primary-bg, 0.7);
@include background-color-with-alpha($primary-background-color, $primary-background-transparency);

position: absolute;
width: 100%;
Expand Down
15 changes: 7 additions & 8 deletions src/css/components/menu/_menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,17 @@
text-transform: lowercase;
}

.vjs-menu li.vjs-selected {
background-color: $primary-bg;
.vjs-menu li:focus,
.vjs-menu li:hover {
outline: 0;
@include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
}

.vjs-menu li:focus,
.vjs-menu li:hover,
.vjs-menu li.vjs-selected,
.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);
background-color: $primary-foreground-color;
color: $primary-background-color;
}

.vjs-menu li.vjs-menu-title {
Expand Down
2 changes: 1 addition & 1 deletion src/js/control-bar/progress-control/play-progress-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class PlayProgressBar extends Component {
*/
createEl() {
return super.createEl('div', {
className: 'vjs-play-progress',
className: 'vjs-play-progress vjs-slider-bar',
innerHTML: `<span class="vjs-control-text"><span>${this.localize('Progress')}</span>: 0%</span>`
});
}
Expand Down
Loading