diff options
Diffstat (limited to 'assets/less')
-rw-r--r-- | assets/less/simple-media.less | 200 |
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; } |