From c35c92ce571cfe727413ff2590aefc10e3e4213b Mon Sep 17 00:00:00 2001
From: Andrew DeMaria <lostonamountain@gmail.com>
Date: Sun, 4 Jun 2017 21:10:24 -0600
Subject: [PATCH] Some light themeing added for MediaElement.js

Signed-off-by: Andrew DeMaria <lostonamountain@gmail.com>
---
 .../src/main/webapp/WEB-INF/jsp/head.jsp      |   2 +
 .../src/main/webapp/WEB-INF/jsp/playQueue.jsp |   1 -
 .../src/main/webapp/style/default.css         | 438 +-----------------
 .../src/main/webapp/style/hiconi.css          |   2 +-
 .../src/main/webapp/style/midnight.css        |   2 +-
 .../main/webapp/style/monochrome_black.css    |   2 +-
 .../default-without-mediaelement-light.css    | 429 +++++++++++++++++
 .../main/webapp/style/mediaelement-light.css  |  93 ++++
 .../main/webapp/style/mejs-controls-dark.svg  | 122 +++++
 9 files changed, 651 insertions(+), 440 deletions(-)
 create mode 100644 libresonic-main/src/main/webapp/style/default-without-mediaelement-light.css
 create mode 100644 libresonic-main/src/main/webapp/style/mediaelement-light.css
 create mode 100644 libresonic-main/src/main/webapp/style/mejs-controls-dark.svg

diff --git a/airsonic-main/src/main/webapp/WEB-INF/jsp/head.jsp b/airsonic-main/src/main/webapp/WEB-INF/jsp/head.jsp
index ef777b16..4cd51aec 100644
--- a/airsonic-main/src/main/webapp/WEB-INF/jsp/head.jsp
+++ b/airsonic-main/src/main/webapp/WEB-INF/jsp/head.jsp
@@ -6,6 +6,8 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <c:set var="styleSheet"><spring:theme code="styleSheet"/></c:set>
 <link rel="icon" type="image/png" href="<c:url value="/icons/favicon.png"/>"/>
+<!-- Included before libresonic stylesheet to allow overriding -->
+<link type="text/css" rel="stylesheet" href="<c:url value="/script/mediaelement/mediaelementplayer.min.css"/>">
 <link rel="stylesheet" href="<c:url value="/${styleSheet}"/>" type="text/css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic" type="text/css"/>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,300italic,500italic,700,700italic,100,100italic" type="text/css"/>
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 a3d97743..2594392a 100644
--- a/airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp
+++ b/airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp
@@ -13,7 +13,6 @@
     <script type="text/javascript" src="<c:url value="/script/mediaelement/mediaelement-and-player.min.js"/>"></script>
     <%@ include file="playQueueCast.jsp" %>
     <link type="text/css" rel="stylesheet" href="<c:url value="/script/webfx/luna.css"/>">
