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

feat: tweaks to markers logic and design

Browse Source
This commit is contained in:
Sam Potts
2022-04-18 20:15:23 +10:00
parent 565b68a5e2
commit 1d4869beee
11 changed files with 127 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/sass/components/markers.scss
View File

@@ -1,57 +0,0 @@
// --------------------------------------------------------------
// Markers
// --------------------------------------------------------------
.plyr__marker__points {
width: $plyr-range-track-height;
height: $plyr-range-track-height;
border-radius: $plyr-range-track-height;
background-color: #fff;
position: absolute;
top: 50%;
margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
margin-left: calc((#{$plyr-range-track-height} / 2) * -1);
z-index: 3;
}
.plyr__marker__tip {
background: $plyr-markers-background;
border-radius: $plyr-markers-radius;
bottom: 100%;
box-shadow: $plyr-markers-shadow;
color: $plyr-markers-color;
font-size: $plyr-font-size-small;
font-weight: $plyr-font-weight-regular;
left: 50%;
line-height: 1.3;
margin-bottom: calc(#{$plyr-markers-padding} * 2);
opacity: 0;
padding: $plyr-markers-padding calc(#{$plyr-markers-padding} * 1.5);
pointer-events: none;
position: absolute;
transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
white-space: nowrap;
z-index: 2;
// The background triangle
&::before {
border-left: $plyr-markers-arrow-size solid transparent;
border-right: $plyr-markers-arrow-size solid transparent;
border-top: $plyr-markers-arrow-size solid $plyr-markers-background;
bottom: calc(#{$plyr-markers-arrow-size} * -1);
content: '';
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
}
.plyr__marker__tip--visible {
opacity: 1;
transform: translate(-50%, 0) scale(1);
z-index: 3;
}

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

@@ -24,8 +24,10 @@ $plyr-progress-offset: $plyr-range-thumb-height;
// Seek tooltip to show time
.plyr__tooltip {
font-size: $plyr-font-size-time;
left: 0;
max-width: 120px;
overflow-wrap: break-word;
white-space: normal;
}
}
@@ -92,3 +94,15 @@ $plyr-progress-offset: $plyr-range-thumb-height;
.plyr--audio.plyr--loading .plyr__progress__buffer {
background-color: $plyr-audio-progress-buffered-background;
}
// Markers
.plyr__progress__marker {
background-color: $plyr-progress-marker-background;
border-radius: 1px;
height: $plyr-range-track-height;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: $plyr-progress-marker-width;
z-index: 3;
}