diff options
author | Sam Potts <sam@potts.es> | 2020-04-24 00:32:16 +1000 |
---|---|---|
committer | Sam Potts <sam@potts.es> | 2020-04-24 00:32:16 +1000 |
commit | 3b521f73bd773dcb530746db47c90dbb1349b70b (patch) | |
tree | 371bb120c654d55d0016792b9412fc122735c1b8 /src/sass/plugins/preview-thumbnails.scss | |
parent | 27126b20bc5d2a3a8947c363d1f1887533f69688 (diff) | |
parent | 68137aa789b195b26d4306eaebc7fee2f8eb3374 (diff) | |
download | plyr-3b521f73bd773dcb530746db47c90dbb1349b70b.tar.lz plyr-3b521f73bd773dcb530746db47c90dbb1349b70b.tar.xz plyr-3b521f73bd773dcb530746db47c90dbb1349b70b.zip |
Merge branch 'develop' of github.com:sampotts/plyr into develop
# Conflicts:
# package.json
# yarn.lock
Diffstat (limited to 'src/sass/plugins/preview-thumbnails.scss')
-rw-r--r-- | src/sass/plugins/preview-thumbnails.scss | 118 |
1 files changed, 0 insertions, 118 deletions
diff --git a/src/sass/plugins/preview-thumbnails.scss b/src/sass/plugins/preview-thumbnails.scss deleted file mode 100644 index b2b272c1..00000000 --- a/src/sass/plugins/preview-thumbnails.scss +++ /dev/null @@ -1,118 +0,0 @@ -// -------------------------------------------------------------- -// Preview Thumbnails -// -------------------------------------------------------------- - -$plyr-preview-padding: $plyr-tooltip-padding !default; -$plyr-preview-bg: $plyr-tooltip-bg !default; -$plyr-preview-radius: $plyr-tooltip-radius !default; -$plyr-preview-shadow: $plyr-tooltip-shadow !default; -$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default; -$plyr-preview-image-bg: $plyr-color-gray-2 !default; -$plyr-preview-time-font-size: $plyr-font-size-time !default; -$plyr-preview-time-padding: 3px 6px !default; -$plyr-preview-time-bg: rgba(0, 0, 0, 0.55); -$plyr-preview-time-color: #fff; -$plyr-preview-time-bottom-offset: 6px; - -.plyr__preview-thumb { - background-color: $plyr-preview-bg; - border-radius: 3px; - bottom: 100%; - box-shadow: $plyr-preview-shadow; - margin-bottom: $plyr-preview-padding * 2; - opacity: 0; - padding: $plyr-preview-radius; - pointer-events: none; - position: absolute; - transform: translate(0, 10px) scale(0.8); - transform-origin: 50% 100%; - transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; - z-index: 2; - - &--is-shown { - opacity: 1; - transform: translate(0, 0) scale(1); - } - - // The background triangle - &::before { - border-left: $plyr-preview-arrow-size solid transparent; - border-right: $plyr-preview-arrow-size solid transparent; - border-top: $plyr-preview-arrow-size solid $plyr-preview-bg; - bottom: -$plyr-preview-arrow-size; - content: ''; - height: 0; - left: 50%; - position: absolute; - transform: translateX(-50%); - width: 0; - z-index: 2; - } - - &__image-container { - background: $plyr-preview-image-bg; - border-radius: ($plyr-preview-radius - 1px); - overflow: hidden; - position: relative; - z-index: 0; - - img { - height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript - left: 0; - max-height: none; - max-width: none; - position: absolute; - top: 0; - width: 100%; - } - } - - // Seek time text - &__time-container { - bottom: $plyr-preview-time-bottom-offset; - left: 0; - position: absolute; - right: 0; - white-space: nowrap; - z-index: 3; - - span { - background-color: $plyr-preview-time-bg; - border-radius: ($plyr-preview-radius - 1px); - color: $plyr-preview-time-color; - font-size: $plyr-preview-time-font-size; - padding: $plyr-preview-time-padding; - } - } -} - -.plyr__preview-scrubbing { - bottom: 0; - filter: blur(1px); - height: 100%; - left: 0; - margin: auto; // Required when video is different dimensions to container (e.g. fullscreen) - opacity: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - transition: opacity 0.3s ease; - width: 100%; - z-index: 1; - - &--is-shown { - opacity: 1; - } - - img { - height: 100%; - left: 0; - max-height: none; - max-width: none; - object-fit: contain; - position: absolute; - top: 0; - width: 100%; - } -} |