Huge hopefully final update

effects/glassy.css

@@ -0,0 +1,6 @@
+@supports (backdrop-filter: blur(15px)) {
+  .dialog, .mainDrawer, .toast, .appfooter {
+    backdrop-filter: blur(15px);
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+}

effects/hoverglow.css

@@ -0,0 +1,15 @@
+/*Glow accent on hover*/
+.raised.homeLibraryButton {
+    box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important;
+    border: solid 1px rgba(var(--accent),0) !important;
+}
+.cardOverlayContainer:hover,
+.dialog,
+.toast,
+.raised.homeLibraryButton:hover {
+  box-shadow: 0px 0px 5px rgb(var(--accent)) !important;
+  border: solid 1px rgba(var(--accent),0.6) !important;
+}
+.cardOverlayContainer {
+  border: solid 1px rgba(var(--accent),0.0) !important;
+}

effects/scrollfade.css

@@ -0,0 +1,88 @@
+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);
+}
+
+