aboutsummaryrefslogtreecommitdiffstats
path: root/assets/less/plyr.less
diff options
context:
space:
mode:
Diffstat (limited to 'assets/less/plyr.less')
-rw-r--r--assets/less/plyr.less431
1 files changed, 0 insertions, 431 deletions
diff --git a/assets/less/plyr.less b/assets/less/plyr.less
deleted file mode 100644
index c1facb67..00000000
--- a/assets/less/plyr.less
+++ /dev/null
@@ -1,431 +0,0 @@
-// ==========================================================================
-// 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-08-30 06:11:35 +0000