Improved plugin syntax, refactoring...
This commit is contained in:
Sam Potts
@ -5,26 +5,21 @@
|
||||
// Variables
|
||||
// -------------------------------
|
||||
// Colors
|
||||
@base-color: #2E3C44;
|
||||
@green: #1ABC9C;
|
||||
@red: #D44334;
|
||||
@blue: #3498DB;
|
||||
|
||||
// Grays
|
||||
@gray-dark: #343f4a;
|
||||
@gray: #565d64;
|
||||
@gray-light: #6f7e86;
|
||||
@gray-lighter: #859093;
|
||||
@gray-lightest: #cbd0d3;
|
||||
@gray-light-mega: #dadfe2;
|
||||
@off-white: #f9fafb;
|
||||
@blue: #3498DB;
|
||||
@gray-dark: #343f4a;
|
||||
@gray: #565d64;
|
||||
@gray-light: #cbd0d3;
|
||||
|
||||
// Controls
|
||||
@control-color: @gray-lightest;
|
||||
@control-color-active: @blue;
|
||||
@control-color-inactive: @gray;
|
||||
@control-spacing: 10px;
|
||||
@controls-bg: @gray-dark;
|
||||
@control-color: @gray-light;
|
||||
@control-color-active: @blue;
|
||||
@control-color-inactive: @gray;
|
||||
@control-spacing: 10px;
|
||||
|
||||
// Progress
|
||||
@progress-bg: @gray;
|
||||
@progress-value-bg: @blue;
|
||||
|
||||
// BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
|
||||
// -------------------------------
|
||||
@ -37,6 +32,7 @@
|
||||
|
||||
// Utility classes & mixins
|
||||
// -------------------------------
|
||||
// Screen reader only
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
@ -46,12 +42,6 @@
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.show-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
|
||||
.clearfix() {
|
||||
zoom: 1;
|
||||
@ -59,6 +49,13 @@
|
||||
&:after { content: ""; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
|
||||
// Tab focus styles
|
||||
.tab-focus() {
|
||||
outline: thin dotted #000;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// ---------------------------------------
|
||||
.font-smoothing(@mode: on) when (@mode = on) {
|
||||
@ -79,47 +76,21 @@
|
||||
overflow: hidden; // For the controls
|
||||
background: #000;
|
||||
|
||||
|
||||
// For video
|
||||
&-video {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:fullscreen {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&-video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.icon-exit-fullscreen {
|
||||
display: block;
|
||||
|
||||
& + svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.px-video-captions {
|
||||
|
||||
// Captions
|
||||
&-captions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -132,13 +103,26 @@
|
||||
text-align: center;
|
||||
.font-smoothing();
|
||||
}
|
||||
&.captions &-captions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Player controls
|
||||
&-controls {
|
||||
.clearfix();
|
||||
.font-smoothing();
|
||||
position: relative;
|
||||
padding: (@control-spacing * 2) @control-spacing @control-spacing;
|
||||
background: @gray-dark;
|
||||
background: @controls-bg;
|
||||
line-height: 1;
|
||||
|
||||
// Layout
|
||||
&-playback {
|
||||
float: left;
|
||||
}
|
||||
&-sound {
|
||||
float: right;
|
||||
}
|
||||
|
||||
input + label,
|
||||
button {
|
||||
@ -152,6 +136,8 @@
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
transition: fill .3s ease;
|
||||
@ -170,25 +156,28 @@
|
||||
border: 0;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
button:hover,
|
||||
button:focus,
|
||||
label:hover,
|
||||
input:focus + label {
|
||||
label:hover {
|
||||
background: @control-color-active;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
.icon-exit-fullscreen {
|
||||
input:focus + label,
|
||||
button:focus {
|
||||
.tab-focus();
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
.icon-exit-fullscreen,
|
||||
.icon-muted {
|
||||
display: none;
|
||||
}
|
||||
.px-video-time {
|
||||
.player-time {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: @control-spacing;
|
||||
@ -198,7 +187,9 @@
|
||||
.font-smoothing();
|
||||
}
|
||||
}
|
||||
progress {
|
||||
|
||||
// Player progress
|
||||
&-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -211,45 +202,48 @@
|
||||
&[value] {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
background: @gray;
|
||||
background: @progress-bg;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: @gray;
|
||||
background: @progress-bg;
|
||||
}
|
||||
|
||||
// The value
|
||||
&::-webkit-progress-value {
|
||||
background: @control-color-active;
|
||||
background: @progress-value-bg;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: @control-color-active;
|
||||
background: @progress-value-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.play-controls {
|
||||
float: left;
|
||||
}
|
||||
.sound-controls {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&-controls .px-video-pause,
|
||||
&.playing .player-controls .px-video-play {
|
||||
// States
|
||||
&-controls [data-player='pause'],
|
||||
&.playing .player-controls [data-player='play'] {
|
||||
display: none;
|
||||
}
|
||||
&.playing .player-controls .px-video-pause {
|
||||
&.playing .player-controls [data-player='pause'] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Muted
|
||||
&.muted .player-controls .icon-muted {
|
||||
display: block;
|
||||
|
||||
& + svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Volume control
|
||||
input[type='range'] {
|
||||
&-volume {
|
||||
-webkit-appearance: none;
|
||||
height: 6px;
|
||||
width: 100px;
|
||||
margin-right: @control-spacing;
|
||||
background: @gray;
|
||||
outline: 0;
|
||||
border-radius: 10px;
|
||||
|
||||
&::-moz-range-track {
|
||||
@ -274,27 +268,59 @@
|
||||
background: @control-color;
|
||||
border-radius: 100%;
|
||||
}
|
||||
&:focus::-webkit-slider-thumb {
|
||||
background: @control-color-active;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background: @control-color-active;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
background: @control-color-active;
|
||||
}
|
||||
}
|
||||
&:focus::-moz-range-thumb {
|
||||
background: @control-color-active;
|
||||
}
|
||||
|
||||
// Full screen mode
|
||||
&:fullscreen {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.player-video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.player-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.icon-exit-fullscreen {
|
||||
display: block;
|
||||
|
||||
& + svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* fixing display for IE10+ */
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.px-video-controls input[type='range'] {
|
||||
.video-controls .player-volume {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 8px;
|
||||
top: -3px;
|
||||
}
|
||||
.px-video-time {
|
||||
.player-time {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.px-video-captions {
|
||||
.player-captions {
|
||||
padding: 8px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user