@mantine/lightbox 9.5.2

package/styles.layer.css

@@ -0,0 +1,263 @@
+@layer mantine {.m_4f1afa9a {
+  --lightbox-transition-duration: 200ms;
+  --lightbox-overlay-color: rgba(0, 0, 0, 0.9);
+  --lightbox-z-index: 400;
+  --lightbox-toolbar-height: calc(3.5rem * var(--mantine-scale));
+  --lightbox-thumbnails-height: calc(6.25rem * var(--mantine-scale));
+
+  display: contents;
+}
+
+.m_143cf98 {
+  position: fixed;
+  inset: 0;
+  z-index: var(--lightbox-z-index);
+  background-color: var(--lightbox-overlay-color);
+}
+
+.m_7b06bfc1 {
+  position: fixed;
+  inset: 0;
+  z-index: var(--lightbox-z-index);
+  display: flex;
+  flex-direction: column;
+  color: var(--mantine-color-white);
+  outline: none;
+}
+
+.m_fe5b16c3 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--lightbox-toolbar-height);
+  padding: 0 var(--mantine-spacing-md);
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.m_9e01b17c {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+}
+
+.m_19d8cbd5 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(2.5rem * var(--mantine-scale));
+  height: calc(2.5rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-sm);
+  color: var(--mantine-color-white);
+  opacity: 0.8;
+  transition:
+    opacity var(--lightbox-transition-duration) ease,
+    background-color var(--lightbox-transition-duration) ease;
+}
+
+@media (hover: hover) {
+
+  .m_19d8cbd5:hover {
+    opacity: 1;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+@media (hover: none) {
+
+  .m_19d8cbd5:active {
+    opacity: 1;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.m_7b66e144 {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-white);
+  opacity: 0.8;
+  user-select: none;
+}
+
+.m_f5ce649a {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.m_7f838760 {
+  height: 100%;
+  overflow: hidden;
+}
+
+.m_b5439507 {
+  display: flex;
+  height: 100%;
+}
+
+.m_9450faf9 {
+  position: relative;
+  flex: 0 0 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-md);
+  min-width: 0;
+}
+
+.m_e659b1e2 {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+  transition: transform var(--lightbox-transition-duration) ease;
+}
+
+.m_e659b1e2[data-zoom-enabled] {
+    touch-action: none;
+  }
+
+.m_e659b1e2[data-zoomed] {
+    cursor: grab;
+  }
+
+.m_e659b1e2[data-zoomed]:active {
+      cursor: grabbing;
+    }
+
+.m_e659b1e2[data-dragging] {
+    transition: none;
+  }
+
+.m_e659b1e2[data-zoom-enabled]:not([data-zoomed]) {
+    cursor: zoom-in;
+  }
+
+.m_e70f1d02 {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.m_411d1cbf {
+  display: block;
+  padding: 0 var(--mantine-spacing-md);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.m_3a7e4a85 {
+  width: fit-content;
+  max-width: 100%;
+  margin-inline: auto;
+  height: var(--lightbox-thumbnails-height);
+  overflow: hidden;
+}
+
+.m_59a13682 {
+  display: flex;
+  gap: var(--mantine-spacing-xs);
+  height: 100%;
+  align-items: center;
+}
+
+.m_3be82a34 {
+  flex: 0 0 auto;
+  width: calc(4rem * var(--mantine-scale));
+  height: calc(4rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-sm);
+  overflow: hidden;
+  opacity: 0.5;
+  border: calc(0.125rem * var(--mantine-scale)) solid transparent;
+  cursor: pointer;
+  transition:
+    opacity var(--lightbox-transition-duration) ease,
+    border-color var(--lightbox-transition-duration) ease;
+  padding: 0;
+  background: none;
+}
+
+@media (hover: hover) {
+
+  .m_3be82a34:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (hover: none) {
+
+  .m_3be82a34:active {
+    opacity: 0.8;
+  }
+}
+
+.m_3be82a34[data-active] {
+    opacity: 1;
+    border-color: var(--mantine-primary-color-filled);
+  }
+
+.m_fd95cf87 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.m_15a759cc {
+  position: absolute;
+  top: 50%;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 var(--mantine-spacing-md);
+  pointer-events: none;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+.m_a5bee41e {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(3rem * var(--mantine-scale));
+  height: calc(3rem * var(--mantine-scale));
+  color: var(--mantine-color-white);
+  pointer-events: all;
+  opacity: 0.7;
+  transition: opacity var(--lightbox-transition-duration) ease;
+}
+
+@media (hover: hover) {
+
+  .m_a5bee41e:hover {
+    opacity: 1;
+  }
+}
+
+@media (hover: none) {
+
+  .m_a5bee41e:active {
+    opacity: 1;
+  }
+}
+
+.m_a5bee41e[data-inactive] {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+.m_633f252e {
+  text-align: center;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-white);
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.m_1ae53e92 {
+  color: var(--mantine-color-white);
+}
+}