diff --git a/src/scss/base.scss b/src/scss/_base.scss similarity index 52% rename from src/scss/base.scss rename to src/scss/_base.scss index d91402c..6f55867 100644 --- a/src/scss/base.scss +++ b/src/scss/_base.scss @@ -1,40 +1,47 @@ -.lazyframe{ +.lazyframe { position: relative; - + background-color: currentColor; background-repeat: no-repeat; background-size: cover; - - &__title{ + + &__title { position: absolute; - top: 0; left: 0; right: 0; + top: 0; + right: 0; + left: 0; padding: 15px 17px; z-index: 3; - - &:after{ + + &::after { z-index: -1; - } - + } + } - &:hover{ + &:hover { cursor: pointer; - } + } - &:before{ + &::before { display: block; content: ""; width: 100%; padding-top: 100%; } - &[data-ratio="16:9"]:before { padding-top: 56.25%; } - &[data-ratio="4:3"]:before { padding-top: 75%; } - &[data-ratio="1:1"]:before { padding-top: 100%; } + &[data-ratio="16:9"]::before { padding-top: 56.25%; } + + &[data-ratio="4:3"]::before { padding-top: 75%; } + + &[data-ratio="1:1"]::before { padding-top: 100%; } - iframe{ + iframe { position: absolute; - top: 0; left: 0; right: 0; bottom: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; z-index: 5; width: 100%; height: 100%; diff --git a/src/scss/themes/_vimeo.scss b/src/scss/themes/_vimeo.scss index 6d7214b..dcab1df 100644 --- a/src/scss/themes/_vimeo.scss +++ b/src/scss/themes/_vimeo.scss @@ -1,37 +1,32 @@ .lazyframe[data-vendor="vimeo"] { background-color: #00adef; - - .lazyframe__title{ - font-family: "Helvetica Neue", Helvetica, Arial; + + .lazyframe__title { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #00adef; font-size: 20px; - font-weight: bold; + font-weight: 700; text-rendering: optimizeLegibility; user-select: none; -webkit-font-smoothing: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, .5); } - &:before{ + &::before { padding-top: 48.25%; } - &[data-ratio="16:9"]:before { padding-top: 56.25%; } - &[data-ratio="4:3"]:before { padding-top: 75%; } - &[data-ratio="1:1"]:before { padding-top: 100%; } - - &:after{ - content: ''; + &::after { + content: ""; height: 40px; width: 65px; display: block; - position: absolute; bottom: 10px; left: 10px; z-index: 3; - background-color: rgba(0, 0, 0, 0.5); - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYmFzZVByb2ZpbGU9InRpbnkiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTcuNzY1IDE2Ljg5bDguNDctNC44OS04LjQ3LTQuODkiLz48L3N2Zz4="); + background-color: rgba(0, 0, 0, .5); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' baseProfile='tiny' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M7.765 16.89l8.47-4.89-8.47-4.89'/%3E%3C/svg%3E"); background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; @@ -39,7 +34,7 @@ position: relative; } - &:hover:after{ + &:hover::after { background-color: #00adef; } diff --git a/src/scss/themes/_vine.scss b/src/scss/themes/_vine.scss index 66935ac..d10b7f3 100644 --- a/src/scss/themes/_vine.scss +++ b/src/scss/themes/_vine.scss @@ -1,17 +1,17 @@ -.lazyframe[data-vendor="vine"]{ +.lazyframe[data-vendor="vine"] { background-color: #00bf8f; - .lazyframe__title{ + .lazyframe__title { color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 16px; white-space: nowrap; z-index: 3; - positon: relative; - - &:after{ - content: ''; + position: relative; + + &::after { + content: ""; position: absolute; top: 0; left: 0; @@ -19,39 +19,34 @@ z-index: -1; height: 115px; padding: 24px 70px 24px 24px; - background: linear-gradient(to top,rgba(23,23,23,0) 0,rgba(23,23,23,.7) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#b3171717", endColorstr="#00171717", GradientType=0 ); + background-image: linear-gradient(to top, rgba(23, 23, 23, 0) 0, rgba(23, 23, 23, .7) 100%); } } - &:before{ - padding-top:100%; + &::before { + padding-top: 100%; } - &[data-ratio="16:9"]:before { padding-top: 56.25%; } - &[data-ratio="4:3"]:before { padding-top: 75%; } - &[data-ratio="1:1"]:before { padding-top: 100%; } - - &:after{ - content: ''; + &::after { + content: ""; width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; z-index: 4; - background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM2IiB2aWV3Qm94PSIwIDAgMTM2IDEzNiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTU2IDQ0Yy0uNyAwLTEuNC4yLTIgLjUtMS4yLjgtMiAyLTIgMy41djQwYzAgMS40LjggMi44IDIgMy41LjYuMyAxLjMuNSAyIC41czEuNC0uMiAyLS41bDM0LjYtMjBjMS4zLS43IDItMiAyLTMuNSAwLTEuNC0uNy0yLjgtMi0zLjVMNTggNDQuNWMtLjYtLjMtMS4zLS41LTItLjV6Ii8+PC9zdmc+'); - background-color: rgba(0,0,0,.5); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='136' viewBox='0 0 136 136'%3E%3Cpath fill='%23FFF' d='M56 44c-.7 0-1.4.2-2 .5-1.2.8-2 2-2 3.5v40c0 1.4.8 2.8 2 3.5.6.3 1.3.5 2 .5s1.4-.2 2-.5l34.6-20c1.3-.7 2-2 2-3.5 0-1.4-.7-2.8-2-3.5L58 44.5c-.6-.3-1.3-.5-2-.5z'/%3E%3C/svg%3E"); + background-color: rgba(0, 0, 0, .5); background-size: cover; background-repeat: no-repeat; margin-top: -30px; margin-left: -30px; - border-radius: 50%; + border-radius: 50%; } - &:hover:after{ - background-color: rgba(0,0,0,.75); + &:hover::after { + background-color: rgba(0, 0, 0, .75); } } diff --git a/src/scss/themes/_youtube.scss b/src/scss/themes/_youtube.scss index 2b6c118..55175a7 100644 --- a/src/scss/themes/_youtube.scss +++ b/src/scss/themes/_youtube.scss @@ -1,24 +1,25 @@ -.lazyframe[data-vendor="youtube"], .lazyframe[data-vendor="youtube_nocookie"]{ +.lazyframe[data-vendor="youtube"], +.lazyframe[data-vendor="youtube_nocookie"] { background-color: #e52d27; font-family: Roboto, Arial, Helvetica, sans-serif; - - .lazyframe__title{ + + .lazyframe__title { color: rgb(238, 238, 238); font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 18px; - text-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 2px; + text-shadow: rgba(0, 0, 0, .498039) 0 0 2px; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - transition: color .1s cubic-bezier(0.4,0.0,1,1); - - &:hover{ + transition: color .1s cubic-bezier(.4, 0, 1, 1); + + &:hover { color: #fff; } - - &:before{ - content: ''; + + &::before { + content: ""; display: block; - background: linear-gradient(rgba(0,0,0,0.2), transparent); + background: linear-gradient(rgba(0, 0, 0, .2), transparent); height: 98px; width: 100%; pointer-events: none; @@ -31,17 +32,13 @@ } } - - &:before{ + + &::before { padding-top: 56.25%; } - &[data-ratio="16:9"]:before { padding-top: 56.25%; } - &[data-ratio="4:3"]:before { padding-top: 75%; } - &[data-ratio="1:1"]:before { padding-top: 100%; } - - &:after{ - content: ''; + &::after { + content: ""; position: absolute; left: 50%; top: 50%; @@ -49,19 +46,19 @@ height: 48px; margin-left: -34px; margin-top: -24px; - background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjIzFmMWYxZiIvPjxwYXRoIGQ9Ik0yMDMuMiAzNDRWMTg1LjVMMzQ4IDI2NC44IDIwMy4yIDM0NHoiIGZpbGw9IiNGRUZERkQiLz48L3N2Zz4="); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231F1F1F' d='M255.7 446.3c-53.3.3-106.6-.4-159.8-3.3-17.4-1-34.7-2.5-50.4-11C35 426.3 27 418.4 22 407.2 13.2 388.6 10.5 369 9 349c-3.4-41.3-3.6-82.6-1.8-123.8 1-22 1.6-44 6.8-65.5 2-8.4 5-16.6 8.8-24.4C32 117 48 108 67.3 104c16.2-3 32.8-3 49.3-3.7 56-2.3 112-3.5 168-3 43 .6 86.2 1.7 129.3 4 13.2.6 26.6.8 39.3 5.5 17.2 6.4 30 17.2 37 34.7 6.6 16.8 9.2 34.2 10.6 52 3.8 48.7 4 97.3.7 146-1 16.3-2.2 32.7-6.5 48.8-9.7 37-32.8 51.5-66.7 53.8-36.2 2.5-72.5 3.8-108.8 4.3-21.3.2-42.7 0-64 0zM203.2 344L348 264.7l-144.8-79.3V344z'/%3E%3Cpath fill='%23FEFDFD' d='M203.2 344V185.5L348 264.8 203.2 344z'/%3E%3C/svg%3E"); background-position: center center; background-size: 100%; background-repeat: no-repeat; opacity: .81; - + border: none; z-index: 4; } - - &:hover:after{ - background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjREQyQzI4Ii8+PHBhdGggZD0iTTIwMy4yIDM0NFYxODUuNUwzNDggMjY0LjggMjAzLjIgMzQ0eiIgZmlsbD0iI0ZFRkRGRCIvPjwvc3ZnPg=="); + + &:hover::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23DD2C28' d='M255.7 446.3c-53.3.3-106.6-.4-159.8-3.3-17.4-1-34.7-2.5-50.4-11C35 426.3 27 418.4 22 407.2 13.2 388.6 10.5 369 9 349c-3.4-41.3-3.6-82.6-1.8-123.8 1-22 1.6-44 6.8-65.5 2-8.4 5-16.6 8.8-24.4C32 117 48 108 67.3 104c16.2-3 32.8-3 49.3-3.7 56-2.3 112-3.5 168-3 43 .6 86.2 1.7 129.3 4 13.2.6 26.6.8 39.3 5.5 17.2 6.4 30 17.2 37 34.7 6.6 16.8 9.2 34.2 10.6 52 3.8 48.7 4 97.3.7 146-1 16.3-2.2 32.7-6.5 48.8-9.7 37-32.8 51.5-66.7 53.8-36.2 2.5-72.5 3.8-108.8 4.3-21.3.2-42.7 0-64 0zM203.2 344L348 264.7l-144.8-79.3V344z'/%3E%3Cpath fill='%23FEFDFD' d='M203.2 344V185.5L348 264.8 203.2 344z'/%3E%3C/svg%3E"); opacity: 1; } - + }