From 753f60c7d4769fa72d3b910e491f37db6f130898 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 2 Aug 2013 17:19:21 -0500 Subject: dymaxion --- .../demo/play-mp3-links/css/inlineplayer.css | 212 +++++++++++++++++++++ 1 file changed, 212 insertions(+) create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/css/inlineplayer.css (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/css/inlineplayer.css') diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/css/inlineplayer.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/css/inlineplayer.css new file mode 100755 index 0000000..1fa31c7 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/css/inlineplayer.css @@ -0,0 +1,212 @@ +/* + + 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. + + + some.mp3 + + + some.mp3 + + + 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; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2