jellyfin-web/dashboard-ui/videoosd.html

<div id="videoOsdPage" data-role="page" class="page libraryPage" data-backbutton="true">
    <style>
        .osdHeader {
            padding-bottom: 3vh;
            transition: transform 300ms ease-out, opacity 300ms ease-out;
            will-change: transform;
            position: relative;
            z-index: 1;
        }

            .osdHeader .viewMenuBar {
                background-color: rgba(0, 0, 0, .3);
                background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
            }

        .osdHeader-hidden {
            transform: translate3d(0,-100%,0);
            opacity: 0;
        }

        .osdHeader .headerButton:not(.headerBackButton) {
            display: none;
        }

        .osdHeader-hidden {
            transform: translate3d(0,-100%,0);
            opacity: 0;
        }

        .chapterThumbContainer {
            -moz-box-shadow: 0 0 1.9vh #000;
            -webkit-box-shadow: 0 0 1.9vh #000;
            box-shadow: 0 0 1.9vh #000;
            flex-grow: 1;
            position: relative;
        }

        .chapterThumb {
            background-position: center center;
            background-size: contain;
            background-repeat: no-repeat;
            border: 0;
            height: 20vh;
            min-width: 20vh;
        }

        @media all and (orientation: portrait) {

            .chapterThumb {
                height: 30vw;
                min-width: 30vw;
            }
        }

        @media all and (max-height: 800px) and (orientation: landscape) {

            .chapterThumb {
                height: 30vh;
                min-width: 30vh;
            }
        }

        .chapterThumbTextContainer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            padding: .25em .5em;
        }

        .chapterThumbText {
            padding: .25em 0;
            margin: 0;
            opacity: 1;
        }

        .chapterThumbText-dim {
            opacity: .6;
        }

        .videoOsdBottom {
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, .7);
            color: #fff;
            padding: 1%;
            display: flex;
            flex-direction: row;
            will-change: transform;
            transition: transform 300ms ease-out, opacity 300ms ease-out;
        }

        .videoOsdBottom-hidden {
            transform: translate3d(0,100%,0);
            opacity: 0;
        }

        .osdControls {
            flex-grow: 1;
        }

        .videoOsdBottom .buttons {
            padding: .25em 0 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .osdVolumeSliderContainer {
            width: 6.5em;
            flex-grow: 1;
        }

        .volumeButtons {
            margin: 0 .5em 0 auto;
            display: flex;
            align-items: center;
        }

        .osdTimeText {
            margin-left: 1em;
        }

        .mouseIdle .videoOsdBottom .volumeButtons {
            display: none;
        }

        .osdPoster {
            width: 10%;
            position: relative;
            margin-right: .5em;
        }

            .osdPoster img {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: auto;
                width: 100%;
                -moz-box-shadow: 0 0 1.9vh #000;
                -webkit-box-shadow: 0 0 1.9vh #000;
                box-shadow: 0 0 1.9vh #000;
                border: solid 1px #222;
                user-drag: none;
                user-select: none;
                -moz-user-select: none;
                -webkit-user-drag: none;
                -webkit-user-select: none;
                -ms-user-select: none;
            }

        .osdTitle {
            margin: 0;
            padding-left: .4em;
        }

        .osdMediaInfo {
            margin-left: 1em;
            color: #eee;
            display: flex;
            align-items: flex-end;
        }

        .osdTextContainer {
            display: flex;
            align-items: baseline;
        }

        .pageContainer {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: fixed;
        }

        @media all and (max-width:480px) {
            .osdPoster, .btnRewind, .btnFastForward, .osdMediaInfo {
                display: none !important;
            }
        }

        @media all and (max-width:540px) {
            .videoOsdBottom .paper-icon-button-light {
                margin: 0;
            }
        }

        @media all and (max-width:600px) {
            .videoOsdBottom .volumeButtons {
                display: none !important;
            }
        }

        @media all and (max-width: 1200px) {
            .videoOsdBottom .endsAtText {
                display: none !important;
            }
        }
    </style>
    <div class="pageContainer flex">

    </div>
    <div class="videoOsdBottom">

        <div class="osdPoster">

        </div>
        <div class="osdControls">
            <div class="osdTextContainer">
                <h2 class="osdTitle"></h2>
                <div class="osdMediaInfo"></div>
            </div>
            <div class="sliderContainer" style="margin: .25em .5em;">
                <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" />
            </div>

            <div class="buttons">
                <button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide">
                    <i class="xlargePaperIconButton md-icon">&#xE045;</i>
                </button>

                <button is="paper-icon-button-light" class="btnRewind" title="${Rewind}">
                    <i class="xlargePaperIconButton md-icon">&#xE020;</i>
                </button>

                <button is="paper-icon-button-light" class="btnPause autoSize" autofocus>
                    <i class="xlargePaperIconButton md-icon">&#xE034;</i>
                </button>

                <button is="paper-icon-button-light" class="btnFastForward" title="${FastForward}">
                    <i class="xlargePaperIconButton md-icon">&#xE01F;</i>
                </button>

                <button is="paper-icon-button-light" class="btnNextTrack autoSize hide">
                    <i class="xlargePaperIconButton md-icon">&#xE044;</i>
                </button>

                <button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
                    <i class="xlargePaperIconButton md-icon">&#xE3A1;</i>
                </button>
                <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
                    <i class="xlargePaperIconButton md-icon">&#xE01C;</i>
                </button>
                <button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
                    <i class="largePaperIconButton md-icon">&#xE8B8;</i>
                </button>
                <button is="paper-icon-button-light" class="btnCast hide autoSize" title="${PlayOnAnotherDevice}">
                    <i class="xlargePaperIconButton md-icon">&#xE307;</i>
                </button>
                <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen}">
                    <i class="xlargePaperIconButton md-icon">&#xE5D0;</i>
                </button>
                <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
                    <i class="xlargePaperIconButton md-icon">&#xE911;</i>
                </button>

                <div class="osdTimeText"><span class="osdPositionText"></span><span class="osdDurationText"></span><span class="endsAtText"></span></div>

                <div class="volumeButtons">
                    <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute}">
                        <i class="xlargePaperIconButton md-icon">&#xE050;</i>
                    </button>
                    <div class="sliderContainer osdVolumeSliderContainer">
                        <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="osdVolumeSlider" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>