mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
67 lines
1.2 KiB
SCSS
67 lines
1.2 KiB
SCSS
@import "~/styles/variables.scss";
|
|
|
|
.wrapper {
|
|
border-radius: $radius;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
|
|
:global(.swiper-container) {
|
|
width: 100%;
|
|
}
|
|
|
|
:global(.swiper-button-next),
|
|
:global(.swiper-button-prev) {
|
|
color: white;
|
|
font-size: 10px;
|
|
|
|
&::after {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.slide {
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font: $font_32_bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: auto;
|
|
max-width: 100%;
|
|
opacity: 1;
|
|
filter: brightness(50%) saturate(0.5);
|
|
transition: opacity 0.5s, filter 0.5s, transform 0.5s;
|
|
|
|
&:global(.swiper-slide-active) {
|
|
opacity: 1;
|
|
filter: brightness(100%);
|
|
}
|
|
|
|
@include tablet {
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.image {
|
|
max-height: calc(100vh - 70px - 70px);
|
|
max-width: 100%;
|
|
transition: box-shadow 1s;
|
|
box-shadow: transparentize(black, 0.7) 0 3px 5px;
|
|
|
|
:global(.swiper-slide-active) & {
|
|
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
|
|
transparentize(black, 0.7) 0 5px 5px,
|
|
transparentize(white, 0.95) 0 -1px 2px,
|
|
transparentize(white, 0.95) 0 -1px;
|
|
}
|
|
|
|
@include tablet {
|
|
padding-bottom: 0;
|
|
max-height: 100vh;
|
|
}
|
|
}
|