") center / contain; display: block; width: 2em; height: 2em; margin:0.2em; top: 0; right: 0; } .lightboxBackground{ opacity: 0; position:fixed; z-index:5; background: url('/images/lightbox_close_icon.svg') top 0.5em right 0.5em no-repeat #000d; background-size: 2em; } .mediaFrame{ margin:auto; padding:0.5em; background-color:var(--lightbox-bg-color); background-image:url('/images/loading.svg'); background-position: center; background-repeat:no-repeat; visibility: hidden; opacity: 0; min-width: min(20em, 60vw); min-height: min(20em, 60vh); z-index:20; aspect-ratio: 1 / 1; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; } .mediaFrame:has(.mediaContainer[data-hebisLightbox-loaded][data-hebisLightbox-sized]){ background-image: none; visibility: visible; opacity: 1; aspect-ratio: auto; min-width: auto; min-height: auto; } #lightboxRoot:has(video) .controllBoxContainer,#lightboxRoot:has(iframe) .controllBoxContainer{ z-index:15; } /* video.mediaContainer{ z-index:500; } iframe.mediaContainer{ max-width:80vw !important; max-height:80vh !important; } */ .mediaContainer{ display:block; margin:auto; width:100%; height:100%; object-fit:cover; overflow:hidden; opacity: 0; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; } .mediaContainer[data-hebisLightbox-loaded][data-hebisLightbox-sized]{ opacity: 1; } .controllBoxContainer{ align-content: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; position:fixed; display: none; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; width: 95vw; height: 85vh; visibility: hidden; z-index:100; font-size:2em; } .prevControllBox,.nextControllBox,.centerControllBox{ display:block; flex-grow: 1; height:100%; } #lightboxRoot[data-hebisLightbox-CanMoveToPrev='true'] .prevControllBox:hover,#lightboxRoot[data-hebisLightbox-CanMoveToNext='true'] .nextControllBox:hover{ background: url("data:image/svg+xml;utf-8,") center left no-repeat; background-size: 1em; } #lightboxRoot[data-hebisLightbox-CanMoveToNext='true'] .nextControllBox:hover{ transform: scale(-1, 1); } #lightboxRoot[data-hebisLightbox-CanMoveToPrev='false'] .prevControllBox{ display:none; } #lightboxRoot[data-hebisLightbox-CanMoveToNext='false'] .nextControllBox{ display:none; } .lightMessageContainer{ position: fixed; bottom: 0.5em; z-index: 600; width: 100%; opacity: 1; visibility: hidden; text-align: center; background: #0008; } .lightMessageContainer span{ text-wrap: nowrap; text-overflow: ellipsis; max-width: 80vw; overflow: hidden; } .lightMessageContainer *{ color: #fffa !important; display: inline-block; vertical-align: bottom; padding:0 0.3em; } #HebisLightbox_Error{ text-align: center; display: grid; align-items: center; }