ArtPlayer/src/style/bottom.scss

.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 {
                line-height: 36px;
                padding: 0 10px;
            }
        }
    }
    
    &.controls-show, &:hover {
        .artplayer-bottom {
            opacity: 1;
            visibility: visible;
        }
    }
    
    &.artplayer-error {
        .art-progress-indicator, .art-progress-tip {
            display: none !important;
        }
    }
}