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

Merge pull request #209 from robinpoort/master

Browse Source 
Add CSS settings
This commit is contained in:
Sam Potts 2016-05-11 22:39:54 +10:00
commit 31c933af38
5 changed files with 69 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

45
src/less/plyr.less
View File

@ -21,18 +21,22 @@
min-width: 200px; min-width: 200px;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
// border-box everything & when (@plyr-border-box = true) {
// http://paulirish.com/2012/box-sizing-border-box-ftw/ // border-box everything
&, // http://paulirish.com/2012/box-sizing-border-box-ftw/
*, &,
*::after, *,
*::before { *::after,
box-sizing: border-box; *::before {
box-sizing: border-box;
}
} }
// Fix 300ms delay & when (@plyr-touch-action = true) {
a, button, input, label { // Fix 300ms delay
touch-action: manipulation; a, button, input, label {
touch-action: manipulation;
}
} }
// Media elements // Media elements
@ -138,13 +142,24 @@
// Screen reader only elements // Screen reader only elements
.plyr__sr-only { .plyr__sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden; overflow: hidden;
// !important is not always needed
& when (@plyr-sr-only-important = true) {
position: absolute !important;
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
}
& when (@plyr-sr-only-important = false) {
position: absolute;
padding: 0;
border: 0;
height: 1px;
width: 1px;
}
} }
// Video // Video

5
src/less/variables.less
View File

@ -3,6 +3,11 @@
// https://github.com/selz/plyr // https://github.com/selz/plyr
// ========================================================================== // ==========================================================================
// Settings
@plyr-border-box: true;
@plyr-touch-action: true;
@plyr-sr-only-important: true;
// Colors // Colors
@plyr-color-main: #3498db; @plyr-color-main: #3498db;

42
src/scss/plyr.scss
View File

@ -21,18 +21,22 @@
min-width: 200px; min-width: 200px;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
// border-box everything @if $plyr-border-box == true {
// http://paulirish.com/2012/box-sizing-border-box-ftw/ // border-box everything
&, // http://paulirish.com/2012/box-sizing-border-box-ftw/
*, &,
*::after, *,
*::before { *::after,
box-sizing: border-box; *::before {
box-sizing: border-box;
}
} }
// Fix 300ms delay @if $plyr-touch-action == true {
a, button, input, label { // Fix 300ms delay
a, button, input, label {
touch-action: manipulation; touch-action: manipulation;
}
} }
// Media elements // Media elements
@ -138,13 +142,23 @@
// Screen reader only elements // Screen reader only elements
.plyr__sr-only { .plyr__sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden; overflow: hidden;
// !important is not always needed
@if $plyr-sr-only-important == true {
position: absolute !important;
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
} @else {
position: absolute;
padding: 0;
border: 0;
height: 1px;
width: 1px;
}
} }
// Video // Video

5
src/scss/variables.scss
View File

@ -4,6 +4,11 @@
// https://robots.thoughtbot.com/sass-default // https://robots.thoughtbot.com/sass-default
// ========================================================================== // ==========================================================================
// Settings
$plyr-border-box: true !default;
$plyr-touch-action: true !default;
$plyr-sr-only-important: true !default;
// Colors // Colors
$plyr-color-main: #3498db !default; $plyr-color-main: #3498db !default;