@@ -9,6 +9,24 @@ body {
color: white;
margin: 0;
padding: 0;
font-family: sans-serif;
}
h2 { margin: 0 }
ul {
list-style-type: none;
padding: 0;
}
div {
margin: 0;
padding: 0.3333rem;
}
.main-panel {
position: absolute;
position: absolute;
top: 9em;
bottom: 0.3em;
background-color: #181818;
overflow-y: auto;
}
.hidden {
display: none;
@@ -21,7 +39,14 @@ body {
left: 0.3em;
right: 0.3em;
top: 0.3em;
height: 5em;
height: 8em;
text-decoration: coral;
text-shadow: black 1px 1px 0px;
}
#seek {
font-size: 50%;
position: absolute;
bottom: 0;
}
#playbackCanvas {
background: none;
@@ -34,7 +59,8 @@ body {
width: 100%;
}
#seekBar {
background: rgb(255 255 255 / 50%);
font-size: 200%;
background: rgb(255 255 255 / 30%);
width: 0%;
height: 100%;
margin: 0;
@@ -42,28 +68,15 @@ body {
overflow-x: visible;
white-space: nowrap;
position: absolute;
bottom: 0px;
}
#sectLibrary {
width: 22em;
margin: 0;
padding: 0;
position: absolute;
left: 0.3em;
top: 7em;
bottom: 0.3em;
background-color: #181818;
overflow-y: auto;
}
#sectQueue {
margin: 0;
padding: 0;
position: absolute;
left: 24em;
top: 7em;
bottom: 0.3em;
right: 0.3em;
background-color: #181818;
overflow-y: auto;
}
</style>
</head>
@@ -76,7 +89,7 @@ body {
<div id="seek"></div>
</div>
</div>
<div id="sectLibrary" class="hidden">
<div id="sectLibrary" class="hidden main-panel">
<h2>Library</h2>
<select id="organize">
<option selected="selected">Album / Song</option>
@@ -86,7 +99,7 @@ body {
<ul id="listLibrary">
</ul>
</div>
<div id="sectQueue" class="hidden">
<div id="sectQueue" class="hidden main-panel">
<h2>Queue</h2>
<button id="prev"><label for="prev">⏮</label></button>
<button id="stop"><label for="stop">⏹</label></button>