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

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;