diff --git a/dist/htdocs/css/mympd.min.css b/dist/htdocs/css/mympd.min.css index d2d31de..13f3f91 100644 --- a/dist/htdocs/css/mympd.min.css +++ b/dist/htdocs/css/mympd.min.css @@ -1,346 +1 @@ -:root { - --mympd-coverimagesize: 240px; - --mympd-bacgkroundcolor: #888; -} - -html { - position: relative; - min-height: 100%; -} - -body { - padding-top: 4rem; - padding-bottom: 4rem; - background-color: var(--mympd-backgroundcolor, #888); -} - -main { - padding-top: 1rem; -} - -footer { - position: absolute; - bottom: 0; -} - -button { - overflow: hidden; -} - -.cardBodyPlayback { - padding-bottom:0px; -} - -#BrowseBreadrumb { - overflow: auto; - white-space: nowrap; -} - -#BrowseBreadcrumb > li > a { - cursor: pointer; -} - - -@media only screen and (max-width: 576px) { - .header-logo { - display:none !important; - } -} - -.clickable { - cursor: pointer; -} - -[data-col=Pos], [data-col=Type], [data-col=Track], [data-col=Action] { - width: 2rem; -} - -small { - color: #aaa; -} - -.card { - min-height: 300px; -} - -.cardFooterPlayback { - padding: 0px; -} - -.album-cover { - background-size: cover; - background-image: url("/assets/coverimage-loading.png"); - border: 1px solid black; - border-radius: 5px; - overflow: hidden; - width: var(--mympd-coverimagesize, 250px); - max-width:100%; - height: var(--mympd-coverimagesize, 250px); - background-color: #eee; - float: left; - margin-right: 1.25rem; - margin-bottom: 1.25rem; -} - -.album-desc { - min-width: 240px; - float: left; - padding-bottom:1.25rem; -} - -.hide { - display: none !important; -} - -.unvisible { - visibility: hidden; -} - -.pull-right { - float: right !important; -} - -.card-toolbar { - margin-bottom: 10px; -} - -.card-toolbar > div, .card-toolbar > form { - margin-bottom: 5px; -} - -@font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - src: url(/assets/MaterialIcons-Regular.woff2) format('woff2'), - url(/assets/MaterialIcons-Regular.woff) format('woff'), - url(/assets/MaterialIcons-Regular.ttf) format('truetype'); -} - -.material-icons { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 1.4rem; /* Preferred icon size */ - display:inline-block; - line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; - direction: ltr; - vertical-align: top; - /* Support for all WebKit browsers. */ - -webkit-font-smoothing: antialiased; - /* Support for Safari and Chrome. */ - text-rendering: optimizeLegibility; - /* Support for Firefox. */ - -moz-osx-font-smoothing: grayscale; - /* Support for IE. */ - font-feature-settings: 'liga'; -} - -.material-icons-left { - font-size: 1rem; - margin-left: -1em; - vertical-align:middle; -} - -.material-icons-small { - font-size: 1rem; -} - -.material-icons-small-left { - font-size: 1rem; - margin-left: -1em; -} - -.color-darkgrey, .color-darkgrey:hover { - color:#6c757d !important; -} - -#btn-outputs-block > button { - margin-bottom:10px; -} - -#btn-outputs-block > button:last-child { - margin-bottom:0px; -} - -.card-body { - overflow-x:hidden; -} - -.progressBarPlay { - font-size: 1.8rem; -} - -#counter { - cursor: text; -} - -#volumeBar { - margin-top:2px; - width:160px; -} - -.title-icon { - float:left; - margin-right:5px; - font-size:1.8rem; -} - -.header-logo { - font-size: 2rem; - float: left; - margin-right: 5px; -} - -.letters > button { - width: 28px; - height: 28px; -} - -.col-md { - max-width: 250px; - min-width: 250px; - -} - -a.card-img-left { - overflow: hidden; - display: block; - width: var(--mympd-coverimagesize); - height: var(--mympd-coverimagesize); - border-radius: 5px; - background-size: cover; - background-image: url(/assets/coverimage-loading.png); - margin-bottom: 5px; - cursor: pointer; -} - -button.active { - color: #fff; - background-color: #28a745 !important; - border-color: #28a745 !important; -} - -button.active-fg-green { - color: #28a745 !important; -} - -button.active-fg-red { - color: #bd2130 !important; -} - -div#alertBox { - position:fixed; - top: 4rem; - right:1rem; - width:80%; - max-width:400px; - z-index:1000; - opacity:0; - visibility:visible; - transition:opacity 0.5s ease-in; -} - -div.alertBoxActive { - opacity:1 !important; - visibility:visible !important; - transition:opacity 0.5s ease-in; -} - -.popover-content { - padding-top:4px; - padding-bottom:4px; -} - -.opacity05 { - opacity:0.5; -} - -caption { - caption-side: top; - font-size: 120%; - font-weight: bold; - color: black; -} - -.dragover > td { - border-top:2px solid #28a745; -} - -.dragover-th { - border-left:2px solid #28a745; -} - -[draggable] { - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - user-select: none; - /* Required to make elements draggable in old WebKit */ - -khtml-user-drag: element; - -webkit-user-drag: element; - cursor: pointer; -} - -@keyframes changewidth { - from { margin-left: -20px; } - to { margin-left: 100%; } -} - -#updateDBprogress { - width:20px; -} - -.updateDBprogressAnimate { - animation-duration: 2s; - animation-name: changewidth; - animation-iteration-count: infinite; -} - -.modal-body { - overflow-x: hidden; -} - -.modal-body .album-cover { - float:none; -} - -#BrowseDatabaseAlbumListCaption { - margin-left: 15px; - margin-right: 15px; - width: 100%; -} - -#BrowseDatabaseAlbumListCaption h2 { - display: inline; -} - -#BrowseDatabaseAlbumListCaption small { - padding-top: 0.8rem; -} - -#menu-dbupdate { - padding-left:1rem; -} - -div.key { - border: 1px solid #bbb; - background-color: #eee; - border-radius: 2px; - width: 20px; - height: 20px; - text-align: center; -} - -ol#searchCrumb { - padding: .5rem; -} - -.nodropdown::after { - content: none; -} - +:root{--mympd-coverimagesize:240px;--mympd-backgroundcolor:#888}html{position:relative;min-height:100%}body{padding-top:4rem;padding-bottom:4rem;background-color:var(--mympd-backgroundcolor,#888)}main{padding-top:1rem}footer{position:absolute;bottom:0}button{overflow:hidden}.cardBodyPlayback{padding-bottom:0}#BrowseBreadrumb{overflow:auto;white-space:nowrap}#BrowseBreadcrumb>li>a{cursor:pointer}@media only screen and (max-width:576px){.header-logo{display:none!important}}.clickable{cursor:pointer}[data-col=Pos],[data-col=Type],[data-col=Track],[data-col=Action]{width:2rem}small{color:#aaa}.card{min-height:300px}.cardFooterPlayback{padding:0}.album-cover{background-size:cover;background-image:url("/assets/coverimage-loading.png");border:1px solid black;border-radius:5px;overflow:hidden;width:var(--mympd-coverimagesize,250px);max-width:100%;height:var(--mympd-coverimagesize,250px);background-color:#eee;float:left;margin-right:1.25rem;margin-bottom:1.25rem}.album-desc{min-width:240px;float:left;padding-bottom:1.25rem}.hide{display:none!important}.unvisible{visibility:hidden}.pull-right{float:right!important}.card-toolbar{margin-bottom:10px}.card-toolbar>div,.card-toolbar>form{margin-bottom:5px}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(/assets/MaterialIcons-Regular.woff2) format('woff2'),url(/assets/MaterialIcons-Regular.woff) format('woff'),url(/assets/MaterialIcons-Regular.ttf) format('truetype')}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:1.4rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;vertical-align:top;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga'}.material-icons-left{font-size:1rem;margin-left:-1em;vertical-align:middle}.material-icons-small{font-size:1rem}.material-icons-small-left{font-size:1rem;margin-left:-1em}.color-darkgrey,.color-darkgrey:hover{color:#6c757d!important}#btn-outputs-block>button{margin-bottom:10px}#btn-outputs-block>button:last-child{margin-bottom:0}.card-body{overflow-x:hidden}.progressBarPlay{font-size:1.8rem}#counter{cursor:text}#volumeBar{margin-top:2px;width:160px}.title-icon{float:left;margin-right:5px;font-size:1.8rem}.header-logo{font-size:2rem;float:left;margin-right:5px}.letters>button{width:28px;height:28px}.col-md{max-width:250px;min-width:250px}a.card-img-left{overflow:hidden;display:block;width:var(--mympd-coverimagesize);height:var(--mympd-coverimagesize);border-radius:5px;background-size:cover;background-image:url(/assets/coverimage-loading.png);margin-bottom:5px;cursor:pointer}button.active{color:#fff;background-color:#28a745!important;border-color:#28a745!important}button.active-fg-green{color:#28a745!important}button.active-fg-red{color:#bd2130!important}div#alertBox{position:fixed;top:4rem;right:1rem;width:80%;max-width:400px;z-index:1000;opacity:0;visibility:visible;transition:opacity .5s ease-in}div.alertBoxActive{opacity:1!important;visibility:visible!important;transition:opacity .5s ease-in}.popover-content{padding-top:4px;padding-bottom:4px}.opacity05{opacity:.5}caption{caption-side:top;font-size:120%;font-weight:bold;color:black}.dragover>td{border-top:2px solid #28a745}.dragover-th{border-left:2px solid #28a745}[draggable]{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;-khtml-user-drag:element;-webkit-user-drag:element;cursor:pointer}@keyframes changewidth{0%{margin-left:-20px}to{margin-left:100%}}#updateDBprogress{width:20px}.updateDBprogressAnimate{animation-duration:2s;animation-name:changewidth;animation-iteration-count:infinite}.modal-body{overflow-x:hidden}.modal-body .album-cover{float:none}#BrowseDatabaseAlbumListCaption{margin-left:15px;margin-right:15px;width:100%}#BrowseDatabaseAlbumListCaption h2{display:inline}#BrowseDatabaseAlbumListCaption small{padding-top:.8rem}#menu-dbupdate{padding-left:1rem}div.key{border:1px solid #bbb;background-color:#eee;border-radius:2px;width:20px;height:20px;text-align:center}ol#searchCrumb{padding:.5rem}.nodropdown::after{content:none} \ No newline at end of file diff --git a/dist/htdocs/index.html b/dist/htdocs/index.html index 2fc2290..c6cc019 100644 --- a/dist/htdocs/index.html +++ b/dist/htdocs/index.html @@ -1 +1 @@ -myMPD
Playback

  
#TitleArtistAlbumDuration
#TitleArtistAlbumDuration
PlaylistLast modified
Playlist List
#TitleArtistAlbumDuration
TitleArtistAlbumDuration
Search
TitleArtistAlbumDuration
\ No newline at end of file +myMPD
Playback

  
#TitleArtistAlbumDuration
#TitleArtistAlbumDuration
PlaylistLast modified
Playlist List
#TitleArtistAlbumDuration
TitleArtistAlbumDuration
Search
TitleArtistAlbumDuration
\ No newline at end of file diff --git a/dist/htdocs/js/mympd.min.js b/dist/htdocs/js/mympd.min.js index 8bd72e1..f4cb354 100644 --- a/dist/htdocs/js/mympd.min.js +++ b/dist/htdocs/js/mympd.min.js @@ -83,8 +83,8 @@ function filterCols(a){var b=settings.tags.slice();0==settings.featTags&&b.push( function parseSettings(){toggleBtn("btnRandom",settings.random);toggleBtn("btnConsume",settings.consume);toggleBtn("btnSingle",settings.single);toggleBtn("btnRepeat",settings.repeat);toggleBtn("btnAutoPlay",settings.autoPlay);void 0!=settings.crossfade?(document.getElementById("inputCrossfade").removeAttribute("disabled"),document.getElementById("inputCrossfade").value=settings.crossfade):document.getElementById("inputCrossfade").setAttribute("disabled","disabled");void 0!=settings.mixrampdb?(document.getElementById("inputMixrampdb").removeAttribute("disabled"), document.getElementById("inputMixrampdb").value=settings.mixrampdb):document.getElementById("inputMixrampdb").setAttribute("disabled","disabled");void 0!=settings.mixrampdelay?(document.getElementById("inputMixrampdelay").removeAttribute("disabled"),document.getElementById("inputMixrampdelay").value=settings.mixrampdelay):document.getElementById("inputMixrampdelay").setAttribute("disabled","disabled");document.getElementById("selectReplaygain").value=settings.replaygain;var a=document.getElementById("btnnotifyWeb"); notificationsSupported()?settings.notificationWeb?(toggleBtn("btnnotifyWeb",settings.notificationWeb),Notification.requestPermission(function(a){"permission"in Notification||(Notification.permission=a);"granted"===a?toggleBtn("btnnotifyWeb",1):(toggleBtn("btnnotifyWeb",0),settings.notificationWeb=!0)})):toggleBtn("btnnotifyWeb",0):(a.setAttribute("disabled","disabled"),toggleBtn("btnnotifyWeb",0));toggleBtn("btnnotifyPage",settings.notificationPage);var b="featStickers featSmartpls featPlaylists featTags featLocalplayer featSyscmds featCoverimage featAdvsearch".split(" "); -document.documentElement.style.setProperty("--mympd-coverimagesize",settings.coverimagesize+"px");document.documentElement.style.setProperty("--mympd-backgroundcolor",settings.backgroundcolor);for(var c=0;c'+ +document.documentElement.style.setProperty("--mympd-coverimagesize",settings.coverimagesize+"px");document.documentElement.style.setProperty("--mympd-backgroundcolor",settings.backgroundcolor);for(var c=0;c'+ settings.colsPlayback[a]+"";document.getElementById("cardPlaybackTags").innerHTML=b}1==settings.mixramp?document.getElementsByClassName("mixramp")[0].style.display="":document.getElementsByClassName("mixramp")[0].style.display="none";!settings.tags.includes("AlbumArtist")&&settings.featTags&&(settings.tags.includes("Artist")? app.apps.Browse.tabs.Database.active="Artist":app.apps.Browse.tabs.Database.active=settings.tags[0]);settings.tags.includes("Title")&&(app.apps.Search.state="0/any/Title/");document.getElementById("selectJukeboxMode").value=settings.jukeboxMode;document.getElementById("inputJukeboxQueueLength").value=settings.jukeboxQueueLength;0==settings.jukeboxMode||2==settings.jukeboxMode?(document.getElementById("inputJukeboxQueueLength").setAttribute("disabled","disabled"),document.getElementById("selectJukeboxPlaylist").setAttribute("disabled", "disabled")):1==settings.jukeboxMode&&(document.getElementById("inputJukeboxQueueLength").removeAttribute("disabled"),document.getElementById("selectJukeboxPlaylist").removeAttribute("disabled"));settings.featPlaylists?(playlistEl="selectJukeboxPlaylist",sendAPI({cmd:"MPD_API_PLAYLIST_LIST",data:{offset:0,filter:"-"}},getAllPlaylists)):document.getElementById("selectJukeboxPlaylist").innerHTML="";settings.tags.sort();settings.searchtags.sort();settings.browsetags.sort();filterCols("colsSearch"); diff --git a/htdocs/css/mympd.css b/htdocs/css/mympd.css index d2d31de..c5a6cb5 100644 --- a/htdocs/css/mympd.css +++ b/htdocs/css/mympd.css @@ -1,6 +1,6 @@ :root { --mympd-coverimagesize: 240px; - --mympd-bacgkroundcolor: #888; + --mympd-backgroundcolor: #888; } html {