aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/plugins
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2019-01-08 23:34:28 +1100
committerSam Potts <sam@potts.es>2019-01-08 23:34:28 +1100
commit7dd7c13065212ffed67f6f2ac34d4a96c565ef60 (patch)
tree419d0e82064c78b6c0a300e6636a57296a3d370f /src/sass/plugins
parent5fdc0aae66850d94e17b5195605909e32bb25912 (diff)
downloadplyr-7dd7c13065212ffed67f6f2ac34d4a96c565ef60.tar.lz
plyr-7dd7c13065212ffed67f6f2ac34d4a96c565ef60.tar.xz
plyr-7dd7c13065212ffed67f6f2ac34d4a96c565ef60.zip
Linting etc
Diffstat (limited to 'src/sass/plugins')
-rw-r--r--src/sass/plugins/previewThumbnails.scss59
1 files changed, 29 insertions, 30 deletions
diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss
index 4de90667..24cf99bb 100644
--- a/src/sass/plugins/previewThumbnails.scss
+++ b/src/sass/plugins/previewThumbnails.scss
@@ -3,75 +3,74 @@
// --------------------------------------------------------------
.plyr__preview-thumbnail-container {
- background-color: rgba(0,0,0,0.5);
- border: 1px solid rgba(0,0,0,0); // The background colour above applies to the area under the border - so appears to be a border of 0.5 opacity black
- border-radius: 0px;
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 1px solid rgba(0, 0, 0, 0); // The background colour above applies to the area under the border - so appears to be a border of 0.5 opacity black
+ border-radius: 2px;
bottom: 100%;
box-shadow: $plyr-tooltip-shadow;
left: 50%;
line-height: 1.3;
margin-bottom: $plyr-tooltip-padding * 2;
opacity: 0;
+ overflow: hidden;
pointer-events: none;
position: absolute;
transition: opacity 0.2s 0.1s ease;
white-space: nowrap;
z-index: 2;
- overflow: hidden;
-
img {
- position: absolute;
- left: 0px;
- top: 0px;
+ border-radius: 2px;
height: 100%; // Non-jpeg-sprite images are 100%. Jpeg sprites will have their size applied by javascript
- width: 100%;
+ left: 0;
max-height: none;
max-width: none;
- border-radius: 0px;
+ position: absolute;
+ top: 0;
+ width: 100%;
}
// Seek time text
.plyr__preview-time-text-container {
- position: absolute;
- bottom: 0px;
- left: 0px;
- right: 0px;
+ bottom: 0;
+ left: 0;
margin-bottom: 2px;
+ position: absolute;
+ right: 0;
z-index: 3;
span {
- background-color: rgba(0,0,0,0.55);
- color: rgba(255,255,255,1);
- padding: 4px 6px 3px 6px;
+ background-color: rgba(0, 0, 0, 0.55);
+ color: rgba(255, 255, 255, 1);
font-size: $plyr-font-size-small;
font-weight: $plyr-font-weight-regular;
+ padding: 4px 6px 3px;
}
}
}
.plyr__preview-scrubbing-container {
- position: absolute;
- left: 0px;
- right: 0px;
- top: 0px;
- bottom: 0px;
+ bottom: 0;
+ filter: blur(1px);
height: 100%;
- width: 100%;
+ left: 0;
margin: auto; // Required when video is different dimensions to container (e.g., fullscreen)
overflow: hidden;
- z-index: 1;
+ position: absolute;
+ right: 0;
+ top: 0;
transition: opacity 0.3s ease;
- filter: blur(1px);
-
+ width: 100%;
+ z-index: 1;
+
img {
- position: absolute;
- left: 0px;
- top: 0px;
height: 100%;
- width: 100%;
+ left: 0;
max-height: none;
max-width: none;
object-fit: contain;
+ position: absolute;
+ top: 0;
+ width: 100%;
}
}