jellyfin-web/dashboard-ui/css/videoosd.css

.osdPoster img,.pageContainer,.videoOsdBottom{bottom:0;left:0;right:0}.osdHeader{padding-bottom:3vh;-webkit-transition:-webkit-transform .3s ease-out,opacity .3s ease-out;-o-transition:transform .3s ease-out,opacity .3s ease-out;transition:transform .3s ease-out,opacity .3s ease-out;will-change:transform;position:relative;z-index:1;background-color:rgba(0,0,0,.3);background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,0)));background:-webkit-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));background:-o-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.osdHeader .headerButton:not(.headerBackButton):not(.libraryMenuButtonText){display:none}.osdHeader-hidden{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);opacity:0}.chapterThumbContainer{-webkit-box-shadow:0 0 1.9vh #000;box-shadow:0 0 1.9vh #000;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;position:relative}.chapterThumb{background-position:center center;-webkit-background-size:contain;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:50em) and (orientation:landscape){.chapterThumb{height:30vh;min-width:30vh}}.chapterThumbTextContainer{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);padding:.25em .5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.chapterThumbText{padding:.25em 0;margin:0;opacity:1}.chapterThumbText-dim{opacity:.6}.videoOsdBottom{position:fixed;background-color:rgba(0,0,0,.7);padding:1%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;will-change:transform;-webkit-transition:-webkit-transform .3s ease-out,opacity .3s ease-out;-o-transition:transform .3s ease-out,opacity .3s ease-out;transition:transform .3s ease-out,opacity .3s ease-out;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.8)));background:-webkit-linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.8));background:-o-linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.8));background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.8));color:#fff}.videoOsdBottom-hidden{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}.osdControls{-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1}.videoOsdBottom .buttons{padding:.25em 0 0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.osdVolumeSliderContainer{width:6.5em;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1}.osdMediaInfo,.volumeButtons{display:-webkit-box;display:-webkit-flex;-webkit-box-align:center}.volumeButtons{margin:0 .5em 0 auto;display:flex;-webkit-align-items:center;align-items:center}.osdTimeText{margin-left:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mouseIdle .videoOsdBottom .volumeButtons{display:none}.osdPoster{width:10%;position:relative;margin-right:.5em}.osdPoster img{position:absolute;height:auto;width:100%;-webkit-box-shadow:0 0 1.9vh #000;box-shadow:0 0 1.9vh #000;border:1px solid #222;user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none}.osdTitle,.osdTitleSmall{margin:0 1em 0 0}.osdMediaInfo{display:flex;-webkit-align-items:center;align-items:center}.osdSecondaryMediaInfo{padding-left:.6em!important}.osdTextContainer{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:.7em;padding-left:.5em}.osdMainTextContainer{-webkit-box-align:baseline;-webkit-align-items:baseline;align-items:baseline}.pageContainer{top:0;position:fixed}@media all and (max-width:30em){.btnFastForward,.btnRewind,.osdMediaInfo,.osdPoster{display:none!important}}@media all and (max-width:33.75em){.videoOsdBottom .paper-icon-button-light{margin:0}}@media all and (max-width:37.5em){.videoOsdBottom .volumeButtons{display:none!important}}@media all and (max-width:75em){.videoOsdBottom .endsAtText{display:none!important}}