You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
3.4 KiB
182 lines
3.4 KiB
/* |
|
Optional styling for bbplayer elements. |
|
*/ |
|
|
|
.bbplayer { |
|
|
|
color:#01C675; |
|
/*--margin-left: 31%; |
|
padding-top: 29%;--*/ |
|
position:relative; |
|
padding: 10px 0 0px 0; |
|
} |
|
.bb-play { |
|
width: 32px; |
|
height: 32px; |
|
display: inline-block; |
|
background: url(../images/img_sprite.png)-800px -13px; |
|
vertical-align: middle; |
|
transition: none; |
|
margin-right: 10px; |
|
cursor: pointer; |
|
position: absolute; |
|
left: -4px; |
|
top: 5px; |
|
} |
|
|
|
/*--.bb-play:hover{ |
|
width: 24px; |
|
height: 26px; |
|
display: inline-block; |
|
background: url(../images/img-sprite.png)-7px -914px; |
|
vertical-align: middle; |
|
transition: none; |
|
margin-right: 10px; |
|
cursor: pointer; |
|
}--*/ |
|
.bb-playing{ |
|
width: 19px; |
|
height: 20px; |
|
display: inline-block; |
|
background: url(../images/img_sprite.png)-948px -11px; |
|
vertical-align: middle; |
|
transition: none; |
|
margin-right: 10px; |
|
cursor: pointer; |
|
} |
|
/*--.bb-playing { |
|
vertical-align: middle; |
|
background-image: url('../images/img-sprite.png'); |
|
background-position:-9px -917px; |
|
width: 20px; |
|
height: 20px; |
|
}--*/ |
|
.bb-trackLength { |
|
vertical-align: middle; |
|
line-height: 32px; |
|
display: inline-block; |
|
height: 32px; |
|
color: #38E3F5; |
|
font-size: 1.2em; |
|
} |
|
.bb-forward { |
|
/*--vertical-align: middle; |
|
display: inline-block; |
|
height: 50px; |
|
width: 50px; |
|
background: #38E3F5; |
|
background-image: url('../images/next.png'); |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
cursor: pointer; |
|
border-radius: 30em; |
|
-webkit-border-radius: 30em; |
|
-moz-border-radius: 30em; |
|
-o-border-radius: 30em;--*/ |
|
width: 20px; |
|
height: 20px; |
|
background: url(../images/img_sprite.png)-899px -18px; |
|
vertical-align: middle; |
|
transition: none; |
|
cursor: pointer; |
|
display: inline-block; |
|
margin: -14px 20px 0 8px; |
|
} |
|
.bb-rewind { |
|
/*--vertical-align: middle; |
|
display: inline-block; |
|
height: 50px; |
|
width: 50px; |
|
background: #38E3F5; |
|
background-image: url('../images/pre.png'); |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
cursor: pointer; |
|
border-radius: 30em; |
|
-webkit-border-radius: 30em; |
|
-moz-border-radius: 30em; |
|
-o-border-radius: 30em; |
|
margin: 0 1.5em 0 1em;--*/ |
|
|
|
width:20px; |
|
height: 20px; |
|
display: inline-block; |
|
background: url(../images/img_sprite.png)-853px -19px; |
|
vertical-align: middle; |
|
transition: none; |
|
cursor: pointer; |
|
margin: -14px 0 0 39px; |
|
} |
|
.bb-trackTime { |
|
vertical-align: middle; |
|
line-height: 32px; |
|
display: inline-block; |
|
height: 32px; |
|
color: #000; |
|
/* margin-left: 5%; */ |
|
font-size: 1em; |
|
font-weight: bold; |
|
|
|
} |
|
.bb-trackLength { |
|
vertical-align: middle; |
|
line-height: 32px; |
|
display: inline-block; |
|
height: 32px; |
|
color:#4fc1e9; |
|
font-size: 1em; |
|
font-weight: bold; |
|
} |
|
.bb-trackTitle { |
|
color: #000; |
|
font-weight: 400; |
|
text-transform: uppercase; |
|
position: absolute; |
|
left: 53%; |
|
top: 8%; |
|
font-size: 0.875em; |
|
border-bottom: 1px dashed #EEE; |
|
padding-bottom: 0.2em; |
|
width: 44%; |
|
} |
|
.bb-debug { |
|
height:10em; |
|
width: 32em; |
|
border: 1px solid #DDD; |
|
border-radius: 5px; |
|
margin: 10px; |
|
padding: 10px; |
|
overflow: auto; |
|
font-weight: normal; |
|
font-size: 14px/1.5; |
|
} |
|
.bb-label { |
|
font-size: 14px/1.5; |
|
font-weight: 300; |
|
margin: 10px; |
|
} |
|
p.bar{ |
|
font-size:3em; |
|
} |
|
@media (max-width:1366px){ |
|
.bb-forward { |
|
margin: -14px 6px 0 8px; |
|
} |
|
} |
|
|
|
@media (max-width:1280px){ |
|
.bb-rewind { |
|
margin: -14px 0 0 35px; |
|
} |
|
} |
|
@media (max-width:1024px){ |
|
.bb-rewind { |
|
margin: -3px 0 0 31px; |
|
} |
|
.bb-forward { |
|
margin: -3px 0px 0 1px; |
|
} |
|
.bb-play { |
|
top: 3px; |
|
} |
|
} |