html { position: relative; min-height: 100%; } body { margin-bottom: 60px; padding-top: 50px; padding-bottom: 50px; background-color: #888; } main { padding-top: 20px; } footer { position: absolute; bottom: 0; } button { overflow: hidden; } #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: 0px; } .album-cover { background-size: cover; background-image: url("/assets/coverimage-loading.png"); border: 1px solid black; border-radius: 5px; overflow: hidden; width: 240px; height: 240px; background-color: #eee; float: left; margin-right: 20px; margin-bottom: 20px; } .album-desc { min-width: 240px; float: left; } .hide { display: none !important; } .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; /* 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: 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:0px; } .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: 250px; height: 250px; 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 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; heigth: 20px; text-align: center; } ol#searchCrumb { padding: .5rem; }