New effect, padding tweak

WIP.css

@@ -1,143 +1,12 @@
-@supports (backdrop-filter: blur(15px)) {
-  .dialog, .mainDrawer, .toast, .appfooter {
-    backdrop-filter: blur(15px);
-    background-color: rgba(0, 0, 0, 0.35);
-  }
-}
 
 /*
 .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;
 }
-
-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: 0 !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 15px calc(100% - 15px), transparent);
-    mask: linear-gradient(to bottom, transparent, black 15px calc(100% - 15px), transparent);
-}
- 
-.layout-tv .mainAnimatedPages {
-    overflow: visible;
-    mask: none;
-    -webkit-mask: none;
-}
- 
-div#videoOsdPage {
-    overflow: hidden !important;
-    margin-top: 0 !important;
-    -webkit-mask: none !important;
-    mask: none !important;
-}
- 
-div[data-role=page]:not(.withTabs) {
-    margin-top: 0 !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);
-}
 */
 
 
-
-/*From Mono*/
-/*Modified item status progress bar, play and item menu buttons*/
-.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
-  border-radius: 0px !important; 
-  background: rgba(0,0,0,0.7);
-}
-
-.playbackProgress>div {
-  background-color: rgba(255,255,255,0.75);
-}
-.transcodingProgress>div, .itemProgressBarForeground {
-  background-color: rgba(255,255,255,0.3);
-}
-
-.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
-  border-radius: 0px !important; 
-  background: rgba(0,0,0,0);
-}
-
-
-
-
-/*Theme user setting tab buttons*/
-div[data-role="controlgroup"] a.ui-btn-active {
-	background: rgba(0, 0, 0, 0.5) !important;
-	color: white !important;
-}
-a[data-role="button"]:hover {
-    background: rgba(80, 80, 80, 0.8) !important;
-}
-
-div[data-role=controlgroup] a[data-role=button]+a[data-role=button] {
-	margin: 0 !important;
-}
-
 /*Theme media player*/
 .mdl-slider-background-lower {
   background-color: rgb(255, 255, 255);
@@ -236,4 +105,4 @@ div[data-role=controlgroup] a[data-role=button]+a[data-role=button] {
     width:  calc(40vw - 1.2em) !important;
     height: calc(40vw - 1.2em) !important;
   }
-}
+}

base.css

@@ -6,6 +6,10 @@
   font-size: 10pt;
 }
 
+.content-primary {
+    padding-top: 1em;
+}
+
 /*Mobile tweaks*/
 .layout-mobile .detailPagePrimaryContainer {
     background: transparent;

effects/pan-animation.css

@@ -0,0 +1,27 @@
+@keyframes backgroundScroll {
+  0% {
+    background-position: 99% 1%;
+  }
+  20% {
+    background-position: 1% 50%;
+  }
+  40% {
+    background-position: 99% 99%;
+  }
+  60% {
+    background-position: 1% 1%;
+  }
+  80% {
+    background-position: 50% 99%;
+  }
+  100% {
+    background-position: 99% 1%;
+  }
+}
+
+.backdropImage {
+  background-size: 150% 150%;
+  background-position: 99% 1%;
+  animation: backgroundScroll 210s ease;
+  animation-iteration-count: infinite;
+}