$lighter-box-z-index: null !default $lighter-box-margin: 24px !default $lighter-box-padding: 24px !default $lighter-box-fullscreen-breakpoint: 479px !default $lighter-box-fullscreen-padding: 12px !default $lighter-box-fullscreen-navbar-height: 30px !default
// Only display content to screen readers // See: a11yproject.com/posts/how-to-hide-content/ .lighter-box-sr-only
position: absolute width: 1px height: 1px margin: -1px padding: 0 overflow: hidden clip: rect(0,0,0,0) border: 0
.lighter-box-backdrop
position: fixed left: 0 top: 0 width: 100vw height: 100vh background: rgba(0, 0, 0, 0.6) @if $lighter-box-z-index z-index: $lighter-box-z-index
.lighter-box-container
position: fixed left: 0 top: 0 right: 0 bottom: 0 display: flex align-items: center justify-content: center @if $lighter-box-z-index z-index: #{$lighter-box-z-index + 1}
.lighter-box-modal
position: relative background: #fff padding: $lighter-box-padding box-sizing: border-box min-width: 120px // Damit der (absolut positionierte) Spinner nicht breiter ist als die (noch leere) Lightbox min-height: 100px // Damit der (absolut positionierte) Spinner nicht breiter ist als die (noch leere) Lightbox max-width: calc(100vw - #{2 * $lighter-box-margin}) max-height: calc(100vh - #{2 * $lighter-box-margin}) overflow-y: auto -webkit-overflow-scrolling: touch
.lighter-box-close-button, .lighter-box-prev-link, .lighter-box-next-link
$width: ($lighter-box-margin + $lighter-box-padding) * 0.9 $height: $width position: absolute top: calc(50% - #{$height / 2}) width: $width height: $height text-decoration: none font-size: #{$height * 0.8} line-height: #{$height * 0.9} background: rgba(52, 52, 52, 0.85) color: #ccc text-align: center > span font-weight: bold color: inherit &:hover, &:focus color: #fff background: rgba(22, 22, 22, 0.9) text-decoration: none
.lighter-box-close-button
top: 0px right: 0px box-sizing: border-box border: none border-radius: 0 padding: 0
.lighter-box-prev-link
left: 0px
.lighter-box-next-link
right: 0px
.lighter-box-modal figure
margin: 0 padding: 0
.lighter-box-image
display: block margin: auto max-width: 100% min-height: 30px
.lighter-box-figcaption
margin: 20px 0 0 text-align: center line-height: 1.2 &.empty-caption margin-top: 0
.lighter-box-spinner
$width: 80px $height: 55px box-sizing: border-box padding: 15px position: fixed background: rgba(50, 50, 50, 0.8) border-radius: 4px box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.25) width: $width height: $height left: calc(50% - #{$width / 2}) top: calc(50% - #{$height / 2}) text-align: center font-size: 10px &:focus outline: none > div background-color: #eee height: 100% width: 5px margin: 0 1px display: inline-block -webkit-animation: lighter-box-loader-anim 1.2s infinite ease-in-out animation: lighter-box-loader-anim 1.2s infinite ease-in-out .rect2 -webkit-animation-delay: -1.1s animation-delay: -1.1s .rect3 -webkit-animation-delay: -1.0s animation-delay: -1.0s .rect4 -webkit-animation-delay: -0.9s animation-delay: -0.9s .rect5 -webkit-animation-delay: -0.8s animation-delay: -0.8s
@-webkit-keyframes lighter-box-loader-anim
0%, 40%, 100% -webkit-transform: scaleY(0.5) 20% -webkit-transform: scaleY(1)
@keyframes lighter-box-loader-anim
0%, 40%, 100% transform: scaleY(0.5) -webkit-transform: scaleY(0.5) 20% transform: scaleY(1) -webkit-transform: scaleY(1)
@media (max-width: $lighter-box-fullscreen-breakpoint)
.lighter-box-modal // We need to use percentages here to account for issues with the URL bar on mobile browsers, see https://github.com/bokand/URLBarSizing#proposed-changes-to-chrome width: 100% height: 100% max-width: 100% max-height: 100% padding: ($lighter-box-fullscreen-padding + $lighter-box-fullscreen-navbar-height) $lighter-box-fullscreen-padding $lighter-box-fullscreen-padding .lighter-box-prev-link, .lighter-box-next-link, .lighter-box-close-button $height: $lighter-box-fullscreen-navbar-height position: fixed top: 0 height: $height font-size: #{$height * 0.8} line-height: #{$height * 0.9} background: #e8e8e8 color: #999 box-sizing: border-box .lighter-box-close-button box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) .lighter-box-prev-link, .lighter-box-next-link width: 25% .lighter-box-prev-link border-right: 1px solid #fff .lighter-box-next-link border-left: 1px solid #fff .lighter-box-close-button left: 0 width: 100%
.lighter-box-modal.ie9
display: inline-block width: auto margin: 0