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

add bar

Browse Source
This commit is contained in:
Harvey Zack committed 2018-10-19 16:57:31 +08:00
1 parent f58684991f
commit e988f00cf8
15 files changed
+538 -140
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/style/index.scss
+118 -24
View File
@@ -1,12 +1,26 @@
@charset "UTF-8";
.artplayer-container {
.artplayer-video-player {
position: relative;
text-align: left;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
font-family: Roboto,Arial,Helvetica,sans-serif;
-webkit-font-smoothing: antialiased;
color: #eee;
text-align: left;
direction: ltr;
font-size: 14px;
line-height: 1.3;
user-select: none;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0,0,0,0);
touch-action: manipulation;
-ms-high-contrast-adjust: none;
* {
box-sizing: border-box;
}
.art-icon {
svg {
@@ -23,6 +37,8 @@
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
outline: 0;
}
.artplayer-subtitle {
@@ -74,30 +90,10 @@
}
}
.artplayer-bottom {
position: absolute;
z-index: 40;
left: 0;
right: 0;
bottom: 0;
height: 100px;
opacity: 0;
visibility: hidden;
transition: all .2s ease-in-out;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
}
&.controls-show, &:hover {
.artplayer-bottom {
opacity: 1;
visibility: visible;
}
}
.artplayer-loading {
display: none;
position: absolute;
z-index: 50;
z-index: 40;
left: 0;
top: 0;
right: 0;
@@ -108,6 +104,104 @@
justify-content: center;
}
.artplayer-bottom {
position: absolute;
z-index: 50;
left: 0;
right: 0;
bottom: 0;
height: 100px;
padding: 50px 10px 0;
opacity: 0;
visibility: hidden;
transition: all .2s ease-in-out;
box-sizing: border-box;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
.art-control-progress {
position: relative;
height: 5px;
padding: 1px 0;
cursor: pointer;
box-sizing: border-box;
.art-control-progress-inner {
position: relative;
height: 100%;
background: rgba(255,255,255,.2);
.art-progress-loaded {
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 0;
background: rgba(255,255,255,.4);
transform-origin: 0 0;
}
.art-progress-played {
position: absolute;
z-index: 2;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 0;
transform-origin: 0 0;
}
.art-progress-indicator {
display: none;
position: absolute;
z-index: 3;
top: -5px;
left: -6.5px;
width: 13px;
height: 13px;
border-radius: 50%;
&.show-indicator {
display: block;
}
}
.art-progress-timer {
display: none;
position: absolute;
z-index: 4;
top: -25px;
left: 0;
width: 40px;
height: 20px;
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-timer {
display: block;
}
}
}
}
&.controls-show, &:hover {
.artplayer-bottom {
opacity: 1;
visibility: visible;
}
}
.artplayer-notice {
display: none;
font-size: 13px;