Playback
Playlist | Last modified |
---|
# | Title | Artist | Album | Duration |
---|
Title | Artist | Album | Duration |
---|
Search
Title | Artist | Album | Duration |
---|
diff --git a/dist/htdocs/css/mympd.min.css b/dist/htdocs/css/mympd.min.css index a7e53dd..d2d31de 100644 --- a/dist/htdocs/css/mympd.min.css +++ b/dist/htdocs/css/mympd.min.css @@ -1 +1,346 @@ -:root{--mympd-coverimagesize:240px}html{position:relative;min-height:100%}body{padding-top:50px;padding-bottom:50px;background-color:#888}main{padding-top:10px}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:30px}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);max-width:100%;height:var(--mympd-coverimagesize);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:18px;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:16px}.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:22px}#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:50px;right:10px;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;heigth:20px;text-align:center}ol#searchCrumb{padding:.5rem}.nodropdown::after{content:none} \ No newline at end of file +: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; +} + diff --git a/dist/htdocs/index.html b/dist/htdocs/index.html index 71723f3..2fc2290 100644 --- a/dist/htdocs/index.html +++ b/dist/htdocs/index.html @@ -1 +1 @@ -