chore: SASS clean up
This commit is contained in:
Sam Potts
parent
950786b117
commit
675a853e2e
@ -2,8 +2,8 @@
|
||||
// Plyr.io Demo Page
|
||||
// ==========================================================================
|
||||
@charset 'UTF-8';
|
||||
|
||||
@import '../../../../src/sass/lib/css-vars';
|
||||
|
||||
$css-vars-use-native: true;
|
||||
|
||||
// Settings
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
|
||||
&.tab-focus {
|
||||
@include tab-focus();
|
||||
@include tab-focus;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@ -64,7 +64,7 @@
|
||||
|
||||
// Count bubble
|
||||
.button__count {
|
||||
animation: fadein 0.2s ease;
|
||||
animation: fade-in 0.2s ease;
|
||||
background: $color-button-count-background;
|
||||
color: $color-button-count-text;
|
||||
margin-left: ($spacing-base * 0.75);
|
||||
|
||||
@ -7,7 +7,7 @@ header {
|
||||
text-align: center;
|
||||
|
||||
h1 span {
|
||||
animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
|
||||
animation: shrink-hide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
|
||||
display: inline-block;
|
||||
font-weight: $font-weight-light;
|
||||
opacity: 0.5;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
// Make a <button> look like an <a>
|
||||
button.faux-link {
|
||||
@extend a; // stylelint-disable-line
|
||||
@include cancel-button-styles();
|
||||
@include cancel-button-styles;
|
||||
}
|
||||
|
||||
// Links
|
||||
@ -39,7 +39,7 @@ a {
|
||||
}
|
||||
|
||||
&.tab-focus {
|
||||
@include tab-focus();
|
||||
@include tab-focus;
|
||||
}
|
||||
|
||||
&.no-border::after {
|
||||
|
||||
@ -3,23 +3,26 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Fade
|
||||
@keyframes fadein {
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shrinkHide {
|
||||
@keyframes shrink-hide {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
20% {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-family: Gordita;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-light;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-family: Gordita;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-regular;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-family: Gordita;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-medium;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-family: Gordita;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-bold;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-family: Gordita;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-black;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
text-shadow: inherit;
|
||||
-moz-user-select: text; // stylelint-disable-line
|
||||
user-select: text;
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
17
demo/src/sass/lib/normalize.scss
vendored
17
demo/src/sass/lib/normalize.scss
vendored
@ -11,8 +11,7 @@
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
@ -89,7 +88,7 @@ hr {
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-family: monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
@ -103,7 +102,7 @@ pre {
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@ -112,7 +111,7 @@ a {
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
border-bottom: 0; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
@ -281,7 +280,7 @@ button,
|
||||
html [type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@ -375,7 +374,7 @@ textarea {
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
@ -385,7 +384,7 @@ textarea {
|
||||
|
||||
[type='search']::-webkit-search-cancel-button,
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -394,7 +393,7 @@ textarea {
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Grayscale
|
||||
$color-gray-900: hsl(210, 15%, 16%);
|
||||
$color-gray-900: hsl(210deg 15% 16%);
|
||||
$color-gray-800: lighten($color-gray-900, 9%);
|
||||
$color-gray-700: lighten($color-gray-800, 9%);
|
||||
$color-gray-600: lighten($color-gray-700, 9%);
|
||||
@ -15,7 +15,7 @@ $color-gray-100: lighten($color-gray-200, 9%);
|
||||
$color-gray-50: lighten($color-gray-100, 9%);
|
||||
|
||||
// Branding
|
||||
$color-brand-primary: hsl(198, 100%, 50%);
|
||||
$color-brand-primary: hsl(198deg 100% 50%);
|
||||
|
||||
// Text
|
||||
$color-text: $color-gray-700;
|
||||
@ -28,13 +28,13 @@ $color-twitter: #4baaf4;
|
||||
$color-link: $color-brand-primary;
|
||||
|
||||
// Background
|
||||
$color-background-from: hsl(198, 100%, 94%);
|
||||
$color-background-to: hsl(198, 100%, 98%);
|
||||
$color-background-from: hsl(198deg 100% 94%);
|
||||
$color-background-to: hsl(198deg 100% 98%);
|
||||
|
||||
// Buttons
|
||||
$color-button-background: $color-brand-primary;
|
||||
$color-button-text: #fff;
|
||||
$color-button-background-hover: hsl(198, 100%, 55%);
|
||||
$color-button-background-hover: hsl(198deg 100% 55%);
|
||||
$color-button-count-background: #fff;
|
||||
$color-button-count-text: $color-gray-600;
|
||||
|
||||
|
||||
@ -4,18 +4,14 @@
|
||||
|
||||
$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol';
|
||||
|
||||
$font-size-base: 15;
|
||||
$font-size-small: 13;
|
||||
$font-size-large: 18;
|
||||
$font-size-h1: 64;
|
||||
|
||||
$font-weight-light: 300;
|
||||
$font-weight-regular: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-bold: 600;
|
||||
$font-weight-black: 900;
|
||||
|
||||
$line-height-base: 1.75;
|
||||
|
||||
$letter-spacing-headings: -0.025em;
|
||||
|
||||
@ -8,8 +8,9 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
@include font-smoothing();
|
||||
@include font-smoothing;
|
||||
@include font-size($font-size-base);
|
||||
|
||||
color: $color-text;
|
||||
font-family: $font-sans-serif;
|
||||
font-weight: $font-weight-medium;
|
||||
@ -30,5 +31,6 @@ small {
|
||||
|
||||
small {
|
||||
@include font-size($font-size-small);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
h1 {
|
||||
@include font-size($font-size-h1);
|
||||
|
||||
color: $color-headings;
|
||||
font-weight: $font-weight-bold;
|
||||
letter-spacing: $letter-spacing-headings;
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
// Base
|
||||
.plyr {
|
||||
@include plyr-font-smoothing($plyr-font-smoothing);
|
||||
|
||||
align-items: center;
|
||||
direction: ltr;
|
||||
display: flex;
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
|
||||
// Tab focus
|
||||
&.plyr__tab-focus {
|
||||
@include plyr-tab-focus();
|
||||
@include plyr-tab-focus;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -56,6 +56,7 @@
|
||||
.plyr [data-plyr='fullscreen'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plyr--captions-enabled [data-plyr='captions'],
|
||||
.plyr--pip-supported [data-plyr='pip'],
|
||||
.plyr--airplay-supported [data-plyr='airplay'],
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
.plyr__control svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.plyr__control[aria-expanded='true'] {
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
@ -73,10 +74,7 @@
|
||||
color: $plyr-menu-color;
|
||||
display: flex;
|
||||
font-size: $plyr-font-size-menu;
|
||||
padding-bottom: calc(#{$plyr-control-padding} / 1.5);
|
||||
padding-left: calc(#{$plyr-control-padding} * 1.5);
|
||||
padding-right: calc(#{$plyr-control-padding} * 1.5);
|
||||
padding-top: calc(#{$plyr-control-padding} / 1.5);
|
||||
padding: calc(#{$plyr-control-padding} / 1.5) calc(#{$plyr-control-padding} * 1.5);
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
|
||||
@ -176,6 +174,7 @@
|
||||
&::before {
|
||||
background: $plyr-control-toggle-checked-background;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) scale(1);
|
||||
|
||||
@ -3,10 +3,11 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr--full-ui input[type='range'] {
|
||||
-webkit-appearance: none; /* stylelint-disable-line */
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: calc(#{$plyr-range-thumb-height} * 2);
|
||||
|
||||
// `color` property is used in JS to populate lower fill for WebKit
|
||||
color: $plyr-range-fill-background;
|
||||
display: block;
|
||||
@ -18,23 +19,25 @@
|
||||
width: 100%;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include plyr-range-track();
|
||||
@include plyr-range-track;
|
||||
|
||||
background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb();
|
||||
-webkit-appearance: none; /* stylelint-disable-line */
|
||||
@include plyr-range-thumb;
|
||||
|
||||
appearance: none;
|
||||
margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
|
||||
}
|
||||
|
||||
// Mozilla
|
||||
&::-moz-range-track {
|
||||
@include plyr-range-track();
|
||||
@include plyr-range-track;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb();
|
||||
@include plyr-range-thumb;
|
||||
}
|
||||
|
||||
&::-moz-range-progress {
|
||||
@ -45,22 +48,24 @@
|
||||
|
||||
// Microsoft
|
||||
&::-ms-track {
|
||||
@include plyr-range-track();
|
||||
@include plyr-range-track;
|
||||
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
@include plyr-range-track();
|
||||
@include plyr-range-track;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
@include plyr-range-track();
|
||||
@include plyr-range-track;
|
||||
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb();
|
||||
@include plyr-range-thumb;
|
||||
|
||||
// For some reason, Edge uses the -webkit margin above
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -70,25 +75,25 @@
|
||||
}
|
||||
|
||||
// Focus styles
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.plyr__tab-focus {
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include plyr-tab-focus();
|
||||
@include plyr-tab-focus;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include plyr-tab-focus();
|
||||
@include plyr-tab-focus;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
@include plyr-tab-focus();
|
||||
@include plyr-tab-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* stylelint-disable selector-max-compound-selectors */
|
||||
// --------------------------------------------------------------
|
||||
// Tooltips
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
// Downloaded from https://github.com/malyw/css-vars (and modified)
|
||||
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
|
||||
// global map to be filled via variables
|
||||
$css-vars: ();
|
||||
|
||||
@ -21,36 +24,35 @@ $css-vars-use-native: false !default;
|
||||
|
||||
///
|
||||
// Emulates var() CSS native function behavior
|
||||
//
|
||||
// $args[0] {String} "--" + variable name
|
||||
// [$args[1]] Optional default value if variable is not assigned yet
|
||||
//
|
||||
// E.G.:
|
||||
// color: var(--main-color);
|
||||
// background: var(--main-background, green);
|
||||
///
|
||||
@function var($args...) {
|
||||
// CHECK PARAMS
|
||||
@if (length($args) ==0) {
|
||||
@if length($args) == 0 {
|
||||
@error 'Variable name is expected to be passed to the var() function';
|
||||
}
|
||||
@if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
|
||||
|
||||
@if str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--' {
|
||||
@error "Variable name is expected to start from '--'";
|
||||
}
|
||||
|
||||
// PROCESS
|
||||
$var-name: nth($args, 1);
|
||||
$var-value: map-get($css-vars, $var-name);
|
||||
$var-name: list.nth($args, 1);
|
||||
$var-value: map.get($css-vars, $var-name);
|
||||
|
||||
@if ($css-vars-use-native) {
|
||||
@if $css-vars-use-native {
|
||||
// CSS variables
|
||||
// Native CSS: don't process function in case of native
|
||||
@return unquote('var(' + $args + ')');
|
||||
} @else {
|
||||
@if ($var-value == null) {
|
||||
@if not $var-value {
|
||||
// variable is not provided so far
|
||||
@if (length($args) == 2) {
|
||||
$var-value: nth($args, 2);
|
||||
@if length($args) == 2 {
|
||||
$var-value: list.nth($args, 2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,20 +72,21 @@ $css-vars-use-native: false !default;
|
||||
///
|
||||
@mixin css-vars($var-map: null) {
|
||||
// CHECK PARAMS
|
||||
@if ($var-map == null) {
|
||||
@if not $var-map {
|
||||
@error 'Map of variables is expected, instead got: null';
|
||||
}
|
||||
@if (type_of($var-map) != map) {
|
||||
|
||||
@if type_of($var-map) != map {
|
||||
@error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
|
||||
}
|
||||
|
||||
// PROCESS
|
||||
@if ($css-vars-use-native) {
|
||||
@if $css-vars-use-native {
|
||||
// CSS variables
|
||||
// Native CSS: assign CSS custom properties to the global scope
|
||||
@at-root :root {
|
||||
@each $var-name, $var-value in $var-map {
|
||||
@if (type_of($var-value) == string) {
|
||||
@if type_of($var-value) == string {
|
||||
#{$var-name}: $var-value; // to prevent quotes interpolation
|
||||
} @else {
|
||||
#{$var-name}: #{$var-value};
|
||||
|
||||
@ -5,10 +5,8 @@
|
||||
// Nicer focus styles
|
||||
// ---------------------------------------
|
||||
@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
|
||||
outline-color: $color;
|
||||
outline: $color dotted 3px;
|
||||
outline-offset: 2px;
|
||||
outline-style: dotted;
|
||||
outline-width: 3px;
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
|
||||
@ -4,15 +4,14 @@
|
||||
// TODO: Review use of BEM classnames
|
||||
// ==========================================================================
|
||||
@charset 'UTF-8';
|
||||
|
||||
@import 'lib/css-vars';
|
||||
|
||||
$css-vars-use-native: true;
|
||||
|
||||
@import 'settings/breakpoints';
|
||||
@import 'settings/colors';
|
||||
@import 'settings/cosmetics';
|
||||
@import 'settings/type';
|
||||
|
||||
@import 'settings/badges';
|
||||
@import 'settings/captions';
|
||||
@import 'settings/controls';
|
||||
@ -21,13 +20,10 @@ $css-vars-use-native: true;
|
||||
@import 'settings/progress';
|
||||
@import 'settings/sliders';
|
||||
@import 'settings/tooltips';
|
||||
|
||||
@import 'lib/animation';
|
||||
@import 'lib/functions';
|
||||
@import 'lib/mixins';
|
||||
|
||||
@import 'base';
|
||||
|
||||
@import 'components/badges';
|
||||
@import 'components/captions';
|
||||
@import 'components/control';
|
||||
@ -39,14 +35,10 @@ $css-vars-use-native: true;
|
||||
@import 'components/tooltips';
|
||||
@import 'components/progress';
|
||||
@import 'components/volume';
|
||||
|
||||
@import 'types/audio';
|
||||
@import 'types/video';
|
||||
|
||||
@import 'states/fullscreen';
|
||||
|
||||
@import 'plugins/ads';
|
||||
@import 'plugins/preview-thumbnails/index';
|
||||
|
||||
@import 'utils/animation';
|
||||
@import 'utils/hidden';
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
|
||||
$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
|
||||
$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
|
||||
|
||||
$plyr-font-size-captions-base: $plyr-font-size-base !default;
|
||||
$plyr-font-size-captions-small: $plyr-font-size-small !default;
|
||||
$plyr-font-size-captions-medium: $plyr-font-size-large !default;
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
|
||||
$plyr-video-background: var(--plyr-video-background, rgba(0,0,0,1)) !default;
|
||||
$plyr-color-main: var(--plyr-color-main, hsl(198deg 100% 50%)) !default;
|
||||
$plyr-video-background: var(--plyr-video-background, rgb(0 0 0 / 100%)) !default;
|
||||
|
||||
// Grayscale
|
||||
$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
|
||||
$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
|
||||
$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
|
||||
$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
|
||||
$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
|
||||
$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
|
||||
$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
|
||||
$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
|
||||
$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
|
||||
$plyr-color-gray-50: hsl(216, 15%, 97%) !default;
|
||||
$plyr-color-gray-900: hsl(216deg 15% 16%) !default;
|
||||
$plyr-color-gray-800: hsl(216deg 15% 25%) !default;
|
||||
$plyr-color-gray-700: hsl(216deg 15% 34%) !default;
|
||||
$plyr-color-gray-600: hsl(216deg 15% 43%) !default;
|
||||
$plyr-color-gray-500: hsl(216deg 15% 52%) !default;
|
||||
$plyr-color-gray-400: hsl(216deg 15% 61%) !default;
|
||||
$plyr-color-gray-300: hsl(216deg 15% 70%) !default;
|
||||
$plyr-color-gray-200: hsl(216deg 15% 79%) !default;
|
||||
$plyr-color-gray-100: hsl(216deg 15% 88%) !default;
|
||||
$plyr-color-gray-50: hsl(216deg 15% 97%) !default;
|
||||
|
||||
@ -7,12 +7,10 @@ $plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
|
||||
$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
|
||||
$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
|
||||
$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
|
||||
|
||||
$plyr-control-toggle-checked-background: var(
|
||||
--plyr-control-toggle-checked-background,
|
||||
var(--plyr-color-main, $plyr-color-main)
|
||||
) !default;
|
||||
|
||||
$plyr-video-controls-background: var(
|
||||
--plyr-video-controls-background,
|
||||
linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
|
||||
@ -23,7 +21,6 @@ $plyr-video-control-background-hover: var(
|
||||
--plyr-video-control-background-hover,
|
||||
var(--plyr-color-main, $plyr-color-main)
|
||||
) !default;
|
||||
|
||||
$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
|
||||
$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
|
||||
$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
|
||||
|
||||
@ -7,9 +7,7 @@ $plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
|
||||
$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
|
||||
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
|
||||
$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
|
||||
|
||||
$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
|
||||
$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
|
||||
|
||||
$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
|
||||
$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;
|
||||
|
||||
@ -29,7 +29,6 @@ $plyr-video-range-thumb-active-shadow-color: var(
|
||||
--plyr-audio-range-thumb-active-shadow-color,
|
||||
rgba(#fff, 0.5)
|
||||
) !default;
|
||||
|
||||
$plyr-audio-range-track-background: var(
|
||||
--plyr-audio-range-track-background,
|
||||
$plyr-audio-progress-buffered-background
|
||||
|
||||
@ -7,14 +7,10 @@ $plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
|
||||
$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
|
||||
$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
|
||||
$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
|
||||
|
||||
$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
|
||||
$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
|
||||
$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
|
||||
|
||||
$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
|
||||
$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
|
||||
|
||||
$plyr-line-height: var(--plyr-line-height, 1.7) !default;
|
||||
|
||||
$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;
|
||||
|
||||
@ -3,27 +3,13 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr:fullscreen {
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.plyr:-webkit-full-screen {
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.plyr:-moz-full-screen {
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.plyr:-ms-fullscreen {
|
||||
@include plyr-fullscreen-active();
|
||||
@include plyr-fullscreen-active;
|
||||
}
|
||||
|
||||
// Fallback for unsupported browsers
|
||||
.plyr--fullscreen-fallback {
|
||||
@include plyr-fullscreen-active();
|
||||
@include plyr-fullscreen-active;
|
||||
|
||||
bottom: 0;
|
||||
display: block;
|
||||
left: 0;
|
||||
|
||||
@ -51,6 +51,7 @@ $embed-padding: (math.div(100, 16) * 9);
|
||||
.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
|
||||
$height: 240;
|
||||
$offset: to-percentage(math.div($height - $embed-padding, math.div($height, 50)));
|
||||
|
||||
padding-bottom: to-percentage($height);
|
||||
position: relative;
|
||||
transform: translateY(-$offset);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user