diff --git a/Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss b/Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss
index c918d7a8f240e8104fe8c6626ed529b020f7cd3c..760f9d1b9bef018cba16d9170b04f6c9ad98efaa 100644
--- a/Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss
+++ b/Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss
@@ -1,3 +1,9 @@
+// Vars ---------------------------------------------------------------- //
+$basicLightbox__background: rgba(0, 0, 0, 0.8) !default;
+$basicLightbox__zIndex: 1020 !default;
+$basicLightbox__duration: 0.4s !default;
+$basicLightbox__timing: ease !default;
+
.sg-video__link {
&:hover {
.sg-video__svg-inner {
@@ -36,6 +42,100 @@
svg {
transform: translateX(3px);
}
+
+ .no-lightbox & {
+ display: none !important;
+ }
+}
+
+.sg-video__svg-inner {
+ opacity: 0.5;
+ transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+// basicLightbox ------------------------------------------------------- //
+.basicLightbox {
+ position: fixed;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: $basicLightbox__background;
+ opacity: 0.01; // Start with .01 to avoid the repaint that happens from 0 to .01
+ transition: opacity $basicLightbox__duration $basicLightbox__timing;
+ z-index: $basicLightbox__zIndex;
+ will-change: opacity;
+
+ ::after {
+ content: '';
+ position: absolute;
+ top: 1.8rem;
+ right: 1.8rem;
+ width: 2em;
+ height: 2em;
+ background-size: contain;
+ background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C!--!%20Font%20Awesome%20Free%206.5.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cg%20id%3D%22svg-dff5ea2525636251b1cf60f8943ff15f%22%3E%3Cpath%20d%3D%22M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ background-repeat: no-repeat;
+ cursor: pointer;
+ }
+
+ &--visible {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ &__placeholder {
+ max-width: 100%;
+ transform: scale(0.9);
+ transition: transform $basicLightbox__duration $basicLightbox__timing;
+ z-index: 1;
+ will-change: transform;
+
+ > img:first-child:last-child,
+ > video:first-child:last-child,
+ > iframe:first-child:last-child {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ }
+
+ > video:first-child:last-child,
+ > iframe:first-child:last-child {
+ pointer-events: auto;
+ }
+
+ > img:first-child:last-child,
+ > video:first-child:last-child {
+ width: auto;
+ height: auto;
+ }
+ }
+
+ &--img &__placeholder,
+ &--video &__placeholder,
+ &--iframe &__placeholder {
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ }
+
+ &--visible &__placeholder {
+ transform: scale(1);
+ }
+}
+
+iframe.sg-video-iframe {
+ width: 100%;
+ height: auto;
+ max-width: 900px;
+ aspect-ratio: 16/9;
}
@keyframes pulse {
diff --git a/Resources/Public/StyleSheets/Bootstrap5/main.min.css b/Resources/Public/StyleSheets/Bootstrap5/main.min.css
index dda1c87cfd89d2aad3aea939790813aebcb83657..7f4a7c29ec5faa58262341b60478a6f157fc9bee 100644
--- a/Resources/Public/StyleSheets/Bootstrap5/main.min.css
+++ b/Resources/Public/StyleSheets/Bootstrap5/main.min.css
@@ -1 +1 @@
-.sg-video__link:hover .sg-video__svg-inner{animation:pulse 1.4s linear infinite}.sg-video__link:hover .sg-video__image{animation:pulse .7s linear forwards}.sg-video__read-more-arrow{transform:rotate(180deg)}.sg-video__read-more-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-less-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-text{display:inline-flex}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-arrow{transform:none}.sg-video__svg svg{transform:translateX(3px)}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{opacity:.75}100%{transform:scale(1.1);opacity:1}}
+.sg-video__link:hover .sg-video__svg-inner{animation:pulse 1.4s linear infinite}.sg-video__link:hover .sg-video__image{animation:pulse .7s linear forwards}.sg-video__read-more-arrow{transform:rotate(180deg)}.sg-video__read-more-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-less-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-text{display:inline-flex}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-arrow{transform:none}.sg-video__svg svg{transform:translateX(3px)}.no-lightbox .sg-video__svg{display:none !important}.sg-video__svg-inner{opacity:.5;transition:opacity .3s ease,transform .3s ease}.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1020;will-change:opacity}.basicLightbox ::after{content:"";position:absolute;top:1.8rem;right:1.8rem;width:2em;height:2em;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C!--!%20Font%20Awesome%20Free%206.5.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cg%20id%3D%22svg-dff5ea2525636251b1cf60f8943ff15f%22%3E%3Cpath%20d%3D%22M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;cursor:pointer}.basicLightbox--visible{opacity:1;pointer-events:auto}.basicLightbox__placeholder{max-width:100%;transform:scale(0.9);transition:transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder,.basicLightbox--iframe .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}iframe.sg-video-iframe{width:100%;height:auto;max-width:900px;aspect-ratio:16/9}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{opacity:.75}100%{transform:scale(1.1);opacity:1}}