.immomakler-gallery--vertical_thumbs { --immomakler-gallery-gap: 10px; --immomakler-gallery-vertical-thumb-width: 200px;
--immomakler-gallery-main-aspect: 16 / 9;
--immomakler-gallery-thumb-aspect: 16 / 9; --immomakler-gallery-primary-color: #af1615;
--immomakler-gallery-primary-color-inverted: #fff; --immomakler-gallery-nav-opacity: 0.8;
--immomakler-gallery-thumb-nav-opacity: 0.5;
--immomakler-gallery-thumb-nav-opacity-hover: 0.9;
--immomakler-gallery-thumb-default-opacity: 0.6; --immomakler-gallery-nav-button-size: 30px; --immomakler-gallery-nav-clickarea-width: 45px;
--immomakler-gallery-thumb-nav-height: 20px; --swiper-navigation-sides-offset: 12px;
display: grid;
grid-template-columns: 1fr var(--immomakler-gallery-vertical-thumb-width);
gap: var(--immomakler-gallery-gap); width: 100%;
max-width: 100%;
overflow: hidden;
} .immomakler-gallery--vertical_thumbs::before {
content: "";
grid-column: 1;
grid-row: 1;
width: 100%;
aspect-ratio: var(--immomakler-gallery-main-aspect);
min-width: 0;
} .immomakler-gallery--vertical_thumbs .immomakler-gallery__main { grid-column: 1;
grid-row: 1;
position: relative;
width: 100%;
min-width: 0;
height: 100%;
overflow: hidden;
user-select: none; border-radius: var(--immomakler-gallery-border-radius, 0);
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__main .swiper-slide {
overflow: hidden;
cursor: zoom-in;
width: 100%;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__main .swiper-slide img.immomakler-gallery__image,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__main .swiper-slide picture > img.immomakler-gallery__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .immomakler-gallery--vertical_thumbs .immomakler-gallery__prev,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__next {
width: var(--immomakler-gallery-nav-clickarea-width);
height: 100%;
top: 0;
margin-top: 0; background: transparent;
border-radius: 0; display: flex;
align-items: center;
justify-content: center;
color: var(--immomakler-gallery-primary-color-inverted);
visibility: hidden;
} .immomakler-gallery--vertical_thumbs .immomakler-gallery__prev {
left: 0;
right: auto;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__next {
right: 0;
left: auto;
} .immomakler-gallery--vertical_thumbs .immomakler-gallery__prev::before,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--immomakler-gallery-nav-button-size);
height: var(--immomakler-gallery-nav-button-size);
background-color: var(--immomakler-gallery-primary-color);
border-radius: 50%;
opacity: var(--immomakler-gallery-nav-opacity);
transition: opacity 200ms ease, background-color 200ms ease;
} .immomakler-gallery--vertical_thumbs .swiper-navigation-icon {
display: none;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__prev::after,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__next::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: var(--immomakler-gallery-nav-button-size);
height: var(--immomakler-gallery-nav-button-size);
transform: translate(-50%, -50%);
background-color: var(--immomakler-gallery-primary-color-inverted);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 42% 42%;
mask-size: 42% 42%;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__prev::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15%204L7%2012l8%208'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15%204L7%2012l8%208'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__next::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%204l8%208-8%208'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%204l8%208-8%208'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__prev.swiper-button-disabled,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__next.swiper-button-disabled {
pointer-events: auto;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__prev.swiper-button-disabled::before,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__next.swiper-button-disabled::before {
background-color: #666;
} .immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs { grid-column: 2;
grid-row: 1;
position: relative;
width: 100%;
min-width: 0;
height: 100%;
contain: size;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs .swiper-slide {
aspect-ratio: var(--immomakler-gallery-thumb-aspect);
cursor: pointer;
height: auto !important; min-height: 0 !important;
opacity: var(--immomakler-gallery-thumb-default-opacity);
transition: opacity 100ms ease; overflow: hidden;
border-radius: var(--immomakler-gallery-border-radius, 0);
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs .swiper-slide:hover,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs .swiper-slide img.immomakler-gallery__image,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs .swiper-slide picture > img.immomakler-gallery__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-prev,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-next {
position: absolute;
left: 0;
width: 100%;
height: var(--immomakler-gallery-thumb-nav-height);
z-index: 2;
color: var(--immomakler-gallery-primary-color-inverted);
background-color: var(--immomakler-gallery-primary-color);
opacity: var(--immomakler-gallery-thumb-nav-opacity);
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
line-height: var(--immomakler-gallery-thumb-nav-height);
text-align: center;
transition: opacity 500ms ease;
visibility: hidden;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-prev::after,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-next::after {
display: block;
color: inherit; font-size: calc(var(--immomakler-gallery-thumb-nav-height) * 0.6);
line-height: 1;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-prev::after {
content: "▲";
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-next::after {
content: "▼";
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-prev {
top: 0;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-next {
bottom: 0;
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-prev:hover,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-next:hover {
opacity: var(--immomakler-gallery-thumb-nav-opacity-hover);
} .immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-prev.swiper-button-disabled,
.immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs-next.swiper-button-disabled {
cursor: default;
animation: immomakler-gallery-thumb-nav-fade 1.5s forwards;
}
@keyframes immomakler-gallery-thumb-nav-fade {
0% {
background-color: var(--immomakler-gallery-primary-color);
opacity: var(--immomakler-gallery-thumb-nav-opacity);
pointer-events: auto;
}
30% {
background-color: #666;
opacity: 0.4;
pointer-events: auto;
}
100% {
background-color: #666;
opacity: 0;
pointer-events: none;
}
} .immomakler-gallery--vertical_thumbs:hover .immomakler-gallery__prev,
.immomakler-gallery--vertical_thumbs:hover .immomakler-gallery__next,
.immomakler-gallery--vertical_thumbs:hover .immomakler-gallery__thumbs-prev,
.immomakler-gallery--vertical_thumbs:hover .immomakler-gallery__thumbs-next,
.immomakler-gallery--vertical_thumbs:has(:focus-visible) .immomakler-gallery__prev,
.immomakler-gallery--vertical_thumbs:has(:focus-visible) .immomakler-gallery__next,
.immomakler-gallery--vertical_thumbs:has(:focus-visible) .immomakler-gallery__thumbs-prev,
.immomakler-gallery--vertical_thumbs:has(:focus-visible) .immomakler-gallery__thumbs-next {
visibility: visible;
} @media (max-width: 768px) {
.immomakler-gallery--vertical_thumbs {
grid-template-columns: 1fr;
} .immomakler-gallery--vertical_thumbs .immomakler-gallery__thumbs {
display: none;
} .immomakler-gallery--vertical_thumbs.immomakler-gallery--show-mobile-thumbs {
grid-template-columns: 1fr var(--immomakler-gallery-vertical-thumb-width);
}
.immomakler-gallery--vertical_thumbs.immomakler-gallery--show-mobile-thumbs .immomakler-gallery__thumbs {
display: block;
}
} .immomakler-gallery--vertical_thumbs .immomakler-gallery__pagination {
display: none;
position: absolute;
bottom: 8px;
left: 0;
right: 0;
width: 100%;
text-align: center;
z-index: 1;
}
.immomakler-gallery--vertical_thumbs.immomakler-gallery--no-thumbs .immomakler-gallery__pagination {
display: block;
}
@media (max-width: 768px) {
.immomakler-gallery--vertical_thumbs:not(.immomakler-gallery--show-mobile-thumbs) .immomakler-gallery__pagination {
display: block;
}
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #fff;
opacity: 0.6;
margin: 0 4px;
border-radius: 50%;
display: inline-block;
transition: opacity 150ms ease, background-color 150ms ease;
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.immomakler-gallery--vertical_thumbs .immomakler-gallery__pagination .swiper-pagination-bullet-active {
background: var(--immomakler-gallery-primary-color);
opacity: 1;
} .immomakler-gallery--vertical_thumbs.immomakler-gallery--rounded-wrapper {
border-radius: var(--immomakler-gallery-border-radius, 0);
}
.immomakler-gallery--vertical_thumbs.immomakler-gallery--rounded-wrapper .immomakler-gallery__main,
.immomakler-gallery--vertical_thumbs.immomakler-gallery--rounded-wrapper .immomakler-gallery__thumbs .swiper-slide {
border-radius: 0;
}