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

15
src/sass/plugins/preview-thumbnails/index.scss
View File

@ -6,12 +6,12 @@
.plyr__preview-thumb {
background-color: $plyr-preview-background;
border-radius: 3px;
border-radius: $plyr-preview-radius;
bottom: 100%;
box-shadow: $plyr-preview-shadow;
margin-bottom: calc(#{$plyr-preview-padding} * 2);
opacity: 0;
padding: $plyr-preview-radius;
padding: 3px;
pointer-events: none;
position: absolute;
transform: translate(0, 10px) scale(0.8);
@ -59,19 +59,20 @@
// Seek time text
&__time-container {
bottom: $plyr-preview-time-bottom-offset;
background: $plyr-preview-time-container-background;
border-bottom-left-radius: calc(#{$plyr-preview-radius} - 1px);
border-bottom-right-radius: calc(#{$plyr-preview-radius} - 1px);
bottom: 0;
left: 0;
line-height: 1.1;
padding: $plyr-preview-time-container-padding;
position: absolute;
right: 0;
white-space: nowrap;
z-index: 3;
span {
background-color: $plyr-preview-time-background;
border-radius: calc(#{$plyr-preview-radius} - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
}
}
}

12
src/sass/plugins/preview-thumbnails/settings.scss
View File

@ -4,12 +4,14 @@
$plyr-preview-padding: $plyr-tooltip-padding !default;
$plyr-preview-background: $plyr-tooltip-background !default;
$plyr-preview-radius: $plyr-tooltip-radius !default;
$plyr-preview-radius: 6px !default;
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
$plyr-preview-image-background: $plyr-color-gray-200 !default;
$plyr-preview-time-font-size: $plyr-font-size-time !default;
$plyr-preview-time-padding: 3px 6px !default;
$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
$plyr-preview-time-container-background: var(
--plyr-video-controls-background,
linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
) !default;
$plyr-preview-time-container-padding: 20px 6px 6px !default;
$plyr-preview-time-color: #fff;
$plyr-preview-time-bottom-offset: 6px;
$plyr-preview-time-font-size: $plyr-font-size-time !default;