524 lines
8.1 KiB
CSS
524 lines
8.1 KiB
CSS
|
/*
|
||
|
=====================================================================
|
||
|
= Specific Elements By ID
|
||
|
=====================================================================
|
||
|
*/
|
||
|
|
||
|
#infobar {
|
||
|
width:100%;
|
||
|
padding-top:4px;
|
||
|
padding-bottom:4px;
|
||
|
margin:0px;
|
||
|
overflow-y:hidden;
|
||
|
overflow-x:hidden;
|
||
|
}
|
||
|
|
||
|
#progress {
|
||
|
font-size:6pt;
|
||
|
}
|
||
|
|
||
|
#playbackTime {
|
||
|
font-weight:bold;
|
||
|
font-size:11px;
|
||
|
padding-top:1px;
|
||
|
height:15px;
|
||
|
line-height:15px;
|
||
|
text-align:center;
|
||
|
width:100%;
|
||
|
}
|
||
|
|
||
|
#albumcover {
|
||
|
padding-left:4px;
|
||
|
padding-right:4px;
|
||
|
padding-top:4px;
|
||
|
padding-bottom:4px;
|
||
|
margin:0px;
|
||
|
height:82px;
|
||
|
z-index:500;
|
||
|
}
|
||
|
|
||
|
#albumpicture {
|
||
|
width: auto;
|
||
|
height: 82px;
|
||
|
}
|
||
|
|
||
|
#nowplaying {
|
||
|
font-size:8pt;
|
||
|
padding-top:0px;
|
||
|
padding-bottom:0px;
|
||
|
height:60px;
|
||
|
width:100%;
|
||
|
overflow:hidden;
|
||
|
box-sizing:border-box;
|
||
|
border-right:4px solid transparent;
|
||
|
border-left:4px solid transparent;
|
||
|
}
|
||
|
|
||
|
#patrickmoore {
|
||
|
overflow:hidden;
|
||
|
margin-right:12px;
|
||
|
}
|
||
|
|
||
|
#firefoxisshitwrapper {
|
||
|
overflow:hidden;
|
||
|
}
|
||
|
|
||
|
#nptext {
|
||
|
width:auto;
|
||
|
overflow:hidden;
|
||
|
}
|
||
|
|
||
|
#amontobin {
|
||
|
padding-top:4px;
|
||
|
}
|
||
|
|
||
|
#sortable {
|
||
|
width:100%;
|
||
|
}
|
||
|
|
||
|
#infopane {
|
||
|
height:100%;
|
||
|
overflow:auto;
|
||
|
position:relative;
|
||
|
display:block;
|
||
|
}
|
||
|
|
||
|
#tagadder {
|
||
|
width:400px;
|
||
|
padding-right:8px;
|
||
|
padding-bottom:4px;
|
||
|
}
|
||
|
|
||
|
#dbtags {
|
||
|
overflow:hidden;
|
||
|
opacity:0.9;
|
||
|
font-size:8pt;
|
||
|
height:22px;
|
||
|
line-height:22px;
|
||
|
}
|
||
|
|
||
|
#playcount {
|
||
|
overflow:hidden;
|
||
|
opacity:0.9;
|
||
|
font-size:8pt;
|
||
|
height:22px;
|
||
|
line-height:22px;
|
||
|
}
|
||
|
|
||
|
#lastfm {
|
||
|
float:left;
|
||
|
margin-left:4px;
|
||
|
padding-top:1px;
|
||
|
}
|
||
|
|
||
|
#lastfm img {
|
||
|
margin-right:2px;
|
||
|
margin-left:2px;
|
||
|
}
|
||
|
|
||
|
#headerbar {
|
||
|
padding:0px;
|
||
|
margin:0px;
|
||
|
width:100%;
|
||
|
height:40px;
|
||
|
}
|
||
|
|
||
|
#bottompage {
|
||
|
width:100%;
|
||
|
}
|
||
|
|
||
|
#sources {
|
||
|
height:100%;
|
||
|
overflow:auto;
|
||
|
}
|
||
|
|
||
|
#volumecontrol {
|
||
|
width:14px;
|
||
|
margin-left:0px;
|
||
|
margin-right:0px;
|
||
|
font-size:8px;
|
||
|
}
|
||
|
|
||
|
#notifications {
|
||
|
position:absolute;
|
||
|
width:50%;
|
||
|
max-width:480px;
|
||
|
padding:8px;
|
||
|
top:0px;
|
||
|
display:none;
|
||
|
z-index:2000;
|
||
|
right: 0px;
|
||
|
}
|
||
|
|
||
|
#keybindtable {
|
||
|
margin-bottom:1em;
|
||
|
}
|
||
|
|
||
|
#outputbox {
|
||
|
max-width:20%;
|
||
|
}
|
||
|
|
||
|
#mobileplaylistcontrols
|
||
|
{
|
||
|
display:none;
|
||
|
}
|
||
|
|
||
|
#audiobooks .podcastresume>.fixed
|
||
|
{
|
||
|
padding-left: 24px;
|
||
|
}
|
||
|
|
||
|
#audiobooks .podcastresume>.expand
|
||
|
{
|
||
|
margin-right: 4px;
|
||
|
}
|
||
|
|
||
|
#flowcontrols {
|
||
|
height: 36px;
|
||
|
}
|
||
|
|
||
|
#flowcontrols i {
|
||
|
max-height: 24px;
|
||
|
margin-top:4px;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
=====================================================================
|
||
|
= General Classes
|
||
|
=====================================================================
|
||
|
*/
|
||
|
|
||
|
.infobarlayout {
|
||
|
margin-left:12px;
|
||
|
margin-top:0px;
|
||
|
margin-bottom:0px;
|
||
|
padding-top:0px;
|
||
|
padding-bottom:2px;
|
||
|
padding-left:0px;
|
||
|
padding-right:0px;
|
||
|
height:90px;
|
||
|
}
|
||
|
|
||
|
.topstats {
|
||
|
float:left;
|
||
|
margin-right:8px;
|
||
|
margin-top:1px;
|
||
|
}
|
||
|
|
||
|
|
||
|
.tagremover {
|
||
|
margin-left:0.5em;
|
||
|
}
|
||
|
|
||
|
|
||
|
.clicktext {
|
||
|
font-size:7pt;
|
||
|
font-weight:bold;
|
||
|
}
|
||
|
|
||
|
.topimg {
|
||
|
margin-right:4px;
|
||
|
margin-left:4px;
|
||
|
margin-bottom:2px;
|
||
|
cursor: pointer;
|
||
|
vertical-align:middle;
|
||
|
}
|
||
|
|
||
|
.npicon {
|
||
|
padding:0px;
|
||
|
margin-top:0px;
|
||
|
margin-left:0px;
|
||
|
margin-bottom:0px;
|
||
|
margin-right:4px;
|
||
|
height:20px;
|
||
|
width:20px;
|
||
|
vertical-align:middle;
|
||
|
}
|
||
|
|
||
|
.dropmenu {
|
||
|
padding-left:16px;
|
||
|
}
|
||
|
|
||
|
.playlisticon {
|
||
|
padding:0px;
|
||
|
margin-right:4px;
|
||
|
margin-bottom:2px;
|
||
|
margin-top:2px;
|
||
|
vertical-align:middle;
|
||
|
height: 12px;
|
||
|
width: 12px;
|
||
|
}
|
||
|
|
||
|
.collectionicon {
|
||
|
padding:0px;
|
||
|
margin-right:4px;
|
||
|
margin-bottom:2px;
|
||
|
margin-top:2px;
|
||
|
vertical-align:middle;
|
||
|
width:16px;
|
||
|
height:16px;
|
||
|
}
|
||
|
|
||
|
.playlisticonr {
|
||
|
padding:0px;
|
||
|
margin-left:4px;
|
||
|
margin-right:2px;
|
||
|
margin-bottom:2px;
|
||
|
margin-top:2px;
|
||
|
vertical-align:middle;
|
||
|
height: 12px;
|
||
|
width: 12px;
|
||
|
}
|
||
|
|
||
|
.rating-icon-big {
|
||
|
height: 20px;
|
||
|
width: 100px;
|
||
|
cursor: pointer;
|
||
|
vertical-align:middle;
|
||
|
}
|
||
|
|
||
|
.rating-icon-small {
|
||
|
height: 14px;
|
||
|
width: 70px;
|
||
|
cursor: pointer;
|
||
|
vertical-align:middle;
|
||
|
}
|
||
|
|
||
|
.headercontainer {
|
||
|
height:90%;
|
||
|
box-sizing:border-box;
|
||
|
}
|
||
|
|
||
|
.background-left {
|
||
|
background-position: left !important;
|
||
|
max-height: 24px;
|
||
|
}
|
||
|
|
||
|
.background-right {
|
||
|
background-position: right !important;
|
||
|
max-height: 24px;
|
||
|
}
|
||
|
|
||
|
#sourcescontrols i, #chooserbuttons i, #playlistcontrols i {
|
||
|
max-width: 24px;
|
||
|
}
|
||
|
|
||
|
i.topdrop
|
||
|
{
|
||
|
position: relative;
|
||
|
font-style: normal;
|
||
|
}
|
||
|
|
||
|
.dragmenu {
|
||
|
cursor:move;
|
||
|
}
|
||
|
|
||
|
.menuitem {
|
||
|
font-weight:bold;
|
||
|
margin:0px;
|
||
|
padding-left:8px;
|
||
|
padding-right:0px;
|
||
|
padding-top:2px;
|
||
|
padding-bottom:2px;
|
||
|
-webkit-box-align:center;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
.playlistitem.menuitem {
|
||
|
align-items: inherit !important;
|
||
|
}
|
||
|
|
||
|
.playlistalbum {
|
||
|
font-weight:bold;
|
||
|
margin:0px;
|
||
|
padding-left:4px;
|
||
|
padding-right:0px;
|
||
|
padding-top:4px;
|
||
|
padding-bottom:2px;
|
||
|
-webkit-box-align:stretch;
|
||
|
align-items: stretch;
|
||
|
}
|
||
|
|
||
|
.mh {
|
||
|
margin-right:6px;
|
||
|
display:block;
|
||
|
margin-top:2px;
|
||
|
margin-bottom:2px;
|
||
|
}
|
||
|
|
||
|
.menu {
|
||
|
width:14px;
|
||
|
height: 14px;
|
||
|
vertical-align:middle;
|
||
|
cursor:pointer;
|
||
|
}
|
||
|
|
||
|
.ninesix {
|
||
|
font-size:96%;
|
||
|
padding-top:2px;
|
||
|
}
|
||
|
|
||
|
.indent {
|
||
|
margin-left:16px;
|
||
|
}
|
||
|
|
||
|
.padright {
|
||
|
padding-right:4px;
|
||
|
}
|
||
|
|
||
|
.buttonchange {
|
||
|
text-align:center;
|
||
|
}
|
||
|
|
||
|
.outhack {
|
||
|
width:14px;
|
||
|
height:14px;
|
||
|
margin-top:2px;
|
||
|
}
|
||
|
|
||
|
.cshrinker {
|
||
|
max-width:400px;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
=====================================================================
|
||
|
= Info Panel - General
|
||
|
=====================================================================
|
||
|
*/
|
||
|
|
||
|
.info-box-fixed {
|
||
|
-webkit-box-flex:0;
|
||
|
flex-grow: 0;
|
||
|
flex-shrink:0;
|
||
|
}
|
||
|
|
||
|
.info-border-right {
|
||
|
border-right: 1px solid #454545;
|
||
|
padding-right:1em;
|
||
|
max-width:240px;
|
||
|
}
|
||
|
|
||
|
.info-box-expand {
|
||
|
-webkit-box-flex:1.0;
|
||
|
flex-grow: 1;
|
||
|
flex-shrink: 1;
|
||
|
flex-basis: auto;
|
||
|
}
|
||
|
|
||
|
.info-detail-layout {
|
||
|
margin-top:8px;
|
||
|
}
|
||
|
|
||
|
.cleft {
|
||
|
border-left: 1px solid #454545;
|
||
|
padding-left:1em;
|
||
|
margin-left:1em;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
=====================================================================
|
||
|
= Dropdown Menus
|
||
|
=====================================================================
|
||
|
*/
|
||
|
|
||
|
div.normalmenu
|
||
|
{
|
||
|
width:25vw;
|
||
|
max-width:360px;
|
||
|
min-width:240px;
|
||
|
}
|
||
|
|
||
|
div.widemenu
|
||
|
{
|
||
|
width:40vw;
|
||
|
max-width:640px;
|
||
|
min-width:400px;
|
||
|
}
|
||
|
|
||
|
div.leftmenu
|
||
|
{
|
||
|
top: 30px;
|
||
|
left: 0px;
|
||
|
}
|
||
|
|
||
|
div.rightmenu
|
||
|
{
|
||
|
top:30px;
|
||
|
right:-12px;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
=====================================================================
|
||
|
= Podcasts
|
||
|
=====================================================================
|
||
|
*/
|
||
|
|
||
|
.podicon {
|
||
|
padding:0px;
|
||
|
margin:2px;
|
||
|
height:16px;
|
||
|
width:16px;
|
||
|
vertical-align:middle;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
=====================================================================
|
||
|
= Responsive Layout
|
||
|
=====================================================================
|
||
|
*/
|
||
|
|
||
|
@media screen and (max-width: 480px) {
|
||
|
#notifications {
|
||
|
width: 90% !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media screen and (min-height: 800px) and (max-height: 939px) {
|
||
|
.infobarlayout {
|
||
|
height:115px;
|
||
|
}
|
||
|
#albumcover {
|
||
|
height: 107px;
|
||
|
padding-right:6px;
|
||
|
}
|
||
|
#albumpicture {
|
||
|
height: 107px;
|
||
|
}
|
||
|
#nowplaying {
|
||
|
height: 85px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media screen and (min-height: 940px) and (max-height: 1099px) {
|
||
|
.infobarlayout {
|
||
|
height:140px;
|
||
|
}
|
||
|
#albumcover {
|
||
|
height: 132px;
|
||
|
padding-right:8px;
|
||
|
}
|
||
|
#albumpicture {
|
||
|
height: 132px;
|
||
|
}
|
||
|
#nowplaying {
|
||
|
height: 110px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media screen and (min-height: 1100px) {
|
||
|
.infobarlayout {
|
||
|
height:160px;
|
||
|
}
|
||
|
#albumcover {
|
||
|
height: 152px;
|
||
|
padding-right:8px;
|
||
|
}
|
||
|
#albumpicture {
|
||
|
height: 152px;
|
||
|
}
|
||
|
#nowplaying {
|
||
|
height: 130px;
|
||
|
}
|
||
|
}
|
||
|
|