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

bugfix

Browse Source
This commit is contained in:
Harvey Zack committed 2018-10-24 13:43:11 +08:00
1 parent 9fd3e580bb
commit 4ce05442c7
36 files changed
+731 -683
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/style/bottom.scss
+206
View File
@@ -0,0 +1,206 @@
.artplayer-video-player {
.artplayer-bottom {
position: absolute;
z-index: 50;
left: 0;
right: 0;
bottom: 0;
height: 100px;
padding: 60px 10px 0;
opacity: 0;
visibility: hidden;
transition: all .2s ease-in-out;
pointer-events: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
.artplayer-progress {
position: relative;
pointer-events: all;
.art-control-progress {
position: relative;
height: 5px;
padding: 1px 0;
cursor: pointer;
.art-control-progress-inner {
position: relative;
height: 100%;
background: rgba(255,255,255,.2);
.art-progress-loaded {
position: absolute;
z-index: 10;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 0;
background: rgba(255,255,255,.4);
}
.art-progress-played {
position: absolute;
z-index: 20;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 0;
}
.art-progress-highlight {
position: absolute;
z-index: 30;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 0;
span {
display: inline-block;
position: absolute;
left: 0;
top: 0;
width: 7px;
height: 3px;
background: #fff;
border-radius: 3px;
}
}
.art-progress-indicator {
display: none;
position: absolute;
z-index: 40;
top: -5px;
left: -6.5px;
width: 13px;
height: 13px;
border-radius: 50%;
&.show-indicator {
display: block;
}
}
.art-progress-tip {
display: none;
position: absolute;
z-index: 50;
top: -25px;
left: 0;
height: 20px;
padding: 0 5px;
line-height: 20px;
color: #fff;
font-size: 12px;
text-align: center;
background: rgba(0,0,0,.7);
border-radius: 3px;
font-weight: bold;
}
}
&:hover {
.art-progress-indicator, .art-progress-tip {
display: block;
}
}
}
.art-control-thumbnails {
display: none;
position: absolute;
bottom: 8px;
left: 0;
pointer-events: none;
background-color: rgba(0,0,0,.7);
}
}
.artplayer-controls {
position: relative;
pointer-events: all;
display: flex;
align-items: center;
justify-content: space-between;
height: 36px;
.art-control {
float: left;
font-size: 12px;
height: 36px;
line-height: 36px;
cursor: pointer;
.art-icon {
display: flex;
align-items: center;
justify-content: center;
float: left;
height: 36px;
width: 36px;
padding: 7px;
}
}
.art-control-volume {
.art-volume-panel {
position: relative;
float: left;
width: 0;
height: 100%;
transition: margin .2s cubic-bezier(0.4,0.0,1,1),width .2s cubic-bezier(0.4,0.0,1,1);
overflow: hidden;
.art-volume-slider-handle {
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
border-radius: 12px;
margin-top: -6px;
background: #fff;
&::before {
left: -54px;
background: #fff;
}
&::after {
left: 6px;
background: rgba(255,255,255,.2);
}
&::before, &::after {
content: '';
position: absolute;
display: block;
top: 50%;
height: 3px;
margin-top: -2px;
width: 60px
}
}
&.art-volume-panel-hover {
width: 60px;
}
}
}
.art-control-time {
padding: 0 10px;
}
}
}
&.controls-show, &:hover {
.artplayer-bottom {
opacity: 1;
visibility: visible;
}
}
}