ArtPlayer/packages/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%;
    
                        &.art-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;
    
            .artplayer-controls-left, .artplayer-controls-right {
                display: flex;
            }

            .art-control {
                opacity: .9;
                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;
                }
                &:hover {
                    opacity: 1;
                }
            }
    
            .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
                        }
                    }
                }

                &:hover .art-volume-panel {
                    width: 60px;
                }
            }
    
            .art-control-time {
                padding: 0 10px;
            }

            .art-control-quality {
                position: relative;
                z-index: 30;
                padding: 0 10px;
                .art-qualitys {
                    display: none;
                    position: absolute;
                    left: -15px;
                    bottom: 35px;
                    width: 100px;
                    padding: 5px 0;
                    text-align: center;
                    color: #fff;
                    background: rgba(0,0,0,.7);
                    border-radius: 3px;
                    .art-quality-item {
                        height: 30px;
                        line-height: 30px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
                        &:hover {
                            background-color: rgba(255,255,255,.1);
                        }
                    }
                }
                &:hover .art-qualitys{
                    display: block;
                }
            }
        }
    }
    
    &.artplayer-controls-show, &.artplayer-hover {
        .artplayer-bottom {
            opacity: 1;
            visibility: visible;
        }
    }
    
    &.artplayer-error, &.artplayer-destroy {
        .art-progress-indicator, .art-progress-tip {
            display: none !important;
        }
    }
}