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

.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;
}

.zoom img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

[class^="focusLock"] > [class^="carouselModal"] > div {
    height: fit-content;
    top: 50%;
    transform: translateY(-50%);
}

#magnify-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}