Permalink
Browse files

Improve timeslider UI and controlbar background (#2246)

* Force strict math in Less

* Reduce browserslist matches

* Add some useful Less mixins

* Timeslider and controls overlay refinements

* Add hover and focus states to buttons

* Adjust display view and control bar sizing
  • Loading branch information...
radium-v authored and egreaves committed Aug 21, 2017
1 parent a4aa0ee commit af6fb77963ab96e5fc9bfa63441fe23b7f099147
View
@@ -72,7 +72,6 @@
"selector-pseudo-class-case": "lower",
"selector-pseudo-class-no-unknown": true,
"selector-pseudo-element-case": "lower",
"selector-pseudo-element-colon-notation": "single",
"selector-pseudo-element-no-unknown": [
true,
{ "ignorePseudoElements": ["cue"] }
View
@@ -42,7 +42,8 @@ module.exports = function(grunt) {
less: {
options: {
compress: false,
paths: ['src/css', 'src/css/*']
paths: ['src/css', 'src/css/*'],
strictMath: true
},
internal: {
options: {
View
@@ -1,4 +1,3 @@
> 1%
Last 10 Chrome versions
Last 10 ChromeAndroid versions
Last 10 Firefox versions
@@ -9,5 +8,3 @@ IE 11
ExplorerMobile 11
iOS >= 9.2
Android >= 4.4
View
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path fill="#FFF" d="M6,0l6,-6H0Z"/></svg>
@@ -50,6 +50,8 @@
.jw-progress {
background-color: #0b7ef4;
height: 8px;
transform: none;
top: auto;
}
}
@@ -12,7 +12,7 @@
/* captions styles code specific to native text track rendering */
video::-webkit-media-text-track-container {
/* need to compensate for the control bar being 3.75em on mobile */
max-height: ~"calc(100% - 60px)";
max-height: calc(100% - 60px);
}
}
@@ -29,7 +29,7 @@
&.jw-flag-casting {
.jw-nextup-container {
bottom: @mobile-touch-target * 1.5;
bottom: (@mobile-touch-target * 1.5);
}
&.jw-state-idle {
@@ -10,7 +10,6 @@
left: 0;
bottom: 0;
width: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.5) 100%);
border: none;
border-radius: 0;
background-size: auto;
@@ -22,7 +21,7 @@
&:after {
content: "";
display: block;
height: @mobile-touch-target * 0.5;
height: (@mobile-touch-target * 0.5);
}
}
@@ -39,6 +38,30 @@
flex: 1 1 auto;
align-self: stretch;
}
.jw-icon.jw-button-color {
&::after {
&:extend(._pseudo, ._bottom);
.rect(24px, 2px);
background: currentColor;
opacity: 0;
transform: translate(0, 100%);
transition: 150ms ease-in-out;
transition-property: opacity, transform;
}
&:hover,
&:focus {
&::after {
opacity: 1;
transform: translate(0, 0);
}
}
&:active {
color: @hover-color;
}
}
}
.jw-button-container {
@@ -47,6 +70,8 @@
flex: 1 1 auto;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 12px;
> .jw-icon:not(.jw-text) {
font-size: 20px;
@@ -70,13 +95,16 @@
background-color: transparent;
}
.jw-icon-inline {
position: relative;
}
.jw-icon-inline,
.jw-icon-tooltip {
display: flex;
.square(@mobile-touch-target);
align-items: center;
display: flex;
justify-content: center;
width: @mobile-touch-target;
height: @mobile-touch-target;
}
.jw-icon-inline,
@@ -93,7 +121,7 @@
}
.jw-selection-menu {
padding: 0 @ui-padding / 2;
padding: 0 (@ui-padding / 2);
}
.jw-knob,
@@ -136,7 +164,7 @@
&.jw-flag-small-player {
.jw-display {
padding-top: @mobile-touch-target;
padding-bottom: @mobile-touch-target * 1.5;
padding-bottom: (@mobile-touch-target * 1.5);
}
}
@@ -190,7 +218,7 @@
}
}
&:not(.jw-breakpoint-0) {
.jwplayer:not(.jw-breakpoint-0) {
.jw-text-duration {
&:before {
content: "/";
@@ -60,8 +60,8 @@ display icons
line-height: 75px;
&:before {
width: @mobile-touch-target * 0.75;
height: @mobile-touch-target * 0.75;
width: (@mobile-touch-target * 0.75);
height: (@mobile-touch-target * 0.75);
position: relative;
}
}
@@ -87,43 +87,43 @@ display icons
line-height: @mobile-touch-target;
&:before {
height: @mobile-touch-target * 0.5;
width: @mobile-touch-target * 0.5;
height: (@mobile-touch-target * 0.5);
width: (@mobile-touch-target * 0.5);
}
}
}
.jw-breakpoint-1 {
.jw-display .jw-icon,
.jw-display .jw-svg-icon {
height: @mobile-touch-target * 1.25;
line-height: @mobile-touch-target * 1.25;
width: @mobile-touch-target * 1.25;
height: (@mobile-touch-target * 1.25);
line-height: (@mobile-touch-target * 1.25);
width: (@mobile-touch-target * 1.25);
&:before {
width: @mobile-touch-target * 0.5;
height: @mobile-touch-target * 0.5;
width: (@mobile-touch-target * 0.5);
height: (@mobile-touch-target * 0.5);
}
}
.jw-display .jw-icon {
&.jw-icon-rewind:before {
width: @mobile-touch-target * 0.75;
height: @mobile-touch-target * 0.75;
width: (@mobile-touch-target * 0.75);
height: (@mobile-touch-target * 0.75);
}
}
}
.jw-breakpoint-3 {
.jw-display .jw-icon,
.jw-display .jw-svg-icon {
height: @mobile-touch-target * 1.75;
line-height: @mobile-touch-target * 1.75;
width: @mobile-touch-target * 1.75;
height: (@mobile-touch-target * 1.75);
line-height: (@mobile-touch-target * 1.75);
width: (@mobile-touch-target * 1.75);
&:before {
height: @mobile-touch-target * 0.875;
width: @mobile-touch-target * 0.875;
height: (@mobile-touch-target * 0.875);
width: (@mobile-touch-target * 0.875);
}
}
}
@@ -134,9 +134,9 @@ display icons
.jw-breakpoint-7 {
.jw-display .jw-icon,
.jw-display .jw-svg-icon {
height: @mobile-touch-target * 2;
line-height: @mobile-touch-target * 2;
width: @mobile-touch-target * 2;
height: (@mobile-touch-target * 2);
line-height: (@mobile-touch-target * 2);
width: (@mobile-touch-target * 2);
&:before {
width: @mobile-touch-target;
@@ -1,16 +1,14 @@
@import "../../shared-imports/mixins";
.jw-svg-icon {
width: 24px;
height: 24px;
pointer-events: none;
.square(24px);
fill: currentColor;
pointer-events: none;
}
.jw-icon {
.rect(24px, 100%);
background-color: transparent;
width: 24px;
height: 100%;
}
.jw-icon-airplay {
@@ -1,31 +1,39 @@
@import "../../shared-imports/mixins";
@import "icons";
.jw-overlays,
.jw-controls {
&:extend(._stretch, ._topleft, ._bottomright);
pointer-events: none; // Allow pointer events through to the provider
}
.jw-overlays {
cursor: auto;
/* Allow pointer events through to the provider */
pointer-events: none;
}
.jw-controls {
overflow: hidden;
/* Allow pointer events through to the provider */
pointer-events: none;
z-index: 0;
}
.jw-overlays,
.jw-controls {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
&::after {
&:extend(._pseudo, ._stretch, ._topleft);
background: linear-gradient(to top, rgba(47, 53, 66, 0.35) 0, rgba(47, 53, 66, 0.35) 10%, transparent 100%) no-repeat transparent;
opacity: 1;
pointer-events: none;
transform: scale(1, 1);
transition: 250ms cubic-bezier(0, 0.25, 0.25, 1);
transition-property: opacity, transform;
z-index: -1;
.jw-flag-small-player .jw-controls {
text-align: center;
.jwplayer.jw-state-playing.jw-flag-user-inactive:not(.jw-flag-casting) & {
opacity: 0;
transform: scale(1, 0);
}
}
.jw-flag-small-player & {
text-align: center;
}
}
.jw-text {
@@ -34,7 +42,7 @@
font-size: @font-size;
font-style: normal;
font-weight: normal;
color: #fff;
color: @white;
text-align: center;
font-variant: normal;
font-stretch: normal;
@@ -46,11 +54,7 @@
.jw-display-icon-container,
.jw-display-icon-container .jw-icon,
.jw-nextup-container,
.jw-autostart-mute {
pointer-events: all;
}
/* These items can intercept pointer-events */
.jw-autostart-mute,
.jw-overlays .jw-plugin {
pointer-events: all;
}
@@ -44,7 +44,7 @@
// padding comes from the anchor, so that the whole item is clickable
padding: 1em;
display: block;
font-size: 11/16em;
font-size: (11 / 16em);
line-height: 1em;
border: 0;
}
@@ -8,8 +8,8 @@
align-items: flex-start;
bottom: @controlbar-height;
right: 0;
height: ~"calc(100% - @{controlbar-height})";
width: ~"calc(100%)";
height: calc(100% - @controlbar-height);
width: calc(100%);
background-color: rgba(0, 0, 0, 0.8);
pointer-events: auto;
@@ -31,6 +31,10 @@
width: 200px;
right: 12px;
}
.jw-icon.jw-button-color {
&:extend(.jw-controlbar .jw-icon.jw-button-color all);
}
}
.jw-settings-topbar {
Oops, something went wrong.

0 comments on commit af6fb77

Please sign in to comment.