V5 (#500)

* update dep * Update package.json * update contextmenu * update d.ts * update onVttLoad * build artplayer * update style * --art-theme * update style * update style * update user-select * add getIcon * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * add progress-hover * update mini * update style * update style * update style * update style * update style * update volume * update style * add art-backdrop * update style * update style * update style * update currentLevel * update artplayerPluginControl * update artplayerPluginDanmuku * Update package.json
2026-10-24 06:31:20 -08:00 · 2023-04-16 23:01:26 +08:00
1 parent af12bd9634
commit 7b53de941d
@@ -0,0 +1,130 @@
+.art-bottom {
+    .art-progress {
+        position: relative;
+        z-index: 0;
+        pointer-events: auto;
+
+        .art-control-progress {
+            position: relative;
+            .art-center();
+            cursor: pointer;
+            height: var(--art-progress-height);
+
+            .art-control-progress-inner {
+                display: flex;
+                align-items: center;
+                position: relative;
+                height: 50%;
+                width: 100%;
+                transition: height var(--art-duration) ease;
+                background-color: var(--art-progress-color);
+
+                .art-progress-hover {
+                    display: none;
+                    .art-full(0);
+                    width: 0%;
+                    background-color: var(--art-hover-color);
+                }
+
+                .art-progress-loaded {
+                    .art-full(10);
+                    width: 0%;
+                    background-color: var(--art-loaded-color);
+                }
+
+                .art-progress-played {
+                    .art-full(20);
+                    width: 0%;
+                }
+
+                .art-progress-highlight {
+                    .art-full(30);
+                    pointer-events: none;
+
+                    span {
+                        .art-full();
+                        right: auto;
+                        pointer-events: auto;
+                        width: var(--art-highlight-width);
+                        transform: translateX(calc(var(--art-highlight-width) / -2));
+                        background-color: var(--art-highlight-color);
+                    }
+                }
+
+                .art-progress-indicator {
+                    .art-center();
+                    position: absolute;
+                    z-index: 40;
+                    border-radius: 50%;
+                    transform: scale(0);
+                    transition: transform var(--art-duration) ease;
+
+                    .art-icon {
+                        width: 100%;
+                        height: 100%;
+                        pointer-events: none;
+                    }
+
+                    &:hover {
+                        transform: scale(1.2) !important;
+                    }
+
+                    &:active {
+                        transform: scale(1) !important;
+                    }
+                }
+
+                .art-progress-tip {
+                    display: none;
+                    position: absolute;
+                    z-index: 50;
+                    top: -25px;
+                    left: 0;
+                    padding: 3px 5px;
+                    line-height: 1;
+                    font-size: 12px;
+                    border-radius: 3px;
+                    white-space: nowrap;
+                    background-color: var(--art-background);
+                }
+            }
+
+            &:hover {
+                .art-control-progress-inner {
+                    height: 100%;
+                }
+            }
+        }
+
+        .art-control-thumbnails {
+            display: none;
+            position: absolute;
+            bottom: 10px;
+            left: 0;
+            border-radius: 3px;
+            pointer-events: none;
+            background-color: var(--art-background);
+            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
+        }
+
+        .art-control-loop {
+            .art-full();
+            display: none;
+            pointer-events: none;
+
+            .art-loop-point {
+                .art-full();
+                left: 0%;
+                width: var(--art-loop-width);
+                background-color: var(--art-loop-color);
+                transform: translateX(calc(var(--art-loop-width) / -2)) scaleY(1.5);
+            }
+        }
+    }
+
+    &:hover {
+        .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {
+            transform: scale(1);
+        }
+    }
+}