ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Safari CSS fixes and variables setup

Browse Source
This commit is contained in:
Sam Potts
2017-11-25 22:54:04 +11:00
parent fd77831303
commit de54929bb7
9 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/error.css vendored
View File

File diff suppressed because one or more lines are too long

3
demo/src/less/bundles/demo.less
View File

@ -1,10 +1,11 @@
// ==========================================================================
// Plyr.io Demo Page
// ==========================================================================
@charset 'UTF-8';
// Libs
@import '../lib/animation';
@import '../lib/fontface';
@import '../lib/animation';
@import '../lib/mixins';
@import '../lib/normalize';

1
demo/src/less/bundles/error.less
View File

@ -1,6 +1,7 @@
// ==========================================================================
// Plyr.io Error Page
// ==========================================================================
@charset 'UTF-8';
// Libs
@import '../lib/fontface';

13
demo/src/less/lib/fontface.less
View File

@ -4,8 +4,7 @@
@font-face {
font-family: 'Gordita';
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff2');
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
font-weight: @font-weight-light;
font-style: normal;
font-display: swap;
@ -14,7 +13,7 @@
@font-face {
font-family: 'Gordita';
src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff2');
url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
font-weight: @font-weight-regular;
font-style: normal;
font-display: swap;
@ -23,7 +22,7 @@
@font-face {
font-family: 'Gordita';
src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff2');
url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
font-weight: @font-weight-medium;
font-style: normal;
font-display: swap;
@ -31,8 +30,7 @@
@font-face {
font-family: 'Gordita';
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff2');
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
font-weight: @font-weight-bold;
font-style: normal;
font-display: swap;
@ -40,8 +38,7 @@
@font-face {
font-family: 'Gordita';
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff2');
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
font-weight: @font-weight-black;
font-style: normal;
font-display: swap;

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

1
src/less/bundle.less
View File

@ -3,6 +3,7 @@
// https://github.com/sampotts/plyr
// TODO: Review use of BEM classnames
// ==========================================================================
@charset 'UTF-8';
@import 'settings';

13
src/less/components/controls.less
View File

@ -87,20 +87,19 @@
padding: @plyr-control-spacing;
border-radius: inherit;
background: @plyr-audio-controls-bg;
border: @plyr-audio-controls-border;
color: @plyr-audio-control-color;
}
// Some options are hidden by default
.plyr [data-plyr='captions'],
.plyr [data-plyr='pip'],
.plyr [data-plyr='airplay'],
.plyr [data-plyr='fullscreen'] {
.plyr [data-plyr='pip'],
.plyr [data-plyr='airplay'],
.plyr [data-plyr='fullscreen'] {
display: none;
}
.plyr--captions-enabled [data-plyr='captions'],
.plyr--pip-supported [data-plyr='pip'],
.plyr--airplay-supported [data-plyr='airplay'],
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
.plyr--pip-supported [data-plyr='pip'],
.plyr--airplay-supported [data-plyr='airplay'],
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
display: inline-block;
}

17
src/less/settings.less
View File

@ -10,6 +10,10 @@
// Colors
@plyr-color-main: #1aafff;
@plyr-color-gunmetal: #2f343d;
@plyr-color-fiord: #4f5b5f;
@plyr-color-lynch: #6b7d85;
@plyr-color-heather: #b7c5cd;
// Type
@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@ -43,14 +47,13 @@
@plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: #fff;
@plyr-audio-controls-border: 1px solid #dbe3e8;
@plyr-audio-control-color: #565d64;
@plyr-audio-control-color: @plyr-color-fiord;
@plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips
@plyr-tooltip-bg: fade(#fff, 90%);
@plyr-tooltip-color: #565d64;
@plyr-tooltip-color: @plyr-color-fiord;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
@ -60,15 +63,15 @@
@plyr-menu-bg: @plyr-tooltip-bg;
@plyr-menu-color: @plyr-tooltip-color;
@plyr-menu-arrow-size: 6px;
@plyr-menu-border-color: #b6c5cd;
@plyr-menu-border-color: @plyr-color-heather;
@plyr-menu-border-shadow-color: #fff;
@plyr-menu-shadow: 0 1px 2px fade(#000, 15%);
// Progress
@plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(#343f4a, 20%);
@plyr-progress-loading-bg: fade(@plyr-color-gunmetal, 20%);
@plyr-video-progress-buffered-bg: fade(#fff, 25%);
@plyr-audio-progress-buffered-bg: fade(#c6d6db, 66%);
@plyr-audio-progress-buffered-bg: fade(@plyr-color-heather, 66%);
// Range sliders
@plyr-range-track-height: 8px;
@ -76,7 +79,7 @@
@plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
@plyr-range-thumb-bg: #fff;
@plyr-range-thumb-border: 2px solid transparent;
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%);
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(@plyr-color-gunmetal, 20%);
@plyr-range-thumb-active-border-color: #fff;
@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
@plyr-range-thumb-active-scale: 1.25;