From df7357b3574bf87eba5caa41e637c73ba2158ee3 Mon Sep 17 00:00:00 2001 From: Syncx <47534062+Syncxv@users.noreply.github.com> Date: Thu, 6 Apr 2023 11:06:11 +1000 Subject: feat(plugin): Image Zoom (#510) Co-authored-by: Nuckyz <61953774+Nuckyz@users.noreply.github.com> Co-authored-by: Ven --- src/plugins/imageZoom/styles.css | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/plugins/imageZoom/styles.css (limited to 'src/plugins/imageZoom/styles.css') diff --git a/src/plugins/imageZoom/styles.css b/src/plugins/imageZoom/styles.css new file mode 100644 index 0000000..103ac54 --- /dev/null +++ b/src/plugins/imageZoom/styles.css @@ -0,0 +1,31 @@ +.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%); +} -- cgit