You are here

Home » API reference » SoundManager2 6.2

360player-visualization.css in SoundManager2 6.2 

/* larger canvas, spectrum + EQ vis 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 */
 margin-left:248px; /* full width, minus a few */
}

.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;
}

.sm2-inline-list .sm2-360ui {
 border:1px solid #eee;
}

.sm2-inline-list .ui360 a {
 position:absolute;
 left:0px;
 bottom:0px;
 margin-left:1px;
 width:100%; /* 2px padding in box */
 height:auto;
 font-size:x-small;
 padding:2px 0px;
 color:#999;
 line-height:15px;
 text-align:center;
 display:inline;
 -moz-border-radius:0px;
 -khtml-border-radius:0px;
 border-radius:0px;
}

.sm2-inline-list .ui360 a:focus,
.sm2-inline-list .ui360 a:active {
 background-color:transparent;
}

/* Use a bigger loading image for this layout */

.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
  background:transparent url(icon_loading_spinner_bigger.gif) no-repeat 50% 50%;
  opacity:0.5;
  visibility:visible;
}

File

players/ui360/360player-visualization.css
View source 
  1. /* larger canvas, spectrum + EQ vis and other items */

  2. 

  3. .ui360{

  4. }

  5. .sm2-360ui {

  6.  /* size of the container for the circle, etc. */

  7.  width:256px;

  8.  height:256px;

  9. }

  10. 

  11. .ui360 {

  12.  position:relative;

  13.  /* a little extra spacing */

  14.  padding-top:1px;

  15.  padding-bottom:1px;

  16.  margin-bottom:-18px; /* approximate "line height" we want */

  17.  margin-left:248px; /* full width, minus a few */

  18. }

  19. 

  20. .ui360 a {

  21.  font:14px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;

  22.  white-space:nowrap;

  23.  line-height:256px;

  24. }

  25. 

  26. .sm2-360ui {

  27.  margin-left:-256px;

  28. }

  29. 

  30. .ui360 .sm2-timing {

  31.  line-height:256px;

  32. }

  33. 

  34. .ui360 .sm2-timing {

  35.  font:bold 24px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;

  36.  color:#333;

  37.  text-align:center;

  38.  line-height:256px;

  39.  text-indent:0px;

  40. }

  41. 

  42. .sm2-inline-list .ui360,

  43. .sm2-inline-list .sm2-360ui {

  44.  margin-left:0px;

  45. }

  46. 

  47. .sm2-inline-list .ui360 {

  48.  margin:8px 13px 7px 0px;

  49. }

  50. 

  51. .sm2-inline-list .sm2-360ui {

  52.  border:1px solid #eee;

  53. }

  54. 

  55. .sm2-inline-list .ui360 a {

  56.  position:absolute;

  57.  left:0px;

  58.  bottom:0px;

  59.  margin-left:1px;

  60.  width:100%; /* 2px padding in box */

  61.  height:auto;

  62.  font-size:x-small;

  63.  padding:2px 0px;

  64.  color:#999;

  65.  line-height:15px;

  66.  text-align:center;

  67.  display:inline;

  68.  -moz-border-radius:0px;

  69.  -khtml-border-radius:0px;

  70.  border-radius:0px;

  71. }

  72. 

  73. .sm2-inline-list .ui360 a:focus,

  74. .sm2-inline-list .ui360 a:active {

  75.  background-color:transparent;

  76. }

  77. 

  78. /* Use a bigger loading image for this layout */

  79. 

  80. .ui360 .sm2-360ui.sm2_buffering .sm2-360btn,

  81. .ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {

  82.   background:transparent url(icon_loading_spinner_bigger.gif) no-repeat 50% 50%;

  83.   opacity:0.5;

  84.   visibility:visible;

  85. }