zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add slider preview thumbnails (#935)

Browse Source
This commit is contained in:
Sam Potts
2026-03-14 08:30:51 +11:00
committed by GitHub
parent dc12cc2162
commit e3f438e9f4
51 changed files with 551 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/video.css
+27
View File
@@ -11,6 +11,7 @@
@import "./components/time.css";
@import "./components/buttons.css";
@import "./components/icons.css";
@import "./components/preview.css";
@import "./components/slider.css";
@import "./components/popup.css";
@import "./components/captions.css";
@@ -99,3 +100,29 @@
background-color: oklch(1 0 0 / 0.2);
box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
}
.media-default-skin .media-slider__preview {
position: absolute;
left: var(--media-slider-pointer);
bottom: calc(100% + 1.2rem);
translate: -50%;
opacity: 0;
scale: 0.8;
filter: blur(8px);
transition-property: scale, opacity, filter;
transition-duration: 150ms;
transform-origin: bottom;
& .media-preview__thumbnail {
max-width: 11rem;
}
&:has(.media-preview__thumbnail[data-loading]) {
max-height: 6rem;
}
}
.media-default-skin .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
opacity: 1;
scale: 1;
filter: blur(0);
}