aboutsummaryrefslogtreecommitdiffstats
path: root/src/less/plyr.less
diff options
context:
space:
mode:
Diffstat (limited to 'src/less/plyr.less')
-rw-r--r--src/less/plyr.less431
1 files changed, 431 insertions, 0 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less
new file mode 100644
index 00000000..c1facb67
--- /dev/null
+++ b/src/less/plyr.less
@@ -0,0 +1,431 @@
+// ==========================================================================
+// HTML5 Media Player
+// ==========================================================================
+
+// Variables
+// -------------------------------
+// Colors
+@blue: #3498DB;
+@gray-dark: #343f4a;
+@gray: #565d64;
+@gray-light: #cbd0d3;
+
+// Controls
+@controls-bg: @gray-dark;
+@control-color: @gray-light;
+@control-color-active: @blue;
+@control-color-inactive: @gray;
+@control-spacing: 10px;
+
+// Progress
+@progress-bg: lighten(@gray, 10%);
+@progress-playing-bg: @blue;
+@progress-buffered-bg: @gray;
+
+// Range
+@range-track-height: 6px;
+@range-track-bg: @gray;
+@range-thumb-height: (@range-track-height * 2);
+@range-thumb-width: (@range-track-height * 2);
+@range-thumb-bg: @control-color;
+@range-thumb-bg-focus: @control-color-active;
+
+// Breakpoints
+@bp-control-split: 560px; // When controls split into left/right
+@bg-captions-large: 768px; // When captions jump to the larger font size
+
+// Utility classes & mixins
+// -------------------------------
+// Screen reader only
+.sr-only {
+ position: absolute !important;
+ clip: rect(1px, 1px, 1px, 1px);
+ padding: 0 !important;
+ border: 0 !important;
+ height: 1px !important;
+ width: 1px !important;
+ overflow: hidden;
+}
+// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
+.clearfix() {
+ zoom: 1;
+ &:before,
+ &:after { content: ""; display: table; }
+ &:after { clear: both; }
+}
+
+// Tab focus styles
+.tab-focus() {
+ outline: thin dotted #000;
+ outline-offset: 1px;
+}
+
+// Range styling
+// ---------------------------------------
+.range-thumb() {
+ height: @range-thumb-height;
+ width: @range-thumb-width;
+ background: @range-thumb-bg;
+ border: 0;
+ border-radius: (@range-thumb-height / 2);
+ transition: background .3s ease;
+ cursor: ew-resize;
+}
+.range-track() {
+ height: @range-track-height;
+ background: @range-track-bg;
+ border: 0;
+ border-radius: (@range-track-height / 2);
+}
+
+// Font smoothing
+// ---------------------------------------
+.font-smoothing(@mode: on) when (@mode = on) {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+}
+.font-smoothing(@mode: on) when (@mode = off) {
+ -moz-osx-font-smoothing: auto;
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+// Styles
+// -------------------------------
+// Base
+.player {
+ position: relative;
+ max-width: 100%;
+ min-width: 290px;
+ overflow: hidden; // For the controls
+
+ // border-box everything
+ // http://paulirish.com/2012/box-sizing-border-box-ftw/
+ &,
+ *,
+ *::after,
+ *::before {
+ box-sizing: border-box;
+ }
+
+ // For video
+ &-video-wrapper {
+ position: relative;
+ }
+ video {
+ width: 100%;
+ height: auto;
+ vertical-align: middle;
+ }
+
+ // Captions
+ &-captions {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding: 20px;
+ min-height: 2.5em;
+ color: #fff;
+ font-size: 16px;
+ font-weight: 600;
+ text-shadow:
+ -1px -1px 0 @gray,
+ 1px -1px 0 @gray,
+ -1px 1px 0 @gray,
+ 1px 1px 0 @gray;
+ text-align: center;
+ .font-smoothing();
+
+ @media (min-width: @bg-captions-large) {
+ font-size: 24px;
+ }
+ }
+ &.captions-active &-captions {
+ display: block;
+ }
+
+ // Player controls
+ &-controls {
+ .clearfix();
+ .font-smoothing();
+ position: relative;
+ padding: (@control-spacing * 2) @control-spacing @control-spacing;
+ background: @controls-bg;
+ line-height: 1;
+ text-align: center;
+
+ // Layout
+ &-sound {
+ display: block;
+ margin: @control-spacing auto 0;
+ }
+ @media (min-width: @bp-control-split) {
+ &-playback {
+ float: left;
+ }
+ &-sound {
+ float: right;
+ margin-top: 0;
+ }
+ }
+
+ input + label,
+ button {
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0 2px;
+ padding: (@control-spacing / 2) @control-spacing;
+
+ transition: background .3s ease;
+ border-radius: 3px;
+ cursor: pointer;
+
+ svg {
+ width: 18px;
+ height: 18px;
+ display: block;
+ fill: currentColor;
+ transition: fill .3s ease;
+ }
+ }
+ input + label,
+ input.inverted:checked + label {
+ color: @control-color-inactive;
+ }
+ button,
+ input.inverted + label,
+ input:checked + label {
+ color: @control-color;
+ }
+ button {
+ border: 0;
+ background: transparent;
+ overflow: hidden;
+ }
+ input:focus + label,
+ button:focus {
+ .tab-focus();
+ color: #fff;
+ }
+ button:hover,
+ input + label:hover {
+ background: @control-color-active;
+ color: #fff;
+ }
+ .icon-exit-fullscreen,
+ .icon-muted {
+ display: none;
+ }
+ .player-time {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: @control-spacing;
+ color: #fff;
+ font-weight: 600;
+ font-size: 14px;
+ .font-smoothing();
+ }
+ }
+
+ // Player progress
+ // <progress> element
+ &-progress {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: @control-spacing;
+ background: @progress-bg;
+
+ &-buffer,
+ &-played {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ vertical-align: top;
+
+ &[value] {
+ -webkit-appearance: none;
+ border: none;
+ background: transparent;
+
+
+ &::-webkit-progress-bar {
+ background: transparent;
+ }
+
+ // Inherit from currentColor;
+ &::-webkit-progress-value {
+ background: currentColor;
+ transition: width .1s ease;
+ }
+ &::-moz-progress-bar {
+ background: currentColor;
+ transition: width .1s ease;
+ }
+ }
+ }
+ &-played {
+ z-index: 2;
+ }
+ &-played[value] {
+ cursor: pointer;
+ color: @progress-playing-bg;
+ }
+ &-buffer[value] {
+ color: @progress-buffered-bg;
+ }
+ }
+
+ // States
+ &-controls [data-player='pause'],
+ &.playing .player-controls [data-player='play'] {
+ display: none;
+ }
+ &.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']> element
+ &-volume {
+ vertical-align: middle;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ //height: 6px;
+ width: 100px;
+ margin: 0 @control-spacing 0 0;
+ padding: 0;
+ cursor: pointer;
+ background: none;
+
+ // Webkit
+ &::-webkit-slider-runnable-track {
+ .range-track();
+ }
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ margin-top: -((@range-thumb-height - @range-track-height) / 2);
+ .range-thumb();
+ }
+
+ // Mozilla
+ &::-moz-range-track {
+ .range-track();
+ }
+ &::-moz-range-thumb {
+ .range-thumb();
+ }
+
+ // Microsoft
+ &::-ms-track {
+ height: @range-track-height;
+ background: transparent;
+ border-color: transparent;
+ border-width: ((@range-thumb-height - @range-track-height) / 2) 0;
+ color: transparent;
+ }
+ &::-ms-fill-lower,
+ &::-ms-fill-upper {
+ .range-track();
+ }
+ &::-ms-thumb {
+ .range-thumb();
+ }
+
+ &:focus {
+ outline: 0;
+
+ &::-webkit-slider-thumb {
+ background: @range-thumb-bg-focus;
+ }
+ &::-moz-range-thumb {
+ background: @range-thumb-bg-focus;
+ }
+ &::-ms-thumb {
+ background: @range-thumb-bg-focus;
+ }
+ }
+ }
+
+ // Full screen mode
+ &-fullscreen,
+ &.fullscreen-active {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 10000000;
+
+ .player-video-wrapper {
+ height: 100%;
+ width: 100%;
+
+ video {
+ height: 100%;
+ }
+ .player-captions {
+ top: auto;
+ bottom: 90px;
+
+ @media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) {
+ bottom: 60px;
+ }
+ @media (min-width: @bg-captions-large) {
+ bottom: 80px;
+ }
+ }
+ }
+ .player-controls {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ .icon-exit-fullscreen {
+ display: block;
+
+ & + svg {
+ display: none;
+ }
+ }
+ }
+ }
+
+ // Some options are hidden by default
+ [data-player='captions'],
+ [data-player='captions'] + label,
+ [data-player='fullscreen'],
+ [data-player='fullscreen'] + label {
+ display: none;
+ }
+ &.captions-enabled [data-player='captions'],
+ &.captions-enabled [data-player='captions'] + label,
+ &.fullscreen-enabled [data-player='fullscreen'],
+ &.fullscreen-enabled [data-player='fullscreen'] + label {
+ display: inline-block;
+ }
+
+ // Full browser view hides toggle
+ &-fullscreen [data-player='fullscreen'],
+ &-fullscreen [data-player='fullscreen'] + label {
+ display: none !important;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-13 21:40:54 +0000