diff --git a/Resources/Private/Assets/_Base.scss b/Resources/Private/Assets/_Base.scss index 4011c9a..05d5d3e 100644 --- a/Resources/Private/Assets/_Base.scss +++ b/Resources/Private/Assets/_Base.scss @@ -20,11 +20,11 @@ position: absolute; top: 50%; left: 50%; - width: width($prettyembed-play-button, 2); - height: height($prettyembed-play-button, 2); + width: $prettyembed-play-button-size; + height: $prettyembed-play-button-size; opacity: 0.8; transform: translate(-50%, -50%) scale(0.8); - background: inline($prettyembed-play-button) center no-repeat; + background: url($prettyembed-play-button) center no-repeat; background-size: contain; transition: transform 0.25s ease-in-out, opacity 0.25s linear; pointer-events: none; @@ -37,14 +37,15 @@ transform: translate(-50%, -50%) scale(1); } } +} %pause-button { &::after { opacity: 0; - background: inline($prettyembed-pause-button) center no-repeat; - background-size: size($prettyembed-play-button, 4); - top: height($prettyembed-play-button, 4); - left: width($prettyembed-play-button, 4); + background: url($prettyembed-pause-button) center no-repeat; + background-size: $prettyembed-pause-button-size $prettyembed-pause-button-size; + top: $prettyembed-pause-button-size; + left: $prettyembed-pause-button-size; } &:hover, diff --git a/Resources/Private/Assets/_Variables.scss b/Resources/Private/Assets/_Variables.scss index 35f3688..c8845a3 100644 --- a/Resources/Private/Assets/_Variables.scss +++ b/Resources/Private/Assets/_Variables.scss @@ -11,5 +11,7 @@ $prettyembed-lightbox-max-width: 900px !default; $prettyembed-shadow: 0 0 8px rgba(#000, 0.6) !default; $prettyembed-z-index: 1500 !default; $prettyembed-close-size: 30px !default; -$prettyembed-play-button: "PlayButton.png" !default; -$prettyembed-pause-button: "PauseButton.png" !default; \ No newline at end of file +$prettyembed-play-button-size: 72px !default; +$prettyembed-pause-button-size: $prettyembed-play-button-size / 2 !default; +$prettyembed-play-button: "../Assets/PlayButton.png" !default; +$prettyembed-pause-button: "../Assets/PauseButton.png" !default; diff --git a/Resources/Private/Assets/_iFrame.scss b/Resources/Private/Assets/_iFrame.scss index f2542a1..9ea7a47 100644 --- a/Resources/Private/Assets/_iFrame.scss +++ b/Resources/Private/Assets/_iFrame.scss @@ -8,7 +8,7 @@ height: 100%; } - &:not(.jonnitto-prettyembed__content):not(.jonnitto-prettyembed--play) { + &:not(.jonnitto-prettyembed--play):not(.jonnitto-prettyembed__content) { @extend %play-button; } }