Fix themes using dark background with me_js

airsonic-main/src/main/webapp/style/buuftheme.css

@@ -6,7 +6,7 @@
  * Icons used are released under Creative Commons.
  * Heading icons are part of the Albook icon pack created by Laurent Baumann (http://lbaumann.com/)
  * Main theme icon part of itunes icon pack created by Michael Flarup (http://pixelresort.com)
- * 
+ *
  *
  * Edited for BUUF Theme by Fractal Systems
  * BUUF artwork: Based on icons by Paul Davey aka Mattahan. All rights reserved.
@@ -109,4 +109,3 @@ body {
     margin: 5px;
     padding: 5px;
 }
-

airsonic-main/src/main/webapp/style/coolandclean.css

@@ -105,4 +105,3 @@ body {
     margin: 5px;
     padding: 5px;
 }
-

airsonic-main/src/main/webapp/style/default.css

@@ -1,3 +1,2 @@
+@import "default-without-mediaelement.css";
 @import "mediaelement-light.css";
-@import "default-without-mediaelement-light.css";
-

airsonic-main/src/main/webapp/style/denim.css

@@ -87,4 +87,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
+}

airsonic-main/src/main/webapp/style/groove.css

@@ -99,4 +99,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
+}

airsonic-main/src/main/webapp/style/hd.css

@@ -80,4 +80,3 @@ input, select {
 .albumComment, .log {
     font-size: 12pt;
 }
-

airsonic-main/src/main/webapp/style/hd1080.css

@@ -14,4 +14,3 @@ body {
 .detail, .albumComment, .log {
     font-size: 12pt;
 }
-

airsonic-main/src/main/webapp/style/hiconi.css

@@ -4,7 +4,8 @@
  * Author: Jeebs (Fisher Evans)
  */
 
-@import "default-without-mediaelement-light.css";
+@import "default-without-mediaelement.css";
+@import "mediaelement-dark.css";
 
 table {
 	color: #a3a3a3;

airsonic-main/src/main/webapp/style/hitech.css

@@ -87,4 +87,4 @@ body {
     background-repeat:no-repeat;
     background-attachment:fixed;
     background-position:bottom right;
-}
+}

airsonic-main/src/main/webapp/style/jquery.contextMenu.css

@@ -13,9 +13,9 @@
  */
 
 .context-menu-list {
-    margin:0; 
+    margin:0;
     padding:0;
-    
+
     min-width: 120px;
     max-width: 250px;
     display: inline-block;
@@ -24,13 +24,13 @@
     
     border: 1px solid #DDD;
     background: #EEE;
-    
+
     -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
         -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
          -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-    
+
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
 }
@@ -85,7 +85,7 @@
 /* icons
     #protip:
     In case you want to use sprites for icons (which I would suggest you do) have a look at
-    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
+    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
     .context-menu-item.icon:before {}
  */
 .context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
@@ -115,7 +115,7 @@
 .context-menu-input > label > select {
     display: block;
     width: 100%;
-    
+
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
         -ms-box-sizing: border-box;

airsonic-main/src/main/webapp/style/mediaelement-dark.css

@@ -0,0 +1,11 @@
+.mejs__container {
+  background: transparent;
+}
+
+.mejs__container .me_cannotplay a {
+  background: transparent;
+}
+
+.mejs__controls:not([style*="display: none"]) {
+  background: transparent;
+}

airsonic-main/src/main/webapp/style/mediaelement-light.css

@@ -1,4 +1,3 @@
-
 .mejs__overlay-loading-bg-img {
     background-image: url("mejs-controls-dark.svg");
 }
@@ -12,15 +11,15 @@
 }
 
 .mejs__container {
-    background: #F1F1F1;
+  background: transparent;
 }
 
 .mejs__container .me_cannotplay a {
-    color: #F1F1F1;
+  background: transparent;
 }
 
 .mejs__controls:not([style*="display: none"]) {
-    background: #F1F1F1;
+  background: transparent;
 }
 
 .mejs__time {

airsonic-main/src/main/webapp/style/midnight.css

@@ -4,7 +4,8 @@
  * Author: Sindre Mehus
  */
 
-@import "default-without-mediaelement-light.css";
+@import "default-without-mediaelement.css";
+@import "mediaelement-dark.css";
 
 /* The primary background color. */
 .bgcolor1, table.music tr:nth-of-type(even) {

airsonic-main/src/main/webapp/style/monochrome.css

@@ -88,4 +88,4 @@ body {
     padding: 5px;
     color: #FFFFFF;
     background-color: #C0C0C0;
-}
+}

airsonic-main/src/main/webapp/style/monochrome_black.css

@@ -4,7 +4,8 @@
  * Author: David D ddavis1@gmail.com
  */
 
-@import "default-without-mediaelement-light.css";
+@import "default-without-mediaelement.css";
+@import "mediaelement-dark.css";
 
 /* The primary background colour. */
 .bgcolor1, table.music tr:nth-of-type(even) {
@@ -107,4 +108,4 @@ body {
 
 label, p {
 	color: #CCC;
-}
+}

airsonic-main/src/main/webapp/style/pinkpanther.css

@@ -88,4 +88,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
+}

airsonic-main/src/main/webapp/style/simplify.css

@@ -87,4 +87,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
+}

airsonic-main/src/main/webapp/style/sonic.css

@@ -85,4 +85,4 @@ html {
 
 label, p {
 	color: #696969;
-}
+}

airsonic-main/src/main/webapp/style/sonic_blue.css

@@ -74,4 +74,4 @@ a:hover, a:hover * {
 
 label, p {
 	color: #CCC;
-}
+}

airsonic-main/src/main/webapp/style/sonic_white.css

@@ -75,4 +75,4 @@ a:hover, a:hover * {
 
 label, p {
 	color: #696969;
-}
+}

airsonic-main/src/main/webapp/style/subStandard.css

@@ -79,7 +79,7 @@ a:hover, a:hover * {
 /* Selected Headers. */
 .headerSelected {
     color: #FFDA23;
-    text-shadow: 0.1em 0.1em 0.2em grey;    
+    text-shadow: 0.1em 0.1em 0.2em grey;
     background-color: transparent;
     border: 0px
 }
@@ -133,11 +133,11 @@ a:hover, a:hover * {
 }
 ::-webkit-scrollbar-button {
     display:none;
-    background: 
+    background:
         -webkit-gradient(
-        linear, 
-        0 0, 
-        100% 0, 
+        linear,
+        0 0,
+        100% 0,
         from(#464646),
         to(#383838)
         );
@@ -155,12 +155,12 @@ a:hover, a:hover * {
 ::-webkit-scrollbar-thumb:horizontal{
     height: 12px;
     -webkit-border-radius:12px;
-    background: 
+    background:
         -webkit-gradient(
-        linear, 
-        0 0, 
-        0 100%, 
-        from(rgba(0,0,0,0.1)), 
+        linear,
+        0 0,
+        0 100%,
+        from(rgba(0,0,0,0.1)),
         to(rgba(0,0,0,0.25))
         );
     border: 6px solid transparent;
@@ -177,4 +177,4 @@ a:hover, a:hover * {
     background: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,.1)) 0 0 repeat, url(images/webkit-arrows-vert.png) -19px 50% no-repeat, #bfb6a3 url(images/bg-blog-repeat.png) 0 0 no-repeat;
     background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)) 0 0 repeat, url(images/webkit-arrows-vert.png) -19px 50% no-repeat, #bfb6a3 url(images/bg-blog-repeat.png) 0 0 no-repeat;
     -webkit-border-radius: 0 0 6px 0;
-}
+}