From 753f60c7d4769fa72d3b910e491f37db6f130898 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 2 Aug 2013 17:19:21 -0500 Subject: dymaxion --- .../demo/page-player/css/page-player.css | 320 +++++++++++++++++++++ 1 file changed, 320 insertions(+) create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/page-player.css (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/page-player.css') diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/page-player.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/page-player.css new file mode 100755 index 0000000..2c0ca3b --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/page-player.css @@ -0,0 +1,320 @@ +/* + + SoundManager 2: "page as playlist" example + ------------------------------------------ + http://schillmania.com/projects/soundmanager2/ + +*/ + +.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:2em; + color:#666; + padding:0.25em 0.5em 0.25em 0.5em; + border:none; + letter-spacing:-1px; /* ZOMG WEB X.0. ;) */ + background-color:#f9f9f9; + -webkit-transition-property: hover; + -webkit-transition: background-color 0.15s ease-in-out; + -moz-transition: background-color 0.15s linear 0s; /* firefox 4 */ + -o-transition-property: background-color; /* opera 10.5 */ + -o-transition-duration: 0.15s; + +} + +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; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2