Ultrachromic/effects/scrollfade.css

body.force-scroll {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
}
 
.skinHeader {
    position: static;
    width: 100%;
    align-self: flex-start;
}
 
.mainAnimatedPages {
    height: 100vh;
    position: relative !important;
    overflow: hidden;
}
 
.libraryPage:not(.noSecondaryNavPage) {
    padding: 1em !important;
}
 
div#itemDetailPage {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
 
@media (min-width: 40em) {
    .dashboardDocument .skinBody {
        left: 20em;
        width: calc(100vw - 20em);
    }
}
 
div#loginPage {
    margin-top: 0 !important;
    position: fixed;
}
 
div[data-role=page] {
    margin: 0 !important;
    padding: 0 !important;
    position: static;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-mask: linear-gradient(to bottom, transparent, black 25px calc(100% - 15px), transparent);
    mask: linear-gradient(to bottom, transparent, black 25px calc(100% - 15px), transparent);
}
 
.layout-tv .mainAnimatedPages {
    overflow: visible;
    mask: none;
    -webkit-mask: none;
}
 
div#videoOsdPage {
    overflow: hidden !important;
    margin-top: 1em !important;
    -webkit-mask: none !important;
    mask: none !important;
}
 
div[data-role=page]:not(.withTabs) {
    margin-top: 1em !important;
}
 
div#itemBackdrop {
    display: none;
}
 
.layout-desktop .detailRibbon {
    margin-top: 7.2em;
}
 
.layout-mobile #itemDetailPage {
    position: fixed;
    -webkit-mask: none;
    mask: none;
    margin-top: 4em !important;
    height: calc(100vh - 4em);
}