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-27 01:21:20 -08:00 · 2023-04-16 23:01:26 +08:00
1 parent af12bd9634
commit 7b53de941d
@@ -0,0 +1,52 @@
+.art-controls {
+    position: relative;
+    z-index: 10;
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--art-control-height);
+
+    .art-controls-left,
+    .art-controls-right {
+        display: flex;
+        height: 100%;
+    }
+
+    .art-controls-center {
+        .art-center(none);
+        flex: 1;
+        height: 100%;
+        padding: 0 10px;
+    }
+
+    .art-controls-right {
+        justify-content: flex-end;
+    }
+
+    .art-control {
+        .art-center();
+        flex-shrink: 0;
+        cursor: pointer;
+        white-space: nowrap;
+        opacity: var(--art-control-opacity);
+        min-height: var(--art-control-height);
+        min-width: var(--art-control-height);
+        transition: opacity var(--art-duration) ease;
+
+        .art-icon {
+            height: var(--art-control-icon-size);
+            width: var(--art-control-icon-size);
+            transform: scale(var(--art-control-icon-scale));
+            transition: transform var(--art-duration) ease;
+
+            &:active {
+                transform: scale(calc(var(--art-control-icon-scale) * 0.8));
+            }
+        }
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}