-    <link type="text/css" rel="stylesheet" href="<c:url value="/script/mediaelement/mediaelementplayer.min.css"/>">
     <style type="text/css">
         .ui-slider .ui-slider-handle {
             width: 11px;
diff --git a/airsonic-main/src/main/webapp/style/default.css b/airsonic-main/src/main/webapp/style/default.css
index 0564a919..9fd95fb3 100644
--- a/airsonic-main/src/main/webapp/style/default.css
+++ b/airsonic-main/src/main/webapp/style/default.css
@@ -1,437 +1,3 @@
-/*
- * CSS styleshet for default theme.
- *
- * Note that attributes that are typically changed by theme authors are
- * placed at the top.
-  *
- * Author: Sindre Mehus
- */
+@import "mediaelement-light.css";
+@import "default-without-mediaelement-light.css";
 
-/* The primary background color (light gray). */
-.bgcolor1, table.music tr:nth-of-type(even) {
-    background-color: #F9F9F9;
-}
-
-/* The secondary background color (darker gray). */
-.bgcolor2, .ruleTableHeader, .log, table.music tr:nth-of-type(odd) {
-    background-color: #F1F1F1
-}
-
-.headerSelected {
-    border-bottom: 3px solid darkorange;
-}
-
-/* Put stuff here if you need to customize any of the frames. */
-.mainframe {
-    padding-left:1em
-}
-.topframe {
-}
-.leftframe {
-}
-.rightframe {
-}
-.playlistframe {
-}
-
-.topframe::-webkit-scrollbar:vertical {
-    display:none
-}
-.leftframe::-webkit-scrollbar:horizontal {
-    display:none
-}
-
-/* Background color for form controls (use default). */
-input, select {
-}
-
-/* The primary foreground color (black). */
-body {
-    color: black;
-}
-
-/* The secondary foreground color used for h1, h2, details etc (gray). */
-h1, h2, .detail, .albumComment {
-    color: #696969;
-}
-
-/* Foreground color used for bold and tr. */
-b, tr {
-    color: #333333;
-}
-
-/* Link color */
-a:link, a:active, a:visited, a:link *, a:active *, a:visited * {
-    color: #006699
-}
-
-/* Link hover color */
-a:hover, a:hover * {
-    text-decoration: underline;
-    color: #DD6900
-}
-
-/* Color for warning messages. */
-.warning {
-    color: red;
-}
-
-/* Simple dark border. */
-.border1, .ruleTableHeader, .ruleTableCell, .log {
-    border: 1px solid black;
-}
-
-/* Scrollbar colors (supported on IE and Opera) */
-body {
-    scrollbar-face-color: #DEE3E7;
-    scrollbar-highlight-color: #FFFFFF;
-    scrollbar-shadow-color: #DEE3E7;
-    scrollbar-3dlight-color: #D1D7DC;
-    scrollbar-arrow-color: #006699;
-    scrollbar-track-color: #EFEFEF;
-    scrollbar-darkshadow-color: #98AAB1;
-}
-
-body, form, label, table, a {
-    font-family: 'Roboto', arial, sans-serif;
-}
-
-h1, h1 a {
-    font-family: 'Ubuntu', arial, sans-serif;
-    font-weight: normal;
-}
-
-h2, h2 a, .topHeader a {
-    font-family: 'Roboto', arial, sans-serif;
-    font-weight: normal;
-}
-
-/* Login page */
-
-#loginframe {
-    padding: 20px 50px;
-    margin: 100px 50px;
-    display: list-item;
-    list-style: none;
-    text-align: center;
-}
-
-#loginframe > * {
-    margin: 0 auto;
-    display: block;
-}
-
-#loginframe .loginmessagetop {
-    margin-bottom: 1em;
-    max-width: 30rem;
-}
-
-#loginframe input[type=text],
-#loginframe input[type=submit],
-#loginframe input[type=password] {
-    width: 20rem;
-    margin-bottom: 0.5em;
-}
-
-#loginframe input[type=submit] {
-    margin: 1rem auto;
-    padding: 0.3rem;
-    background: #2f7bd9;
-    color: #f2f2f2;
-    transition: color 0.2s ease, background 0.2s ease;
-}
-
-#loginframe input[type=submit]:hover {
-    background: #f2f2f2;
-    color: #2d2d2d;
-}
-
-#loginremember {
-    display: inline-flex;
-    align-items: center;
-    margin-right: 10px;
-}
-
-#loginframe .loginmessagebottom {
-    margin-top: 1em;
-    max-width: 50em;
-}
-
-/***************************************************************************************
- * The rest of the CSS is typically not changed in other themes (but not necessarily so).
- ***************************************************************************************/
-
-body {
-    padding:0;
-    border:0;
-    margin:0.75em;
-    font-size: 10.5pt;
-    line-height: 1.5em;
-}
-
-p {
-    padding:0;
-    border:0;
-    margin:0 0 1em 0;
-}
-
-.dense {
-    white-space: nowrap;
-    margin: 0;
-    line-height: 1.5em
-}
-
-h1 {
-    white-space: nowrap;
-    font-size: 150%;
-    padding: 0;
-    border: 0;
-    margin: 0;
-}
-
-h2 {
-    white-space: nowrap;
-    font-size: 108%;
-    margin: 0.8em 0 0.2em 0;
-}
-
-form {
-    font-size: 100%;
-    line-height: 140%;
-    padding: 0;
-    border: 0;
-    margin: 0;
-}
-
-input, textarea, select {
-    font-size: 90%;
-    padding: 3px;
-    border-radius: 3px;
-    border: 1px solid lightgray;
-}
-
-input[type=submit], input[type=button] {
-    background: white;
-    padding-left: 1em;
-    padding-right: 1em;
-}
-
-input[type=submit]:active, input[type=button]:active {
-    background: #e9e9e9;
-}
-
-input:hover, textarea:hover, select:hover {
-    border: 1px solid darkgray;
-}
-
-label {
-    font-size: 100%;
-    line-height: 140%;
-}
-
-table {
-    font-size: 100%;
-    line-height: 140%;
-    padding: 0;
-    border: 0;
-    margin: 0 0 0.4em 0;
-}
-
-
-/* Table with some white space above it.*/
-table.indent {
-    margin: 1em 0 0.4em 0;
-}
-
-table.music {
-    line-height: 190%;
-    border-collapse:collapse;
-    white-space:nowrap;
-    width: 100%;
-}
-
-td.fit {
-    width:1px;
-    padding-left:4px;
-    padding-right:4px;
-}
-
-td.truncate {
-    max-width:50px;
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-    padding-left:10px;
-    padding-right:10px;
-}
-
-td.rightalign {
-    text-align:right;
-    padding-right: 20px;
-}
-
-a {
-    font-size: 100%;
-    text-decoration: none
-}
-
-img {
-    border-style: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    vertical-align: middle;
-}
-
-.dropshadow {
-    box-shadow: 2px 2px 10px #333333;
-}
-
-.shadow {
-    box-shadow: 0 0 20px 3px #555555;
-}
-
-.coverart {
-    background-color: white;
-    color: #323232;
-    border-radius:2px;
-}
-
-.coverart .caption1 {
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap;
-    padding:6px 8px 4px 8px;
-    line-height: 100%;
-    font-weight: 300;
-}
-
-.coverart .caption1 a:link, .coverart .caption1 a:visited  {
-    color: #323232;
-}
-
-.coverart .caption2 {
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap;
-    padding:0px 8px 5px 8px;
-    font-size: 90%;
-    color: #aaaaaa;
-    line-height: 100%;
-    font-weight: 300;
-}
-
-.coverart .caption3 {
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap;
-    padding:0px 8px 5px 8px;
-    font-size: 90%;
-    color: #aaaaaa;
-    line-height: 100%;
-    font-weight: 300;
-}
-
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: rgba(128, 128, 128, 0.5);
-    border-radius: 6px;
-}
-
-.header, .headerSelected {
-    padding-left: 0.25em;
-    padding-right: 0.25em;
-    vertical-align: middle;
-}
-
-.similar-artist-divider {
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-}
-
-.detail {
-    white-space: nowrap;
-    font-size: 90%;
-    line-height: 1.25em;
-}
-
-.songTitle {
-    font-style: italic;
-}
-
-.topHeader, .topHeader a {
-    font-size: 102%;
-    padding: 0.15em 0 0 0;
-    margin: 0;
-    border: 0;
-    white-space: nowrap;
-}
-
-.back, .forward {
-    background-position:center left;
-    background-repeat:no-repeat;
-    padding-left: 12px;
-    line-height: 16px;
-}
-
-.back {
-    background-image:url("../icons/default_light/back.png");
-}
-
-.forward {
-    background-image:url("../icons/default_light/forward.png");
-}
-
-.albumComment {
-    width: 50em;
-    font-size: 90%;
-    line-height: 1.4em;
-    padding-top: 0.25em;
-}
-
-.albumThumb {
-    display:inline-block;
-    vertical-align: top;
-    padding-bottom: 20px;
-    padding-right: 20px;
-}
-
-.albumOverflowButton {
-    display:inline-block;
-    cursor:pointer;
-    vertical-align:bottom;
-    margin-left:15px;
-    margin-bottom:20px
-}
-
-.log {
-    white-space: nowrap;
-    font-size: 90%;
-    line-height: 1em;
-}
-
-.checkbox {
-    border: 0
-}
-
-/* Table with simple lines between the cells. */
-.ruleTable {
-    border-collapse: collapse;
-}
-
-.ruleTableHeader, .ruleTableCell {
-    margin: 5px;
-    padding: 5px;
-}
-
-.ruleTableHeader {
-    font-weight: bold;
-}
-
-.context-menu-item {
-    color: black;
-}
diff --git a/airsonic-main/src/main/webapp/style/hiconi.css b/airsonic-main/src/main/webapp/style/hiconi.css
index ede926c1..cac7b769 100644
--- a/airsonic-main/src/main/webapp/style/hiconi.css
+++ b/airsonic-main/src/main/webapp/style/hiconi.css
@@ -4,7 +4,7 @@
  * Author: Jeebs (Fisher Evans)
  */
 
