x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-23 13:51:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify thumbnail display logic and improve hover effects

Browse Source 
- Removed unnecessary hover event handling for thumbnails.
- Updated thumbnail visibility logic to always show when loading.
- Enhanced CSS for progress tip and thumbnails with scaling and opacity transitions.
- Added hover class to manage thumbnail visibility on progress hover.
This commit is contained in:
Harvey Zhao committed 2025-12-13 23:05:28 +08:00
1 parent 911c88d95f
commit 8cb9cd480c
4 files changed
+22 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/style/progress.less
+17 -1
View File
@@ -81,6 +81,9 @@
}
.art-progress-tip {
transform-origin: bottom center;
transform: scale(0.5);
opacity: 0;
position: absolute;
z-index: 50;
top: -25px;
@@ -91,6 +94,7 @@
border-radius: var(--art-border-radius);
white-space: nowrap;
background-color: var(--art-tip-background);
transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
}
}
@@ -102,13 +106,16 @@
}
.art-control-thumbnails {
display: none;
transform-origin: bottom center;
transform: scale(0.5);
opacity: 0;
position: absolute;
bottom: calc(var(--art-bottom-gap) + 10px);
left: 0;
border-radius: var(--art-border-radius);
pointer-events: none;
background-color: var(--art-widget-background);
transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
box-shadow:
0 1px 3px 0 rgb(0 0 0 / 0.2),
0 1px 2px -1px rgb(0 0 0 / 0.2);
@@ -121,3 +128,12 @@
}
}
}
.art-progress-hover {
.art-bottom .art-progress {
.art-control-progress .art-control-progress-inner .art-progress-tip, .art-control-thumbnails {
transform: scale(1);
opacity: 1;
}
}
}