static: work on basic layout + top controls
This commit is contained in:
parent
9a4aadaf75
commit
cc0ba05b49
2 changed files with 107 additions and 3 deletions
|
@ -1,6 +1,7 @@
|
|||
body {
|
||||
html, body {
|
||||
background-color: #09101d;
|
||||
color: #bbb;
|
||||
height: 99%;
|
||||
}
|
||||
|
||||
div {
|
||||
|
@ -12,9 +13,15 @@ button {
|
|||
color: #bbb;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #28374a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#flexbox-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#controls-top {
|
||||
|
@ -25,9 +32,69 @@ button {
|
|||
#top-left-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#top-left-controls button {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#playback-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
#queue-volume-controls {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#queue-controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#queue-xfade-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#queue-xfade-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#top-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
color: white;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#top-logo-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#sanic-logo {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#xfade {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#queue {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#controls_bottom {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
#footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue