/* ===================================================================== = Specific Elements By ID ===================================================================== */ #infobar { width:100%; padding-top:4px; margin:0px; } #progress { font-size:4px; width: 100%; } #playbackTime { font-weight:bold; font-size:11px; padding-top:1px; height:15px; line-height:15px; text-align:center; width:100%; height:15px; } #albumcover { margin:0px; z-index:500; } #upcoming { max-width:35%; min-width:20%; height:100%; overflow:hidden; font-size:90%; } #uptrackcount, #uptimecount { font-weight:bold; } #upcontents { line-height:110%; } #albumpicture { width: auto; } .timebox { min-width: 4em; font-size:9pt; font-weight:bold; line-height:100%; } .tboxl { text-align:left; } .tboxr { text-align:right; } #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 { box-shadow: none !important; } #firefoxisshitwrapper { overflow:hidden; } #nptext { width:auto; overflow:hidden; } #gronky { margin-left:8px; margin-right:8px; font-size:8pt; } #amontobin { padding-top:4px; } #infopane { height:100%; overflow:auto; position:relative; display:block; } #dbtags { overflow:hidden; opacity:0.9; font-size:8pt; height:22px; line-height:22px; } #tagadder { width:400px; padding-right:8px; padding-bottom:4px; } #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:42px; height:100%; } #headerbar i { display: block; margin-top: 12px; margin-left:8px; width: 28px; height: 32px; } #infopanecontrols { text-align: center; } #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:500px; padding:8px; top:0px; display:none; z-index:2000; left: 0; right: 0; margin: 0 auto; } #keybindtable { margin-bottom:1em; } #outputbox { max-width:20%; } #mobileplaylistcontrols { display:none; } #plmode { font-size:8pt; height:22px; line-height:22px; } div[id^=zalbum] .podcastresume>.fixed { padding-left: 24px; } #flowcontrols { height: 36px; } #flowcontrols i { max-height: 24px; margin-top:4px; } /* ===================================================================== = General Classes ===================================================================== */ .infobarlayout { margin-left:6px; margin-right:6px; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:2px; padding-left:0px; padding-right:0px; height:90px; } .infobarnoheight { margin-left:6px; margin-right:6px; margin-top:2px; margin-bottom:2px; padding-top:0px; padding-left:0px; padding-right:0px; } .nopadright { margin-right:0px !important; } .tinycover { margin-right:8px; width:28px; height:auto; } .controlbutton-left { margin-right:6px; margin-left:6px; } .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; height: 24px; width:24px; margin-bottom:2px; cursor: pointer; vertical-align:middle; } .smallcover { transition: width 0.5s ease; max-width:300px; } #infopane .dropmenu { margin-bottom: 20px; padding-left: 0px; } .dropmenu { padding-left:16px; } .npicon { padding:0px; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:4px; height:20px; width:20px; vertical-align:middle; } .playlisticon { padding:0px; margin-right:4px; margin-bottom:2px; margin-top:2px; vertical-align:middle; height: 12px; width: 12px; } .prearranger { display:none; } .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 { max-height:36px; } .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 { 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; } .smallpluginicon { padding:0px; margin-right:4px; margin-bottom:2px; margin-top:1px; vertical-align:middle; } .collectionpanel { box-sizing: border-box; border-left: 4px solid transparent; } /* ===================================================================== = 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 (max-height: 1099px) { .infobarlayout { height:140px; } #albumcover { height: 162px; } #albumpicture { height: 158px; padding: 2px; } #nowplaying { height: 110px; } .controlbutton-small { width:24px !important; height:24px !important; margin-top:6px !important; margin-left:4px !important; } .controlbutton-main { width:32px !important; height:32px !important; margin-top:6px !important; } .smallpluginicon { height: 20px !important; width: 18px !important; } } @media screen and (min-height: 1100px) { .infobarlayout { height:160px; } #albumcover { height: 182px; } #albumpicture { height: 178px; padding: 2px; } #nowplaying { height: 130px; } .controlbutton-small { width:28px !important; height:28px !important; margin-top:6px !important; margin-left:4px !important; } .controlbutton-main { width:36px !important; height:36px !important; margin-top:6px !important; } .smallpluginicon { height: 24px !important; width: 18px !important; } } /* ===================================================================== = Plugins - Alarm Clock ===================================================================== */ @-webkit-keyframes clickflash { 0%{ background-color: rgba(255,255,255,0.7); } 50%{ background-color: rgba(255,255,255,0.3); } 100%{ background-color: rgba(255,255,255,0); } } @-moz-keyframes clickflash { 0%{ background-color: rgba(255,255,255,0.7); } 50%{ background-color: rgba(255,255,255,0.3); } 100%{ background-color: rgba(255,255,255,0); } } @keyframes clickflash { 0%{ background-color: rgba(255,255,255,0.7); } 50%{ background-color: rgba(255,255,255,0.3); } 100%{ background-color: rgba(255,255,255,0); } } .clickflash { animation: clickflash 0.75s linear 1; } [class^="icon-"].menu, [class*=" icon-"].menu { width: 24px; height: 24px; box-sizing: border-box; border: 6px solid transparent; vertical-align:middle; } .collectionitem { box-sizing:border-box; border: 4px solid transparent; } .collectionitem.fixed.selecotron:not(.tagholder_wide)>.containerbox.wrap { height: 100%; } .collectionitem.fixed.selecotron:not(.tagholder_wide)>.containerbox.openmenu { height: 100%; } #podcastslist .tagholder_wide>.minwidthed2:before { content:""; width: 20em; display:block; overflow:hidden; } .collectionitem.fixed.selecotron.tagholder_wide>.radiochannel+.minwidthed2:before { content:""; width: 20em; display:block; overflow:hidden; } #pluginplaylistslist .collectionitem.brick_wide { margin-bottom:4px; } #pluginplaylistslist .collectionitem .helpfulalbum { padding-top:4px; padding-bottom:4px; } div.helpfulalbum>div.tagh.albumthing { max-width: 400px; } div.helpfulalbum>div.tagh.albumthing.jalopy200 { max-width: 200px; } #pluginplaylistslist .collectionitem .menuitem { padding-left:0px; height:100%; } #pluginplaylistslist .collectionitem .menuitem.vertical .svg-square { margin-right:0px; }