@hanifhan1f/vidstack-react 1.12.13 → 1.12.14

package/player/styles/default/thumbnail.css

@@ -0,0 +1,40 @@
+/*
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * Thumbnail
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ */
+
+:where(.vds-thumbnail) {
+  --min-width: var(--media-thumbnail-min-width, 140px);
+  --max-width: var(--media-thumbnail-max-width, 180px);
+  --aspect-ratio: var(--media-thumbnail-aspect-ratio, var(--thumbnail-aspect-ratio));
+  display: block;
+  width: var(--thumbnail-width);
+  height: var(--thumbnail-height);
+  background-color: var(--media-thumbnail-bg, black);
+  contain: strict;
+  overflow: hidden;
+  box-sizing: border-box;
+  min-width: var(--min-width);
+  min-height: var(--media-thumbnail-min-height, calc(var(--min-width) / var(--aspect-ratio)));
+  max-width: var(--max-width);
+  max-height: var(--media-thumbnail-max-height, calc(var(--max-width) / var(--aspect-ratio)));
+}
+
+.vds-thumbnail {
+  border: var(--media-thumbnail-border, 1px solid white);
+}
+
+:where(.vds-thumbnail img) {
+  min-width: unset !important;
+  max-width: unset !important;
+  will-change: width, height, transform;
+}
+
+:where(.vds-thumbnail[data-loading] img) {
+  opacity: 0;
+}
+
+:where(.vds-thumbnail[aria-hidden='true']) {
+  display: none !important;
+}

package/player/styles/default/time.css

@@ -0,0 +1,45 @@
+/*
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * Time
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ */
+
+:where(.vds-time-group) {
+  display: flex;
+  align-items: center;
+}
+
+.vds-time-divider {
+  margin: 0 var(--media-time-divider-gap, 2.5px);
+  color: var(--media-time-divider-color, #e0e0e0);
+}
+
+:where(.vds-time) {
+  display: inline-block;
+  contain: content;
+  font-size: var(--media-time-font-size, 15px);
+  font-weight: var(--media-time-font-weight, 400);
+  font-family: var(--media-font-family, sans-serif);
+  border-radius: var(--media-time-border-radius, 2px);
+  letter-spacing: var(--media-time-letter-spacing, 0.025em);
+}
+
+.vds-time {
+  outline: 0;
+  color: var(--media-time-color, var(--default-color));
+  background-color: var(--media-time-bg);
+  border: var(--media-time-border);
+  padding: var(--media-time-padding, 2px);
+}
+
+:where(.vds-time:focus-visible) {
+  box-shadow: var(--media-focus-ring);
+}
+
+.light .vds-time {
+  --default-color: rgb(10 10 10);
+}
+
+.dark .vds-time {
+  --default-color: #f5f5f5;
+}

package/player/styles/default/tooltips.css

@@ -0,0 +1,141 @@
+/*
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * Tooltips
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ */
+
+:where(.vds-tooltip, media-tooltip) {
+  display: contents;
+}
+
+:where(.vds-tooltip-content) {
+  display: inline-block;
+  box-sizing: border-box;
+  font-family: var(--media-font-family, sans-serif);
+  font-size: var(--media-tooltip-font-size, 13px);
+  font-weight: var(--media-tooltip-font-weight, 500);
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: 10;
+  will-change: transform, opacity;
+}
+
+.vds-tooltip-content {
+  border-radius: var(--media-tooltip-border-radius, 2px);
+  background-color: var(--media-tooltip-bg-color, var(--default-bg));
+  border: var(--media-tooltip-border, var(--default-border));
+  color: var(--media-tooltip-color, var(--default-color));
+  padding: var(--media-tooltip-padding, 2px 8px);
+}
+
+.light .vds-tooltip-content {
+  --default-color: #1a1a1a;
+  --default-bg: white;
+  --default-border: 1px solid rgb(0 0 0 / 0.2);
+}
+
+.dark .vds-tooltip-content {
+  --default-color: #f5f5f5;
+  --default-bg: black;
+  --default-border: 1px solid rgb(255 255 255 / 0.1);
+}
+
+:where(.vds-menu .vds-menu-button[role='button'][data-pressed] .vds-tooltip-content) {
+  opacity: 0;
+  display: none;
+}
+
+/*
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * Tooltip Animation
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ */
+
+:where(.vds-tooltip-content) {
+  --enter-transform: translateY(0px) scale(1);
+  --exit-transform: translateY(12px) scale(0.8);
+}
+
+:where(.vds-tooltip-content:not([data-visible])) {
+  animation: var(--media-tooltip-exit-animation, vds-tooltip-exit 0.2s ease-out);
+}
+
+:where(.vds-tooltip-content[data-visible]) {
+  animation: var(--media-tooltip-enter-animation, vds-tooltip-enter 0.2s ease-in);
+  animation-fill-mode: forwards;
+}
+
+/* Bottom */
+:where(.vds-tooltip-content[data-placement~='bottom']) {
+  --enter-transform: translateY(0) scale(1);
+  --exit-transform: translateY(-12px) scale(0.8);
+}
+
+/* Left */
+:where(.vds-tooltip-content[data-placement~='left']) {
+  --enter-transform: translateX(0) scale(1);
+  --exit-transform: translateX(12px) scale(0.8);
+}
+
+/* Right */
+:where(.vds-tooltip-content[data-placement~='right']) {
+  --enter-transform: translateX(0) scale(1);
+  --exit-transform: translateX(-12px) scale(0.8);
+}
+
+@keyframes vds-tooltip-enter {
+  from {
+    opacity: 0;
+    transform: var(--exit-transform);
+  }
+  to {
+    opacity: 1;
+    transform: var(--enter-transform);
+  }
+}
+
+@keyframes vds-tooltip-exit {
+  from {
+    opacity: 1;
+    transform: var(--enter-transform);
+  }
+  to {
+    opacity: 0;
+    transform: var(--exit-transform);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  :where(.vds-tooltip-content) {
+    animation: none;
+  }
+
+  :where(.vds-tooltip-content[data-visible]) {
+    opacity: 1;
+  }
+}
+
+/*
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * States
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ */
+
+/* Play Button */
+[data-media-player]:not([data-paused]) .vds-play-tooltip-text,
+[data-media-player][data-paused] .vds-pause-tooltip-text,
+/* PIP Button */
+[data-media-player][data-pip] .vds-pip-enter-tooltip-text,
+[data-media-player]:not([data-pip]) .vds-pip-exit-tooltip-text,
+/* Fullscreen Button */
+[data-media-player][data-fullscreen] .vds-fs-enter-tooltip-text,
+[data-media-player]:not([data-fullscreen]) .vds-fs-exit-tooltip-text,
+/* Caption Button */
+[data-media-player]:not([data-captions]) .vds-cc-on-tooltip-text,
+[data-media-player][data-captions] .vds-cc-off-tooltip-text,
+/* Mute Button */
+[data-media-player]:not([data-muted]) .vds-mute-tooltip-text,
+[data-media-player][data-muted] .vds-unmute-tooltip-text {
+  display: none;
+}