src/plugins/imageZoom/styles.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

.vc-imgzoom-lens {
    position: absolute;
    inset: 0;
    z-index: 9999;
    border: 2px solid grey;
    border-radius: 50%;
    overflow: hidden;
    cursor: none;
    box-shadow: inset 0 0 10px 2px grey;
    filter: drop-shadow(0 0 2px grey);
    pointer-events: none;
}

.vc-imgzoom-square {
    border-radius: 0;
}

.vc-imgzoom-nearest-neighbor > img {
    image-rendering: pixelated; /* https://googlechrome.github.io/samples/image-rendering-pixelated/index.html */
}

/* make the carousel take up less space so we can click the backdrop and exit out of it */
[class|="carouselModal"] {
    height: fit-content;
    box-shadow: none;
}

[class*="modalCarouselWrapper"] {
    height: fit-content;
    top: 50%;
    transform: translateY(-50%);
}

[class|="wrapper"]:has(> #vc-imgzoom-magnify-modal) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}