ympd/htdocs/css/mympd.css

: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: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');
}

.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;
}