-@import "default.css";
+@import "default-without-mediaelement-light.css";
 
 table {
 	color: #a3a3a3;
diff --git a/airsonic-main/src/main/webapp/style/midnight.css b/airsonic-main/src/main/webapp/style/midnight.css
index b7c777aa..5da081da 100644
--- a/airsonic-main/src/main/webapp/style/midnight.css
+++ b/airsonic-main/src/main/webapp/style/midnight.css
@@ -4,7 +4,7 @@
  * Author: Sindre Mehus
  */
 
-@import "default.css";
+@import "default-without-mediaelement-light.css";
 
 /* The primary background color. */
 .bgcolor1, table.music tr:nth-of-type(even) {
diff --git a/airsonic-main/src/main/webapp/style/monochrome_black.css b/airsonic-main/src/main/webapp/style/monochrome_black.css
index 1de574c9..7bc670f7 100644
--- a/airsonic-main/src/main/webapp/style/monochrome_black.css
+++ b/airsonic-main/src/main/webapp/style/monochrome_black.css
@@ -4,7 +4,7 @@
  * Author: David D ddavis1@gmail.com
  */
 
-@import "default.css";
+@import "default-without-mediaelement-light.css";
 
 /* The primary background colour. */
 .bgcolor1, table.music tr:nth-of-type(even) {
diff --git a/libresonic-main/src/main/webapp/style/default-without-mediaelement-light.css b/libresonic-main/src/main/webapp/style/default-without-mediaelement-light.css
new file mode 100644
index 00000000..dc87fbf6
--- /dev/null
+++ b/libresonic-main/src/main/webapp/style/default-without-mediaelement-light.css
@@ -0,0 +1,429 @@
+/* The primary background color (light gray). */
+.bgcolor1, table.music tr:nth-of-type(even) {
+    background-color: #F9F9F9;
+}
+
+/* The secondary background color (darker gray). */
+.bgcolor2, .ruleTableHeader, .log, table.music tr:nth-of-type(odd) {
+    background-color: #F1F1F1
+}
+
+.headerSelected {
+    border-bottom: 3px solid darkorange;
+}
+
+/* Put stuff here if you need to customize any of the frames. */
+.mainframe {
+    padding-left:1em
+}
+.topframe {
+}
+.leftframe {
+}
+.rightframe {
+}
+.playlistframe {
+}
+
+.topframe::-webkit-scrollbar:vertical {
+    display:none
+}
+.leftframe::-webkit-scrollbar:horizontal {
+    display:none
+}
+
+/* Background color for form controls (use default). */
+input, select {
+}
+
+/* The primary foreground color (black). */
+body {
+    color: black;
+}
+
+/* The secondary foreground color used for h1, h2, details etc (gray). */
+h1, h2, .detail, .albumComment {
+    color: #696969;
+}
+
+/* Foreground color used for bold and tr. */
+b, tr {
+    color: #333333;
+}
+
+/* Link color */
+a:link, a:active, a:visited, a:link *, a:active *, a:visited * {
+    color: #006699
+}
+
+/* Link hover color */
+a:hover, a:hover * {
+    text-decoration: underline;
+    color: #DD6900
+}
+
+/* Color for warning messages. */
+.warning {
+    color: red;
+}
+
+/* Simple dark border. */
+.border1, .ruleTableHeader, .ruleTableCell, .log {
+    border: 1px solid black;
+}
+
+/* Scrollbar colors (supported on IE and Opera) */
+body {
+    scrollbar-face-color: #DEE3E7;
+    scrollbar-highlight-color: #FFFFFF;
+    scrollbar-shadow-color: #DEE3E7;
+    scrollbar-3dlight-color: #D1D7DC;
+    scrollbar-arrow-color: #006699;
+    scrollbar-track-color: #EFEFEF;
+    scrollbar-darkshadow-color: #98AAB1;
+}
+
+body, form, label, table, a {
+    font-family: 'Roboto', arial, sans-serif;
+}
+
+h1, h1 a {
+    font-family: 'Ubuntu', arial, sans-serif;
+    font-weight: normal;
+}
+
+h2, h2 a, .topHeader a {
+    font-family: 'Roboto', arial, sans-serif;
+    font-weight: normal;
+}
+
+/* Login page */
+
+#loginframe {
+    padding: 20px 50px;
+    margin: 100px 50px;
+    display: list-item;
+    list-style: none;
+    text-align: center;
+}
+
+#loginframe > * {
+    margin: 0 auto;
+    display: block;
+}
+
+#loginframe .loginmessagetop {
+    margin-bottom: 1em;
+    max-width: 30rem;
+}
+
+#loginframe input[type=text],
+#loginframe input[type=submit],
+#loginframe input[type=password] {
+    width: 20rem;
+    margin-bottom: 0.5em;
+}
+
+#loginframe input[type=submit] {
+    margin: 1rem auto;
+    padding: 0.3rem;
+    background: #2f7bd9;
+    color: #f2f2f2;
+    transition: color 0.2s ease, background 0.2s ease;
+}
+
+#loginframe input[type=submit]:hover {
+    background: #f2f2f2;
+    color: #2d2d2d;
+}
+
+#loginremember {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 10px;
+}
+
+#loginframe .loginmessagebottom {
+    margin-top: 1em;
+    max-width: 50em;
+}
+
+/***************************************************************************************
+ * The rest of the CSS is typically not changed in other themes (but not necessarily so).
+ ***************************************************************************************/
+
+body {
+    padding:0;
+    border:0;
+    margin:0.75em;
+    font-size: 10.5pt;
+    line-height: 1.5em;
+}
+
+p {
+    padding:0;
+    border:0;
+    margin:0 0 1em 0;
+}
+
+.dense {
+    white-space: nowrap;
+    margin: 0;
+    line-height: 1.5em
+}
+
+h1 {
+    white-space: nowrap;
+    font-size: 150%;
+    padding: 0;
+    border: 0;
+    margin: 0;
+}
+
+h2 {
+    white-space: nowrap;
+    font-size: 108%;
+    margin: 0.8em 0 0.2em 0;
+}
+
+form {
+    font-size: 100%;
+    line-height: 140%;
+    padding: 0;
+    border: 0;
+    margin: 0;
+}
+
+input, textarea, select {
+    font-size: 90%;
+    padding: 3px;
+    border-radius: 3px;
+    border: 1px solid lightgray;
+}
+
+input[type=submit], input[type=button] {
+    background: white;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+input[type=submit]:active, input[type=button]:active {
+    background: #e9e9e9;
+}
+
+input:hover, textarea:hover, select:hover {
+    border: 1px solid darkgray;
+}
+
+label {
+    font-size: 100%;
+    line-height: 140%;
+}
+
+table {
+    font-size: 100%;
+    line-height: 140%;
+    padding: 0;
+    border: 0;
+    margin: 0 0 0.4em 0;
+}
+
+
+/* Table with some white space above it.*/
+table.indent {
+    margin: 1em 0 0.4em 0;
+}
+
+table.music {
+    line-height: 190%;
+    border-collapse:collapse;
+    white-space:nowrap;
+    width: 100%;
+}
+
+td.fit {
+    width:1px;
+    padding-left:4px;
+    padding-right:4px;
+}
+
+td.truncate {
+    max-width:50px;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    padding-left:10px;
+    padding-right:10px;
+}
+
+td.rightalign {
+    text-align:right;
+    padding-right: 20px;
+}
+
+a {
+    font-size: 100%;
+    text-decoration: none
+}
+
+img {
+    border-style: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+}
+
+.dropshadow {
+    box-shadow: 2px 2px 10px #333333;
+}
+
+.shadow {
+    box-shadow: 0 0 20px 3px #555555;
+}
+
+.coverart {
+    background-color: white;
+    color: #323232;
+    border-radius:2px;
+}
+
+.coverart .caption1 {
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    padding:6px 8px 4px 8px;
+    line-height: 100%;
+    font-weight: 300;
+}
+
+.coverart .caption1 a:link, .coverart .caption1 a:visited  {
+    color: #323232;
+}
+
+.coverart .caption2 {
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    padding:0px 8px 5px 8px;
+    font-size: 90%;
+    color: #aaaaaa;
+    line-height: 100%;
+    font-weight: 300;
+}
+
+.coverart .caption3 {
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    padding:0px 8px 5px 8px;
+    font-size: 90%;
+    color: #aaaaaa;
+    line-height: 100%;
+    font-weight: 300;
+}
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(128, 128, 128, 0.5);
+    border-radius: 6px;
+}
+
+.header, .headerSelected {
+    padding-left: 0.25em;
+    padding-right: 0.25em;
+    vertical-align: middle;
+}
+
+.similar-artist-divider {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+
+.detail {
+    white-space: nowrap;
+    font-size: 90%;
+    line-height: 1.25em;
+}
+
+.songTitle {
+    font-style: italic;
+}
+
+.topHeader, .topHeader a {
+    font-size: 102%;
+    padding: 0.15em 0 0 0;
+    margin: 0;
+    border: 0;
+    white-space: nowrap;
+}
+
+.back, .forward {
+    background-position:center left;
+    background-repeat:no-repeat;
+    padding-left: 12px;
+    line-height: 16px;
+}
+
+.back {
+    background-image:url("../icons/default_light/back.png");
+}
+
+.forward {
+    background-image:url("../icons/default_light/forward.png");
+}
+
+.albumComment {
+    width: 50em;
+    font-size: 90%;
+    line-height: 1.4em;
+    padding-top: 0.25em;
+}
+
+.albumThumb {
+    display:inline-block;
+    vertical-align: top;
+    padding-bottom: 20px;
+    padding-right: 20px;
+}
+
+.albumOverflowButton {
+    display:inline-block;
+    cursor:pointer;
+    vertical-align:bottom;
+    margin-left:15px;
+    margin-bottom:20px
+}
+
+.log {
+    white-space: nowrap;
+    font-size: 90%;
+    line-height: 1em;
+}
+
+.checkbox {
+    border: 0
+}
+
+/* Table with simple lines between the cells. */
+.ruleTable {
+    border-collapse: collapse;
+}
+
+.ruleTableHeader, .ruleTableCell {
+    margin: 5px;
+    padding: 5px;
+}
+
+.ruleTableHeader {
+    font-weight: bold;
+}
+
+.context-menu-item {
+    color: black;
+}
+
diff --git a/libresonic-main/src/main/webapp/style/mediaelement-light.css b/libresonic-main/src/main/webapp/style/mediaelement-light.css
new file mode 100644
index 00000000..b8d8abf1
--- /dev/null
+++ b/libresonic-main/src/main/webapp/style/mediaelement-light.css
@@ -0,0 +1,93 @@
+
+.mejs__overlay-loading-bg-img {
+    background-image: url("mejs-controls-dark.svg");
+}
+
+.mejs__button > button {
+    background-image: url("mejs-controls-dark.svg");
+}
+
+.mejs__overlay-button {
+    background-image: url("mejs-controls-dark.svg");
+}
+
+.mejs__container {
+    background: #F1F1F1;
+}
+
+.mejs__container .me_cannotplay a {
+    color: #F1F1F1;
+}
+
+.mejs__controls:not([style*="display: none"]) {
+    background: #F1F1F1;
+}
+
+.mejs__time {
+    color: black;
+}
+
+.mejs__time-total {
+    background: rgba(190, 190, 190, 0.7);
+}
+
+.mejs__time-buffering {
+    background: linear-gradient(-45deg, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent 50%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.85) 75%, transparent 75%, transparent);
+}
+
+.mejs__time-loaded {
+    background: rgba(0, 0, 0, .7);
+}
+
+.mejs__time-current, .mejs__time-handle-content {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.mejs__time-hovered {
+    background: rgba(0, 0, 0, .4);
+}
+
+.mejs__time-hovered.negative {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.mejs__volume-button > .mejs__volume-slider {
+    background: rgba(50, 50, 50, 0.3);
+}
+
+.mejs__volume-current {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.mejs__volume-handle {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.mejs__horizontal-volume-total {
+    background: rgba(50, 50, 50, 0.2);
+}
+
+.mejs__horizontal-volume-current {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector {
+    background: rgba(50, 50, 50, 0.3);
+}
+
+.mejs__captions-selector-list-item, .mejs__chapters-selector-list-item {
+    color: #000;
+}
+
+.mejs__captions-selector-list-item:hover, .mejs__chapters-selector-list-item:hover {
+    background-color: rgb(100, 100, 100) !important;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+}
+
+.mejs__captions-layer {
+    color: #000;
+}
+
+.mejs__captions-layer a {
+    color: #000;
+}
diff --git a/libresonic-main/src/main/webapp/style/mejs-controls-dark.svg b/libresonic-main/src/main/webapp/style/mejs-controls-dark.svg
new file mode 100644
index 00000000..681229f9
--- /dev/null
+++ b/libresonic-main/src/main/webapp/style/mejs-controls-dark.svg
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="400px" height="120px" viewBox="0 0 400 120" style="enable-background:new 0 0 400 120;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000000;width:16px;height:16px}
+	.st1{fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;}
+	.st2{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;}
+	.st3{fill:none;stroke:#000000;}
+	.st4{fill:#231F20;}
+	.st5{opacity:0.75;fill:none;stroke:#000000;stroke-width:5;enable-background:new;}
+	.st6{fill:none;stroke:#000000;stroke-width:5;}
+	.st7{opacity:0.4;fill:#000000;enable-background:new;}
+	.st8{opacity:0.6;fill:#000000;enable-background:new;}
+	.st9{opacity:0.8;fill:#000000;enable-background:new;}
+	.st10{opacity:0.9;fill:#000000;enable-background:new;}
+	.st11{opacity:0.3;fill:#000000;enable-background:new;}
+	.st12{opacity:0.5;fill:#000000;enable-background:new;}
+	.st13{opacity:0.7;fill:#000000;enable-background:new;}
+</style>
+<g id="controls">
+	<g id="play">
+		<path class="st0" d="M16.5,8.5c0.3,0.1,0.4,0.5,0.2,0.8c-0.1,0.1-0.1,0.2-0.2,0.2l-11.4,7c-0.5,0.3-0.8,0.1-0.8-0.5V2
+			c0-0.5,0.4-0.8,0.8-0.5L16.5,8.5z"/>
+	</g>
+	<g id="pause">
+		<g>
+			<path class="st0" d="M24,1h2.2c0.6,0,1,0.4,1,1v14c0,0.6-0.4,1-1,1H24c-0.6,0-1-0.4-1-1V2C23,1.5,23.4,1,24,1z"/>
+			<path class="st0" d="M33.8,1H36c0.6,0,1,0.4,1,1v14c0,0.6-0.4,1-1,1h-2.2c-0.6,0-1-0.4-1-1V2C32.8,1.5,33.2,1,33.8,1z"/>
+		</g>
+	</g>
+	<g id="fullscreen">
+		<g id="enter">
+			<path class="st0" d="M81,1.4c0-0.6,0.4-1,1-1h5.4c0.6,0,0.7,0.3,0.3,0.7l-6,6C81.3,7.5,81,7.4,81,6.8V1.4z"/>
+			<path class="st0" d="M81,17.2c0,0.6,0.4,1,1,1h5.4c0.6,0,0.7-0.3,0.3-0.7l-6-6c-0.4-0.4-0.7-0.3-0.7,0.3L81,17.2z"/>
+			<path class="st0" d="M98.8,1.4c0-0.6-0.4-1-1-1h-5.4c-0.6,0-0.7,0.3-0.3,0.7l6,6c0.4,0.4,0.7,0.3,0.7-0.3
+				C98.8,6.8,98.8,1.4,98.8,1.4z"/>
+			<path class="st0" d="M98.8,17.2c0,0.6-0.4,1-1,1h-5.4c-0.6,0-0.7-0.3-0.3-0.7l6-6c0.4-0.4,0.7-0.3,0.7,0.3
+				C98.8,11.8,98.8,17.2,98.8,17.2z"/>
+		</g>
+		<g id="exit">
+			<g>
+				<path class="st0" d="M112.7,5c0,0.6,0.4,1,1,1h4.1c0.6,0,0.7-0.3,0.3-0.7l-4.7-4.7c-0.4-0.4-0.7-0.3-0.7,0.3
+					C112.7,0.9,112.7,5,112.7,5z"/>
+				<path class="st0" d="M105.6,6c0.6,0,1-0.4,1-1V0.9c0-0.6-0.3-0.7-0.7-0.3l-4.7,4.7c-0.4,0.4-0.3,0.7,0.3,0.7L105.6,6z"/>
+				<path class="st0" d="M106.6,13.1c0-0.6-0.4-1-1-1h-4.1c-0.6,0-0.7,0.3-0.3,0.7l4.7,4.7c0.4,0.4,0.7,0.3,0.7-0.3
+					C106.6,17.2,106.6,13.1,106.6,13.1z"/>
+				<path class="st0" d="M113.7,12.1c-0.6,0-1,0.4-1,1v4.1c0,0.5,0.3,0.7,0.7,0.3l4.7-4.7c0.4-0.4,0.3-0.7-0.3-0.7H113.7z"/>
+			</g>
+		</g>
+	</g>
+	<g id="volume">
+		<g id="unmuted">
+			<path class="st0" d="M67,5.8c-0.5,0.4-1.2,0.6-1.8,0.6H62c-0.6,0-1,0.4-1,1v5.7c0,0.6,0.4,1,1,1h3.2c0.3,0,0.7,0,1,0
+				c0.3,0.2,0.5,0.4,0.8,0.6l3.5,2.6c0.4,0.3,0.8,0.1,0.8-0.4V3.5c0-0.5-0.4-0.7-0.8-0.4L67,5.8z"/>
+			<path class="st1" d="M73.9,2.5c0,0,3.9-0.8,3.9,7.7S73.9,18,73.9,18"/>
+			<path class="st1" d="M72.6,6.4c0,0,2.6-0.4,2.6,3.8s-2.6,3.9-2.6,3.9"/>
+		</g>
+		<g id="muted">
+			<path class="st0" d="M47,5.8c-0.5,0.4-1.2,0.6-1.8,0.6H42c-0.6,0-1,0.4-1,1v5.7c0,0.6,0.4,1,1,1h3.2c0.3,0,0.7,0,1,0
+				c0.3,0.2,0.5,0.4,0.8,0.6l3.5,2.6c0.4,0.3,0.8,0.1,0.8-0.4V3.5c0-0.5-0.4-0.7-0.8-0.4L47,5.8z"/>
+			<line class="st2" x1="52.8" y1="7" x2="58.2" y2="12.4"/>
+			<line class="st2" x1="52.8" y1="12.4" x2="58.2" y2="7"/>
+		</g>
+	</g>
+	<g id="closed_captions">
+		<path class="st3" d="M128.7,8.6c-6.2-4.2-6.5,7.8,0,3.9"/>
+		<path class="st3" d="M135.2,8.6c-6.2-4.2-6.5,7.8,0,3.9"/>
+		<path class="st0" d="M122.2,3.4h15.7v13.1h-15.7V3.4z M120.8,2v15.7h18.3V2H120.8z"/>
+	</g>
+	<g>
+		<path class="st0" d="M143.2,3h14c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2V5C141.2,3.9,142.1,3,143.2,3z"/>
+		<path class="st4" d="M146.4,13.8c-0.8,0-1.6-0.4-2.1-1c-1.1-1.4-1-3.4,0.1-4.8c0.5-0.6,2-1.7,4.6,0.2L148.4,9
+			c-1.4-1-2.6-1.1-3.3-0.3c-0.8,1-0.8,2.4-0.1,3.5c0.7,0.9,1.9,0.8,3.4-0.1l0.5,0.9C148.2,13.5,147.3,13.7,146.4,13.8z"/>
+		<path class="st4" d="M153.9,13.8c-0.8,0-1.6-0.4-2.1-1c-1.1-1.4-1-3.4,0.1-4.8c0.5-0.6,2-1.7,4.6,0.2L156,9
+			c-1.4-1-2.6-1.1-3.3-0.3c-0.8,1-0.8,2.4-0.1,3.5c0.7,0.9,1.9,0.8,3.4-0.1l0.5,0.9C155.7,13.5,154.8,13.7,153.9,13.8z"/>
+	</g>
+</g>
+<g id="big_play">
+	<g id="big_play_opaque">
+		<path class="st0" d="M60.3,77c0.6,0.2,0.8,0.8,0.6,1.4c-0.1,0.3-0.3,0.5-0.6,0.6L30,96.5c-1,0.6-1.7,0.1-1.7-1v-35
+			c0-1.1,0.8-1.5,1.7-1L60.3,77z"/>
+		<path class="st5" d="M2.5,79c0-20.7,16.8-37.5,37.5-37.5S77.5,58.3,77.5,79S60.7,116.5,40,116.5S2.5,99.7,2.5,79L2.5,79z"/>
+	</g>
+	<g id="big_play_hover">
+		<path class="st0" d="M140.3,77c0.6,0.2,0.8,0.8,0.6,1.4c-0.1,0.3-0.3,0.5-0.6,0.6L110,96.5c-1,0.6-1.7,0.1-1.7-1v-35
+			c0-1.1,0.8-1.5,1.7-1L140.3,77z"/>
+		<path class="st6" d="M82.5,79c0-20.7,16.8-37.5,37.5-37.5s37.5,16.8,37.5,37.5s-16.8,37.5-37.5,37.5S82.5,99.7,82.5,79z"/>
+	</g>
+	<g id="loading">
+		<circle class="st0" cx="201.9" cy="47.1" r="8.1"/>
+		<circle class="st7" cx="233.9" cy="79" r="5"/>
+		<circle class="st8" cx="201.9" cy="110.9" r="6"/>
+		<circle class="st9" cx="170.1" cy="79" r="7"/>
+		<circle class="st10" cx="178.2" cy="56.3" r="7.5"/>
+		<circle class="st11" cx="226.3" cy="56.1" r="4.5"/>
+		<circle class="st12" cx="225.8" cy="102.8" r="5.5"/>
+		<circle class="st13" cx="178.2" cy="102.8" r="6.5"/>
+	</g>
+</g>
+<g id="replay">
+	<path class="st0" d="M178,9.4c0,0.4-0.4,0.7-0.9,0.7c-0.1,0-0.2,0-0.2-0.1l-4.9-1.8c-0.5-0.2-0.6-0.6-0.1-0.8l6.2-3.6
+		c0.5-0.3,0.8-0.1,0.7,0.5L178,9.4z"/>
+	<path class="st0" d="M169.4,15.9c-1,0-2-0.2-2.9-0.7c-2-1-3.2-3-3.2-5.2c0.1-3.4,2.9-6,6.3-6c2.5,0.1,4.8,1.7,5.6,4.1l0.1-0.1
+		l2.1,1.1c-0.6-4.4-4.7-7.5-9.1-6.9c-3.9,0.6-6.9,3.9-7,7.9c0,2.9,1.7,5.6,4.3,7c1.2,0.6,2.5,0.9,3.8,1c2.6,0,5-1.2,6.6-3.3
+		l-1.8-0.9C173,15.1,171.2,15.9,169.4,15.9z"/>
+</g>
+<g id="chapters">
+	<path class="st0" d="M183.4,3.2L183.4,3.2c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5l0,0c-0.8,0-1.5-0.7-1.5-1.5l0,0
+		C181.9,3.8,182.6,3.2,183.4,3.2z"/>
+	<path class="st0" d="M188.5,3.2h8.5c0.9,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-8.5c-0.9,0-1.5-0.7-1.5-1.5l0,0
+		C186.9,3.8,187.6,3.2,188.5,3.2z"/>
+	<path class="st0" d="M183.4,8.2L183.4,8.2c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5l0,0c-0.8,0-1.5-0.7-1.5-1.5l0,0
+		C181.9,8.8,182.6,8.2,183.4,8.2z"/>
+	<path class="st0" d="M188.5,8.2h8.5c0.9,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-8.5c-0.9,0-1.5-0.7-1.5-1.5l0,0
+		C186.9,8.8,187.6,8.2,188.5,8.2z"/>
+	<path class="st0" d="M183.4,13.2L183.4,13.2c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5l0,0c-0.8,0-1.5-0.7-1.5-1.5l0,0
+		C181.9,13.8,182.6,13.2,183.4,13.2z"/>
+	<path class="st0" d="M188.5,13.2h8.5c0.9,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-8.5c-0.9,0-1.5-0.7-1.5-1.5l0,0
+		C186.9,13.8,187.6,13.2,188.5,13.2z"/>
+</g>
+</svg>