miru/app/css/player.css

:root {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --accent-color: #e5204c;
    --volume-level: 100%;
    --progress: 0%;
    --buffer: 0%;
    --height: 0;
    --download: 0%;
    color: #b6b6b6;
    --sidebar-width: 19rem;
    --ts: "";
    --miniplayer-display: flex;
}

/* NAVBAR */
.page-wrapper.with-sidebar[data-sidebar-hidden]>.sidebar {
    left: calc(-1 *var(--sidebar-width));
}

/*PLAYER*/

#player:target {
    bottom: 0;
    right: 0;
    position: relative;
    align-self: center;
    width: 100%;
    height: 100%;
    transition: none !important;
}

.immersed {
    cursor: none
}

.immersed .controls,
.immersed .stats {
    opacity: 0;
}

#player {
    position: fixed;
    display: var(--miniplayer-display);
    bottom: 2rem;
    right: 2rem;
    width: 25%;
    transition: width .2s ease;
    z-index: 10;
    flex-direction: column;
    justify-content: center;
}

#player>a {
    position: absolute;
    z-index: 10
}

#player:target .player {
    display: flex !important
}
#player.pip{
    background: #000
}

.controls {
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .1) 75%, transparent);
    transition: .5s opacity ease;
}

.stats {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .1) 75%, transparent);
    transition: .5s opacity ease;
    border-width: 0;
    border-top-width: 1px;
    border-image-slice: 1;
    border-style: solid;
    border-image-source: linear-gradient(90deg, #e5204c var(--download), rgba(0, 0, 0, .8) var(--download))
}

.player {
    position: absolute;
    user-select: none;
    opacity: 1;
    font-family: Roboto, Arial, Helvetica, sans-serif
}

.controls>*:hover {
    filter: drop-shadow(0 0 8px #000)
}

.controls span {
    cursor: pointer
}

.stats .ts {
    padding: 0 1.2rem 0 0 !important
}

.player span {
    font-size: 2.2rem !important;
    color: #ececec;
    padding: 1.2rem;
    transition: all .2s ease;
}

.player .ts {
    font-size: 1.8rem !important;
    white-space: nowrap;
    align-self: center;
    cursor: default;
    padding: 0 1.2rem;
    font-weight: 600
}

#progress,
.prog {
    width: 100%;
    height: 100%;
    position: relative;
}

#video {
    width: 100%;
    height: 100%
}

.volume {
    display: flex;
    width: auto
}

.volume:hover>input[type=range] {
    width: 5vw;
    display: inline-block;
    transition: all .1s ease;
    margin-right: 1rem
}

.volume>input[type=range] {
    width: 0;
    transition: all .1s ease;
}

.controls input[type=range] {
    -webkit-appearance: none;
    background: transparent;
    margin: 0;
    cursor: pointer;
}

.controls input[type=range]:focus {
    outline: none;
}

#volume::-webkit-slider-runnable-track {
    height: 3px;
    background: linear-gradient(90deg, #e5204c var(--volume-level), rgba(255, 255, 255, .2) var(--volume-level))
}

#progress::-webkit-slider-runnable-track {
    height: 3px;
    background: linear-gradient(90deg, #e5204c var(--progress), rgba(255, 255, 255, .4) var(--progress), rgba(255, 255, 255, .4) var(--buffer), rgba(255, 255, 255, .2) var(--buffer))
}

.controls input[type=range]:hover::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
    margin-top: -4px
}

.controls input[type=range]::-webkit-slider-thumb {
    height: 0;
    width: 0;
    border-radius: 50%;
    background: var(--accent-color);
    -webkit-appearance: none;
    margin-top: 2px;
    transition: all .1s ease
}

#progress+img,
#progress::before {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, -100%);
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: #ececec;
    white-space: nowrap;
    align-self: center;
    left: var(--progress);
    font-weight: 600;
    transition: .2s opacity ease
}

#progress+img {
    content: "";
    height: var(--height);
    top: -2rem;
    width: 150px;
}

#progress::before {
    top: .5rem;
    content: attr(data-ts)
}

#progress:active~img,
#progress:active::before {
    opacity: 1
}

.ctrl[disabled],
#player:fullscreen #bpip,
#player:fullscreen #btheatre,
#player:target>a,
#progress+img[src=" "],
video[src=""],
#player.pip video,
#player.pip canvas {
    display: none !important
}

video::cue {
    background: none;
    font-family: var(--sub-font);
    color: #fff;
    text-shadow: 2px 2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        -2px -2px 0 #000,
        2px 0px 0 #000,
        0px 2px 0#000,
        -2px 0px 0 #000,
        0px -2px 0 #000,
        2px 2px 2px #000;
}

#dl:not([href])>span {
    cursor: not-allowed;
    color: rgba(255, 255, 255, .4);
}

#nowPlayingDisplay {
    padding-left: 1.2rem !important;
}

#buffering {
    border: 4px solid #FFFFFF00;
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    opacity: 1;
    transition: .5s opacity ease;
}

#buffering.hidden {
    opacity: 0
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}