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;
    color: #b6b6b6;
    font-size: 62.5%;
    --nav-size: 19rem;
    --ts: "";
}



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

.sidebar {
    width: var(--nav-size);
}

.page-wrapper.with-sidebar>.content-wrapper {
    left: var(--nav-size);
    width: calc(100% - var(--nav-size));
}

/*PLAYER*/

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

.immersed {
    cursor: none;
}

.immersed .player {
    opacity: 0;
}

#player {
    position: fixed;
    display: flex;
    bottom: 2rem;
    right: 2rem;
    width: 25%;
    transition: width .2s ease;
    z-index: 10
}

#player:target > a {
    display: none;
}

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

#player:target .player {
    display: flex !important
}

video[src=""] {
    display: none;
}

video::cue {
    background: none;
    font-family: "Open Sans", sans-serif;
    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;
}

.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);
}

.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);
}

.player {
    position: absolute;
    user-select: none;
    opacity: 1;
    transition: .5s opacity ease;
    font-family: Roboto, monospace
}

.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: 2rem !important;
    white-space: nowrap;
    align-self: center;
    cursor: default;
    padding: 0 1.2rem;
    font-weight: 600
}

#prog {
    width: 100%;
    align-self: center;
    padding: 1rem 0;
    position: relative;
}

.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;
    margin-right: 0
}

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

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

.controls input#vol[type=range]::-webkit-slider-runnable-track {
    width: 50%;
    height: 3px;
    cursor: pointer;
    background: linear-gradient(90deg, #e5204c var(--volume-level), rgba(255, 255, 255, .2) var(--volume-level))
}

.controls input#prog[type=range]::-webkit-slider-runnable-track {
    width: 50%;
    height: 3px;
    cursor: pointer;
    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#prog[type=range]::after,
.controls input#prog[type=range]::before {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, -100%);
    font-family: Roboto, monospace;
    color: #ececec;
    white-space: nowrap;
    align-self: center;
    padding: 0 1.2rem;
    left: var(--left);
    font-weight: 600;
    transition: .2s opacity ease;
}

.controls input#prog[type=range]::after {
    width: 150px;
    background: var(--background);
    content: "";
    height: var(--height);
    top: -2rem;
}

.controls input#prog[type=range]::before {
    top: 0rem;
    content: attr(data-ts);
}

.controls input#prog[type=range]:active::after,
.controls input#prog[type=range]:active::before {
    opacity: 1;
}

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

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

#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);
    }
}