28e7b63568
- Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
212 lines
4.3 KiB
CSS
212 lines
4.3 KiB
CSS
/*
|
|
|
|
SoundManager 2: In-page MP3 player example
|
|
------------------------------------------
|
|
|
|
Clicks on links to MP3s are intercepted via JS, calls are
|
|
made to SoundManager to load/play sounds. CSS classes are
|
|
appended to the link, which are used to highlight the
|
|
current play state and so on.
|
|
|
|
Class names are applied in addition to "sm2_link" base.
|
|
|
|
Default:
|
|
|
|
sm2_link
|
|
|
|
Additional states:
|
|
|
|
sm2_playing
|
|
sm2_paused
|
|
|
|
eg.
|
|
|
|
<!-- default -->
|
|
<a href="some.mp3" class="sm2_link">some.mp3</a>
|
|
|
|
<!-- playing -->
|
|
<a href="some.mp3" class="sm2_link sm2_playing">some.mp3</a>
|
|
|
|
|
|
Note you don't require ul.graphic / ul.flat etc. for your use
|
|
if only using one style on a page. You can just use .sm2_link{}
|
|
and so on, but isolate the CSS you want.
|
|
|
|
Side note: Would do multiple class definitions eg.
|
|
|
|
a.sm2_default.sm2_playing{}
|
|
|
|
.. except IE 6 has a parsing bug which may break behaviour,
|
|
applying sm2_playing {} even when the class is set to sm2_default.
|
|
|
|
|
|
If you want to make your own UI from scratch, here is the base:
|
|
|
|
Default + hover state, "click to play":
|
|
|
|
a.sm2_link {}
|
|
a.sm2_link:hover {}
|
|
|
|
Playing + hover state, "click to pause":
|
|
|
|
a.sm2_playing {}
|
|
a.sm2_playing:hover {}
|
|
|
|
Paused + hover state, "click to resume":
|
|
|
|
a.sm2_paused {}
|
|
a.sm2_paused:hover {}
|
|
|
|
|
|
*/
|
|
|
|
/* two different list types */
|
|
|
|
ul.flat {
|
|
list-style-type:none;
|
|
padding-left:0px;
|
|
}
|
|
|
|
ul.flat li,
|
|
ul.graphic li {
|
|
padding-bottom:1px;
|
|
}
|
|
|
|
ul.flat li a {
|
|
display:inline-block;
|
|
padding:2px 4px 2px 4px;
|
|
}
|
|
|
|
ul.graphic {
|
|
list-style-type:none;
|
|
padding-left:0px;
|
|
margin-left:0px;
|
|
}
|
|
|
|
/* background-image-based CSS3 example */
|
|
|
|
ul.graphic {
|
|
list-style-type:none;
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
|
|
ul.graphic li {
|
|
margin-bottom:2px;
|
|
}
|
|
|
|
ul.graphic li a,
|
|
ul.graphic li a.sm2_link {
|
|
/* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
|
|
display:inline-block;
|
|
padding-left:22px;
|
|
min-height:16px;
|
|
vertical-align: middle;
|
|
background-color:#778899;
|
|
-moz-border-radius:3px;
|
|
-webkit-border-radius:3px;
|
|
border-radius:3px;
|
|
padding:3px 3px 3px 25px;
|
|
min-width:19em;
|
|
_width:19em; /* IE 6 */
|
|
text-decoration:none;
|
|
font-weight:normal;
|
|
color:#f6f9ff;
|
|
}
|
|
|
|
ul.graphic li a.sm2_link {
|
|
/* safari 3.1+ fun (or, proprietary crap. TBD.) */
|
|
-webkit-transition-property: hover;
|
|
-webkit-transition: background-color 0.15s linear;
|
|
-moz-transition: background-color 0.15s linear 0s; /* firefox 4 */
|
|
-o-transition-property: background-color; /* opera 10.5 */
|
|
-o-transition-duration: 0.15s;
|
|
}
|
|
|
|
ul.graphic li a, /* use a.sm2_link {} if you want play icons showing only if SM2 is supported */
|
|
ul.graphic li a.sm2_paused:hover,
|
|
ul.graphic li a.sm2_link:hover {
|
|
background-image:url(../image/icon_play.png);
|
|
background-position:3px 50%;
|
|
background-repeat:no-repeat;
|
|
_background-image:url(../image/icon_play.gif); /* IE 6 */
|
|
}
|
|
|
|
ul.graphic li a.sm2_link:hover {
|
|
/* default hover color, if you'd like.. */
|
|
background-color:#445566;
|
|
color:#fff;
|
|
}
|
|
|
|
ul.graphic li a.sm2_paused {
|
|
background-color:#ccc;
|
|
}
|
|
|
|
ul.graphic li a.sm2_paused:hover {
|
|
background:#999 url(../image/icon_play.png) no-repeat 3px 50%;
|
|
_background-image:url(../image/icon_play.gif);
|
|
}
|
|
|
|
ul.graphic li a.sm2_playing,
|
|
ul.graphic li a.sm2_playing:hover {
|
|
background:#334455 url(../image/icon_pause.png) no-repeat 3px 50%;
|
|
_background-image:url(../image/icon_pause.gif);
|
|
text-decoration:none;
|
|
}
|
|
|
|
/* hide button while playing?
|
|
ul.graphic li a.sm2_playing {
|
|
background-image:none;
|
|
}
|
|
*/
|
|
|
|
body #sm2-container object,
|
|
body #sm2-container embed {
|
|
/*
|
|
flashblock handling: hide SWF off-screen by default (until blocked timeout case.)
|
|
include body prefix to ensure override of flashblock.css.
|
|
*/
|
|
|
|
left:-9999em;
|
|
top:-9999em;
|
|
}
|
|
|
|
/* flat CSS example */
|
|
|
|
ul.flat a.sm2_link {
|
|
/* default state: "a playable link" */
|
|
border-left:6px solid #999;
|
|
padding-left:4px;
|
|
padding-right:4px;
|
|
}
|
|
|
|
ul.flat a.sm2_link:hover {
|
|
/* default (inactive) hover state */
|
|
border-left-color:#333;
|
|
}
|
|
|
|
|
|
ul.flat a.sm2_playing {
|
|
/* "now playing" */
|
|
border-left-color:#6666ff;
|
|
background-color:#000;
|
|
color:#fff;
|
|
text-decoration:none;
|
|
}
|
|
|
|
ul.flat a.sm2_playing:hover {
|
|
/* "clicking will now pause" */
|
|
border-left-color:#cc3333;
|
|
}
|
|
|
|
ul.flat a.sm2_paused {
|
|
/* "paused state" */
|
|
background-color:#666;
|
|
color:#fff;
|
|
text-decoration:none;
|
|
}
|
|
|
|
ul.flat a.sm2_paused:hover {
|
|
/* "clicking will resume" */
|
|
border-left-color:#33cc33;
|
|
} |