@canopy-iiif/app 1.8.8 → 1.8.9

package/ui/styles/index.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /**
  * Main stylesheet for the @canopy-iiif/app/ui package
  */
@@ -3011,11 +3010,12 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   padding: 0;
   margin: 0;
   --canopy-gallery-gap: 1.5rem;
-  --canopy-gallery-min-column: 16rem;
   --canopy-gallery-radius: 1rem;
+  --canopy-gallery-modal-actions-width: clamp(5rem, 18vw, 8rem);
   color: var(--color-gray-900);
 }
-.canopy-gallery__close-anchor {
+
+.canopy-gallery__close-anchor, .canopy-gallery__visually-hidden, .canopy-gallery__trigger-label, .canopy-gallery__nav-label {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -3024,6 +3024,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
+  white-space: nowrap;
 }
 .canopy-gallery__header {
   margin-bottom: clamp(1rem, 2vw, 1.5rem);
@@ -3042,7 +3043,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 }
 .canopy-gallery__grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--canopy-gallery-min-column, 16rem), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
   gap: var(--canopy-gallery-gap, 1.5rem);
   padding: var(--canopy-gallery-gap, 1.5rem) 0;
 }
@@ -3063,7 +3064,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 }
 .canopy-gallery__media {
   position: relative;
-  aspect-ratio: 4/3;
+  aspect-ratio: 1/1;
   overflow: hidden;
   border-radius: calc(var(--canopy-gallery-radius, 1rem) - 0.25rem);
   background: var(--color-gray-100);
@@ -3129,16 +3130,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   color: inherit;
   background: transparent;
 }
-.canopy-gallery__trigger-label {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  border: 0;
-}
+
 .canopy-gallery__modals {
   position: relative;
   z-index: 100;
@@ -3150,15 +3142,13 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   pointer-events: none;
   visibility: hidden;
   z-index: 200;
+  transform: translate3d(-200vw, 0, 0);
 }
 .canopy-gallery__modal:target, .canopy-gallery__modal[data-canopy-gallery-active="1"] {
   opacity: 1;
   pointer-events: auto;
   visibility: visible;
-}
-.canopy-gallery__modal:not([data-canopy-gallery-active]) {
-  width: 0;
-  height: 0;
+  transform: none;
 }
 .canopy-gallery__modal-scrim {
   min-height: 100vh;
@@ -3167,6 +3157,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   padding: 0;
 }
 .canopy-gallery__modal-panel {
+  position: relative;
   background: #fff;
   color: var(--color-gray-900);
   border-radius: 0;
@@ -3178,32 +3169,36 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   flex-direction: column;
   box-shadow: none;
 }
