You are here

Home » API reference » SoundManager2 6

page-player.css in SoundManager2 6 

/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------
 http://schillmania.com/projects/soundmanager2/

 Modified for Drupal integration by davebv
 http://www.davebv.com

*/

.spectrum-container {
 display:none;
}

ul.use-spectrum li.sm2_playing .spectrum-container {
 position:absolute;
 left:0px;
 top:0px;
 margin-left:-266px;
 margin-top:-1px;
 display:block;
 background-color:#5588bb;
 border:1px solid #99ccff;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
}

ul.use-spectrum .spectrum-box {
 position:relative;
 width:255px;
 font-size:1em;
 padding:2px 0px;
 height:1.2em;
 overflow:hidden;
}

ul.use-spectrum .spectrum-box .spectrum {
 position:absolute;
 left:0px;
 top:-2px;
 margin-top:20px;
 display:block;
 font-size:1px;
 width:1px;
 height:1px; /* set to 50px for a thick line, 1px for a thin line, etc. */
 overflow:hidden;
 background-color:#fff;
}

ul.playlist {
 list-style-type: none;
 margin:0px;
 padding:0px;

}

ul.playlist li {
 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 position:relative;
 display:block;
 width:auto;
 font-size:1.5em;
 color:#666;
 padding:0.25em 0.5em 0.25em 0.5em;
 border:none;
 letter-spacing:-1px; /* ZOMG WEB X.0. ;) */
 background-color:#f9f9f9;
 background-image: none;
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.15s ease-in-out;
}

