Various fixes

accentlist.css

@@ -20,9 +20,6 @@ a[data-role="button"]:hover {
   background-color: rgba(var(--accent));
 }   
 
-.playbackProgress>div {
-  background-color: rgba(var(--accent),0.75);
-}
 progress::-moz-progress-bar {
   background-color: rgba(var(--accent),0.75);
 }
@@ -33,9 +30,11 @@ progress::-webkit-progress-value {
   background: rgba(var(--accent),0.75) !important;
 }
 
-.transcodingProgress>div, 
-.itemProgressBarForeground {
-  background-color: rgba(var(--accent),0.35);
+#dashboardPage .playbackProgress > div {
+    background-color: rgba(var(--accent), 0.75) !important;
+}
+#dashboardPage .transcodingProgress > div {
+    background-color: rgba(var(--accent), 0.35) !important;
 }
 
 .mdl-slider-background-lower {
@@ -108,4 +107,4 @@ progress::-webkit-progress-value {
 /* Syncplay theming*/
 .syncPlayIconCircle {
   color: rgba(var(--accent),1) !important;
-  text-shadow: none !important;
+  text-shadow: none !important;

base.css

@@ -43,12 +43,6 @@ div[data-role="controlgroup"] a[data-role="button"] {
   margin-bottom: auto;
 }
 
-/*Progress bar*/
-.itemProgressBar {
-  height: 2000em;
-  background: #0000;
-}
-
 /*Theme process progress ring*/
 .progressring-spiner {
   border-color: rgba(var(--accent));
@@ -152,7 +146,10 @@ div[data-role="controlgroup"] a[data-role="button"] {
     box-shadow: none;
 }
 .backgroundProgress > div {
-    background-color: #0000;
+    background: rgba(0, 0, 0, 0);
+}
+.itemProgressBar {
+    background: rgba(0, 0, 0, 0.25);
 }
 #divRunningTasks span {
     color: rgba(255,255,255,0.75) !important;

effects/pan-animation.css

@@ -1,6 +1,9 @@
 @keyframes backgroundScroll {
   0% {
-    background-position: 99% 1%;
+    background-position: 99% 1%; opacity: 0;
+  }
+  2% {
+    opacity: 1;
   }
   20% {
     background-position: 1% 50%;
@@ -19,9 +22,38 @@
   }
 }
 
-.backdropImage {
-  background-size: 150% 150%;
-  background-position: 99% 1%;
-  animation: backgroundScroll 210s ease;
-  animation-iteration-count: infinite;
+
+@keyframes backgroundScrollmob {
+  0% {
+    background-position: 99% 1%; opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 1;
+  }
+  100% {
+    background-position: 50% 50%; opacity: 0;
+  }
+}
+
+
+
+@media all and (min-width: 100em){
+  .backdropImage {
+    background-size: 150% 150%;
+    background-position: 99% 1%;
+    animation: backgroundScroll 210s ease;
+    animation-iteration-count: infinite;
+  }
+}
+
+@media all and (max-width: 100em){
+  .backdropImage {
+    /*background-size: 150% 150%;*/
+    background-position: 99% 1%;
+    animation: backgroundScrollmob 25s ease;
+    animation-iteration-count: infinite;
+  }
 }

fixes.css

@@ -2,10 +2,22 @@
 .mainDetailButtons {
 	font-size: 120%;
 }
+
+/*Add fixes, start of file*/
+@media all and (min-width: 100em){
+  .button-flat {
+    margin: .2em !important;
+    padding: .85em !important;
+  }
+}
 @media all and (max-width: 100em){
   .mainDetailButtons {
-	  font-size: 155%;
-	}
+    font-size: 155%;
+  }
+  .button-flat {
+    max-width: 20vw;
+    max-height: 20vw;
+  }
 }
 
 /*Media player*/