minify resources
This commit is contained in:
Luke Pulverenti
parent
8a6884abef
commit
661eeac16e
201 changed files with 203 additions and 52376 deletions
|
|
@ -1,264 +1 @@
|
|||
.nowPlayingText {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -7px;
|
||||
margin: 0 0 0 3px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
.mediaButton.active {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.nowPlayingText {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.nowPlayingText {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.nowPlayingText {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingBarInfoContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.currentTime {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 110px;
|
||||
margin-right: 2em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Now playing bar */
|
||||
.nowPlayingBar {
|
||||
/* Above everything, except for the video player and popup overlays */
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/*box-shadow: 0 -2px 2px 0 rgba(0,0,0,.14),-1px 5px 1px rgba(0,0,0,.12);*/
|
||||
will-change: transform;
|
||||
contain: layout style;
|
||||
font-size: 90%;
|
||||
transition: transform 200ms ease-out;
|
||||
}
|
||||
|
||||
.nowPlayingBar-hidden {
|
||||
transform: translate3d(0,100%,0);
|
||||
}
|
||||
|
||||
.hiddenNowPlayingBar .nowPlayingBar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarTop {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
|
||||
vertical-align: middle;
|
||||
color: #e8e8e8;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mediaButton i {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.mediaButton.muteButton i, .mediaButton.unmuteButton i, .mediaButton.castButton i, .mediaButton.infoButton i {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.nowPlayingImage {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.nowPlayingImage img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.nowPlayingImage img {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.nowPlayingBar .nowPlayingImage {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.nowPlayingBarText {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
max-width: 130px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.repeatActive {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.nowPlayingBarText {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.nowPlayingBarText {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.nowPlayingBarText {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.nowPlayingBarText {
|
||||
max-width: 300px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.nowPlayingBarText {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingBarCenter {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
margin-top: 6px;
|
||||
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
right: 200px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionContainer {
|
||||
position: absolute !important;
|
||||
left: 64px;
|
||||
top: -8px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionContainer .mdl-slider__background-upper {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.headroom--unpinned .nowPlayingBarPositionContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.noMediaProgress .nowPlayingBarPositionContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nowPlayingBarRight {
|
||||
position: relative;
|
||||
margin: 0 1em 0 auto;
|
||||
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nowPlayingBarCurrentTime {
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.nowPlayingBarVolumeSliderContainer {
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.nowPlayingBarUserDataButtons {
|
||||
display: inline-block;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: 1400px) {
|
||||
|
||||
.nowPlayingBarUserDataButtons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 1100px) {
|
||||
|
||||
.nowPlayingBarVolumeSliderContainer, .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
|
||||
.nowPlayingBarCurrentTime {
|
||||
padding-left: 0;
|
||||
top: 22px;
|
||||
right: 140px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.nowPlayingBarCenter > *:not(.nowPlayingBarCurrentTime) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.toggleRepeatButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.nowPlayingBarRight .playPauseButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
|
||||
.nowPlayingBarCurrentTime {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.nowPlayingBarText,.nowPlayingText{overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}.nowPlayingText{display:inline-block;position:relative;top:-7px;margin:0 0 0 3px;vertical-align:middle;text-align:left;max-width:130px}.mediaButton.active{color:#52B54B}@media (min-width:500px){.nowPlayingText{max-width:180px}}@media (min-width:600px){.nowPlayingText{max-width:200px}}@media (min-width:800px){.nowPlayingText{margin-right:30px}}.nowPlayingBarInfoContainer{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.currentTime{display:inline-block;vertical-align:middle;max-width:110px;margin-right:2em;font-weight:400}.nowPlayingBar{color:#fff;text-align:center;will-change:transform;contain:layout style;font-size:90%;-webkit-transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out}.nowPlayingBar-hidden{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.hiddenNowPlayingBar .nowPlayingBar{display:none!important}.nowPlayingBarTop{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.mediaButton,.nowPlayingBarUserDataButtons .btnUserItemRating{vertical-align:middle;color:#e8e8e8;margin:0;text-align:center}.mediaButton i{height:1em;width:1em;font-size:36px}.mediaButton.castButton i,.mediaButton.infoButton i,.mediaButton.muteButton i,.mediaButton.unmuteButton i{font-size:24px}.nowPlayingImage{display:inline-block;vertical-align:middle;margin-right:1em}.nowPlayingImage img{vertical-align:bottom;height:64px}.nowPlayingBar .nowPlayingImage{width:64px;height:64px;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;background-size:contain}.nowPlayingBarText{vertical-align:middle;text-align:left;max-width:130px;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1}.repeatActive{color:#52B54B}@media (min-width:500px){.nowPlayingBarText{max-width:180px}}@media (min-width:600px){.nowPlayingBarText{max-width:200px}}@media (min-width:700px){.nowPlayingBarText{max-width:240px}}@media (min-width:800px){.nowPlayingBarText{max-width:300px;margin-right:30px}}@media (min-width:900px){.nowPlayingBarText{max-width:400px}}.nowPlayingBarCenter{vertical-align:middle;text-align:center;margin-top:6px;z-index:2;position:absolute;left:200px;right:200px;top:0}.nowPlayingBarPositionContainer{position:absolute!important;left:64px;top:-8px;right:0;z-index:1}.nowPlayingBarPositionContainer .mdl-slider__background-upper{background:#333}.headroom--unpinned .nowPlayingBarPositionContainer,.noMediaProgress .nowPlayingBarPositionContainer{display:none}.nowPlayingBarRight{position:relative;margin:0 1em 0 auto;z-index:2;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.nowPlayingBarCurrentTime{vertical-align:middle;font-weight:400;text-align:center;display:inline-block;margin:0 auto;padding-left:50px}.nowPlayingBarVolumeSliderContainer{margin-right:2em}.nowPlayingBarUserDataButtons{display:inline-block;margin-left:2em;margin-right:2em}@media all and (max-width:1400px){.nowPlayingBarUserDataButtons{display:none}}@media all and (max-width:1100px){.nowPlayingBar .muteButton,.nowPlayingBar .unmuteButton,.nowPlayingBarVolumeSliderContainer{display:none!important}}@media all and (max-width:800px){.nowPlayingBarCurrentTime{padding-left:0;top:22px;right:140px;position:absolute}.nowPlayingBarCenter>:not(.nowPlayingBarCurrentTime){display:none!important}.toggleRepeatButton{display:none}}@media all and (min-width:800px){.nowPlayingBarRight .playPauseButton{display:none}}@media all and (max-width:600px){.nowPlayingBarCurrentTime{display:none}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue