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

Formatting and “ad” badge

Browse Source
This commit is contained in:
Sam Potts
2018-01-19 20:24:15 +11:00
parent f33ca846f2
commit 5fad152cbf
10 changed files with 103 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/sass/plugins/ads.scss
View File

@ -3,7 +3,6 @@
// ==========================================================================
.plyr__ads {
display: none; // Hide initially.
bottom: 0;
cursor: pointer;
left: 0;
@ -12,21 +11,31 @@
top: 0;
z-index: 3; // Above the controls.
video {
left: 0;
&::after {
background: rgba($plyr-color-gunmetal, 0.8);
border-radius: 2px;
bottom: ($plyr-control-spacing * 2);
color: #fff;
content: attr(data-badge-text);
font-size: $plyr-font-size-captions-small;
padding: 2px 6px;
pointer-events: none;
position: absolute;
right: ($plyr-control-spacing * 2);
z-index: 3;
}
}
// Advertisement cue's for the progress bar.
.plyr__cues {
background: currentColor;
display: block;
position: absolute;
z-index: 3; // Between progress and thumb.
top: 50%;
height: $plyr-range-track-height;
left: 0;
margin: -($plyr-range-track-height / 2) 0 0;
width: 3px;
height: $plyr-range-track-height;
background: currentColor;
opacity: 0.8;
position: absolute;
top: 50%;
width: 3px;
z-index: 3; // Between progress and thumb.
}