+.canopy-gallery__modal-actions {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  flex-direction: column;
+  gap: 1rem;
+  z-index: 5;
+  width: var(--canopy-gallery-modal-actions-width, clamp(5rem, 18vw, 8rem));
+  position: fixed;
+  top: var(--canopy-gallery-sticky-offset, 0);
+  bottom: var(--canopy-gallery-sticky-offset, 0);
+  right: 0;
+  left: auto;
+  padding: clamp(1rem, 2vw, 1.75rem) clamp(0.5rem, 2vw, 1rem);
+  background: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.5) 85%, rgba(255, 255, 255, 0));
+  border-left: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: -16px 0 32px rgba(15, 23, 42, 0.05);
+  margin-left: 0;
+  isolation: isolate;
+}
 .canopy-gallery__modal-header {
   border: none;
-  padding-top: 3rem;
+  padding-top: 1.382rem;
   padding-bottom: 0;
   padding-left: clamp(1.25rem, 3vw, 2.5rem);
-  padding-right: clamp(1.25rem, 3vw, 2.5rem);
+  padding-right: calc(clamp(1.25rem, 3vw, 2.5rem) + var(--canopy-gallery-modal-actions-width, clamp(5rem, 18vw, 8rem)));
   display: flex;
-  gap: clamp(1rem, 2vw, 2rem);
-}
-.canopy-gallery__modal-thumb {
-  flex: 0 0 auto;
-  width: 100px;
-  aspect-ratio: 1/1;
-  border-radius: 0.5rem;
-  overflow: hidden;
-  background: var(--color-gray-100);
-  height: fit-content;
-}
-.canopy-gallery__modal-thumb img,
-.canopy-gallery__modal-thumb picture,
-.canopy-gallery__modal-thumb video,
-.canopy-gallery__modal-thumb iframe {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
+  gap: 1rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
 }
 .canopy-gallery__modal-text {
   flex: 1;
@@ -3217,70 +3212,36 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   margin: 0 0 0.5rem;
 }
 .canopy-gallery__modal-title {
-  margin: 0.618rem 0 0;
-  font-size: 1.618rem;
+  margin: 0.382rem 0;
+  font-size: 1.382rem;
+  font-weight: 400;
   line-height: 1.2;
 }
 .canopy-gallery__modal-summary {
   margin: 0;
-  font-size: 1.2222rem;
   color: var(--color-gray-muted);
+  font-weight: 300;
 }
 .canopy-gallery__modal-body {
   padding: clamp(1rem, 3vw, 2.5rem);
-  flex: 1;
-  overflow: auto;
-}
-.canopy-gallery__modal-footer {
-  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.5rem);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-  border-top: 1px solid rgba(15, 23, 42, 0.08);
+  padding-right: calc(clamp(1rem, 3vw, 2.5rem) + var(--canopy-gallery-modal-actions-width, clamp(5rem, 18vw, 8rem)));
+  flex: 0 0 auto;
 }
 .canopy-gallery__modal-close {
   background: var(--color-accent-100);
   border-radius: 999px;
   padding: 0.35rem 1.25rem;
   font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
 }
 .canopy-gallery__modal-nav {
-  margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 1rem;
-}
-.canopy-gallery__modal-nav-link {
-  font-weight: 600;
-}
-.canopy-gallery__modal-nav-link--prev::before {
-  content: "← ";
-}
-.canopy-gallery__modal-nav-link--next::after {
-  content: " →";
-}
-@media (max-width: 640px) {
-  .canopy-gallery__grid {
-    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-  }
-  .canopy-gallery__item {
-    padding: 0.75rem;
-  }
-  .canopy-gallery__modal-panel {
-    max-height: 100vh;
-  }
-  .canopy-gallery__modal-header {
-    flex-direction: column;
-  }
-  .canopy-gallery__modal-thumb {
-    width: 100%;
-  }
-  .canopy-gallery__modal-nav {
-    width: 100%;
-    justify-content: space-between;
-    margin-left: 0;
-  }
+  gap: 0.382rem;
 }
 
 body[data-canopy-gallery-locked="1"] {
@@ -3307,8 +3268,106 @@ body[data-canopy-gallery-locked="1"] {
   padding: 0;
 }
 
-.canopy-gallery-item__content {
+.canopy-gallery__nav {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+  margin: 0;
+  height: 100%;
+}
+.canopy-gallery__nav-viewport {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+}
+.canopy-gallery__nav-viewport::-webkit-scrollbar {
+  width: 0.35rem;
+}
+.canopy-gallery__nav-viewport::-webkit-scrollbar-thumb {
+  background-color: rgba(15, 23, 42, 0.2);
+  border-radius: 0.5rem;
+}
+.canopy-gallery__nav-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+.canopy-gallery__nav-item {
+  position: relative;
+  list-style: none;
+}
+.canopy-gallery__nav-item[data-canopy-gallery-nav-selected] .canopy-gallery__nav-thumb {
+  outline: 3px solid var(--color-accent-default);
+}
+.canopy-gallery__nav-link {
+  display: inline-flex;
+  flex-direction: column;
+  text-decoration: none;
+  border-radius: 0.75rem;
+  background: var(--color-gray-50);
+  color: inherit;
+  width: 100%;
+  align-items: stretch;
+  justify-content: stretch;
+  padding: 3px;
+}
+.canopy-gallery__nav-radio {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.canopy-gallery__nav-thumb {
+  width: 100%;
+  aspect-ratio: 1/1;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  padding: 1px;
+  outline: 3px solid var(--color-gray-50);
+}
+.canopy-gallery__nav-thumb img,
+.canopy-gallery__nav-thumb picture,
+.canopy-gallery__nav-thumb video,
+.canopy-gallery__nav-thumb iframe {
   width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  opacity: 1;
+  transition: all 0.2s ease;
+  border-radius: 0.5rem;
+}
+.canopy-gallery__nav-button {
+  flex: 0 0 auto;
+  width: 100%;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.85);
+  font-size: 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.canopy-gallery__nav-controls {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+.canopy-gallery__nav-button-icon {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+.canopy-gallery__modal .canopy-gallery__nav {
+  margin: clamp(1rem, 3vw, 1.5rem) 0;
+  padding-bottom: 0.25rem;
 }
 
 .canopy-gallery-item__content_flex {
@@ -3340,6 +3399,28 @@ body[data-canopy-gallery-locked="1"] {
   line-height: 1.45;
 }
 
+@media (max-width: 640px) {
+  .canopy-gallery__grid {
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  }
+  .canopy-gallery__item {
+    padding: 0.75rem;
+  }
+  .canopy-gallery__modal-panel {
+    max-height: 100vh;
+  }
+  .canopy-gallery__modal-header {
+    flex-direction: column;
+  }
+  .canopy-gallery__modal-thumb {
+    width: 100%;
+  }
+  .canopy-gallery__modal-actions {
+    gap: 0.25rem;
+    top: 0;
+    padding: 0.5rem clamp(1rem, 4vw, 2rem) 0.25rem;
+  }
+}
 /**
  * Define source files for utility classes
  */