@canopy-iiif/app 0.10.31 → 0.11.0

package/ui/styles/components/_interstitial-hero.scss

@@ -116,6 +116,21 @@
     }
   }
 
+  &--hero-text {
+    .canopy-interstitial__body {
+      align-items: center;
+    }
+
+    .canopy-interstitial__panel {
+      padding: 1.618rem 0 1rem;
+    }
+
+    .canopy-interstitial__description {
+      color: var(--color-accent-800);
+      font-size: 0.9222rem;
+    }
+  }
+
   &__slider {
     position: relative;
     width: 100%;
@@ -136,6 +151,13 @@
     align-items: stretch;
   }
 
+  &__slide-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    height: 100%;
+  }
+
   &__pane {
     position: relative;
     width: 100%;
@@ -264,43 +286,20 @@
     text-align: center;
   }
 
-  &__caption-link {
-    color: var(--hero-caption-link);
-    text-decoration: underline;
-    text-underline-offset: 0.35em;
-    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
-    transition:
-      color 0.2s ease,
-      text-decoration-color 0.2s ease;
-
-    &:hover,
-    &:focus-visible {
-      color: var(--hero-caption-link);
-      text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
-    }
-  }
-
   &__nav {
     position: absolute;
     inset: 0;
     z-index: 4;
+    pointer-events: none;
   }
 
   &__nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    width: 2.75rem;
-    height: 2.75rem;
+    width: 2.618rem !important;
+    height: 2.618rem !important;
     border-radius: 9999px;
-    border: 1px solid
-      color-mix(in srgb, var(--color-gray-400) 55%, transparent);
-    background-color: color-mix(
-      in srgb,
-      var(--color-gray-100) 65%,
-      transparent
-    );
-    backdrop-filter: blur(6px);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -309,15 +308,20 @@
       background-color 0.2s ease,
       border-color 0.2s ease,
       color 0.2s ease;
-    color: var(--colors-primary);
+    stroke: var(--color-accent-default) !important;
+    color: var(--color-accent-default) !important;
+    pointer-events: auto;
 
     &::after {
-      content: "";
-      border: solid currentColor;
-      border-width: 0 2px 2px 0;
-      display: inline-block;
-      padding: 7px;
-      transform: rotate(135deg);
+      content: none;
+      display: none;
+    }
+
+    svg {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      stroke: var(--color-accent-default);
     }
 
     &--prev {
@@ -326,25 +330,10 @@
 
     &--next {
       right: 1.5rem;
-
-      &::after {
-        transform: rotate(-45deg);
-      }
     }
 
     &:hover,
     &:focus-visible {
-      background-color: color-mix(
-        in srgb,
-        var(--color-accent-200) 55%,
-        transparent
-      );
-      border-color: color-mix(
-        in srgb,
-        var(--color-accent-400) 70%,
-        transparent
-      );
-      color: var(--color-accent-700);
     }
   }
 

package/ui/styles/index.css

@@ -1017,6 +1017,16 @@ section[data-footnotes] ul li,
     font-size: 2.618rem;
   }
 }
+.canopy-interstitial--hero-text .canopy-interstitial__body {
+  align-items: center;
+}
+.canopy-interstitial--hero-text .canopy-interstitial__panel {
+  padding: 1.618rem 0 1rem;
+}
+.canopy-interstitial--hero-text .canopy-interstitial__description {
+  color: var(--color-accent-800);
+  font-size: 0.9222rem;
+}
 .canopy-interstitial__slider {
   position: relative;
   width: 100%;
@@ -1034,6 +1044,12 @@ section[data-footnotes] ul li,
   justify-content: center;
   align-items: stretch;
 }
+.canopy-interstitial__slide-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  height: 100%;
+}
 .canopy-interstitial__pane {
   position: relative;
   width: 100%;
@@ -1141,46 +1157,37 @@ section[data-footnotes] ul li,
   margin: 1.5rem auto 0;
   text-align: center;
 }
-.canopy-interstitial__caption-link {
-  color: var(--hero-caption-link);
-  text-decoration: underline;
-  text-underline-offset: 0.35em;
-  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
-  transition: color 0.2s ease, text-decoration-color 0.2s ease;
-}
-.canopy-interstitial__caption-link:hover, .canopy-interstitial__caption-link:focus-visible {
-  color: var(--hero-caption-link);
-  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
-}
 .canopy-interstitial__nav {
   position: absolute;
   inset: 0;
   z-index: 4;
+  pointer-events: none;
 }
 .canopy-interstitial__nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  width: 2.75rem;
-  height: 2.75rem;
+  width: 2.618rem !important;
+  height: 2.618rem !important;
   border-radius: 9999px;
-  border: 1px solid color-mix(in srgb, var(--color-gray-400) 55%, transparent);
-  background-color: color-mix(in srgb, var(--color-gray-100) 65%, transparent);
-  backdrop-filter: blur(6px);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-  color: var(--colors-primary);
+  stroke: var(--color-accent-default) !important;
+  color: var(--color-accent-default) !important;
+  pointer-events: auto;
 }
 .canopy-interstitial__nav-btn::after {
-  content: "";
-  border: solid currentColor;
-  border-width: 0 2px 2px 0;
-  display: inline-block;
-  padding: 7px;
-  transform: rotate(135deg);
+  content: none;
+  display: none;
+}
+.canopy-interstitial__nav-btn svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  stroke: var(--color-accent-default);
 }
 .canopy-interstitial__nav-btn--prev {
   left: 1.5rem;
@@ -1188,14 +1195,6 @@ section[data-footnotes] ul li,
 .canopy-interstitial__nav-btn--next {
   right: 1.5rem;
 }
-.canopy-interstitial__nav-btn--next::after {
-  transform: rotate(-45deg);
-}
-.canopy-interstitial__nav-btn:hover, .canopy-interstitial__nav-btn:focus-visible {
-  background-color: color-mix(in srgb, var(--color-accent-200) 55%, transparent);
-  border-color: color-mix(in srgb, var(--color-accent-400) 70%, transparent);
-  color: var(--color-accent-700);
-}
 .canopy-interstitial__pagination {
   position: absolute;
   z-index: 4;