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

Styling for control changes

Browse Source
This commit is contained in:
Sam Potts 2019-04-25 12:02:48 +10:00
parent 7a4a7dece8
commit 9b81e776fb
2 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/sass/components/controls.scss
View File

@ -14,42 +14,46 @@
justify-content: flex-end; justify-content: flex-end;
text-align: center; text-align: center;
.plyr__progress__container {
flex: 1;
}
// Spacing // Spacing
> .plyr__control, .plyr__controls__item {
.plyr__progress, margin-left: ($plyr-control-spacing / 4);
.plyr__time,
.plyr__menu,
.plyr__volume {
margin-left: ($plyr-control-spacing / 2);
}
.plyr__menu + .plyr__control, &:first-child {
> .plyr__control + .plyr__menu, margin-left: 0;
> .plyr__control + .plyr__control, margin-right: auto;
.plyr__progress + .plyr__control { }
margin-left: floor($plyr-control-spacing / 4);
}
> .plyr__control:first-child, &.plyr__progress__container {
> .plyr__control:first-child + [data-plyr='pause'] { padding-left: ($plyr-control-spacing / 4);
margin-left: 0; }
margin-right: auto;
&.plyr__time {
padding: 0 ($plyr-control-spacing / 2);
}
&.plyr__progress__container:first-child,
&.plyr__time:first-child,
&.plyr__time + .plyr__time {
padding-left: 0;
}
&.plyr__volume {
padding-right: ($plyr-control-spacing / 2);
}
&.plyr__volume:first-child {
padding-right: 0;
}
} }
// Hide empty controls // Hide empty controls
&:empty { &:empty {
display: none; display: none;
} }
@media (min-width: $plyr-bp-sm) {
> .plyr__control,
.plyr__menu,
.plyr__progress,
.plyr__time,
.plyr__volume {
margin-left: $plyr-control-spacing;
}
}
} }
// Audio controls // Audio controls
@ -62,10 +66,7 @@
// Video controls // Video controls
.plyr--video .plyr__controls { .plyr--video .plyr__controls {
background: linear-gradient( background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
rgba($plyr-video-controls-bg, 0),
rgba($plyr-video-controls-bg, 0.7)
);
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
bottom: 0; bottom: 0;

15
src/sass/components/progress.scss
View File

@ -2,18 +2,19 @@
// Playback progress // Playback progress
// -------------------------------------------------------------- // --------------------------------------------------------------
// Offset the range thumb in order to be able to calculate the relative progress (#954)
$plyr-progress-offset: $plyr-range-thumb-height;
.plyr__progress { .plyr__progress {
flex: 1; left: $plyr-progress-offset / 2;
left: $plyr-range-thumb-height / 2; margin-right: $plyr-progress-offset;
margin-right: $plyr-range-thumb-height;
position: relative; position: relative;
input[type='range'], input[type='range'],
&__buffer { &__buffer {
margin-left: -($plyr-range-thumb-height / 2); margin-left: -($plyr-progress-offset / 2);
margin-right: -($plyr-range-thumb-height / 2); margin-right: -($plyr-progress-offset / 2);
// Offset the range thumb in order to be able to calculate the relative progress (#954) width: calc(100% + #{$plyr-progress-offset});
width: calc(100% + #{$plyr-range-thumb-height});
} }
input[type='range'] { input[type='range'] {