@class-kit/react 0.1.0

package/dist/styles/components/video-detail-transition.css

@@ -0,0 +1,169 @@
+@import "../base.css";
+
+.cc-video-detail-transition {
+  --cc-video-detail-columns: 2;
+  --cc-video-detail-duration: 420ms;
+  --cc-video-detail-backdrop-color: rgba(0, 0, 0, 0.96);
+  color: var(--cc-form-color-text);
+  overflow: hidden;
+  position: relative;
+}
+
+.cc-video-detail-transition__grid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(var(--cc-video-detail-columns), minmax(0, 1fr));
+}
+
+.cc-video-detail-transition__item {
+  appearance: none;
+  background: rgba(255, 255, 255, 0.06);
+  border: 0;
+  border-radius: 14px;
+  color: inherit;
+  cursor: pointer;
+  display: grid;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  text-align: left;
+  transform: translateZ(0);
+}
+
+.cc-video-detail-transition__item img {
+  aspect-ratio: 9 / 16;
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}
+
+.cc-video-detail-transition__meta {
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
+  bottom: 0;
+  color: #fff;
+  display: grid;
+  gap: 2px;
+  left: 0;
+  padding: 34px 10px 10px;
+  position: absolute;
+  right: 0;
+}
+
+.cc-video-detail-transition__meta strong {
+  font-size: 13px;
+  line-height: 1.25;
+}
+
+.cc-video-detail-transition__meta small {
+  color: rgba(255, 255, 255, 0.76);
+  font-size: 11px;
+}
+
+.cc-video-detail-transition__overlay {
+  inset: 0;
+  opacity: 1;
+  pointer-events: auto;
+  position: fixed;
+  z-index: 1200;
+}
+
+.cc-video-detail-transition__backdrop {
+  background: var(--cc-video-detail-backdrop-color);
+  border: 0;
+  cursor: pointer;
+  inset: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  transition: opacity var(--cc-video-detail-duration)
+    cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.cc-video-detail-transition__overlay[data-open="true"]
+  .cc-video-detail-transition__backdrop {
+  opacity: 1;
+}
+
+.cc-video-detail-transition__detail {
+  background: #050505;
+  border-radius: 14px;
+  color: #fff;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  transform: translateZ(0);
+  transition:
+    border-radius var(--cc-video-detail-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+    height var(--cc-video-detail-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+    left var(--cc-video-detail-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+    top var(--cc-video-detail-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+    width var(--cc-video-detail-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.cc-video-detail-transition__detail[data-full="true"] {
+  border-radius: 0;
+}
+
+.cc-video-detail-transition__player {
+  background: #000;
+  display: block;
+  width: 100%;
+}
+
+.cc-video-detail-transition__video {
+  aspect-ratio: 16 / 9;
+  background: #000;
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}
+
+.cc-video-detail-transition__content {
+  background: #050505;
+  display: grid;
+  gap: 8px;
+  opacity: 0;
+  padding: 14px 16px 24px;
+  transform: translateY(16px);
+  transition:
+    opacity 220ms ease,
+    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.cc-video-detail-transition__detail[data-full="true"]
+  .cc-video-detail-transition__content {
+  opacity: 1;
+  transform: translateY(0);
+  transition-delay: calc(var(--cc-video-detail-duration) * 0.42);
+}
+
+.cc-video-detail-transition__content button {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.14);
+  border: 0;
+  border-radius: 999px;
+  color: #fff;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 22px;
+  height: 34px;
+  justify-content: center;
+  justify-self: end;
+  line-height: 1;
+  width: 34px;
+}
+
+.cc-video-detail-transition__content strong {
+  font-size: 18px;
+  line-height: 1.3;
+}
+
+.cc-video-detail-transition__content p {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 14px;
+  line-height: 1.55;
+  margin: 0;
+}
+

package/dist/styles/components/video-player.css

@@ -0,0 +1,93 @@
+@import "../base.css";
+
+.cc-video-player__video {
+  border-radius: var(--cc-video-player-radius);
+  display: block;
+  max-width: 100%;
+  width: 100%;
+}
+
+.cc-video-player__video::-webkit-media-controls,
+.cc-video-player__video::-webkit-media-controls-start-playback-button {
+  display: none !important;
+}
+
+.cc-video-player__controls {
+  align-items: center;
+  background: var(--cc-video-player-controls-background);
+  border: 1px solid var(--cc-form-color-border);
+  border-radius: var(--cc-radius-lg);
+  color: var(--cc-video-player-controls-color);
+  display: grid;
+  gap: 10px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  margin-top: 10px;
+  padding: 10px;
+}
+
+.cc-video-player__play {
+  align-items: center;
+  background: var(--cc-backtop-background, var(--cc-form-color-accent));
+  border: 0;
+  border-radius: var(--cc-radius-pill);
+  color: var(--cc-form-color-accent-contrast);
+  cursor: pointer;
+  display: inline-flex;
+  height: 34px;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background var(--cc-animation-duration) var(--cc-animation-easing),
+    transform var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 34px;
+}
+
+.cc-video-player__play:hover {
+  background: var(--cc-form-color-accent-hover);
+  transform: scale(1.04);
+}
+
+.cc-video-player__play-icon {
+  display: inline-block;
+  height: 14px;
+  position: relative;
+  width: 14px;
+}
+
+.cc-video-player__play-icon::before {
+  border-bottom: 7px solid transparent;
+  border-left: 10px solid currentColor;
+  border-top: 7px solid transparent;
+  content: "";
+  left: 3px;
+  position: absolute;
+  top: 0;
+}
+
+.cc-video-player__play[data-playing="true"] .cc-video-player__play-icon::before,
+.cc-video-player__play[data-playing="true"] .cc-video-player__play-icon::after {
+  background: currentColor;
+  border: 0;
+  border-radius: 2px;
+  content: "";
+  height: 14px;
+  position: absolute;
+  top: 0;
+  width: 4px;
+}
+
+.cc-video-player__play[data-playing="true"]
+  .cc-video-player__play-icon::before {
+  left: 2px;
+}
+
+.cc-video-player__play[data-playing="true"] .cc-video-player__play-icon::after {
+  right: 2px;
+}
+
+.cc-video-player__time {
+  color: var(--cc-form-color-muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+

package/dist/styles/components/virtual-list.css

@@ -0,0 +1,206 @@
+@import "../base.css";
+
+.cc-virtual-list {
+  --cc-virtual-list-height: 360px;
+  border-radius: var(--cc-virtual-list-radius);
+  color: var(--cc-virtual-list-text-color);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.cc-virtual-list__viewport {
+  height: var(--cc-virtual-list-height);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative;
+  scrollbar-gutter: stable;
+}
+
+.cc-virtual-list__content {
+  min-height: 0;
+  position: relative;
+  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+.cc-virtual-list__content[data-dragging="true"] {
+  transition: none;
+}
+
+.cc-virtual-list__pull-down {
+  align-items: center;
+  display: flex;
+  height: 72px;
+  justify-content: center;
+  left: 0;
+  opacity: clamp(0, var(--cc-virtual-list-pull-down-progress, 0), 1);
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateY(
+    calc(var(--cc-virtual-list-pull-down-distance, 0px) - 72px)
+  );
+  transition:
+    opacity 220ms var(--cc-animation-easing),
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  z-index: 2;
+}
+
+.cc-virtual-list__pull-down[data-dragging="true"] {
+  transition: none;
+}
+
+.cc-virtual-list__pull-down-loading-icon,
+.cc-virtual-list__pull-down-success-icon {
+  align-items: center;
+  background:
+    radial-gradient(
+      circle at 50% 42%,
+      rgba(255, 255, 255, 0.92),
+      transparent 48%
+    ),
+    color-mix(in srgb, var(--cc-form-color-accent) 16%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent);
+  border-radius: 999px;
+  box-shadow:
+    0 8px 22px color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
+  color: var(--cc-form-color-accent);
+  display: inline-flex;
+  height: 34px;
+  justify-content: center;
+  position: relative;
+  transform: rotate(calc(var(--cc-virtual-list-pull-down-progress, 0) * 360deg))
+    scale(calc(0.72 + var(--cc-virtual-list-pull-down-progress, 0) * 0.28));
+  transition:
+    background 180ms var(--cc-animation-easing),
+    border-color 180ms var(--cc-animation-easing),
+    box-shadow 180ms var(--cc-animation-easing),
+    color 180ms var(--cc-animation-easing),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+  width: 34px;
+}
+
+.cc-virtual-list__pull-down[data-dragging="true"][data-status="pulling"]
+  .cc-virtual-list__pull-down-loading-icon {
+  transition: none;
+}
+
+.cc-virtual-list__pull-down-icon-svg {
+  display: block;
+  fill: currentColor;
+  height: 19px;
+  width: 19px;
+}
+
+.cc-virtual-list__pull-down-icon-image {
+  border-radius: 8px;
+  display: block;
+  height: 23px;
+  object-fit: cover;
+  width: 23px;
+}
+
+.cc-virtual-list__pull-down-icon-text {
+  font-size: 18px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.cc-virtual-list__pull-down[data-status="ready"]
+  .cc-virtual-list__pull-down-loading-icon,
+.cc-virtual-list__pull-down[data-status="loading"]
+  .cc-virtual-list__pull-down-loading-icon {
+  animation:
+    cc-virtual-list-bolt-spin 760ms linear infinite,
+    cc-virtual-list-bolt-pulse 1180ms ease-in-out infinite;
+}
+
+.cc-virtual-list__pull-down[data-status="success"]
+  .cc-virtual-list__pull-down-success-icon {
+  animation: cc-virtual-list-bolt-success 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
+  background:
+    radial-gradient(
+      circle at 50% 40%,
+      rgba(255, 255, 255, 0.94),
+      transparent 48%
+    ),
+    color-mix(in srgb, #24d18b 20%, transparent);
+  border-color: color-mix(in srgb, #24d18b 38%, transparent);
+  box-shadow:
+    0 10px 24px color-mix(in srgb, #24d18b 25%, transparent),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.52);
+  color: #12b76a;
+  transform: rotate(360deg) scale(1.08);
+}
+
+.cc-virtual-list__pull-up,
+.cc-chat-virtual-list__pull-up {
+  color: var(--cc-form-color-muted);
+  font-size: 13px;
+  padding: 14px 12px 16px;
+  text-align: center;
+  transition:
+    opacity var(--cc-animation-duration) var(--cc-animation-easing),
+    transform var(--cc-animation-duration) var(--cc-animation-easing);
+}
+
+.cc-virtual-list__pull-up[data-loading="true"],
+.cc-chat-virtual-list__pull-up[data-loading="true"] {
+  color: var(--cc-form-color-accent);
+}
+
+.cc-virtual-list__inner {
+  position: relative;
+}
+
+.cc-virtual-list__item {
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  will-change: transform;
+}
+
+@keyframes cc-virtual-list-bolt-spin {
+  from {
+    transform: rotate(360deg) scale(1);
+  }
+  to {
+    transform: rotate(720deg) scale(1);
+  }
+}
+
+@keyframes cc-virtual-list-bolt-pulse {
+  0%,
+  100% {
+    box-shadow:
+      0 8px 22px
+        color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.42);
+  }
+  50% {
+    box-shadow:
+      0 12px 30px
+        color-mix(in srgb, var(--cc-form-color-accent) 32%, transparent),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.62);
+  }
+}
+
+@keyframes cc-virtual-list-bolt-success {
+  0% {
+    transform: rotate(360deg) scale(0.96);
+  }
+  42% {
+    transform: rotate(438deg) scale(1.2);
+  }
+  72% {
+    transform: rotate(342deg) scale(0.98);
+  }
+  100% {
+    transform: rotate(360deg) scale(1.08);
+  }
+}
+