From d1e190af0c8f7289c00001c344ee754627cd0fab Mon Sep 17 00:00:00 2001
From: jo <lammler.jonas@riseup.net>
Date: Tue, 27 Feb 2018 20:00:39 +0100
Subject: [PATCH 1/2] Remove margin of media_control bar

---
 airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp b/airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp
index 4f0349d6..20815780 100644
--- a/airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp
+++ b/airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp
@@ -451,7 +451,7 @@
                 $("#starSong" + id).attr("src", "<spring:theme code='ratingOnImage'/>");
             } else {
                 $("#starSong" + id).attr("src", "<spring:theme code='ratingOffImage'/>");
-            } 
+            }
             if ($("#currentImage" + id) && song.streamUrl == currentStreamUrl) {
                 $("#currentImage" + id).show();
                 if (isJavaJukeboxPresent()) {
@@ -677,7 +677,7 @@
     </c:when>
     <c:otherwise>
         <div class="bgcolor2" style="position:fixed; bottom:0; width:100%;padding-top:10px;">
-            <table style="white-space:nowrap;">
+            <table style="white-space:nowrap; margin-bottom:0;">
                 <tr style="white-space:nowrap;">
                     <c:if test="${model.user.settingsRole and fn:length(model.players) gt 1}">
                         <td style="padding-right: 5px"><select name="player" onchange="location='playQueue.view?player=' + options[selectedIndex].value;">

From b259f32bc45a9ff69f66981c3cf8c694cdee60df Mon Sep 17 00:00:00 2001
From: jo <lammler.jonas@riseup.net>
Date: Tue, 27 Feb 2018 20:01:17 +0100
Subject: [PATCH 2/2] Fix themes using dark background with me_js

---
 .../src/main/webapp/style/buuftheme.css       |  3 +--
 .../src/main/webapp/style/coolandclean.css    |  1 -
 ...t.css => default-without-mediaelement.css} |  0
 .../src/main/webapp/style/default.css         |  3 +--
 airsonic-main/src/main/webapp/style/denim.css |  2 +-
 .../src/main/webapp/style/groove.css          |  2 +-
 airsonic-main/src/main/webapp/style/hd.css    |  1 -
 .../src/main/webapp/style/hd1080.css          |  1 -
 .../src/main/webapp/style/hiconi.css          |  3 ++-
 .../src/main/webapp/style/hitech.css          |  2 +-
 .../main/webapp/style/jquery.contextMenu.css  | 12 +++++-----
 .../main/webapp/style/mediaelement-dark.css   | 11 ++++++++++
 .../main/webapp/style/mediaelement-light.css  |  7 +++---
 .../src/main/webapp/style/midnight.css        |  3 ++-
 .../src/main/webapp/style/monochrome.css      |  2 +-
 .../main/webapp/style/monochrome_black.css    |  5 +++--
 .../src/main/webapp/style/pinkpanther.css     |  2 +-
 .../src/main/webapp/style/simplify.css        |  2 +-
 airsonic-main/src/main/webapp/style/sonic.css |  2 +-
 .../src/main/webapp/style/sonic_blue.css      |  2 +-
 .../src/main/webapp/style/sonic_white.css     |  2 +-
 .../src/main/webapp/style/subStandard.css     | 22 +++++++++----------
 22 files changed, 49 insertions(+), 41 deletions(-)
 rename airsonic-main/src/main/webapp/style/{default-without-mediaelement-light.css => default-without-mediaelement.css} (100%)
 create mode 100644 airsonic-main/src/main/webapp/style/mediaelement-dark.css

diff --git a/airsonic-main/src/main/webapp/style/buuftheme.css b/airsonic-main/src/main/webapp/style/buuftheme.css
index bfdca610..f6193910 100644
--- a/airsonic-main/src/main/webapp/style/buuftheme.css
+++ b/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;
 }
-
diff --git a/airsonic-main/src/main/webapp/style/coolandclean.css b/airsonic-main/src/main/webapp/style/coolandclean.css
index c256208c..50e62a4c 100644
--- a/airsonic-main/src/main/webapp/style/coolandclean.css
+++ b/airsonic-main/src/main/webapp/style/coolandclean.css
@@ -105,4 +105,3 @@ body {
     margin: 5px;
     padding: 5px;
 }
