mirror of
https://github.com/s427/MARL.git
synced 2025-01-31 11:34:46 +01:00
86 lines
1.3 KiB
SCSS
86 lines
1.3 KiB
SCSS
.overlay {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.overlay-content {
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
.overlay-content,
|
|
.overlay-content img {
|
|
max-width: calc(100dvw - 88px);
|
|
max-height: calc(100dvh - 44px);
|
|
}
|
|
|
|
.overlay-content img {
|
|
box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 1);
|
|
}
|
|
|
|
.overlay-ui {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
|
|
button {
|
|
display: block;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
svg {
|
|
display: block;
|
|
width: 36px;
|
|
height: 36px;
|
|
fill: var(--overlay-icon);
|
|
}
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
svg {
|
|
fill: var(--overlay-icon-hover);
|
|
}
|
|
}
|
|
}
|
|
.viewer-close {
|
|
top: 4px;
|
|
right: 4px;
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
.viewer-next {
|
|
right: 4px;
|
|
top: calc(50% - 18px);
|
|
}
|
|
.viewer-prev {
|
|
left: 4px;
|
|
top: calc(50% - 18px);
|
|
}
|
|
|
|
.backdrop {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
background-color: var(--overlay-backdrop);
|
|
}
|
|
}
|