ul.playlist li a {
 display:block;
 text-decoration:none;
 font-weight:normal;
 color:#000;
 font-size:120%;
 outline:none;
 position:relative;
 z-index:2;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused,
ul.playlist li.sm2_playing a {
 color:#fff;
 border-radius:3px;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
}

ul.playlist li:hover {
 background-color:#eee;
}

ul.playlist li:hover a {
 color:#333;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover {
 background-color:#6699cc;
}

ul.playlist li.sm2_paused {
 background-color:#999;
}

ul.playlist li.sm2_playing:hover a,
ul.playlist li.sm2_paused a {
 color:#fff;
}

ul.playlist li .controls {
 display:none;
}

ul.playlist li .peak,
ul.playlist.use-peak li .peak {
 display:none;
 position:absolute;
 top:0.55em;
 right:0.5em;
}

ul.playlist li.sm2_playing .controls,
ul.playlist li.sm2_paused .controls {
 position:relative;
 display:block;
}

ul.playlist.use-peak li.sm2_playing .peak,
ul.playlist.use-peak li.sm2_paused .peak {
 display:inline;
 display:inline-block;
}

ul.playlist.use-peak li .peak {
 display:none; /* IE 7 */
}

ul.playlist li.sm2_paused .controls {
 background-color:#666;
}

ul.playlist li:hover .controls .statusbar {
 position:relative;
 cursor:ew-resize;
 cursor:-moz-grab;
 cursor:grab;
}

ul.playlist li.sm2_paused .controls .statusbar {
 background-color:#ccc;
}

ul.playlist li .controls {
 position:relative;
 margin-top:0.25em;
 margin-bottom:0.25em;
 background-color:#99ccff;
}

ul.playlist li .controls .statusbar {
 position:relative;
 height:0.5em;
 background-color:#ccddff;
 border:2px solid #fff;
 border-radius:2px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 overflow:hidden;
 cursor:-moz-grab;
 cursor:grab;
}

ul.playlist li .controls.dragging .statusbar {
 cursor:-moz-grabbing;
 cursor:grabbing;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading,
ul.playlist li .controls .statusbar .annotation {
 position:absolute;
 left:0px;
 top:0px;
 height:0.5em;
}

ul.playlist li .controls .statusbar .position {
 background-color:#336699;
 border-right:3px solid #336699;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

ul.playlist li.sm2_paused .controls .statusbar .position {
 background-color:#666;
 border-color:#666;
}

ul.playlist li .controls .statusbar .loading {
 background-color:#eee;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
 width:0px;
}

ul.playlist li.sm2_playing a.sm2_link,
ul.playlist li.sm2_paused a.sm2_link {
 margin-right:4.5em; /* room for timing stuff */
}

ul.playlist li .timing {
 position:absolute;
 display:none;
 text-align:right;
 right:1em;
 top:1em;
 width:auto;
 height:1em;
 padding:3px 5px;
 background-color:#5588bb;
 border:1px solid #99ccff;
 -moz-border-radius:4px;
 -khtml-border-radius:4px;
 border-radius:4px;
 letter-spacing:0px;
 font:44% monaco,"VT-100",terminal,"lucida console",courier,system;
 line-height:1em;
 vertical-align:middle;
}

ul.playlist.use-peak li .timing {
 right:4.25em;
}

ul.playlist li:hover .timing {
 z-index:2;
}

ul.playlist li .timing div.sm2_timing {
 margin:0px;
 padding:0px;
 margin-top:-1em;
}

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
 display:block;
}

ul.playlist li.sm2_paused .timing .sm2_position {
 text-decoration:blink; /* hee hee. first actual appropriate use? :D */
}

ul.playlist li.sm2_paused .timing,
ul.playlist.use-peak li.sm2_paused .peak {
 background-color:#888;
 border-color:#ccc;
}

/* peak data */

/* ul.playlist ... */

ul.playlist.use-peak li .peak {
 display:none;
 zoom:1;
 border:1px solid #99ccff;
 padding:2px;
 height:0.55em;
 -moz-border-radius:4px;
 -khtml-border-radius:4px;
 border-radius:4px;
 background-color:#5588bb;
 width:0.8em;
 height:0.55em;
 margin-top:-3px;
}

ul.playlist.use-peak li .peak-box {
 position:relative;
 width:100%;
 height:0.55em;
 overflow:hidden;
}

ul.playlist li .peak .l,
ul.playlist li .peak .r {
 position:absolute;
 left:0px;
 top:0px;
 width:7px;
 height:50px;
 background:#fff;
 border:1px solid #fff;
 -moz-border-radius:1px;
 -khtml-border-radius:1px;
 margin-top:1em;
}

ul.playlist li .peak .l {
 margin-right:1px;
}

ul.playlist li .peak .r {
 left:10px;
}

#control-template {
 display:none;
}

.sm2-filelink {
  font-size:0.6em;
  color: black;
  display: block;
}

ul.playlist div.sm2-filelink a {
  color: black;
}
ul.playlist div.sm2-filelink li.sm2_playing a,
ul.playlist div.sm2-filelink li.sm2_paused a {
  color: black;
}


.sm2-playhover {
  float:left;
  font-size: 0.8em;
}

.soundmanager2-outer {
  clear:both;
}

File

page-player.css
View source 
  1. /*

  2. 

  3.  SoundManager 2: "page as playlist" example

  4.  ------------------------------------------

  5.  http://schillmania.com/projects/soundmanager2/

  6. 

  7.  Modified for Drupal integration by davebv

  8.  http://www.davebv.com

  9. 

  10. */

  11. 

  12. .spectrum-container {

  13.  display:none;

  14. }

  15. 

  16. ul.use-spectrum li.sm2_playing .spectrum-container {

  17.  position:absolute;

  18.  left:0px;

  19.  top:0px;

  20.  margin-left:-266px;

  21.  margin-top:-1px;

  22.  display:block;

  23.  background-color:#5588bb;

  24.  border:1px solid #99ccff;

  25.  -moz-border-radius:4px;

  26.  -webkit-border-radius:4px;

  27.  border-radius:4px;

  28. }

  29. 

  30. ul.use-spectrum .spectrum-box {

  31.  position:relative;

  32.  width:255px;

  33.  font-size:1em;

  34.  padding:2px 0px;

  35.  height:1.2em;

  36.  overflow:hidden;

  37. }

  38. 

  39. ul.use-spectrum .spectrum-box .spectrum {

  40.  position:absolute;

  41.  left:0px;

  42.  top:-2px;

  43.  margin-top:20px;

  44.  display:block;

  45.  font-size:1px;

  46.  width:1px;

  47.  height:1px; /* set to 50px for a thick line, 1px for a thin line, etc. */

  48.  overflow:hidden;

  49.  background-color:#fff;

  50. }

  51. 

  52. ul.playlist {

  53.  list-style-type: none;

  54.  margin:0px;

  55.  padding:0px;

  56. 

  57. }

  58. 

  59. ul.playlist li {

  60.  /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */

  61.  position:relative;

  62.  display:block;

  63.  width:auto;

  64.  font-size:1.5em;

  65.  color:#666;

  66.  padding:0.25em 0.5em 0.25em 0.5em;

  67.  border:none;

  68.  letter-spacing:-1px; /* ZOMG WEB X.0. ;) */

  69.  background-color:#f9f9f9;

  70.  background-image: none;

  71.  -webkit-transition-property: hover;

  72.  -webkit-transition: background-color 0.15s ease-in-out;

  73. }

  74. 

  75. ul.playlist li a {

  76.  display:block;

  77.  text-decoration:none;

  78.  font-weight:normal;

  79.  color:#000;

  80.  font-size:120%;

  81.  outline:none;

  82.  position:relative;

  83.  z-index:2;

  84. }

  85. 

  86. ul.playlist li.sm2_playing,

  87. ul.playlist li.sm2_paused,

  88. ul.playlist li.sm2_playing a {

  89.  color:#fff;

  90.  border-radius:3px;

  91.  -webkit-border-radius:3px;

  92.  -moz-border-radius:3px;

  93. }

  94. 

  95. ul.playlist li:hover {

  96.  background-color:#eee;

  97. }

  98. 

  99. ul.playlist li:hover a {

  100.  color:#333;

  101. }

  102. 

  103. ul.playlist li.sm2_playing,

  104. ul.playlist li.sm2_playing:hover {

  105.  background-color:#6699cc;

  106. }

  107. 

  108. ul.playlist li.sm2_paused {

  109.  background-color:#999;

  110. }

  111. 

  112. ul.playlist li.sm2_playing:hover a,

  113. ul.playlist li.sm2_paused a {

  114.  color:#fff;

  115. }

  116. 

  117. ul.playlist li .controls {

  118.  display:none;

  119. }

  120. 

  121. ul.playlist li .peak,

  122. ul.playlist.use-peak li .peak {

  123.  display:none;

  124.  position:absolute;

  125.  top:0.55em;

  126.  right:0.5em;

  127. }

  128. 

  129. ul.playlist li.sm2_playing .controls,

  130. ul.playlist li.sm2_paused .controls {

  131.  position:relative;

  132.  display:block;

  133. }

  134. 

  135. ul.playlist.use-peak li.sm2_playing .peak,

  136. ul.playlist.use-peak li.sm2_paused .peak {

  137.  display:inline;

  138.  display:inline-block;

  139. }

  140. 

  141. ul.playlist.use-peak li .peak {

  142.  display:none; /* IE 7 */

  143. }

  144. 

  145. ul.playlist li.sm2_paused .controls {

  146.  background-color:#666;

  147. }

  148. 

  149. ul.playlist li:hover .controls .statusbar {

  150.  position:relative;

  151.  cursor:ew-resize;

  152.  cursor:-moz-grab;

  153.  cursor:grab;

  154. }

  155. 

  156. ul.playlist li.sm2_paused .controls .statusbar {

  157.  background-color:#ccc;

  158. }

  159. 

  160. ul.playlist li .controls {

  161.  position:relative;

  162.  margin-top:0.25em;

  163.  margin-bottom:0.25em;

  164.  background-color:#99ccff;

  165. }

  166. 

  167. ul.playlist li .controls .statusbar {

  168.  position:relative;

  169.  height:0.5em;

  170.  background-color:#ccddff;

  171.  border:2px solid #fff;

  172.  border-radius:2px;

  173.  -moz-border-radius:2px;

  174.  -webkit-border-radius:2px;

  175.  overflow:hidden;

  176.  cursor:-moz-grab;

  177.  cursor:grab;

  178. }

  179. 

  180. ul.playlist li .controls.dragging .statusbar {

  181.  cursor:-moz-grabbing;

  182.  cursor:grabbing;

  183. }

  184. 

  185. ul.playlist li .controls .statusbar .position,

  186. ul.playlist li .controls .statusbar .loading,

  187. ul.playlist li .controls .statusbar .annotation {

  188.  position:absolute;

  189.  left:0px;

  190.  top:0px;

  191.  height:0.5em;

  192. }

  193. 

  194. ul.playlist li .controls .statusbar .position {

  195.  background-color:#336699;

  196.  border-right:3px solid #336699;

  197.  border-radius:3px;

  198.  -moz-border-radius:3px;

  199.  -webkit-border-radius:3px;

  200. }

  201. 

  202. ul.playlist li.sm2_paused .controls .statusbar .position {

  203.  background-color:#666;

  204.  border-color:#666;

  205. }

  206. 

  207. ul.playlist li .controls .statusbar .loading {

  208.  background-color:#eee;

  209. }

  210. 

  211. ul.playlist li .controls .statusbar .position,

  212. ul.playlist li .controls .statusbar .loading {

  213.  width:0px;

  214. }

  215. 

  216. ul.playlist li.sm2_playing a.sm2_link,

  217. ul.playlist li.sm2_paused a.sm2_link {

  218.  margin-right:4.5em; /* room for timing stuff */

  219. }

  220. 

  221. ul.playlist li .timing {

  222.  position:absolute;

  223.  display:none;

  224.  text-align:right;

  225.  right:1em;

  226.  top:1em;

  227.  width:auto;

  228.  height:1em;

  229.  padding:3px 5px;

  230.  background-color:#5588bb;

  231.  border:1px solid #99ccff;

  232.  -moz-border-radius:4px;

  233.  -khtml-border-radius:4px;

  234.  border-radius:4px;

  235.  letter-spacing:0px;

  236.  font:44% monaco,"VT-100",terminal,"lucida console",courier,system;

  237.  line-height:1em;

  238.  vertical-align:middle;

  239. }

  240. 

  241. ul.playlist.use-peak li .timing {

  242.  right:4.25em;

  243. }

  244. 

  245. ul.playlist li:hover .timing {

  246.  z-index:2;

  247. }

  248. 

  249. ul.playlist li .timing div.sm2_timing {

  250.  margin:0px;

  251.  padding:0px;

  252.  margin-top:-1em;

  253. }

  254. 

  255. ul.playlist li.sm2_playing .timing,

  256. ul.playlist li.sm2_paused .timing {

  257.  display:block;

  258. }

  259. 

  260. ul.playlist li.sm2_paused .timing .sm2_position {

  261.  text-decoration:blink; /* hee hee. first actual appropriate use? :D */

  262. }

  263. 

  264. ul.playlist li.sm2_paused .timing,

  265. ul.playlist.use-peak li.sm2_paused .peak {

  266.  background-color:#888;

  267.  border-color:#ccc;

  268. }

  269. 

  270. /* peak data */

  271. 

  272. /* ul.playlist ... */

  273. 

  274. ul.playlist.use-peak li .peak {

  275.  display:none;

  276.  zoom:1;

  277.  border:1px solid #99ccff;

  278.  padding:2px;

  279.  height:0.55em;

  280.  -moz-border-radius:4px;

  281.  -khtml-border-radius:4px;

  282.  border-radius:4px;

  283.  background-color:#5588bb;

  284.  width:0.8em;

  285.  height:0.55em;

  286.  margin-top:-3px;

  287. }

  288. 

  289. ul.playlist.use-peak li .peak-box {

  290.  position:relative;

  291.  width:100%;

  292.  height:0.55em;

  293.  overflow:hidden;

  294. }

  295. 

  296. ul.playlist li .peak .l,

  297. ul.playlist li .peak .r {

  298.  position:absolute;

  299.  left:0px;

  300.  top:0px;

  301.  width:7px;

  302.  height:50px;

  303.  background:#fff;

  304.  border:1px solid #fff;

  305.  -moz-border-radius:1px;

  306.  -khtml-border-radius:1px;

  307.  margin-top:1em;

  308. }

  309. 

  310. ul.playlist li .peak .l {

  311.  margin-right:1px;

  312. }

  313. 

  314. ul.playlist li .peak .r {

  315.  left:10px;

  316. }

  317. 

  318. #control-template {

  319.  display:none;

  320. }

  321. 

  322. .sm2-filelink {

  323.   font-size:0.6em;

  324.   color: black;

  325.   display: block;

  326. }

  327. 

  328. ul.playlist div.sm2-filelink a {

  329.   color: black;

  330. }

  331. ul.playlist div.sm2-filelink li.sm2_playing a,

  332. ul.playlist div.sm2-filelink li.sm2_paused a {

  333.   color: black;

  334. }

  335. 

  336. 

  337. .sm2-playhover {

  338.   float:left;

  339.   font-size: 0.8em;

  340. }

  341. 

  342. .soundmanager2-outer {

  343.   clear:both;

  344. }