Sid Gifari Advanced File Manager

✏️ Editing: video-player.scss

.pxl-btn-video {
    position: relative;
    &.style1 {
        width: 90px;
        height: 90px;
        border-radius: 90px;
        display: inline-flex;
        background-color: #fff;
        color: $primary_color;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        box-shadow: 0 13px 24px rgba(#010114, 0.23);
        &:before {
            content: "";
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(#fff, 0.63);
            border-radius: 50%;
            animation: pxl_pulse_border 1500ms ease-out infinite;
            -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
            z-index: -2;
            border-radius: inherit;
        }
        &:hover, &:focus {
            color: $primary_color;
        }
    }
    &.style2 {
        width: 120px;
        height: 120px;
        border-radius: 120px;
        display: inline-flex;
        background-color: $primary_color;
        color: #fff;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        @media #{$max-sm} {
            width: 80px;
            height: 80px;
            border-radius: 80px;
            font-size: 22px;
        }
        &:before {
            content: "";
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #{'rgba(var(--primary-color-rgb),0.44)'};
            border-radius: 50%;
            animation: pxl_pulse_border 1500ms ease-out infinite;
            -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
            z-index: -2;
            border-radius: inherit;
        }
        &:hover, &:focus {
            color: #fff;
        }
    }
}

.pxl-video-player1 {
    .pxl-overlay-color {
        z-index: 88;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .pxl-video--holder {
        + .btn-video-wrap {
            position: absolute;
            z-index: 99;
            text-align: center;
            &.p-center {
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -50%));
            }
        }
    }
    .pxl-video--imagebg {
        position: relative;
        overflow: hidden;
        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: -60px;
        }
    }
    &.pxl-video-style2 {
        .pxl-video--imagebg, .pxl-video--holder > img {
            border-radius: 20px;
            border: 8px solid $primary_color;
            box-shadow: 0 8px 40px rgba(#00071A, 0.15);
        }
    }
}

body.rtl {
}

📁 File Manager Pro