aboutsummaryrefslogtreecommitdiffstats
path: root/assets/less
diff options
context:
space:
mode:
Diffstat (limited to 'assets/less')
-rw-r--r--assets/less/simple-media.less200
1 files changed, 113 insertions, 87 deletions
diff --git a/assets/less/simple-media.less b/assets/less/simple-media.less
index edf9b059..338a4706 100644
--- a/assets/less/simple-media.less
+++ b/assets/less/simple-media.less
@@ -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;
}