wyrian/js/libs/soundmanager/demo/360-player/360player-visualization.css
Guillaume DE LA RUE 28e7b63568 Version 0.2b :
- Intro Screen
- Share buttons (Twitter/Facebook)
- SoundManager
- Add audio files
- Some CleanUp
2011-02-13 13:28:40 +01:00

101 lines
2 KiB
CSS

/* larger canvas, spectrum + EQ visualization and other items */
.ui360,
.sm2-360ui {
/* size of the container for the circle, etc. */
width:256px;
height:256px;
}
.ui360 {
position:relative;
/* a little extra spacing */
padding-top:1px;
padding-bottom:1px;
margin-bottom:-18px; /* approximate "line height" we want */
padding-left:248px;
margin-left:0px;
background-position:22.6% 50%; /* (~109px) initial play button position */
}
.ui360 a {
font:14px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
white-space:nowrap;
line-height:256px;
}
.sm2-360ui {
margin-left:-256px;
}
.ui360 .sm2-timing {
line-height:256px;
}
.ui360 .sm2-timing {
font:bold 24px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
color:#333;
text-align:center;
line-height:256px;
text-indent:0px;
}
.sm2-inline-list .ui360,
.sm2-inline-list .sm2-360ui {
margin-left:0px;
}
.sm2-inline-list .ui360 {
margin:8px 13px 7px 0px;
padding-left:0px;
background-position:50% 50%; /* initial play button position */
}
.sm2-inline-list .sm2-360ui {
border:1px solid #eee;
/* offset the border */
margin-left:-1px;
margin-top:-1px;
}
.sm2-inline-list .ui360 a {
position:absolute;
display:inline;
left:0px;
bottom:0px;
width:100%; /* 2px padding in box */
height:100%;
*height:256px; /* IE is dumb. */
overflow:hidden;
font-size:small;
font-weight:300;
color:#333;
margin:0px;
padding:0px;
line-height:488px; /* bottom vertical alignment for text */
*line-height:480px; /* IE again */
text-align:center;
-moz-border-radius:0px;
-khtml-border-radius:0px;
border-radius:0px;
}
.sm2-inline-list .ui360:hover {
background-color:#fbfbfb;
}
.sm2-inline-list .ui360 a.sm2_link:hover,
.sm2-inline-list .ui360 a:focus,
.sm2-inline-list .ui360 a:active {
background-color:transparent;
}
/* Use a bigger loading image for this layout */
.ui360:hover .sm2-360btn-default {
background:transparent url(360-button-play-light.png) no-repeat 50% 50%;
_background:transparent url(360-button-play.gif) no-repeat 50% 50%;
cursor:pointer;
}