proxima.entertainment/plyr
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into css-variables

Browse Source 
# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.min.js.map
#	demo/index.html
#	dist/plyr.css
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs.map
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs.map
#	gulpfile.js
#	src/sass/base.scss
#	src/sass/components/control.scss
#	src/sass/settings/colors.scss
#	src/sass/settings/controls.scss
This commit is contained in:
Sam Potts
2020-03-30 10:45:57 +11:00
parent 50a7c2fad6 ad63af5096
commit da943b384c
110 changed files with 27759 additions and 10721 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sass/components/control.scss
+5 -65
View File
@@ -5,21 +5,22 @@
.plyr__control {
background: transparent;
border: 0;
border-radius: var(--plyr-control-radius);
border-radius: $plyr-control-radius;
border-radius: var(--plyr-control-radius, $plyr-control-radius);
color: inherit;
cursor: pointer;
flex-shrink: 0;
overflow: visible; // IE11
padding: var(--plyr-control-padding);
padding: var(--plyr-control-padding, $plyr-control-padding);
position: relative;
transition: all 0.3s ease;
svg {
display: block;
fill: currentColor;
height: var(--plyr-control-icon-size);
height: var(--plyr-control-icon-size, $plyr-control-icon-size);
pointer-events: none;
width: var(--plyr-control-icon-size);
width: var(--plyr-control-icon-size, $plyr-control-icon-size);
}
// Default focus
@@ -50,64 +51,3 @@ a.plyr__control {
.plyr__control.plyr__control--pressed .label--not-pressed {
display: none;
}
// Audio control
.plyr--audio .plyr__control {
&.plyr__tab-focus,
&:hover,
&[aria-expanded='true'] {
background: $plyr-audio-control-bg-hover;
color: $plyr-audio-control-color-hover;
}
}
// Video control
.plyr--video .plyr__control {
svg {
filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
}
// Hover and tab focus
&.plyr__tab-focus,
&:hover,
&[aria-expanded='true'] {
background: var(--plyr-video-control-bg-hover);
color: var(--plyr-video-control-color-hover);
}
}
// Large play button (video only)
.plyr__control--overlaid {
background: var(--plyr-video-control-bg-hover);
border: 0;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(#000, 0.15);
color: var(--plyr-video-control-color-hover);
display: none;
left: 50%;
padding: ceil($plyr-control-spacing * 1.5);
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
// Offset icon to make the play button look right
svg {
left: 2px; // Offset to make the play button look right
position: relative;
}
&:hover,
&:focus {
background: var(--plyr-video-control-bg-hover);
}
}
.plyr--playing .plyr__control--overlaid {
opacity: 0;
visibility: hidden;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
display: block;
}