-
diff --git a/airsonic-main/src/main/webapp/style/default-without-mediaelement-light.css b/airsonic-main/src/main/webapp/style/default-without-mediaelement.css
similarity index 100%
rename from airsonic-main/src/main/webapp/style/default-without-mediaelement-light.css
rename to airsonic-main/src/main/webapp/style/default-without-mediaelement.css
diff --git a/airsonic-main/src/main/webapp/style/default.css b/airsonic-main/src/main/webapp/style/default.css
index 9fd95fb3..9036ef7d 100644
--- a/airsonic-main/src/main/webapp/style/default.css
+++ b/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";
-
diff --git a/airsonic-main/src/main/webapp/style/denim.css b/airsonic-main/src/main/webapp/style/denim.css
index 1ad3f192..836349b8 100644
--- a/airsonic-main/src/main/webapp/style/denim.css
+++ b/airsonic-main/src/main/webapp/style/denim.css
@@ -87,4 +87,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/groove.css b/airsonic-main/src/main/webapp/style/groove.css
index 7ca09506..1d49178d 100644
--- a/airsonic-main/src/main/webapp/style/groove.css
+++ b/airsonic-main/src/main/webapp/style/groove.css
@@ -99,4 +99,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/hd.css b/airsonic-main/src/main/webapp/style/hd.css
index 9e0e86a7..e8164354 100644
--- a/airsonic-main/src/main/webapp/style/hd.css
+++ b/airsonic-main/src/main/webapp/style/hd.css
@@ -80,4 +80,3 @@ input, select {
 .albumComment, .log {
     font-size: 12pt;
 }
-
diff --git a/airsonic-main/src/main/webapp/style/hd1080.css b/airsonic-main/src/main/webapp/style/hd1080.css
index b11e7f1e..61ce93d4 100644
--- a/airsonic-main/src/main/webapp/style/hd1080.css
+++ b/airsonic-main/src/main/webapp/style/hd1080.css
@@ -14,4 +14,3 @@ body {
 .detail, .albumComment, .log {
     font-size: 12pt;
 }
-
diff --git a/airsonic-main/src/main/webapp/style/hiconi.css b/airsonic-main/src/main/webapp/style/hiconi.css
index cac7b769..f3af641b 100644
--- a/airsonic-main/src/main/webapp/style/hiconi.css
+++ b/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;
diff --git a/airsonic-main/src/main/webapp/style/hitech.css b/airsonic-main/src/main/webapp/style/hitech.css
index 986057d7..9aa8ae0b 100644
--- a/airsonic-main/src/main/webapp/style/hitech.css
+++ b/airsonic-main/src/main/webapp/style/hitech.css
@@ -87,4 +87,4 @@ body {
     background-repeat:no-repeat;
     background-attachment:fixed;
     background-position:bottom right;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/jquery.contextMenu.css b/airsonic-main/src/main/webapp/style/jquery.contextMenu.css
index e8e32b07..1a703422 100644
--- a/airsonic-main/src/main/webapp/style/jquery.contextMenu.css
+++ b/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;
diff --git a/airsonic-main/src/main/webapp/style/mediaelement-dark.css b/airsonic-main/src/main/webapp/style/mediaelement-dark.css
new file mode 100644
index 00000000..566241fd
--- /dev/null
+++ b/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;
+}
diff --git a/airsonic-main/src/main/webapp/style/mediaelement-light.css b/airsonic-main/src/main/webapp/style/mediaelement-light.css
index b8d8abf1..c192acfe 100644
--- a/airsonic-main/src/main/webapp/style/mediaelement-light.css
+++ b/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 {
diff --git a/airsonic-main/src/main/webapp/style/midnight.css b/airsonic-main/src/main/webapp/style/midnight.css
index 5da081da..b47dfbc7 100644
--- a/airsonic-main/src/main/webapp/style/midnight.css
+++ b/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) {
diff --git a/airsonic-main/src/main/webapp/style/monochrome.css b/airsonic-main/src/main/webapp/style/monochrome.css
index 50b238ae..f86b3c40 100644
--- a/airsonic-main/src/main/webapp/style/monochrome.css
+++ b/airsonic-main/src/main/webapp/style/monochrome.css
@@ -88,4 +88,4 @@ body {
     padding: 5px;
     color: #FFFFFF;
     background-color: #C0C0C0;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/monochrome_black.css b/airsonic-main/src/main/webapp/style/monochrome_black.css
index 7bc670f7..30413d42 100644
--- a/airsonic-main/src/main/webapp/style/monochrome_black.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/pinkpanther.css b/airsonic-main/src/main/webapp/style/pinkpanther.css
index 9ce873de..4efbe2f4 100644
--- a/airsonic-main/src/main/webapp/style/pinkpanther.css
+++ b/airsonic-main/src/main/webapp/style/pinkpanther.css
@@ -88,4 +88,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/simplify.css b/airsonic-main/src/main/webapp/style/simplify.css
index ea79be4f..a9715ad7 100644
--- a/airsonic-main/src/main/webapp/style/simplify.css
+++ b/airsonic-main/src/main/webapp/style/simplify.css
@@ -87,4 +87,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/sonic.css b/airsonic-main/src/main/webapp/style/sonic.css
index 6e79388c..7b027fd3 100644
--- a/airsonic-main/src/main/webapp/style/sonic.css
+++ b/airsonic-main/src/main/webapp/style/sonic.css
@@ -85,4 +85,4 @@ html {
 
 label, p {
 	color: #696969;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/sonic_blue.css b/airsonic-main/src/main/webapp/style/sonic_blue.css
index 8b95db81..4a6e6bb2 100644
--- a/airsonic-main/src/main/webapp/style/sonic_blue.css
+++ b/airsonic-main/src/main/webapp/style/sonic_blue.css
@@ -74,4 +74,4 @@ a:hover, a:hover * {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/sonic_white.css b/airsonic-main/src/main/webapp/style/sonic_white.css
index 2a7322b7..92893558 100644
--- a/airsonic-main/src/main/webapp/style/sonic_white.css
+++ b/airsonic-main/src/main/webapp/style/sonic_white.css
@@ -75,4 +75,4 @@ a:hover, a:hover * {
 
 label, p {
 	color: #696969;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/subStandard.css b/airsonic-main/src/main/webapp/style/subStandard.css
index b015699b..278e20e7 100644
--- a/airsonic-main/src/main/webapp/style/subStandard.css
+++ b/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;
-}
\ No newline at end of file
+}