@chinggis.systems/collection-ui 1.0.4 → 1.0.6

package/dist/styles.css

@@ -221,6 +221,10 @@
   padding: 0 16px 28px;
 }
 
+.collection-ui-grid-double__track {
+  height: 328px;
+}
+
 .collection-ui-grid-double__slide,
 .collection-ui-grid-special__slide {
   height: auto;
@@ -228,19 +232,44 @@
   width: max-content !important;
 }
 
+.collection-ui-grid-double__track .swiper-wrapper {
+  overflow-y: hidden;
+}
+
 .collection-ui-grid-double__panel {
+  align-items: flex-start;
+  display: flex;
+  gap: 16px;
+  padding-block: 6px 16px;
+}
+
+.collection-ui-grid-double__column {
+  align-items: end;
   display: grid;
-  gap: 12px 8px;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-  grid-template-rows: repeat(2, minmax(0, auto));
+  flex: 0 0 auto;
+  gap: 14px;
+  grid-template-rows: repeat(2, max-content);
+  justify-items: center;
+  width: max-content;
 }
 
 .collection-ui-grid-double__item,
 .collection-ui-grid-special__item {
+  display: flex;
+  justify-content: center;
+  justify-self: center;
   min-width: 0;
 }
 
+.collection-ui-grid-double__item {
+  justify-self: center;
+  width: auto;
+}
+
+.collection-ui-grid-double__mobile-scroll {
+  display: none;
+}
+
 .collection-ui-grid-special__panel {
   align-items: stretch;
   display: flex;
@@ -375,28 +404,42 @@
   width: 100%;
 }
 
+.collection-ui-grid__view-all {
+  align-self: start;
+  height: 180px;
+  justify-self: center;
+  max-width: 190px;
+  min-height: 0;
+  padding: 16px;
+}
+
+.collection-ui-grid__view-all .collection-ui-view-all__icon {
+  font-size: 1.25rem;
+  height: 44px;
+  margin-bottom: 10px;
+  width: 44px;
+}
+
 .collection-ui-grid__item .we-lockup {
   max-width: min(100%, 190px);
   width: 190px;
 }
 
