| |
- v1.06
2020.07.?? |
+ v1.06
2020.07.22 |
|
@@ -171,6 +171,7 @@ function about() {
- added default login option
- added possibility to login using URL (login.php)
- added support for PWA (Progressive Web App)
+ - added new skin (darker)
- improved TIDAL support (python API replaced with PHP API - works much faster)
- improved Favorites - mixed lists (streams and local files) are allowed
- improved Favorites - tracks from Tidal and YouTube now can be added to Favorites
diff --git a/include/config.inc.php b/include/config.inc.php
index 6f26c13..bc29247 100644
--- a/include/config.inc.php
+++ b/include/config.inc.php
@@ -46,10 +46,10 @@
// | Use a UNIX style directory scheme with a trailing slash. |
// | |
// | Windows: 'D:/Media/'; |
-// | Linux/Unix/OSX: '/var/mpd/music/'; |
+// | Linux/Unix/OSX: '/var/lib/mpd/music/'; |
// +------------------------------------------------------------------------+
-$cfg['media_dir'] = '/share/HDA_DATA/ompd/';
+$cfg['media_dir'] = '/var/lib/mpd/music/';
diff --git a/skin/ompd_darker/about.txt b/skin/ompd_darker/about.txt
new file mode 100644
index 0000000..c89e76d
--- /dev/null
+++ b/skin/ompd_darker/about.txt
@@ -0,0 +1 @@
+O!MPD darker skin by Artur Sierżant.
\ No newline at end of file
diff --git a/skin/ompd_darker/img/large_file_not_found.png b/skin/ompd_darker/img/large_file_not_found.png
new file mode 100644
index 0000000..be6c4c4
Binary files /dev/null and b/skin/ompd_darker/img/large_file_not_found.png differ
diff --git a/skin/ompd_darker/img/medium_image.png b/skin/ompd_darker/img/medium_image.png
new file mode 100644
index 0000000..91bf5f2
Binary files /dev/null and b/skin/ompd_darker/img/medium_image.png differ
diff --git a/skin/ompd_darker/img/medium_message_error.png b/skin/ompd_darker/img/medium_message_error.png
new file mode 100644
index 0000000..67d04e1
Binary files /dev/null and b/skin/ompd_darker/img/medium_message_error.png differ
diff --git a/skin/ompd_darker/img/medium_message_ok.png b/skin/ompd_darker/img/medium_message_ok.png
new file mode 100644
index 0000000..2fbe0eb
Binary files /dev/null and b/skin/ompd_darker/img/medium_message_ok.png differ
diff --git a/skin/ompd_darker/img/medium_message_warning.png b/skin/ompd_darker/img/medium_message_warning.png
new file mode 100644
index 0000000..3f9a72a
Binary files /dev/null and b/skin/ompd_darker/img/medium_message_warning.png differ
diff --git a/skin/ompd_darker/img/medium_online.png b/skin/ompd_darker/img/medium_online.png
new file mode 100644
index 0000000..c7d43b1
Binary files /dev/null and b/skin/ompd_darker/img/medium_online.png differ
diff --git a/skin/ompd_darker/img/playing.gif b/skin/ompd_darker/img/playing.gif
new file mode 100644
index 0000000..05213eb
Binary files /dev/null and b/skin/ompd_darker/img/playing.gif differ
diff --git a/skin/ompd_darker/img/small_animated_progress.gif b/skin/ompd_darker/img/small_animated_progress.gif
new file mode 100644
index 0000000..66800c7
Binary files /dev/null and b/skin/ompd_darker/img/small_animated_progress.gif differ
diff --git a/skin/ompd_darker/img/small_check.png b/skin/ompd_darker/img/small_check.png
new file mode 100644
index 0000000..8390e67
Binary files /dev/null and b/skin/ompd_darker/img/small_check.png differ
diff --git a/skin/ompd_darker/img/small_error.png b/skin/ompd_darker/img/small_error.png
new file mode 100644
index 0000000..98c5994
Binary files /dev/null and b/skin/ompd_darker/img/small_error.png differ
diff --git a/skin/ompd_darker/img/small_login.png b/skin/ompd_darker/img/small_login.png
new file mode 100644
index 0000000..6bd7990
Binary files /dev/null and b/skin/ompd_darker/img/small_login.png differ
diff --git a/skin/ompd_darker/img/small_uncheck.png b/skin/ompd_darker/img/small_uncheck.png
new file mode 100644
index 0000000..d9083ab
Binary files /dev/null and b/skin/ompd_darker/img/small_uncheck.png differ
diff --git a/skin/ompd_darker/img/tiny_check.png b/skin/ompd_darker/img/tiny_check.png
new file mode 100644
index 0000000..2ab688b
Binary files /dev/null and b/skin/ompd_darker/img/tiny_check.png differ
diff --git a/skin/ompd_darker/img/tiny_uncheck.png b/skin/ompd_darker/img/tiny_uncheck.png
new file mode 100644
index 0000000..1600538
Binary files /dev/null and b/skin/ompd_darker/img/tiny_uncheck.png differ
diff --git a/skin/ompd_darker/styles.css b/skin/ompd_darker/styles.css
new file mode 100644
index 0000000..11423e7
--- /dev/null
+++ b/skin/ompd_darker/styles.css
@@ -0,0 +1,2338 @@
+/* +------------------------------------------------------------------------+
+ | styles.css |
+ +------------------------------------------------------------------------+ */
+/* +------------------------------------------------------------------------+
+ | styles.css |
+ +------------------------------------------------------------------------+ */
+@viewport {
+ width: device-width;
+ zoom: 100%;
+}
+html {
+ height: 100%;
+}
+body {
+ margin: 0 auto;
+ border: 0;
+ padding: 0;
+ background: #000000;
+ color: #161616;
+ font-family: "Roboto", "sans-serif";
+ width: 100%;
+ height: 100%;
+ max-width: 1280px;
+ letter-spacing: 0px;
+ overflow-y: scroll;
+}
+* {
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+p {
+ margin: 0;
+}
+i:active {
+ color: #b53d00;
+}
+@media all and (max-width: 320px) {
+ html {
+ font-size: 11px;
+ font-weight: 300;
+ }
+}
+@media all and (min-width: 321px) and (max-width: 529px) {
+ html {
+ font-size: 12px;
+ font-weight: 300;
+ }
+}
+@media all and (max-width: 529px) {
+ td.side-margin {
+ width: 0px;
+ }
+ td.menu_top_left {
+ display: none;
+ }
+ .full {
+ height: 11em;
+ overflow: hidden;
+ display: inline-block;
+ margin-bottom: 5px;
+ white-space: nowrap;
+ width: 0;
+ }
+ #pl-track-info {
+ display: none;
+ }
+ #image_container {
+ clear: both;
+ width: 100%;
+ float: none;
+ margin-bottom: 5px;
+ text-align: center;
+ }
+ #image {
+ margin-left: auto;
+ margin-right: auto;
+ min-width: 200px;
+ min-height: 200px;
+ }
+ #playlist {
+ margin: 0 0;
+ }
+ .pl-track-info-right {
+ width: 100%;
+ clear: both;
+ max-width: 380px;
+ margin: 0 auto;
+ }
+ .album-info-area-right {
+ width: 100%;
+ clear: both;
+ padding-left: 5px;
+ min-height: 164px;
+ }
+ .pl-track-info {
+ clear: both;
+ width: 100%;
+ float: none;
+ padding-top: 0px;
+ }
+ .sign-ctrl {
+ font-size: 2em;
+ }
+ .cb-typcn {
+ font-size: 2.5em;
+ top: 2px;
+ }
+ td.small_cover {
+ display: none;
+ }
+ td.play-indicator,
+ .pl-year,
+ .pl-genre,
+ .track-list-artist {
+ display: none;
+ }
+ .track-list-artist-narrow {
+ display: block;
+ }
+ div.playlist_indicator {
+ width: 100%;
+ }
+ #track-progress {
+ width: 80%;
+ }
+ #info_area {
+ margin: 0;
+ position: relative;
+ }
+ div.media_control {
+ padding-bottom: 5px;
+ }
+ #menuSubMiddleMediaGenre,
+ #genreList,
+ #menuSubMiddleMediaQuickSearch {
+ column-count: 3;
+ -moz-column-count: 3;
+ -webkit-column-count: 3;
+ }
+ #searchFormAll {
+ display: table;
+ width: 100%;
+ padding: 3px 2px;
+ background-color: #161616;
+ display: none;
+ z-index: 20;
+ margin: 5px 0 0;
+ }
+ #searchFormAll input {
+ height: 2.5em;
+ }
+ #volumeValueWrapper {
+ width: 70%;
+ }
+ #volumeValue {
+ width: 100%;
+ }
+ #favoriteTableFirstCol {
+ min-width: 8em;
+ }
+}
+@media all and (min-width: 530px) {
+ html {
+ font-size: 14px;
+ font-weight: 300;
+ }
+ td.menu_top_left {
+ display: table-cell;
+ }
+ .full {
+ height: 9.65em;
+ overflow: hidden;
+ display: inline-block;
+ margin-bottom: 5px;
+ white-space: nowrap;
+ width: 0;
+ }
+ /*.tile {
+ width: 7em;
+ height: 7em;
+ display:inline-block;
+ margin: 1px;
+ }
+ */
+ #pl-track-info {
+ display: none;
+ }
+ #image_container {
+ float: left;
+ width: 39%;
+ min-width: 220px;
+ }
+ .pl-track-info-right {
+ width: 59%;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ }
+ .album-info-area-right {
+ overflow: auto;
+ width: 58%;
+ float: right;
+ padding-left: 5px;
+ }
+ .pl-track-info {
+ width: 100%;
+ padding-top: 7px;
+ }
+ .sign-ctrl {
+ font-size: 1.5em;
+ }
+ .cb-typcn {
+ font-size: 2em;
+ top: 0;
+ }
+ td.small_cover {
+ display: none;
+ }
+ td.play-indicator {
+ display: none;
+ }
+ div.playlist_indicator {
+ width: 100%;
+ }
+ .track-list-artist-narrow {
+ display: none;
+ }
+ #track-progress {
+ width: 80%;
+ }
+ #info_area {
+ height: 100%;
+ position: relative;
+ }
+ #additional-info {
+ clear: left;
+ padding: 0px 0;
+ }
+ #menuSubMiddleMediaGenre,
+ #genreList,
+ #menuSubMiddleMediaQuickSearch {
+ column-count: 4;
+ -moz-column-count: 4;
+ -webkit-column-count: 4;
+ }
+ #searchFormAll {
+ height: 2.4em;
+ display: none;
+ position: relative;
+ float: right;
+ right: 4px;
+ top: -2px;
+ width: 17em;
+ z-index: 20;
+ margin: 5px;
+ }
+ #searchFormAll input {
+ height: 2em;
+ }
+ #volumeValue,
+ #volumeValueWrapper {
+ width: 450px;
+ }
+ #favoriteTableFirstCol {
+ min-width: 10em;
+ }
+}
+@media all and (min-width: 530px) and (max-width: 1170px) {
+ div.media_control {
+ width: 100%;
+ position: absolute;
+ bottom: 0px;
+ padding-right: 2px;
+ padding-bottom: 2px;
+ }
+ #track-progress {
+ width: 75%;
+ }
+ td.side-margin {
+ width: 0px;
+ }
+}
+@media all and (min-width: 768px) {
+ td.small_cover {
+ display: table-cell;
+ }
+}
+@media all and (min-width: 1170px) {
+ html {
+ font-size: 17px;
+ font-weight: 300;
+ }
+ #pl-track-info-narrow {
+ display: none;
+ }
+ #info_area {
+ min-height: 500px;
+ }
+ .full {
+ height: 11.5em;
+ overflow: hidden;
+ display: inline-block;
+ margin-bottom: 5px;
+ white-space: nowrap;
+ width: 0;
+ }
+ /*.tile {
+ width: 7em;
+ height: 7em;
+ display: inline-block;
+ margin: 1px;
+ }
+ */
+ #pl-track-info {
+ display: block;
+ }
+ td.small_cover {
+ display: table-cell;
+ }
+ td.side-margin {
+ width: 0px;
+ }
+ td.play-indicator {
+ display: table-cell;
+ }
+ div.media_control {
+ width: 100%;
+ position: absolute;
+ bottom: 0px;
+ padding-bottom: 4px;
+ }
+}
+@media all and (min-width: 1281px) {
+ td.side-margin {
+ width: 0px;
+ }
+}
+#menu {
+ background: #161616;
+ position: relative;
+ display: block;
+ width: 100%;
+ z-index: 10;
+}
+#content {
+ height: 100%;
+ width: 100%;
+ padding-top: 0px;
+}
+#logo1 {
+ color: #3498db;
+ font-weight: normal;
+}
+#logo2 {
+ color: #fdf6e3;
+ font-weight: normal;
+}
+#image_in {
+ width: 100%;
+ position: relative;
+}
+#image_container {
+ float: left;
+ overflow: hidden;
+ position: relative;
+}
+#cover-spinner {
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+}
+#cover-spinner img {
+ position: absolute;
+ margin: auto;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+}
+#parameters {
+ margin: 5px auto;
+ text-align: center;
+ font-size: 0.8em;
+ color: #a5a5a5;
+}
+#info_area {
+ background-color: #171717;
+}
+#album-info-area {
+ overflow: hidden;
+ background-color: #171717;
+}
+#back-ground-wrapper {
+ display: none;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ max-width: 1280px;
+}
+#back-ground-img {
+ width: 100%;
+ height: 100%;
+ opacity: 0.2;
+ z-index: -10;
+}
+#back-ground:before {
+ content: "";
+ position: absolute;
+ display: block;
+ z-index: -100;
+ width: 100%;
+ height: 100%;
+ filter: url('/ompd/playlist.php#blur');
+ filter: blur(25px);
+ -webkit-filter: blur(25px);
+ opacity: 0.2;
+ background-size: cover;
+ background-position: 20% 20%;
+}
+a:link,
+a:visited {
+ color: #fdf6e3;
+ text-decoration: none;
+}
+a:active {
+ opacity: 0.8;
+ color: #b53d00 !important;
+}
+a:hover {
+ color: #fdf6e3;
+ text-decoration: none;
+}
+a.sort_selected {
+ color: #b53d00;
+}
+/* +------------------------------------------------------------------------+
+ | Table |
+ +------------------------------------------------------------------------+ */
+table {
+ border: 0px;
+ font-size: 1em;
+ width: 100%;
+}
+table.fullscreen {
+ width: 100%;
+ color: #a5a5a5;
+}
+.halfscreen {
+ width: 50%;
+}
+table.border {
+ width: 100%;
+}
+tr.line,
+td.line {
+ height: 1px;
+ background-color: #171717;
+ border-bottom: 1px #171717 solid;
+ transform: scaleY(0.5);
+}
+td.fullscreen {
+ width: 100%;
+}
+td.vertical_line {
+ width: 0.769em;
+}
+td.nowrap {
+ white-space: nowrap;
+}
+tr.nowrap td {
+ white-space: nowrap;
+}
+tr.even :nth-child(1),
+tr.even :nth-child(2),
+tr.even :nth-child(3),
+tr.odd :nth-child(1),
+tr.odd :nth-child(2),
+tr.odd :nth-child(3),
+tr.select :nth-child(1),
+tr.select :nth-child(2),
+tr.select :nth-child(3) {
+ padding-left: 0px;
+}
+tr.select td:nth-child(1) {
+ /* background-color: (@active-nav); */
+}
+tr.select #trackNumber,
+tr.select .trackNumber {
+ color: #fdf6e3;
+ background-color: #b53d00;
+}
+tr.even td,
+tr.odd td,
+tr.select td {
+ padding: 2px 2px 2px 5px;
+}
+.tabFixed {
+ table-layout: fixed;
+}
+/* +------------------------------------------------------------------------+
+ | Table menu |
+ +------------------------------------------------------------------------+ */
+table.menu_top {
+ width: 100%;
+ background-color: #161616;
+ height: 3.846em;
+}
+td.menu_top_left {
+ width: 10em;
+ vertical-align: middle;
+ padding-left: 0px;
+}
+td.menu_top {
+ color: #a5a5a5;
+ text-align: center;
+ font-size: 0.9em;
+ border-top: 0.3em solid #161616;
+ width: 9em;
+ vertical-align: middle;
+ cursor: pointer;
+ transition: all 100ms linear;
+ position: relative;
+ text-transform: uppercase;
+ font-weight: normal;
+}
+td.menu_top_config {
+ max-width: 3em !important;
+ width: 3em;
+ text-align: center;
+ font-size: 1.1em;
+}
+td.menu_top_selected {
+ color: #fdf6e3;
+ border-top: 4px solid #b53d00;
+}
+table.menu_middle a:link {
+ color: #fdf6e3;
+ text-decoration: none;
+}
+table.menu_middle a:visited {
+ color: #fdf6e3;
+ text-decoration: none;
+}
+table.menu_middle a:hover {
+ color: #fdf6e3;
+ text-decoration: none;
+}
+table.menu_middle p span {
+ display: inline-block;
+ line-height: 1.1em;
+}
+table.menu_middle {
+ width: 100%;
+ color: #fdf6e3;
+ background-color: #4e6819;
+ height: 2em;
+ text-transform: uppercase;
+ font-size: 0.8em;
+ font-weight: normal;
+}
+td.menu_middle_left {
+ width: 0px;
+ border-bottom: 0px solid #4e6819;
+}
+td.menu_middle {
+ border-bottom: 0px solid #4e6819;
+ line-height: 2.4em;
+ height: 3.2em;
+}
+td.menu_middle_right {
+ width: 0px;
+ border-bottom: 0px solid #4e6819;
+}
+table.menu_bottom {
+ width: 100%;
+}
+td.menu_bottom_left {
+ width: 0.769em;
+}
+td.menu_bottom_right {
+ width: 0.769em;
+}
+#activePlayer,
+#currentVolume {
+ font-size: 0.5em;
+ padding-top: 3px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+ position: absolute;
+ text-transform: uppercase;
+ white-space: nowrap;
+}
+#volumeValue {
+ display: inline-block;
+ position: relative;
+}
+#volumeBar {
+ background: #b53d00;
+}
+#volumeValueWrapper {
+ display: inline-block;
+ position: relative;
+ margin: 0 5px;
+ height: 100%;
+}
+#volumeArea {
+ padding: 5px;
+}
+#playerList,
+#volumeArea {
+ text-align: right;
+ display: none;
+ line-height: 2em;
+ color: #fdf6e3;
+ margin-bottom: 0 !important;
+}
+#selectPlayer > span,
+#playlistAction > span {
+ cursor: pointer;
+ max-width: 10em;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+}
+#selectPlayer {
+ background-color: #161616;
+}
+#playlistAction {
+ background-color: #232323;
+}
+#playlistAction,
+#selectPlayer {
+ text-transform: uppercase;
+ line-height: 3em;
+ padding: 7px;
+}
+#playlistAction > div {
+ margin: 1em 0;
+ line-height: initial;
+}
+#selectSource,
+#selectDest,
+#menuSubMiddleMediaSavePlaylist select,
+#menuSubMiddleMediaSavePlaylist input,
+#menuSubMiddleMediaAddUrl select,
+#menuSubMiddleMediaAddUrl input {
+ max-width: 40%;
+ border-width: 0px;
+ background-color: #fefefe;
+ border-radius: 3px;
+ text-transform: uppercase;
+ font-size: 1em;
+}
+#menuMiddleMedia {
+ position: relative;
+ overflow: visible;
+ display: inline-block;
+ width: 100%;
+ padding: 0.4em 4px;
+}
+#menu_middle_items {
+ padding: 0 4px;
+ display: block;
+}
+#menuMiddleMedia > span {
+ cursor: pointer;
+}
+[id^=menuSubMiddle] {
+ position: relative;
+ display: none;
+ left: 0;
+ width: 100%;
+ color: #fdf6e3;
+ padding: 5px;
+ white-space: normal;
+ z-index: 20;
+ line-height: 2.5em;
+ font-weight: normal;
+}
+#menuSubMiddleMediaAlpha a,
+#menuSubMiddleMediaGenre a,
+#menuSubMiddleMediaQuickSearch a,
+.paginator-nav a {
+ color: #fdf6e3;
+}
+#menuSubMiddleMediaAlpha {
+ color: rgba(253, 246, 227, 0.8);
+}
+#menuSubMiddleMediaAlpha span,
+.paginator-nav span,
+.buttons span,
+[id^=playlistAddTo],
+[id^=playlistSaveAs],
+[id^=playlistAddUrl] {
+ line-height: 1.7em;
+ border-radius: 3px;
+ display: inline-block;
+ min-width: 2.8em;
+ padding: 5px;
+ margin: 0.2em 0.1em;
+ text-align: center;
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: normal;
+ cursor: pointer;
+ color: #fdf6e3;
+}
+.paginator-nav span,
+.buttons span {
+ background-color: #67891e;
+}
+[id^=playlistAddTo],
+[id^=playlistSaveAs],
+[id^=playlistAddUrl] {
+ cursor: pointer;
+ width: 5em;
+ background-color: #777777;
+}
+#menuSubMiddleMediaGenre p {
+ font-weight: normal;
+}
+.savePlaylistCol1 {
+ width: 10em;
+ max-width: 20%;
+ display: inline-block;
+ text-align: right;
+ margin: 0 5px;
+}
+.savePlaylistCol2 {
+ width: 20em;
+ display: inline-block;
+ margin-right: 5px;
+ max-width: 55%;
+}
+.savePlaylistCol3 {
+ width: 5em;
+ display: inline-block;
+ max-width: 55%;
+ margin: 0.2em;
+}
+#menuSubMiddleMediaSavePlaylist input,
+#menuSubMiddleMediaSavePlaylist select,
+#menuSubMiddleMediaAddUrl input,
+#menuSubMiddleMediaAddUrl select {
+ width: 100%;
+ max-width: 100% !important;
+ text-transform: none;
+}
+#menuSubMiddleMediaSavePlaylist,
+#menuSubMiddleMediaAddUrl {
+ line-height: 4em;
+ color: #fdf6e3;
+ font-size: 1.2em;
+ padding: 0;
+}
+#menuSubMiddleMediaSavePlaylist div:nth-child(2),
+#menuSubMiddleMediaSavePlaylist div:nth-child(3),
+#menuSubMiddleMediaSavePlaylist div:nth-child(4) {
+ background-color: #57741c;
+ border-bottom: solid 1px #4e6819;
+}
+.listDivider {
+ background-color: #171717;
+ color: #a5a5a5;
+}
+.paginator-nav span a,
+.buttons span a {
+ color: #fdf6e3;
+ white-space: normal !important;
+}
+.artist_all {
+ border: 1px solid #fdf6e3;
+ display: inline-block;
+ padding: 0 5px !important;
+ /* padding: 1px 2px !important; */
+ margin: 0 0.3em;
+ text-align: center;
+ white-space: nowrap;
+ line-height: 1.2em;
+}
+#fixedMenu {
+ background: inherit;
+ width: 100%;
+ max-width: 1280px;
+ position: fixed;
+ z-index: 30;
+ top: 0;
+}
+#fixedMenuFill {
+ height: 3.846em;
+}
+/* +------------------------------------------------------------------------+
+ | Table playlist |
+ +------------------------------------------------------------------------+ */
+div.playlist_top {
+ width: 100%;
+}
+table.playlist_top_1 {
+ width: 100%;
+ color: gray;
+}
+table.playlist a:link {
+ color: #CFFEFF;
+ text-decoration: none;
+}
+table.playlist a:visited {
+ color: #CFFEFF;
+ text-decoration: none;
+}
+table.playlist a:hover {
+ color: #FF8000;
+ text-decoration: none;
+}
+table.playlist {
+ width: 100%;
+ height: 2.3077em;
+ padding-top: 0.231em;
+ background-color: #161616;
+ color: #161616;
+}
+td.playlist_text {
+ width: 5.3846em;
+}
+td.playlist_display {
+ width: 3.846em;
+ color: #CAD2EC;
+ font-size: 0.923em;
+ text-align: center;
+}
+div.playlist_title {
+ color: #fdf6e3;
+ font-size: 1.077em;
+ text-align: left;
+}
+div.playlist_title_album {
+ font-size: 0.923em;
+ color: #a5a5a5;
+}
+td.playlist_bar_top {
+ width: 15.3846em;
+ height: 0.3846em;
+}
+td.playlist_bar_middle {
+ width: 15.3846em;
+ height: 0.3846em;
+}
+td.playlist_bar_bottom {
+ width: 15.3846em;
+ height: 0.8462em;
+}
+td.playlist_bar_space {
+ width: 0.3846em;
+ height: 1.6154em;
+}
+td.playlist_button {
+ width: 2.3077em;
+ height: 1.6154em;
+}
+td.playlist_button_status {
+ width: 5.7692em;
+ height: 1.6154em;
+}
+td.playlist_space {
+ width: 7.6923em;
+ height: 1.6154em;
+}
+td.playlist_back_space {
+ width: 1px;
+ height: 1.6154em;
+}
+#playlist {
+ background-color: #111111;
+ padding: 0em;
+ padding-top: 1.5em;
+ clear: both;
+ color: #a5a5a5;
+}
+.showPL,
+.hidePL {
+ cursor: pointer;
+}
+.playlist-title {
+ font-size: 1.2308em;
+ padding-bottom: 1.154em;
+ padding-left: 5px;
+ display: inline-block;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ margin-right: 5px;
+ color: #a5a5a5;
+}
+div.playlist_button_border {
+ padding: auto;
+ display: block;
+}
+.control-row {
+ display: table;
+ width: 100%;
+ max-width: 500px;
+ margin: 10px auto 0;
+}
+div.playlist_button {
+ text-align: center;
+ display: table-cell;
+ vertical-align: middle;
+ width: 3em;
+ height: 2.3em;
+ cursor: pointer;
+ background-color: #161616;
+ border: solid 1px #171717;
+ color: #171717;
+}
+div.playlist_button.miniplayer {
+ background-color: #161616;
+ border: solid 1px #161616;
+ color: #161616;
+}
+div.playlist_button_play {
+ width: 6.1538em;
+}
+div.playlist_indicator {
+ padding-top: 0.5em;
+ vertical-align: middle;
+ text-align: center;
+ color: #a5a5a5;
+}
+div.playlist_status_off {
+ text-shadow: -1px 0 #a5a5a5, 0 1px #a5a5a5, 1px 0 #a5a5a5, 0 -1px #a5a5a5;
+}
+div.playlist_status_on {
+ color: #b53d00;
+}
+div.playlist_status_on_border {
+ border: solid 1px #a5a5a5;
+}
+.sign {
+ font-size: 1.8em;
+ color: #777777;
+}
+.pl-track-info-right {
+ overflow: auto;
+}
+.pl-track-info {
+ padding-left: 5px;
+ padding-right: 5px;
+}
+.pl-fld-name {
+ font-size: 0.75em;
+ color: #a5a5a5;
+ margin-top: 1px;
+}
+#title_wait_indicator {
+ font-size: 1em;
+}
+.pl-track-number-title {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.pl-track-title {
+ font-size: 1.3em;
+ color: #a5a5a5;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.pl-track-number {
+ font-size: 0.8em;
+}
+.pl-track-artist {
+ font-size: 1.1em;
+ padding-top: 0.5em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.pl-track-favorites {
+ font-size: 1.4em;
+ padding-top: 0.5em;
+ color: #fdf6e3;
+}
+.pl-favorites {
+ color: #fdf6e3;
+ cursor: pointer;
+ font-size: 1.5em;
+ max-width: 1.9em;
+ width: 1.9em;
+ padding-right: 0 !important;
+}
+.pl-tdr {
+ font-size: 1em;
+ text-align: center;
+ width: 2em;
+ max-width: 2em;
+}
+#favorites,
+#favorites1 {
+ cursor: pointer;
+}
+.pl-file-info {
+ font-size: 1em;
+ padding-top: 0.769em;
+}
+/* +------------------------------------------------------------------------+
+ | Table header & footer |
+ +------------------------------------------------------------------------+ */
+tr.header a:link {
+ color: #a5a5a5;
+}
+tr.header a:visited {
+ color: #a5a5a5;
+}
+tr.header a:hover {
+ color: #a5a5a5;
+ text-decoration: none;
+}
+tr.header td {
+ white-space: nowrap;
+ padding-left: 5px;
+ vertical-align: middle;
+ line-height: 3.5em;
+ text-transform: uppercase;
+ color: #a5a5a5;
+}
+tr.header :nth-child(1),
+tr.header :nth-child(2),
+tr.header :nth-child(3) {
+ padding-left: 0px;
+}
+tr.header {
+ background-color: #171717;
+ color: #161616;
+ font-weight: normal;
+ font-size: 0.9em;
+}
+tr.multidisc_header {
+ background-color: #171717;
+}
+tr.header_bigger {
+ font-size: 1em !important;
+}
+tr.header td.icon span i {
+ font-size: 2em;
+}
+tr.header td.padding3 {
+ padding-left: 3px;
+}
+tr.footer a:link {
+ color: #a5a5a5;
+}
+tr.footer a:visited {
+ color: #a5a5a5;
+}
+tr.footer a:hover {
+ color: #a5a5a5;
+ text-decoration: none;
+}
+tr.footer {
+ line-height: 3.5em;
+ font-size: 1em;
+ background-color: #171717;
+ color: #a5a5a5;
+}
+/* +------------------------------------------------------------------------+
+ | Table tab |
+ +------------------------------------------------------------------------+ */
+table.tab {
+ width: 100%;
+}
+td.tab_on {
+ height: 2.3077em;
+ width: 7.6923em;
+ border-left: 1px solid #b53d00;
+ border-top: 1px solid #b53d00;
+ border-right: 1px solid #b53d00;
+ border-bottom: 0.3077em solid #b53d00;
+ background-color: #b53d00;
+ color: #fdf6e3;
+ text-align: center;
+ cursor: pointer;
+}
+td.tab_off {
+ height: 2.3077em;
+ width: 7.6923em;
+ border-left: 1px solid #2f3439;
+ border-top: 1px solid #2f3439;
+ border-right: 1px solid #2f3439;
+ border-bottom: 0.3077em solid #b53d00;
+ background-color: #2f3439;
+ text-align: center;
+ cursor: pointer;
+ color: #ffffff;
+}
+td.tab_none {
+ border-bottom: 0.3077em solid #b53d00;
+}
+tr.tab_header a:link {
+ color: #a5a5a5;
+}
+tr.tab_header a:visited {
+ color: #a5a5a5;
+}
+tr.tab_header a:hover {
+ color: #a5a5a5;
+ text-decoration: underline;
+}
+tr.tab_header td {
+ white-space: nowrap;
+}
+tr.tab_header {
+ background-color: #171717;
+ color: #a5a5a5;
+ font-weight: normal;
+ font-size: 0.9em;
+ line-height: 3.5em;
+ text-transform: uppercase;
+}
+#header_user_name {
+ width: 15em;
+}
+table.tab_border {
+ border-left: 1px solid #171717;
+ border-right: 1px solid #171717;
+ border-bottom: 1px solid #171717;
+ background-color: #171717;
+ width: 100%;
+}
+/* +------------------------------------------------------------------------+
+ | Table ok, warning & error |
+ +------------------------------------------------------------------------+ */
+table.ok a:link {
+ color: #529600;
+ text-decoration: underline;
+}
+table.ok a:visited {
+ color: #529600;
+ text-decoration: underline;
+}
+table.ok {
+ max-width: 360px;
+ background-color: #EFFFD6;
+ margin-top: 1em;
+ color: black;
+}
+table.ok tr.line {
+ height: 1px;
+ background-color: #529600;
+}
+table.warning a:link {
+ color: #42559C;
+ text-decoration: underline;
+}
+table.warning a:visited {
+ color: #42559C;
+ text-decoration: underline;
+}
+table.warning {
+ max-width: 360px;
+ background-color: #B6D0DC;
+ margin-top: 1em;
+ color: black;
+}
+table.error a:link {
+ color: Red;
+ text-decoration: underline;
+}
+table.error a:visited {
+ color: Red;
+ text-decoration: underline;
+}
+table.error {
+ max-width: 360px;
+ background-color: #FFA4A4;
+ margin-top: 1em;
+ color: black;
+}
+table.error tr.line {
+ height: 1px;
+ background-color: Red;
+}
+/* +------------------------------------------------------------------------+
+ | Table bar |
+ +------------------------------------------------------------------------+ */
+td.bar {
+ vertical-align: middle;
+ padding-left: 5px;
+ width: 115px;
+}
+.stat_bar {
+ padding: 3px 2px 3px 2px;
+}
+td.bar_space {
+ width: 1px;
+ height: 1.6154em;
+}
+/* +------------------------------------------------------------------------+
+ | Table odd, even, select & mouseover |
+ +------------------------------------------------------------------------+ */
+tr.odd {
+ height: 4em;
+ background-color: #111111;
+ -webkit-transition: all 300ms linear;
+ -moz-transition: all 300ms linear;
+ -o-transition: all 300ms linear;
+ transition: all 300ms linear;
+}
+tr.even {
+ height: 4em;
+ background-color: #111111;
+ -webkit-transition: all 300ms linear;
+ -moz-transition: all 300ms linear;
+ -o-transition: all 300ms linear;
+ transition: all 300ms linear;
+}
+tr.artist_list {
+ height: 3em;
+ background-color: #111111;
+}
+tr.artist_list td,
+tr.album_list td {
+ border-bottom: dotted 1px #171717;
+ padding: 7px 0;
+}
+tr.album_list td {
+ padding: 0;
+}
+tr.year {
+ height: 2.5em;
+ background-color: #111111;
+}
+tr.year td {
+ border-bottom: dotted 1px #171717;
+ padding: 7px 5px 7px 0;
+}
+tr.odd_ok {
+ height: 3.0769em;
+ background-color: #E9FFE9;
+ color: #000000;
+ -webkit-transition: all 300ms linear;
+ -moz-transition: all 300ms linear;
+ -o-transition: all 300ms linear;
+ transition: all 300ms linear;
+}
+tr.odd_info,
+tr.even_info,
+tr.odd_error,
+tr.even_error,
+tr.album_list {
+ height: 3em;
+}
+tr.select {
+ height: 4em;
+ background-color: #222222;
+ -webkit-transition: all 300ms linear;
+ -moz-transition: all 300ms linear;
+ -o-transition: all 300ms linear;
+ transition: all 300ms linear;
+}
+/* +------------------------------------------------------------------------+
+ | Table various |
+ +------------------------------------------------------------------------+ */
+tr.list {
+ height: 4.1538em;
+}
+td.update_text {
+ width: 9.5em;
+}
+tr.screen_footer {
+ height: 2.3846em;
+ /* minimum 2x cell padding fullscreen plus text height */
+ text-align: center;
+ font-size: 0.8462em;
+ width: 100%;
+}
+#favoriteTable {
+ width: 100%;
+ padding: 1px;
+}
+/* +------------------------------------------------------------------------+
+ | Table space & align |
+ +------------------------------------------------------------------------+ */
+td.tabspace {
+ width: 1px;
+}
+td.smallspace {
+ width: 0.3846em;
+}
+td.space {
+ width: 5px !important;
+ min-width: 5px;
+}
+.space {
+ width: 1px !important;
+}
+td.textspace {
+ width: 2.3077em;
+}
+td.counter {
+ width: 4em;
+}
+td.matrix {
+ width: 5em;
+ text-align: center;
+}
+td.matrix > div {
+ -webkit-transform: translate(0px, 10px) rotate(315deg);
+ transform: translate(0px, 10px) rotate(315deg);
+ -webkit-transform-origin: 50% 50%;
+ -moz-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ -o-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+ display: inline-block;
+ width: 2.5em;
+}
+td.vert {
+ height: 6em;
+}
+tr.smallspace {
+ /* vertical space */
+ height: 0.3846em;
+}
+tr.space {
+ /* vertical space */
+ height: 0.769em;
+}
+tr.textspace {
+ /* vertical space */
+ height: 1.6154em;
+}
+/* +------------------------------------------------------------------------+
+ | Image |
+ +------------------------------------------------------------------------+ */
+img {
+ border: 0px;
+}
+img.align {
+ vertical-align: middle;
+}
+img.space,
+input.space {
+ vertical-align: middle;
+ margin: 0px 0.3846em 0px 0px;
+ position: relative;
+ top: -1px;
+}
+img.tiny {
+ vertical-align: middle;
+ margin: 0px 0px 0px 0.231em;
+ width: 0.769em;
+ height: 0.769em;
+}
+img.small {
+ width: 1.4615em;
+ height: 1.4615em;
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
+ padding: 0.231em 0.231em 0.231em 0.231em;
+ opacity: 0.8;
+}
+img.small_tab_header {
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
+}
+img.small_high {
+ width: 1.6154em;
+ height: 3.846em;
+}
+img.medium {
+ vertical-align: middle;
+ margin: 0px 0.769em 0px 0px;
+ width: 2em;
+ height: 2em;
+ opacity: 0.8;
+}
+/* +------------------------------------------------------------------------+
+ | Form search |
+ +------------------------------------------------------------------------+ */
+#searchFormAll input,
+#searchFormAllMiddle input {
+ width: 100%;
+ display: table-cell;
+ font: inherit;
+ font-weight: 300;
+ font-size: 16px;
+ background-color: #fefefe;
+ border: none;
+ /* color: (@font-first); */
+ padding: 0 5px;
+ border-radius: 3px 0 0 3px;
+}
+#searchFormAll > div,
+#searchFormAllMiddle > div {
+ display: table;
+ width: 100%;
+ background-color: #67891e;
+ font-weight: normal;
+ border-radius: 3px;
+}
+#searchFormAll > div div,
+#searchFormAllMiddle > div div {
+ display: table-cell;
+ width: 3em;
+ text-align: center;
+ vertical-align: middle;
+ color: #fdf6e3;
+ cursor: pointer;
+}
+#searchFormAllMiddle {
+ display: table;
+ position: absolute;
+ right: 4px;
+ top: 4.05em;
+ width: 12em;
+ z-index: 20;
+}
+/* +------------------------------------------------------------------------+
+ | Form |
+ +------------------------------------------------------------------------+ */
+form,
+input,
+select {
+ margin: 0px;
+}
+input,
+select {
+ font-family: Roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
+ font-size: 16px;
+ border-radius: 3px;
+ border: solid 1px #bbb;
+ line-height: 1.7em;
+ padding: 4px;
+ background-color: #fefefe;
+}
+#updateDir,
+#randomDir {
+ width: 70%;
+}
+#comment {
+ margin-top: 1px;
+}
+#formSettings {
+ text-align: left;
+}
+input.button {
+ cursor: pointer;
+}
+input.readonly,
+select.readonly {
+ background: #B6D0DC;
+}
+input.login {
+ width: 11.5384em;
+}
+input.edit {
+ width: 13.4615em;
+}
+input.url {
+ width: 29.2308em;
+}
+input.autosugest,
+select.autosugest {
+ width: 27em;
+ border-radius: 0.3077em;
+ border: 1px solid #aaaaaa;
+}
+input.autosugest_readonly {
+ width: 29.2308em;
+ color: Silver;
+ height: 1.923em;
+ border-radius: 0.3077em;
+ border: 1px solid #aaaaaa;
+}
+input.search {
+ height: 2em;
+ border-radius: 0.3077em;
+ border: 1px solid #aaaaaa;
+}
+/* +------------------------------------------------------------------------+
+ | overLIB |
+ +------------------------------------------------------------------------+ */
+div.overlib {
+ position: absolute;
+ visibility: hidden;
+ z-index: 1000;
+}
+.ol_foreground {
+ background-color: #a5a5a5;
+}
+.ol_background {
+ background-color: #161616;
+}
+.ol_caption {
+ font-family: Roboto, Verdana, Arial, Helvetica, sans-serif;
+ font-size: 0.769em;
+ font-weight: bold;
+ color: #a5a5a5;
+}
+.ol_text {
+ font-family: Roboto, Verdana, Arial, Helvetica, sans-serif;
+ font-size: 0.769em;
+ color: #161616;
+}
+div.ol_line {
+ border-top: 1px solid #161616;
+ margin-top: 0.3846em;
+ margin-bottom: 0.3077em;
+}
+/* +------------------------------------------------------------------------+
+ | List |
+ +------------------------------------------------------------------------+ */
+ul {
+ margin-top: 0.1538em;
+ margin-bottom: 0px;
+}
+/* +------------------------------------------------------------------------+
+ | Font |
+ +------------------------------------------------------------------------+ */
+span.nav_home {
+ font-size: 1.3846em;
+ font-family: tahoma, "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
+}
+span.nav_tree {
+ font-size: 0.9em;
+ letter-spacing: 1px;
+ width: 100%;
+ padding: 4px 0;
+ display: inline-block;
+ line-height: 3em;
+ text-transform: uppercase;
+ padding-left: 2px;
+ text-align: left;
+ color: #a5a5a5;
+}
+span.nav_genre {
+ font-size: 0.923em;
+ color: #666666;
+ width: 100%;
+}
+span.nav_seperation {
+ font-size: 0.923em;
+ font-weight: bold;
+ color: #b53d00;
+}
+span.seperation {
+ font-size: 0.923em;
+ color: #cccccc;
+}
+span.login_message {
+ font-size: 0.769em;
+}
+/* +------------------------------------------------------------------------+
+ | Added by ArtS |
+ +------------------------------------------------------------------------+ */
+div.content {
+ position: relative;
+}
+.wrapper {
+ min-height: 100%;
+ margin-bottom: -4.2em;
+ /* margin-bottom: -3.2em; */
+ padding-bottom: 4px;
+}
+.wrapper:after {
+ content: "";
+ display: block;
+ width: 100%;
+ height: 6.4em;
+}
+.wrapper.miniplayer:after {
+ height: 10.4em;
+}
+.bottom {
+ height: 3.2em;
+ width: 100%;
+}
+.bottom.miniplayer {
+ position: relative;
+ bottom: 4em;
+}
+div.screen_footer {
+ font-size: 0.769em;
+ border-top: 0.3em solid #161616;
+ padding-top: 1.4em;
+ text-align: center;
+ background-color: #161616;
+ color: #a5a5a5;
+ width: 100%;
+ height: 100%;
+}
+div.mpd_title {
+ position: relative;
+ left: 0.769em;
+ font-size: 1.538em;
+}
+div.area {
+ color: #222222;
+ background-color: #161616;
+}
+div.out {
+ width: 200px;
+ height: 6px;
+ min-height: 4px;
+ background-color: #333333;
+ vertical-align: middle;
+ display: inline-block;
+ overflow: hidden;
+}
+div.out-popular,
+div.out-statistics {
+ width: 100px;
+ height: 6px;
+ min-height: 4px;
+ background-color: #333333;
+ vertical-align: middle;
+ display: inline-block;
+}
+div.in {
+ width: 0px;
+ height: 100%;
+ -webkit-transition: width 1s;
+ transition: width 1s;
+ background: -webkit-linear-gradient(left, #b53d00, #b53d00);
+ background: -moz-linear-gradient(left, #b53d00, #b53d00);
+ background: -o-linear-gradient(left, #b53d00, #b53d00);
+ background: -ms-linear-gradient(left, #b53d00, #b53d00);
+ background-color: #b53d00;
+}
+div.in-static {
+ width: 0px;
+ height: 100%;
+ background-color: #b53d00;
+}
+#bar-indicator {
+ position: absolute;
+ background-color: #b53d00;
+ border: 0px solid #b53d00;
+ border-radius: 50%;
+ width: 9px;
+ height: 9px;
+ display: none;
+}
+#bar-indicator-in {
+ position: absolute;
+ background-color: blue;
+ border: 1px solid blue;
+ border-radius: 50%;
+ width: 2px;
+ height: 2px;
+ top: 5px;
+ left: 5px;
+}
+.albums_container {
+ width: 100%;
+ margin: 5px auto;
+ line-height: 1px;
+}
+.full {
+ line-height: 1px;
+}
+div.tile {
+ overflow: hidden;
+ position: relative;
+ transition: all 100ms linear;
+}
+.tile {
+ width: 110px;
+ height: 110px;
+ display: inline-block;
+ margin: 0 0 1px 1px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.tile_info {
+ padding: 0.4em;
+ font-size: 0.8em;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ background-color: #222222;
+ opacity: 0.85;
+ filter: alpha(opacity=85);
+}
+.tile_title,
+.tile_band {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.5em;
+}
+.tile_title {
+ color: #ffffff;
+}
+.tile_band {
+ color: rgba(255, 255, 255, 0.7);
+}
+div.tile_space {
+ margin-bottom: 0.3846em;
+ float: left;
+ white-space: nowrap;
+}
+td.tile {
+ background-color: #161616;
+}
+div.trackNumber {
+ font-size: 1.3077em;
+ color: #a5a5a5;
+ text-align: center;
+ overflow: hidden;
+}
+div.footer_line {
+ width: 100%;
+ border-top: 0.2em solid #b53d00;
+}
+td.icon {
+ padding-left: 0.3em;
+ padding-right: 0em;
+ vertical-align: middle;
+ text-align: center;
+ width: 3em;
+ max-width: 3em;
+}
+td.iconDel {
+ padding-left: 5px;
+ padding-right: 5px;
+ vertical-align: middle;
+ width: 2em;
+ text-align: right;
+ cursor: pointer;
+}
+.icon-small {
+ font-size: 1.8em;
+ color: #777777;
+ vertical-align: middle;
+ margin: 0.2em 0.2em 0.2em 0;
+ line-height: 1.2em;
+}
+.icon-small-selected {
+ font-size: 1.8em;
+ color: #b53d00;
+ vertical-align: middle;
+}
+.icon-selected {
+ color: #b53d00;
+}
+.icon-selected-main-menu {
+ color: #b53d00;
+}
+.icon-ok {
+ color: #67891e;
+}
+.icon-nok {
+ color: #FF0000;
+}
+.icon-unava {
+ color: #a5a5a5;
+}
+.icon-anchor {
+ color: #fdf6e3;
+ cursor: pointer;
+}
+.icon-right {
+ margin-right: 0;
+ text-align: right;
+}
+.larger {
+ font-size: 1.33em;
+}
+img.menu_img {
+ width: 2.3077em;
+ height: 2.3077em;
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
+}
+img.mpd_img {
+ width: 3.846em;
+ height: 3.846em;
+ vertical-align: top;
+ float: left;
+ position: relative;
+ top: -1px;
+}
+td.time {
+ /* padding-left: 0.4em; */
+ padding: 2px 2px 2px 5px;
+}
+td.time_w {
+ width: 3em;
+ max-width: 3em;
+}
+td.small_cover,
+td.small_cover_md {
+ width: 4em;
+ height: 4em;
+ line-height: 0;
+ padding: 0 !important;
+}
+td.small_cover_md + td {
+ padding-left: 10px;
+}
+td.trackNumber {
+ padding: 0px 0px 0 0;
+ text-align: center;
+ max-width: 2.5em;
+ width: 2.5em;
+ overflow: hidden;
+}
+td.play-indicator {
+ text-align: center;
+ font-size: 3em;
+ width: 45px !important;
+}
+.blackstar {
+ border: solid 1px;
+ border-radius: 3px;
+}
+.blackstar-selected {
+ background-color: #161616;
+}
+#trackOptions {
+ display: none;
+}
+#waitIndicator,
+#waitIndicatorImg {
+ background-color: rgba(50, 50, 50, 0.6);
+ z-index: 1000000000;
+}
+#waitIndicator {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 100%;
+}
+#waitIndicatorImg {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+#divCenter {
+ display: none;
+ background: red;
+ position: fixed;
+ color: #a5a5a5;
+ top: 50%;
+ left: 50%;
+ padding: 15px;
+ -ms-transform: translateX(-50%) translateY(-50%);
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ z-index: 1000;
+}
+#album-info {
+ margin: 0 0px;
+ overflow: hidden;
+ max-width: 100%;
+}
+.sign-play {
+ font-size: 4em;
+ color: #fdf6e3;
+ display: table-cell;
+ vertical-align: middle;
+ padding-right: 5px;
+}
+.quick-play {
+ font-size: 3.5em;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ opacity: 0.2;
+ padding: 0.02em 0.1em;
+ color: #fdf6e3;
+}
+#track-progress {
+ position: relative;
+ top: -1px;
+}
+#album-info-title {
+ font-size: 1.2em;
+ margin-bottom: 0.3em;
+ padding: 0;
+ color: #a5a5a5;
+}
+#album-info-artist {
+ font-size: 1em;
+}
+.col-right {
+ display: table-cell;
+ vertical-align: middle;
+ padding: 0 5px;
+ max-width: 100%;
+}
+.line {
+ border-bottom: 0px dashed #dedede;
+ padding-bottom: 7px;
+ margin-top: 7px;
+}
+.line-thin {
+ border-bottom: 1px solid #dedede;
+}
+#bar-popularity-out {
+ display: inline-block;
+}
+.add-info-left {
+ width: 25%;
+ display: inline-block;
+ clear: left;
+ text-transform: uppercase;
+ font-size: 0.9em;
+ color: #a5a5a5;
+}
+.add-info-right {
+ width: 70%;
+ display: inline-block;
+ clear: right;
+ color: #a5a5a5;
+}
+[id^=menu-track] {
+ position: relative;
+ cursor: pointer;
+ display: inline-block;
+}
+.menuSub {
+ display: none;
+ visibility: visible;
+ background-color: #141414;
+ cursor: pointer;
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ padding: 0 0 0 2.8em;
+ border-left: 5px solid #b53d00;
+ border-bottom: 1px solid #171717;
+}
+.menuSubLeft {
+ padding: 0;
+}
+.menuSubRight {
+ display: none;
+ visibility: visible;
+ background-color: #141414;
+ cursor: pointer;
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ padding: 0 5px 0 0;
+ border-right: 5px solid #b53d00;
+ border-bottom: 1px solid #171717;
+ text-align: right;
+}
+.menuSubStarSave {
+ padding: 0.2em;
+ border-top: solid 1px #111111;
+ border-bottom: solid 1px #111111;
+}
+.menuSubStarAdd {
+ padding: 0.2em;
+}
+[id^=menu-star-track] {
+ line-height: 3.5em;
+ cursor: auto;
+}
+[id^=menu-star-track] input,
+[id^=menu-star-track] select {
+ width: 15em;
+ max-width: 60%;
+ font-size: 1em;
+ background-color: #fefefe;
+}
+.pointer {
+ cursor: pointer;
+}
+.noselect {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.decade {
+ color: #b53d00;
+ padding: 0.5em;
+ margin: 0.5em 1px;
+ font-weight: bold;
+ line-height: 2em;
+}
+.right {
+ text-transform: unset !important;
+}
+h1 {
+ line-height: 3.5em;
+ background-color: #171717;
+ color: #a5a5a5;
+ font-weight: normal;
+ font-size: 0.9em;
+ vertical-align: middle;
+ padding: 0 4px;
+ margin: 0 0 1px 0;
+ position: relative;
+ text-transform: uppercase;
+}
+.total-time {
+ text-align: right;
+ font-size: 1rem;
+ padding-right: 2px;
+ font-weight: 300;
+}
+[id^=total_time],
+[id^=end_time],
+[id^=end_in] {
+ text-transform: uppercase;
+ opacity: 0.7;
+}
+.search_artist {
+ line-height: 1px;
+ padding: 3px 0px;
+ background-color: #111111;
+}
+.search_artist p {
+ padding-left: 4px;
+ line-height: 2em;
+}
+[id^=searchResults] {
+ display: none;
+}
+.back-to-top {
+ position: fixed;
+ bottom: 3.3em;
+ right: 10px;
+ height: 3.2em;
+ width: 3.2em;
+ text-decoration: none;
+ color: #fdf6e3;
+ background-color: rgba(246, 246, 246, 0.3);
+ font-size: 1em;
+ padding-left: 0.77em;
+ padding-top: 0.64em;
+ display: none;
+ cursor: pointer;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+}
+.back-to-top.miniplayer {
+ margin-bottom: 4em;
+}
+.back-to-top:hover {
+ display: inline-block;
+}
+#paginationGoTo {
+ font-size: 1em;
+ padding: 1px;
+ background-color: #67891e;
+ color: #fdf6e3;
+}
+.paginator-nav {
+ height: 3.4em;
+ background-color: rgba(235, 235, 235, 0);
+ position: relative;
+ display: inline-block;
+ float: left;
+ width: 100%;
+ text-align: center;
+ vertical-align: middle;
+}
+.paginator-nav span {
+ margin: 0.6em 0;
+}
+.buttons {
+ margin-bottom: 5px;
+}
+#usersTab {
+ overflow: auto;
+}
+.svg-filters {
+ position: absolute;
+ left: -9999px;
+}
+.update_info {
+ color: rgba(165, 165, 165, 0.5);
+ font-size: 0.9em;
+}
+.lh3 {
+ line-height: 3em;
+}
+.no-display {
+ display: none;
+}
+.break-word {
+ word-wrap: break-word;
+ white-space: normal !important;
+}
+.break-all {
+ word-break: break-all;
+ -ms-word-break: break-all;
+}
+.blink_me {
+ -webkit-animation-name: blinker;
+ -webkit-animation-duration: 2s;
+ -webkit-animation-timing-function: linear;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-name: blinker;
+ -moz-animation-duration: 2s;
+ -moz-animation-timing-function: linear;
+ -moz-animation-iteration-count: infinite;
+ animation-name: blinker;
+ animation-duration: 2s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+}
+@-moz-keyframes blinker {
+ 0% {
+ opacity: 1.0;
+ }
+ 80% {
+ opacity: 0.1;
+ }
+ 100% {
+ opacity: 1.0;
+ }
+}
+@-webkit-keyframes blinker {
+ 0% {
+ opacity: 1.0;
+ }
+ 80% {
+ opacity: 0.1;
+ }
+ 100% {
+ opacity: 1.0;
+ }
+}
+@keyframes blinker {
+ 0% {
+ opacity: 1.0;
+ }
+ 80% {
+ opacity: 0.1;
+ }
+ 100% {
+ opacity: 1.0;
+ }
+}
+#discBrowser {
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: left;
+ display: none;
+ padding-bottom: 5px;
+ overflow-x: auto;
+}
+.imgThumb {
+ width: 4em;
+ height: 4em;
+ display: inline-block;
+ margin: 0 3px 3px 0;
+ white-space: normal;
+ cursor: pointer;
+ vertical-align: top;
+}
+.selected {
+ border-bottom: solid 4px #b53d00;
+ box-sizing: content-box;
+}
+.fileBrowserItemName {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ width: 100%;
+}
+#miniplayer {
+ position: fixed;
+ bottom: 0;
+ height: 4.2em;
+ width: 100%;
+ background-color: #161616;
+ max-width: 1280px;
+ border-top: 1px solid #303030;
+}
+#image_container_mini,
+#image_in_mini {
+ width: 4em;
+ height: 4em;
+}
+#media_control_mini {
+ min-width: 10em;
+ max-width: 10em;
+ width: 10em;
+ padding-left: 5px;
+ display: none;
+ vertical-align: middle;
+}
+#file-info-mini,
+#image_container_mini {
+ display: table-cell;
+ vertical-align: middle;
+}
+#file-info-mini {
+ color: #a5a5a5;
+ padding-left: 8px;
+ /* max-width: 10em; */
+ line-height: 1.7em;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.artist_mini,
+#track_number {
+ font-size: 0.9em;
+ line-height: 1.5em;
+}
+.track_title_mini {
+ font-size: 1.1em;
+}
+.artist_mini,
+.track_title_mini {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.artist_bio_pic {
+ background-size: 200000% 200000%;
+ height: 270px;
+ padding: 10px 0;
+ text-align: center;
+}
+.artist_bio_pic img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+ max-width: 250px;
+ border-radius: 10%;
+}
+.artist_bio_pic_not_found {
+ font-size: 210px;
+ width: 260px;
+ border-radius: 10px;
+ background-color: #161616;
+ display: inline-block;
+ max-height: 260px;
+ color: #ffffff;
+}
+.artist_bio_text {
+ margin-top: 5px;
+}
+.artist_bio_source {
+ margin-bottom: 5px;
+}
+.artist_bio_related {
+ overflow: hidden;
+ /* max-height: 100px; */
+ height: 9em;
+ white-space: nowrap;
+ overflow-x: scroll;
+}
+.artist_bio_related img {
+ width: 6em;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ /* border-radius: 10%; */
+}
+.artist_related {
+ display: inline-block;
+ margin: 0 1em;
+ width: 6em;
+}
+.artist_related div {
+ white-space: nowrap;
+ text-align: center;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ margin-top: 3px;
+}
+.artist_related .artist_container_small {
+ border-radius: 10px;
+ background-color: #161616;
+ color: #ffffff;
+}
+#timebar_mini {
+ width: 0px;
+ height: 2px;
+ background-color: #b53d00;
+}
+.shadow-down {
+ box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.6);
+ transition: box-shadow 0.3s ease-in-out;
+}
+.shadow-up {
+ box-shadow: 0px -4px 7px 0px rgba(0, 0, 0, 0.6);
+ transition: box-shadow 0.3s ease-in-out;
+}
+.small_cover_sub {
+ height: 3em;
+ width: 3em;
+ margin-right: 10px;
+}
+@font-face {
+ font-family: Roboto;
+ src: url(fonts/Roboto/Roboto-Regular.ttf);
+ font-weight: 400;
+}
+@font-face {
+ font-family: Roboto;
+ src: url(fonts/Roboto/Roboto-Light.ttf);
+ font-weight: 300;
+}
+/* Main background */
+/* Sub background */
+/* Categories background (headers, footers, album/now playing) */
+/* Background color of track in tracklist/playlist */
+/* Background playlist current track */
+/* Background of track submenu */
+/* Main banner background */
+/* Main sub banner background */
+/* Main sub sub banner background */
+/* Sub banner background */
+/* Sub sub banner background */
+/* Footer background */
+/* Background of forms */
+/* Separators in subbanner */
+/* fonts */
+/* tabs */
+/* buttons */
+/* buttons in add/save playlist menu and submenus */
+/* buttons in select player, paginator, favorites, etc.*/
+/* buttons in Now Playing: ff, play/pause, etc. */
+/* logo */
+/* playing bars */
+/* Active color */
+/* Player buttons outline */
diff --git a/skin/ompd_darker/styles.less b/skin/ompd_darker/styles.less
new file mode 100644
index 0000000..c3104db
--- /dev/null
+++ b/skin/ompd_darker/styles.less
@@ -0,0 +1,114 @@
+/* +------------------------------------------------------------------------+
+ | styles.css |
+ +------------------------------------------------------------------------+ */
+
+@import url("./../styles_inc.less");
+
+@font-face {
+ font-family: Roboto;
+ src: url(fonts/Roboto/Roboto-Regular.ttf);
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: Roboto;
+ src: url(fonts/Roboto/Roboto-Light.ttf);
+ font-weight: 300;
+}
+
+/* Main background */
+@bg-main: #000;
+
+/* Sub background */
+@bg-sub: #161616;
+
+/* Categories background (headers, footers, album/now playing) */
+@bg-categories: #171717;
+
+/* Background color of track in tracklist/playlist */
+@bg-track: #111;
+
+/* Background playlist current track */
+@bg-playlist-active: #222;
+@bg-track-playing-active: #b53d00;
+
+/* Background of track submenu */
+@bg-track-submenu: #141414;
+
+/* Main banner background */
+@bg-banner: #161616;
+
+/* Main sub banner background */
+@bg-sub-banner-2: #161616;
+
+/* Main sub sub banner background */
+@bg-sub-sub-banner-2: lighten(@bg-sub-banner-2, 5%);
+
+/* Sub banner background */
+@bg-sub-banner: #4e6819;
+
+/* Sub sub banner background */
+@bg-sub-sub-banner: lighten(@bg-sub-banner, 3%);
+
+/* Footer background */
+@bg-footer: #161616;
+
+/* Background of forms */
+@bg-forms: #fefefe;
+@bg-forms-banner: #fefefe;
+
+/* Separators in subbanner */
+@separator-sub-banner: #cccccc;
+
+/* fonts */
+@font-first: #a5a5a5;
+@font-active: #fdf6e3;
+@font-banner: #a5a5a5;
+@font-categories: @font-banner;
+@font-tags: #fdf6e3;
+@font-search-button: #fdf6e3;
+@font-sub-banner: #fdf6e3;
+@font-sub-sub-banner: #fdf6e3;
+@font-sub-button: #fdf6e3;
+@font-album-title-library: #ffffff;
+@font-artist-library: fade(@font-album-title-library, 70%);
+@font-track-playing: #fdf6e3;
+@font-track-playing-active: #fdf6e3;
+@font-album-title-playing: #a5a5a5;
+
+/* tabs */
+@tab-selected: #b53d00;
+@tab: #2f3439;
+
+/* buttons */
+@button: #777777;
+@button-banner: #a5a5a5;
+@button-banner-active: #fdf6e3;
+
+/* buttons in add/save playlist menu and submenus */
+@button-sub: #777777;
+
+/* buttons in select player, paginator, favorites, etc.*/
+@button-nav: #67891e;
+@button-quick-play: #fdf6e3;
+
+/* buttons in Now Playing: ff, play/pause, etc. */
+@button-playlist: #161616;
+@button-playlist-off: #a5a5a5;
+@button-playlist-on: #b53d00;
+
+/* logo */
+@logo-first-color: #3498db;
+@logo-second-color: #fdf6e3;
+
+/* playing bars */
+@playing-bar: #b53d00;
+@bg-playing-bar: #333;
+@volume-bar: @playing-bar;
+
+/* Active color */
+@active-nav: #b53d00;
+@active-banner: #b53d00;
+
+/* Player buttons outline */
+@player-button-outline: true;
diff --git a/skin/ompd_darker/template.footer.php b/skin/ompd_darker/template.footer.php
new file mode 100644
index 0000000..54bf4f5
--- /dev/null
+++ b/skin/ompd_darker/template.footer.php
@@ -0,0 +1,167 @@
+
+
+ |
+ |
+
+