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

V5 (#500)

Browse Source 
* 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
This commit is contained in:
Harvey Zack authored and GitHub committed 2023-04-16 23:01:26 +08:00
1 parent af12bd9634
commit 7b53de941d
80 files changed
+1393 -1362
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/style/volume.less
+84
View File
@@ -0,0 +1,84 @@
.art-control-volume {
position: relative;
.art-volume-panel {
.art-center(flex);
position: absolute;
left: 0;
right: 0;
bottom: var(--art-control-height);
width: var(--art-control-height);
height: 120px;
padding: 0 5px;
font-size: 12px;
text-align: center;
cursor: default;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: all var(--art-duration) ease;
.art-volume-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
height: 100%;
width: 100%;
padding: 10px 0 12px;
border-radius: 3px;
background-color: var(--art-background);
.art-volume-slider {
flex: 1;
width: 100%;
display: flex;
cursor: pointer;
position: relative;
justify-content: center;
.art-volume-handle {
position: relative;
display: flex;
justify-content: center;
width: 2px;
border-radius: 3px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.25);
.art-volume-loaded {
.art-full(0);
background-color: var(--art-theme);
}
}
.art-volume-indicator {
position: absolute;
width: var(--art-volume-handle-size);
height: var(--art-volume-handle-size);
margin-top: calc(var(--art-volume-handle-size) / -2);
flex-shrink: 0;
transform: scale(1);
border-radius: 100%;
background-color: var(--art-theme);
transition: transform var(--art-duration) ease;
}
&:active {
.art-volume-indicator {
transform: scale(0.9);
}
}
}
}
}
&:hover {
.art-volume-panel {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
}