47 lines
875 B
SCSS
47 lines
875 B
SCSS
|
div.modal-thumbnail {
|
||
|
|
margin-bottom: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.modal {
|
||
|
|
opacity: 0;
|
||
|
|
z-index: 900;
|
||
|
|
position: fixed;
|
||
|
|
transition: opacity 0.2s linear;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
background-color: rgba($color-black, 0.5);
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
text-align: center;
|
||
|
|
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||
|
|
-webkit-backdrop-filter: blur(5px);
|
||
|
|
backdrop-filter: blur(5px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div.modal a {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.modal a img {
|
||
|
|
display: inline-block;
|
||
|
|
box-shadow: 0 0 20px $color-black;
|
||
|
|
max-width: 90%;
|
||
|
|
max-height: 90%;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
span.spacer {
|
||
|
|
display: inline-block;
|
||
|
|
height: 100%;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.modal:target {
|
||
|
|
opacity: 1;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|