@chinggis.systems/collection-ui 1.0.0

package/dist/styles.css

@@ -0,0 +1,773 @@
+@import "swiper/css";
+@import "swiper/css/navigation";
+
+.collection-ui {
+  --collection-ui-bg: transparent;
+  --collection-ui-band-bg: rgb(0 0 0 / 4%);
+  --collection-ui-card-bg: transparent;
+  --collection-ui-fg: inherit;
+  --collection-ui-muted: color-mix(in srgb, currentColor 62%, transparent);
+  --collection-ui-link: #0f79d0;
+  --collection-ui-button-bg: #111827;
+  --collection-ui-button-fg: #fff;
+  --collection-ui-special-bg: rgb(0 0 0 / 4%);
+  --collection-ui-special-panel: transparent;
+  color: var(--collection-ui-fg);
+  min-width: 0;
+}
+
+.collection-ui--dark {
+  --collection-ui-bg: #141515;
+  --collection-ui-band-bg: #141515;
+  --collection-ui-card-bg: #1f2020;
+  --collection-ui-fg: #f5f5f5;
+  --collection-ui-muted: #a7a7a7;
+  --collection-ui-link: #22b7ff;
+  --collection-ui-button-bg: #f6a0a8;
+  --collection-ui-button-fg: #151515;
+  --collection-ui-special-bg: #141515;
+  --collection-ui-special-panel: #202121;
+  background: var(--collection-ui-bg);
+}
+
+.collection-ui--preview {
+  --collection-ui-preview-max-height: 420px;
+  border-radius: 6px;
+  max-height: var(--collection-ui-preview-max-height);
+  overflow: auto;
+}
+
+.collection-ui--preview .collection-ui-container {
+  max-width: 960px;
+  padding-inline: 16px;
+}
+
+.collection-ui *,
+.collection-ui *::before,
+.collection-ui *::after {
+  box-sizing: border-box;
+}
+
+.collection-ui a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.collection-ui-container {
+  margin-inline: auto;
+  max-width: 1200px;
+  padding-inline: 16px;
+  width: 100%;
+}
+
+.collection-ui-container--wide {
+  max-width: 1280px;
+}
+
+.collection-ui-title {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.collection-ui-title__row {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+}
+
+.collection-ui-title__heading {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0;
+}
+
+.collection-ui-title__heading--small {
+  border-bottom: 2px solid currentColor;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.collection-ui-title__description {
+  color: var(--collection-ui-muted);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  margin: 0;
+}
+
+.collection-ui-title__link,
+.collection-ui-featured-card__link {
+  color: var(--collection-ui-link);
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.collection-ui-scroll {
+  display: grid;
+  gap: 20px;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  margin-inline: -16px;
+  overflow-x: auto;
+  padding: 16px;
+  scroll-snap-type: x proximity;
+}
+
+.collection-ui-scroll__item {
+  scroll-snap-align: start;
+}
+
+.collection-ui-carousel {
+  min-width: 0;
+  position: relative;
+}
+
+.collection-ui-carousel__track {
+  margin-inline: -16px;
+  overflow: hidden;
+  padding-inline: 16px;
+}
+
+.collection-ui-carousel__slide {
+  height: auto;
+  padding-top: 16px;
+  width: max-content;
+}
+
+.collection-ui-grid-title.collection-ui-grid-title {
+  margin-inline: -16px;
+  padding-inline: 16px;
+}
+
+.collection-ui-grid-title__slide {
+  height: auto;
+}
+
+.collection-ui-carousel__controls {
+  display: none;
+}
+
+.collection-ui-carousel__controls button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+}
+
+.collection-ui-view-all {
+  align-items: center;
+  background: linear-gradient(135deg, #1f2937, #111827);
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 6px;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 266px;
+  justify-content: center;
+  padding: 24px;
+  width: 180px;
+}
+
+.collection-ui-view-all__icon {
+  align-items: center;
+  background: rgb(255 255 255 / 10%);
+  border-radius: 999px;
+  display: inline-flex;
+  font-size: 1.5rem;
+  height: 56px;
+  justify-content: center;
+  width: 56px;
+}
+
+.collection-ui-vertical__grid {
+  display: grid;
+  gap: 16px;
+}
+
+.collection-ui-item {
+  align-items: flex-start;
+  display: flex;
+  gap: 20px;
+  max-width: 420px;
+}
+
+.collection-ui-item__image {
+  background: rgb(0 0 0 / 8%);
+  border-radius: 4px;
+  flex: 0 0 auto;
+  height: auto;
+  object-fit: cover;
+}
+
+.collection-ui-item__title {
+  display: -webkit-box;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.collection-ui-item__meta,
+.collection-ui-item__description {
+  color: color-mix(in srgb, currentColor 62%, transparent);
+  font-size: 0.875rem;
+  line-height: 1.45;
+  margin: 4px 0 0;
+}
+
+.collection-ui-item__number {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.collection-ui-card {
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-end;
+  width: 180px;
+}
+
+.collection-ui-card__media {
+  align-items: flex-end;
+  display: flex;
+  justify-content: center;
+  min-height: 266px;
+}
+
+.collection-ui-card__body {
+  display: flex;
+  gap: 12px;
+  min-height: 112px;
+  padding-top: 8px;
+}
+
+.collection-ui-card__rank,
+.collection-ui-row-item__number {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+
+.collection-ui-card__title,
+.collection-ui-row-item__title {
+  color: var(--collection-ui-link);
+  display: -webkit-box;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0 0 4px;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.collection-ui-card__author,
+.collection-ui-row-item__author {
+  color: var(--collection-ui-muted);
+  display: -webkit-box;
+  font-size: 0.75rem;
+  line-height: 1.35;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.collection-ui-book-media {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  overflow: visible;
+}
+
+.collection-ui-book-media__artwork {
+  display: block;
+  flex: 0 0 auto;
+  overflow: visible;
+  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;
+  position: absolute;
+  top: -4%;
+  width: 120%;
+  z-index: 1;
+}
+
+.collection-ui-book-media__lighting {
+  inset: 0;
+  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%);
+  z-index: 1;
+}
+
+@supports (mix-blend-mode: multiply) {
+  .collection-ui-book-media__background {
+    mix-blend-mode: multiply;
+  }
+}
+
+@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: "";
+  display: block;
+  height: 100%;
+  inset: 0;
+  position: absolute;
+  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__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__artwork::after {
+  background-image: url("./assets/spine/FlatEdges.webp");
+  background-size: 100% 100%;
+  border-radius: 2.5px;
+  content: "";
+  display: block;
+  height: 100%;
+  inset: 0;
+  position: absolute;
+  z-index: 3;
+}
+
+.collection-ui-audio-media,
+.collection-ui-product-media {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.collection-ui-audio-media img,
+.collection-ui-product-media img {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.collection-ui-audio-media img {
+  border-radius: 8px;
+  box-shadow: 0 12px 22px rgb(0 0 0 / 18%);
+}
+
+.collection-ui-price {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  font-weight: 600;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.collection-ui-price__compare {
+  color: rgb(107 114 128);
+  font-size: 0.75rem;
+  text-decoration: line-through;
+}
+
+.collection-ui-price__value--large {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.collection-ui-html {
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1.55;
+  overflow: hidden;
+}
+
+.collection-ui-html--sm {
+  max-height: 80px;
+}
+
+.collection-ui-html--md {
+  max-height: 144px;
+}
+
+.collection-ui-html--lg {
+  max-height: 240px;
+}
+
+.collection-ui-html button {
+  background: transparent;
+  border: 0;
+  color: var(--collection-ui-link);
+  cursor: pointer;
+  font: inherit;
+  padding: 4px 0 0;
+}
+
+.collection-ui-row-item {
+  align-items: flex-start;
+  display: flex;
+  gap: 24px;
+}
+
+.collection-ui-row-item__media {
+  flex: 0 0 auto;
+}
+
+.collection-ui-row-item__body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.collection-ui-special-item {
+  align-items: center;
+  background: var(--collection-ui-special-panel);
+  display: grid;
+  gap: 32px;
+  justify-items: center;
+  padding: clamp(20px, 3vw, 32px);
+  width: 100%;
+}
+
+.collection-ui-special-item__media {
+  display: flex;
+  justify-content: center;
+  transform: scale(1.08);
+}
+
+.collection-ui--preview .collection-ui-special-section,
+.collection-ui--preview .collection-ui-band {
+  padding-block: 20px;
+}
+
+.collection-ui--preview .collection-ui-special-item {
+  gap: 20px;
+  min-height: 0;
+  padding: 24px;
+}
+
+.collection-ui--preview .collection-ui-special-item__media {
+  transform: none;
+}
+
+.collection-ui-special-item__content h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 0 0 16px;
+  text-align: center;
+}
+
+.collection-ui-special-item__description {
+  color: var(--collection-ui-muted);
+  font-size: 1rem;
+  max-width: 560px;
+}
+
+.collection-ui-special-item__aside {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  justify-content: center;
+}
+
+.collection-ui-special-item__button {
+  margin-top: 0;
+}
+
+.collection-ui-band {
+  background: var(--collection-ui-band-bg);
+  padding-block: 32px;
+}
+
+.collection-ui-special-section {
+  background: var(--collection-ui-special-bg);
+  padding-block: 40px;
+}
+
+.collection-ui-grid-title {
+  display: grid;
+  gap: 24px;
+}
+
+.collection-ui-grid-title__panel {
+  min-width: 0;
+}
+
+.collection-ui-banner {
+  align-items: center;
+  display: grid;
+  gap: 24px;
+  grid-template-columns: 1fr;
+}
+
+.collection-ui-banner__copy {
+  padding-top: 16px;
+}
+
+.collection-ui-banner__eyebrow {
+  border-bottom: 2px solid currentColor;
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-bottom: 24px;
+  padding-bottom: 4px;
+}
+
+.collection-ui-banner__title {
+  font-size: clamp(1.5rem, 2vw, 2.5rem);
+  font-weight: 600;
+  line-height: 1.15;
+  margin: 0 0 16px;
+}
+
+.collection-ui-banner__description {
+  font-size: 1rem;
+  line-height: 1.65;
+  margin: 0;
+}
+
+.collection-ui-banner__image,
+.collection-ui-featured-card__image {
+  border-radius: 8px;
+  display: block;
+  max-width: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.collection-ui-button {
+  align-items: center;
+  background: var(--collection-ui-button-bg);
+  border-radius: 6px;
+  color: var(--collection-ui-button-fg);
+  display: inline-flex;
+  font-weight: 600;
+  justify-content: center;
+  margin-top: 20px;
+  min-height: 44px;
+  padding: 10px 20px;
+}
+
+.collection-ui-special {
+  align-items: center;
+  display: grid;
+  justify-items: stretch;
+}
+
+.collection-ui-special > .collection-ui-special__button {
+  display: none;
+}
+
+.collection-ui-featured {
+  display: grid;
+  gap: 24px;
+}
+
+.collection-ui-featured-card__body {
+  padding-top: 16px;
+}
+
+.collection-ui-featured-card__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0 0 10px;
+}
+
+.collection-ui-featured-card__description {
+  font-size: 0.875rem;
+  line-height: 1.55;
+  margin: 0 0 10px;
+}
+
+.collection-ui-image-grid {
+  text-align: center;
+}
+
+.collection-ui-image-grid .collection-ui-title__row {
+  justify-content: center;
+}
+
+.collection-ui-image-grid__items {
+  align-items: center;
+  display: grid;
+  gap: 32px;
+  grid-template-columns: repeat(var(--collection-ui-columns, 2), minmax(0, 1fr));
+  justify-content: center;
+  margin-top: 32px;
+}
+
+.collection-ui-image-grid__item {
+  display: flex;
+  justify-content: center;
+}
+
+.collection-ui-image-grid__image {
+  border-radius: 8px;
+  display: block;
+  height: auto;
+  max-width: 100%;
+  object-fit: cover;
+}
+
+.collection-ui-image-grid__image--circle {
+  aspect-ratio: 1;
+  border-radius: 999px;
+}
+
+.collection-ui-image-grid__image--square {
+  aspect-ratio: 1;
+}
+
+.collection-ui--preview .collection-ui-image-grid__items {
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.collection-ui--preview .collection-ui-image-grid__image {
+  max-height: 112px;
+  width: auto;
+}
+
+@media (min-width: 768px) {
+  .collection-ui-container {
+    padding-inline: 24px;
+  }
+
+  .collection-ui-vertical__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .collection-ui-grid-title {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .collection-ui-banner {
+    grid-template-columns: minmax(240px, 0.35fr) minmax(0, 0.65fr);
+  }
+
+  .collection-ui-featured {
+    grid-template-columns: repeat(var(--collection-ui-columns, 2), minmax(0, 1fr));
+  }
+
+  .collection-ui-featured--three {
+    grid-template-columns: repeat(var(--collection-ui-columns, 3), minmax(0, 1fr));
+  }
+
+  .collection-ui-carousel__controls {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+    position: absolute;
+    right: 0;
+    top: -40px;
+    z-index: 1;
+  }
+
+  .collection-ui-special-item {
+    grid-template-columns: minmax(260px, 0.38fr) minmax(0, 0.42fr) minmax(180px, 0.2fr);
+    justify-items: stretch;
+  }
+
+  .collection-ui-special-item__content h3 {
+    text-align: left;
+  }
+
+  .collection-ui-image-grid__items {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .collection-ui-image-grid--block .collection-ui-image-grid__items {
+    gap: 16px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .collection-ui-vertical__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}