Files
keystone/public/scss/component/_zoom.scss
2025-07-30 13:44:47 +05:30

81 lines
1.4 KiB
SCSS

@use "../abstracts/index" as *;
.tf-zoom-main {
position: sticky;
top: 30px;
z-index: 50;
.drift-zoom-pane {
top: 0;
left: 0;
height: 520px;
max-width: 520px;
width: 100%;
background: #fff;
-webkit-transform: translate3d(0, 0, 0);
box-shadow: 0 1px 5px #7f7f7f05, 0 5px 18px #7f7f7f33;
z-index: 3;
}
}
.drift-bounding-box.drift-open {
background: #ffffff40;
box-shadow: 0 0 0 1px #0006 inset;
z-index: 5000;
}
.drift-zoom-pane {
z-index: 5000;
}
.section-image-zoom {
.other-image-zoom {
@include transition3;
}
&.zoom-active .other-image-zoom {
opacity: 0.3;
}
}
.pswp__bg {
background: var(--White);
}
.pswp__icn {
fill: rgb(34, 34, 34);
color: var(--White);
.pswp__icn-shadow {
stroke: var(--White);
stroke-width: 1px;
fill: none;
}
}
.pswp__counter {
color: #222;
text-shadow: 1px 1px 3px #ffffff;
}
.tf-model-viewer {
width: 100%;
height: 100%;
position: relative;
model-viewer {
display: block;
position: relative;
z-index: 5;
width: 100%;
height: 100%;
&.disabled {
pointer-events: none;
}
}
&.active {
model-viewer {
pointer-events: all;
}
.wrap-btn-viewer {
display: none;
}
}
}