189 lines
3.0 KiB
CSS
189 lines
3.0 KiB
CSS
root {
|
|
display: block;
|
|
}
|
|
#content{
|
|
|
|
}
|
|
body{
|
|
font: 11pt Helvetica, Arial, sans-serif;
|
|
background-color:#EEE;
|
|
margin: 0px;
|
|
}
|
|
|
|
#libraryTree{
|
|
height: 300px;
|
|
overflow:scroll;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
|
|
#mediaViewer{
|
|
min-height: 500px;
|
|
}
|
|
#meta {
|
|
position:relative;
|
|
width:100%;
|
|
}
|
|
#seekSlider{
|
|
width: 100%;
|
|
}
|
|
|
|
#volumeSlider{
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
#currentVolume{
|
|
display: inline-block;
|
|
}
|
|
#mediaTitle{
|
|
text-align:center;
|
|
width:100%;
|
|
margin-top:5px;
|
|
}
|
|
#currentTime{
|
|
float: left;
|
|
text-align: left;
|
|
}
|
|
#totalTime{
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
#play_controls, #controls{
|
|
margin-top:30px;
|
|
width:95%;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
|
|
#controlTable{
|
|
position:relative;
|
|
height: 150px;
|
|
}
|
|
|
|
#buttonszone li{
|
|
float: left;
|
|
}
|
|
|
|
#art{
|
|
top:0px;
|
|
width:150px;
|
|
height:150px;
|
|
margin:0 auto;
|
|
box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
}
|
|
|
|
.ui-slider-range{
|
|
background-color:#FFB200;
|
|
background:#FFB200 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
|
|
}
|
|
|
|
|
|
#buttons{
|
|
--button-scale: 1.2;
|
|
margin:0 auto;
|
|
position: relative;
|
|
width: calc(288px * var(--button-scale));
|
|
}
|
|
.button48{
|
|
width: calc(48px * var(--button-scale));
|
|
height: calc(48px * var(--button-scale));
|
|
margin: 5px 0px 5px 0px;
|
|
background: none;
|
|
border: none;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
background-image: url("../images/buttons.png");
|
|
background-size: calc(672px * var(--button-scale));
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.button{
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
#buttonOpen{
|
|
background-position: 0px 0px;
|
|
}
|
|
#buttonStop{
|
|
background-position: calc(-576px * var(--button-scale)) 0px;
|
|
}
|
|
#buttonRewd{
|
|
background-position: calc(-528px * var(--button-scale)) 0px;
|
|
}
|
|
#buttonFwrd{
|
|
background-position: calc(-96px * var(--button-scale)) 0px;
|
|
}
|
|
.playing {
|
|
background-position: calc(-336px * var(--button-scale)) 0px;
|
|
}
|
|
.paused {
|
|
background-position: calc(-384px * var(--button-scale)) 0px;
|
|
}
|
|
#buttonPrev{
|
|
background-position: calc(-144px * var(--button-scale)) 0px;
|
|
}
|
|
#buttonNext{
|
|
background-position: calc(-288px * var(--button-scale)) 0px;
|
|
}
|
|
#buttonFull{
|
|
background-position: calc(-192px * var(--button-scale)) 0px;
|
|
}
|
|
#buttonSout{
|
|
background-position: calc(-624px * var(--button-scale)) 0px;
|
|
}
|
|
#buttonEQ{
|
|
background-position: calc(-48px * var(--button-scale)) 0px;
|
|
}
|
|
#window_browse ol{
|
|
list-style-type: none;
|
|
}
|
|
#window_browse ol li{
|
|
list-style-type: none;
|
|
float: left;
|
|
padding: 5px;
|
|
}
|
|
.system_icon{
|
|
width:80px;
|
|
text-align:center;
|
|
vertical-align:top;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
border: 1px solid #823D0A;
|
|
margin: 2px;
|
|
height: 92px;
|
|
background-color: #E1E1E1;
|
|
overflow: hidden;
|
|
}
|
|
#window_create_stream table tr td{
|
|
font-size: 11px;
|
|
}
|
|
|
|
#window_equalizer div div{
|
|
text-align: center;
|
|
font-size: 11px;
|
|
padding: 0px;
|
|
}
|
|
.eqBand{
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
height: 400px;
|
|
font-size: 1.5em;
|
|
}
|
|
.footer{
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
}
|
|
|
|
div.centered{
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.hidden{
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|