-.collection-ui-grid__item .we-book-overlay {
+.collection-ui-grid__item .collection-ui-book-media {
   margin-inline: auto;
   max-width: 100%;
 }
 
-.collection-detail-page .collection-ui-grid__item .we-book-overlay {
-  width: var(--spine-width, 180px);
-}
-
-.collection-detail-page .collection-ui-grid__item .we-artwork__image {
+.collection-detail-page
+  .collection-ui-grid__item
+  .collection-ui-book-media
+  img {
   height: var(--spine-height, 266px) !important;
-  object-fit: cover;
-  width: 100% !important;
+  object-fit: contain;
+  width: auto !important;
 }
 
-.collection-ui-grid__item .collection-ui-card__media,
-.collection-ui-grid__view-all {
+.collection-ui-grid__item .collection-ui-card__media {
   min-height: 168px;
 }
 
@@ -451,9 +494,12 @@
   width: 112px;
 }
 
+.collection-ui-card:has(.collection-ui-book-media) {
+  width: max-content;
+}
+
 .collection-ui-card--image-only {
   justify-content: flex-end;
-  width: 88px;
 }
 
 .collection-ui-grid-special
@@ -465,15 +511,62 @@
   min-height: 0;
 }
 
-.collection-ui-card--image-only .we-book-overlay {
+.collection-ui-card--image-only .collection-ui-book-media {
   margin-bottom: 0;
 }
 
-.collection-ui-grid-double .we-book-overlay,
-.collection-ui-grid-special .we-book-overlay {
+.collection-ui-grid-double .collection-ui-book-media,
+.collection-ui-grid-special .collection-ui-book-media {
   margin-bottom: 0;
 }
 
+.collection-ui-grid-double .collection-ui-book-media {
+  height: var(--spine-height, 132px) !important;
+  --book-depth: clamp(2px, calc(var(--spine-height, 132px) * 0.012), 4px);
+  --book-page-line: 1px;
+  --book-spine-left: clamp(4px, calc(var(--spine-height, 132px) * 0.026), 7px);
+  --book-spine-width: clamp(
+    8px,
+    calc(var(--spine-height, 132px) * 0.065),
+    14px
+  );
+  --book-spine-hover-width: clamp(
+    14px,
+    calc(var(--spine-height, 132px) * 0.1),
+    22px
+  );
+  overflow: visible;
+  padding-right: var(--book-depth);
+  width: var(--spine-measured-width, var(--spine-width, auto));
+}
+
+.collection-ui-grid-double .collection-ui-book-media__cover img {
+  height: var(--spine-height, 132px);
+  max-height: none;
+  max-width: none;
+  object-fit: contain;
+  object-position: center;
+  width: auto;
+}
+
+.collection-ui-grid-double .collection-ui-product-media,
+.collection-ui-grid-double .collection-ui-audio-media {
+  background: #fff;
+  border-radius: 6px;
+  height: 96px !important;
+  overflow: hidden;
+  width: 96px !important;
+}
+
+.collection-ui-grid-double .collection-ui-product-media img,
+.collection-ui-grid-double .collection-ui-audio-media img {
+  height: 100% !important;
+  max-height: none;
+  max-width: none;
+  object-fit: contain;
+  width: 100% !important;
+}
+
 .collection-ui-card--featured {
   width: auto;
 }
@@ -529,126 +622,136 @@
 }
 
 .collection-ui-book-media {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  overflow: visible;
-}
-
-.collection-ui-book-media__artwork {
+  --book-depth: clamp(3px, calc(var(--spine-height, 266px) * 0.018), 7px);
+  --book-page-line: clamp(1px, calc(var(--spine-height, 266px) * 0.006), 2px);
+  --book-spine-left: clamp(5px, calc(var(--spine-height, 266px) * 0.03), 10px);
+  --book-spine-width: clamp(
+    12px,
+    calc(var(--spine-height, 266px) * 0.09),
+    24px
+  );
+  --book-spine-hover-width: clamp(
+    20px,
+    calc(var(--spine-height, 266px) * 0.14),
+    38px
+  );
+  --book-shadow-x: clamp(10px, calc(var(--spine-height, 266px) * 0.08), 22px);
+  --book-shadow-y: clamp(16px, calc(var(--spine-height, 266px) * 0.14), 36px);
+  --book-shadow-blur: clamp(
+    18px,
+    calc(var(--spine-height, 266px) * 0.16),
+    42px
+  );
   display: block;
   flex: 0 0 auto;
   overflow: visible;
+  perspective: 1600px;
   position: relative;
-  z-index: 1;
-}
-
-.collection-ui-book-media__artwork::before {
-  background-image: url("./assets/spine/FlatShadow.webp");
-  background-size: 100% 100%;
-  content: "";
-  display: block;
-  height: 115%;
-  left: -10%;
-  opacity: 0.6;
+  width: var(--spine-measured-width, var(--spine-width, 150px));
+}
+
+.collection-ui-book-media__pages {
+  background: #fff;
+  border: 1px solid rgb(128 128 128 / 76%);
+  border-radius: 3px;
+  box-shadow:
+    var(--book-shadow-x) var(--book-shadow-y) var(--book-shadow-blur)
+      calc(var(--book-shadow-blur) * -0.43) rgb(0 0 0 / 24%),
+    inset calc(var(--book-page-line) * -1) 0 0 #7f7f7f,
+    inset calc(var(--book-page-line) * -1.5) 0 0 #dbdbdb,
+    inset calc(var(--book-page-line) * -2) 0 0 #fff,
+    inset calc(var(--book-page-line) * -2.5) 0 0 #d7d7d7,
+    inset calc(var(--book-page-line) * -3) 0 0 #fff,
+    inset calc(var(--book-page-line) * -3.5) 0 0 #d7d7d7,
+    inset calc(var(--book-page-line) * -4) 0 0 #fff,
+    inset calc(var(--book-page-line) * -4.5) 0 0 #d7d7d7,
+    inset calc(var(--book-page-line) * -5) 0 0 #fff;
+  height: 96%;
+  left: var(--book-depth);
   position: absolute;
-  top: -4%;
-  width: 120%;
-  z-index: 1;
+  top: 2%;
+  width: 100%;
 }
 
-.collection-ui-book-media__lighting {
-  inset: 0;
+.collection-ui-book-media__cover {
+  background: #111;
+  border-radius: 3px;
+  box-shadow:
+    inset 4px 1px 3px rgb(255 255 255 / 38%),
+    inset 0 -1px 2px rgb(0 0 0 / 50%),
+    8px 14px 22px -10px rgb(0 0 0 / 28%);
+  height: var(--spine-height, 266px);
+  overflow: hidden;
   position: relative;
-  z-index: 2;
-}
-
-.collection-ui-book-media__background {
-  filter: blur(8px);
-  inset: 0;
-  left: 50%;
-  margin: 0;
-  opacity: 0.25;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  transform-origin: 0 50%;
+  transition:
+    box-shadow 0.25s ease,
+    transform 0.25s ease;
+  width: 100%;
   z-index: 1;
 }
 
-@supports (mix-blend-mode: multiply) {
-  .collection-ui-book-media__background {
-    mix-blend-mode: multiply;
-  }
+.collection-ui-book-media:hover .collection-ui-book-media__cover {
+  box-shadow:
+    inset 4px 1px 3px rgb(255 255 255 / 38%),
+    inset 0 -1px 2px rgb(0 0 0 / 50%),
+    18px 10px 18px -10px rgb(0 0 0 / 26%);
+  transform: rotateY(-18deg);
+  transform-style: preserve-3d;
 }
 
-@supports (mix-blend-mode: multiply) {
-  .collection-ui-book-media__lighting::after {
-    background-image: url("./assets/spine/BurnBlend.png");
-    background-size: 100% 100%;
-    border-radius: 2.5px;
-    content: "";
-    display: block;
-    height: 100%;
-    inset: 0;
-    mix-blend-mode: multiply;
-    position: absolute;
-    z-index: 1;
-  }
-}
-
-.collection-ui-book-media__foreground {
-  inset: 0;
-  position: relative;
-  z-index: 2;
-}
-
-.collection-ui-book-media__foreground::before {
-  background-image: url("./assets/spine/NormalBlend.webp");
-  background-size: 100% 100%;
-  border-radius: 2.5px;
-  content: "";
+.collection-ui-book-media__cover img {
   display: block;
-  height: 100%;
-  inset: 0;
-  position: absolute;
+  height: var(--spine-height, 266px);
+  max-width: none;
+  object-fit: fill;
+  width: 100%;
   z-index: 1;
 }
 
-@supports (mix-blend-mode: soft-light) {
-  .collection-ui-book-media__foreground::after {
-    background-color: transparent;
-    background-image: url("./assets/spine/SoftLightBlend.webp");
-    background-size: 100% 100%;
-    border-radius: 2.5px;
-    content: "";
-    display: block;
-    height: 100%;
-    inset: 0;
-    mix-blend-mode: soft-light;
-    position: absolute;
-    z-index: 1;
-  }
+.collection-ui-book-media__spine {
+  background-image: linear-gradient(
+    90deg,
+    rgb(255 255 255 / 24%) 0,
+    rgb(255 255 255 / 0%) 100%
+  );
+  border-left: clamp(1px, calc(var(--spine-height, 266px) * 0.008), 2px) solid
+    rgb(0 0 0 / 8%);
+  height: 100%;
+  left: var(--book-spine-left);
+  position: absolute;
+  top: 0;
+  transition: width 0.25s ease;
+  width: var(--book-spine-width);
+  z-index: 2;
 }
 
-.collection-ui-book-media__background img,
-.collection-ui-book-media__foreground img {
-  border-radius: 2.5px;
-  display: block;
-  object-fit: cover;
-  position: relative;
-  z-index: 0;
+.collection-ui-book-media:hover .collection-ui-book-media__spine {
+  width: var(--book-spine-hover-width);
 }
 
-.collection-ui-book-media__artwork::after {
-  background-image: url("./assets/spine/FlatEdges.webp");
-  background-size: 100% 100%;
-  border-radius: 2.5px;
-  content: "";
-  display: block;
+.collection-ui-book-media__light {
+  background-image: linear-gradient(
+    90deg,
+    rgb(255 255 255 / 0%) 0,
+    rgb(255 255 255 / 20%) 100%
+  );
+  border-radius: 3px;
   height: 100%;
-  inset: 0;
+  opacity: 0.14;
   position: absolute;
-  z-index: 3;
+  right: 0;
+  top: 0;
+  transition:
+    opacity 0.25s ease,
+    width 0.25s ease;
+  width: 90%;
+  z-index: 2;
+}
+
+.collection-ui-book-media:hover .collection-ui-book-media__light {
+  opacity: 1;
+  width: 70%;
 }
 
 .collection-ui-audio-media,
@@ -764,12 +867,12 @@
 
 .collection-ui-special-item__media > *,
 .collection-ui-special-item__media img,
-.collection-ui-special-item__media .we-book-overlay {
+.collection-ui-special-item__media .collection-ui-book-media {
   max-height: calc(100% + 44px);
   max-width: 100%;
 }
 
-.collection-ui-special-item__media .we-book-overlay {
+.collection-ui-special-item__media .collection-ui-book-media {
   margin-bottom: 0;
 }
 
@@ -1373,6 +1476,134 @@
 }
 
 @media (max-width: 767px) {
+  .collection-ui-container,
+  .collection-ui-container--wide {
+    padding-inline: 16px;
+  }
+
+  .collection-ui-title {
+    margin-bottom: 8px;
+  }
+
+  .collection-ui-title__row {
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .collection-ui-title__heading {
+    font-size: 1rem;
+    min-width: 0;
+  }
+
+  .collection-ui-title__description {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  .collection-ui-new-layout-carousel {
+    margin-top: 12px;
+    padding-bottom: 12px;
+  }
+
+  .collection-ui-grid-double__track,
+  .collection-ui-grid-special__track {
+    overscroll-behavior-y: none;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding-bottom: 14px;
+    scrollbar-width: none;
+    touch-action: pan-x;
+  }
+
+  .collection-ui-grid-special__track {
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+
+  .collection-ui-grid-double__track::-webkit-scrollbar,
+  .collection-ui-grid-special__track::-webkit-scrollbar {
+    display: none;
+  }
+
+  .collection-ui-grid-special__track .swiper-wrapper,
+  .collection-ui-grid-special__slide {
+    scrollbar-width: none;
+  }
+
+  .collection-ui-grid-special__track .swiper-wrapper::-webkit-scrollbar,
+  .collection-ui-grid-special__slide::-webkit-scrollbar {
+    display: none;
+  }
+
+  .collection-ui-grid-special__track .swiper-wrapper,
+  .collection-ui-grid-special__slide {
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+
+  .collection-ui-grid-special,
+  .collection-ui-grid-special * {
+    scrollbar-width: none;
+  }
+
+  .collection-ui-grid-special *::-webkit-scrollbar {
+    display: none;
+    height: 0;
+    width: 0;
+  }
+
+  .collection-ui-grid-double .collection-ui-new-layout-carousel {
+    display: none;
+  }
+
+  .collection-ui-grid-double__mobile-scroll {
+    display: grid;
+    gap: 12px 10px;
+    grid-auto-columns: 96px;
+    grid-auto-flow: column;
+    grid-template-rows: repeat(2, minmax(0, auto));
+    margin-inline: -16px;
+    overscroll-behavior-y: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 12px 16px 16px;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+    touch-action: pan-x;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .collection-ui-grid-double__mobile-scroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  .collection-ui-grid-double__mobile-item {
+    display: flex;
+    justify-content: center;
+    min-width: 0;
+    scroll-snap-align: start;
+  }
+
+  .collection-ui-grid-double__panel {
+    gap: 12px 10px;
+    grid-auto-columns: minmax(96px, 96px);
+  }
+
+  .collection-ui-grid-double .collection-ui-card--image-only {
+    height: 96px;
+    width: 96px;
+  }
+
+  .collection-ui-grid-double__item .collection-ui-book-media img,
+  .collection-ui-grid-double__mobile-item .collection-ui-book-media img {
+    height: var(--spine-height, 132px) !important;
+    max-height: none;
+    max-width: none;
+    width: auto !important;
+  }
+
   .collection-ui-slide__slide {
     width: min(90dvw, calc(100% - 32px));
   }
@@ -1404,20 +1635,247 @@
   }
 
   .collection-ui-grid-special__panel {
-    gap: 18px;
-    grid-template-columns: minmax(116px, auto) minmax(104px, auto);
+    --collection-ui-grid-special-featured-width: clamp(136px, 38dvw, 156px);
+    --collection-ui-grid-special-featured-height: clamp(204px, 57dvw, 234px);
+    --collection-ui-grid-special-item-width: clamp(68px, 18dvw, 76px);
+    --collection-ui-grid-special-item-height: clamp(100px, 28dvw, 112px);
+    align-items: end;
+    display: grid;
+    gap: 12px;
+    grid-template-columns:
+      var(--collection-ui-grid-special-featured-width)
+      minmax(0, 1fr);
+    overflow: hidden;
+    width: clamp(300px, calc(100dvw - 72px), 340px);
+  }
+
+  .collection-ui-grid-special__featured {
+    align-items: center;
+    align-self: stretch;
+    min-height: var(--collection-ui-grid-special-featured-height);
+    overflow: hidden;
   }
 
   .collection-ui-grid-special__items {
-    grid-template-columns: minmax(104px, auto);
+    align-items: end;
+    gap: 10px 8px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .collection-ui-grid-special__item {
+    align-items: end;
+    display: flex;
+    height: var(--collection-ui-grid-special-item-height);
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .collection-ui-grid-special__featured .collection-ui-book-media {
+    --spine-height: var(
+      --collection-ui-grid-special-featured-height
+    ) !important;
+    --spine-width: var(--collection-ui-grid-special-featured-width) !important;
+  }
+
+  .collection-ui-grid-special__item .collection-ui-book-media {
+    --spine-height: var(--collection-ui-grid-special-item-height) !important;
+    --spine-width: var(--collection-ui-grid-special-item-width) !important;
+  }
+
+  .collection-ui-grid-special__featured .collection-ui-book-media img,
+  .collection-ui-grid-special__item .collection-ui-book-media img {
+    height: var(--spine-height) !important;
+    width: auto !important;
   }
 
   .collection-ui-card--featured {
-    width: 136px;
+    width: var(--collection-ui-grid-special-featured-width);
   }
 
   .collection-ui-card__media--featured {
-    min-height: 204px;
+    min-height: var(--collection-ui-grid-special-featured-height);
+  }
+
+  .collection-ui-banner__copy {
+    order: 2;
+    padding: 0 0 14px;
+  }
+
+  .collection-ui-banner__eyebrow {
+    font-size: 0.875rem;
+    margin-bottom: 12px;
+  }
+
+  .collection-ui-banner__title {
+    font-size: 1.375rem;
+    line-height: 1.2;
+  }
+
+  .collection-ui-banner__description {
+    display: -webkit-box;
+    overflow: hidden;
+    text-align: left;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
+
+  .collection-ui .collection-ui-button {
+    margin-bottom: 16px;
+    min-height: 40px;
+    min-width: 0;
+    padding-inline: 18px;
+    white-space: normal;
+  }
+
+  .collection-ui-banner__media-link {
+    max-height: none;
+    order: 1;
+  }
+
+  .collection-ui-special-item {
+    gap: 12px;
+    min-height: 0;
+    padding-block: 0 22px;
+  }
+
+  .collection-ui-special-item__media {
+    height: min(64dvw, 238px);
+    margin-bottom: -12px;
+    transform: translateY(-30px);
+    width: min(54dvw, 176px);
+  }
+
+  .collection-ui-special-item__media .collection-ui-book-media {
+    --spine-height: min(64dvw, 238px) !important;
+    --spine-width: min(46dvw, 162px) !important;
+  }
+
+  .collection-ui-special-item__media .collection-ui-book-media img {
+    height: var(--spine-height) !important;
+    width: auto !important;
+  }
+
+  .collection-ui-special-item__content {
+    min-width: 0;
+  }
+
+  .collection-ui-special-item__content h3 {
+    font-size: 1.125rem;
+    margin-bottom: 10px;
+  }
+
+  .collection-ui-special-item__description {
+    display: -webkit-box;
+    font-size: 0.875rem;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
+
+  .collection-ui-special-item__aside {
+    align-items: center;
+    gap: 10px;
+  }
+
+  .collection-ui-grid-title {
+    gap: 18px;
+  }
+
+  .collection-ui-row-item {
+    gap: 14px;
+    max-width: 100%;
+  }
+
+  .collection-ui-row-item__media .collection-ui-book-media {
+    --spine-height: 168px !important;
+    --spine-width: 112px !important;
+  }
+
+  .collection-ui-row-item__media .collection-ui-book-media img {
+    height: var(--spine-height) !important;
+    width: auto !important;
+  }
+
+  .collection-ui-image-grid .collection-ui-title {
+    margin-bottom: 22px;
+  }
+
+  .collection-ui-image-grid__items {
+    gap: 16px 12px;
+    margin-top: 20px;
+  }
+
+  .collection-ui-image-grid--block .collection-ui-image-grid__items {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .collection-ui-image-grid--block .collection-ui-image-grid__item {
+    min-height: 64px;
+  }
+
+  .collection-ui-image-grid__image {
+    height: auto;
+    max-height: 88px;
+    width: min(100%, 150px);
+  }
+
+  .collection-ui-image-grid--block .collection-ui-image-grid__image {
+    background: var(--color-fg-main, #fff);
+    height: 64px;
+    object-fit: contain;
+    padding: 10px;
+    width: 100%;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__image {
+    aspect-ratio: 1 / 1;
+    border-radius: 999px;
+    height: 128px !important;
+    object-fit: cover;
+    object-position: center top;
+    transform: scale(1.48);
+    width: 128px !important;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__items {
+    gap: 28px 34px;
+    grid-template-columns: repeat(2, minmax(0, 128px));
+    justify-content: center;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__item {
+    min-height: 128px;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__item a {
+    align-items: center;
+    aspect-ratio: 1 / 1;
+    border-radius: 999px;
+    clip-path: circle(50%);
+    display: flex;
+    height: 128px;
+    justify-content: center;
+    overflow: hidden;
+    width: 128px;
+  }
+
+  .collection-ui-image-grid--circle .collection-ui-image-grid__item a img {
+    border-radius: 999px !important;
+    clip-path: circle(50%);
+    height: 128px !important;
+    max-height: none;
+    max-width: none;
+    min-height: 128px;
+    min-width: 128px;
+    object-fit: cover;
+    width: 128px !important;
+  }
+
+  .collection-ui-image-grid__image--square {
+    height: 132px;
+    width: 132px;
   }
 }
 
@@ -1546,7 +2004,10 @@
 
 @media (min-width: 1200px) {
   .collection-ui-grid__items {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+    grid-template-columns: repeat(
+      var(--collection-ui-columns, 5),
+      minmax(0, 1fr)
+    );
   }
 
   .collection-ui-vertical__grid {