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/demo.css | 124 ++++++++ .../demo/page-player/css/optional-annotations.css | 168 +++++++++++ .../demo/page-player/css/optional-themes.css | 206 +++++++++++++ .../demo/page-player/css/page-player.css | 320 +++++++++++++++++++++ 4 files changed, 818 insertions(+) create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/demo.css create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/optional-annotations.css create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/optional-themes.css create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/page-player.css (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css') diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/demo.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/demo.css new file mode 100755 index 0000000..f11964e --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/demo.css @@ -0,0 +1,124 @@ +/* + ----------------------------------------------------------------- + In-page demo CSS for code, documentation etc. + See page-player.css for actual playlist-relevant stuff. + ----------------------------------------------------------------- + */ + +#soundmanager-debug { + /* SM2 debug container (optional, makes debug more useable) */ + position:absolute;position:fixed;*position:absolute;bottom:10px;right:10px;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);z-index:99; +} + +body { + font:75% normal verdana,arial,tahoma,"sans serif"; +} + +h1, h2, h3 { + font:lighter 3em "Helvetica Neue Light","Helvetica Neue",georgia,"times new roman","Arial Rounded MT Bold",helvetica,verdana,tahoma,arial,"sans serif"; + margin-bottom:0px; +} + +h1, h2 { + letter-spacing:-1px; /* zomg web x.0! ;) */ +} + +h1, h2, h3 { + float:left; + clear:both; + border-bottom:1px solid #999; + padding-bottom:1px; + margin-bottom:0.25em; +} + +h1 { + margin-top:0px; + margin-bottom:0px; + background-color:#666; + color:#ccc; + margin-left:-5px; + padding-left:5px; + padding-right:5px; +} + +h1, +h1 a { + color:#fff; + text-decoration:none; +} + +h1 a:hover { + text-decoration:underline; +} + +h2 { + font-size:2em; + margin-top:1em; + background-color:#aaa; + color:#fff; + padding:5px; + margin-left:-5px; + min-width:23em; +} + +h3 { + font-size:1.65em; + margin-top:0.5em; + margin-bottom:0.25em; + color:#333; + min-width:28em; +} + +h3 a { + font-size:small; +} + +h4 { + color:#444; +} + +ul.notes { + margin-left:0px; + padding-left:1.5em; +} + +.note { + margin-top:0px; + font-style:italic; + color:#999; +} + +pre { + font-size:1.2em; + _font-size:1em; +} + +code { + font-family:"lucida console",monaco,courier,terminal,system; + font-size:1em; + color:#003366; +} + +code span { + color:#666; +} + +ul, +p, +pre { + clear:left; + max-width:46em; +} + +ul.tight li { + max-width:44.5em; +} + +ul.playlist { + /* undo the above nonsense */ + max-width:none; +} + +ul.tight { + padding-left:1.5em; +} diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/optional-annotations.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/optional-annotations.css new file mode 100755 index 0000000..123457f --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/optional-annotations.css @@ -0,0 +1,168 @@ +/* + ------------------------------------------ + -- annotations (sub-tracks, notes etc.) -- + ------------------------------------------ +*/ + +ul.playlist li a.sm2_link .metadata { + display:none; /* hide by default */ +} + +ul.playlist li.sm2_paused a.sm2_link .metadata, +ul.playlist li.sm2_playing a.sm2_link .metadata { + display:inline; +} + +ul.playlist li ul { + list-style-type:none; + margin:0px; + padding:0px; + position:relative; + font-size:small; + display:none; +} + +ul.playlist li ul li { + position:relative; + margin:0px; + padding:2px 3px; + border:1px solid transparent; + -moz-border-radius:6px; + -khtml-border-radius:6px; + border-radius:6px; + margin-right:1em; + font-family:helvetica,verdana,tahoma,arial,"sans serif"; + font-size:x-small; + font-weight:lighter; + letter-spacing:0px; + background-color:transparent; + opacity:0.66; +} + +ul.playlist li ul li:hover { + opacity:1; + background-color:#fff; + border-color:#ccc; + color:#666; +} + +ul.playlist li.sm2_playing ul li, +ul.playlist li.sm2_paused ul li { + color:#fff; +} + +ul.playlist li.sm2_playing ul li:hover { + background-color:#fff; + color:#5588bb; + border-color:#336699; + opacity:0.9; +} + +ul.playlist li.sm2_paused ul li:hover { + background-color:#888; +} + +/* metadata */ + +ul.playlist li .metadata .duration { + /* optional timing data */ + display:none; +} + +ul.playlist li .metadata ul li p { + margin:0px; + padding:0px; +} + +ul.playlist li .metadata ul li span { + display:none; +} + +ul.playlist li .controls .statusbar .annotation { + position:absolute; + background-color:transparent; + top:0px; + color:#666; + text-align:right; + margin-left:10px; + height:0.5em; +} + +ul.playlist li .controls .statusbar .annotation:hover { + z-index:12; /* sit on top of note */ +} + +ul.playlist li .controls .statusbar .annotation span.bubble { + /* using · */ + display:inline-block; + background-color:#fff; + border:1px solid #666; + border-radius:6px; + -moz-border-radius:6px; + -webkit-border-radius:6px; +} + +ul.playlist li .controls .statusbar .annotation span { + display:block; + background:transparent url(../image/divot.png) no-repeat 50% 0px; + width:15px; + margin-left:-15px; + height:12px; + text-align:center; +} + +ul.playlist li .controls .statusbar .annotation.alt { + top:auto; + bottom:0px; +} + +ul.playlist li .controls .statusbar .annotation span:hover { + cursor:none; /* Fx3 rules. */ + margin-top:0.1em; +} + +ul.playlist li .controls .statusbar .annotation.alt span:hover { + margin-top:-0.1em; +} + +ul.playlist li .controls .statusbar .annotation.alt span { + background:transparent url(../image/divot-bottom.png) no-repeat 50% bottom; +} + +ul.playlist li .note { + position:absolute; + display:none; + left:0px; + top:0px; + z-index:10; + font-size:x-small; + padding:2px 4px 2px 4px; + width:auto; + color:#666; + background-color:#fff; + border:1px solid #ccc; + border-radius:6px; + -moz-border-radius:6px; + -webkit-border-radius:6px; + font-style:normal; + font-weight:bold; + font-family:arial,tahoma,verdana,"sans serif"; + letter-spacing:0px; + margin-top:1.1em; +} + +ul.playlist li .note.alt { + margin-top:-1.32em; +} + +ul.playlist li .note:hover { + display:block !important; +} + +ul.playlist li .sm2_divider { + font-size:0.75em; +} + +ul.playlist li .sm2_metadata { + font-size:0.65em; +} diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/optional-themes.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/optional-themes.css new file mode 100755 index 0000000..62a8146 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/page-player/css/optional-themes.css @@ -0,0 +1,206 @@ +/* + --------------------------------- + -- alternate (optional) themes -- + --------------------------------- +*/ + +ul.playlist.dark li.sm2_playing a { + color:#fff; +} + +ul.playlist.dark li.sm2_playing .timing, +ul.playlist.use-peak.dark li.sm2_playing .peak { + color:#999; +} + +ul.playlist.use-spectrum.dark li.sm2_playing .spectrum-container { + background-color:#222; + border-color:#444; +} + +ul.playlist.use-spectrum.dark li.sm2_playing .spectrum-container .spectrum { + background-color:#999; +} + +ul.playlist.dark li.sm2_paused { + background-color:#333; +} + +ul.playlist.dark li.sm2_paused a { + color:#999; +} + +ul.playlist.dark li.sm2_playing, +ul.playlist.dark li.sm2_playing:hover { + background-color:#333; +} + +ul.playlist.dark li:hover .controls .statusbar { + background-color:#666; +} + +ul.playlist.dark li .controls { + background-color:#333; +} + +ul.playlist.dark li .controls .statusbar { + background-color:#666; + border-color:#444; +} + +ul.playlist.dark li .controls .statusbar .position { + background-color:#111; + border-right:3px solid #111; + border-radius:3px; + -moz-border-radius:3px; + -webkit-border-radius:3px; +} + +ul.playlist.dark li .controls .statusbar .loading { + background-color:#444; +} + +ul.playlist.dark li .timing, +ul.playlist.use-peak.dark li .peak { + background-color:#222; + border-color:#444; +} + +ul.playlist.dark.use-peak li .peak .l, +ul.playlist.dark.use-peak li .peak .r { + border-color:#444; + background-color:#999; +} + + +/* gold theme */ + +ul.playlist.gold li.sm2_paused { + background-color:#996600; +} + +ul.playlist.gold li.sm2_playing, +ul.playlist.gold li.sm2_playing:hover { + background-color:#cc9900; +} + +ul.playlist.gold li .controls { + background-color:transparent; +} + +ul.playlist.gold li .controls .statusbar { + background-color:#fff; + border-color:#fff; +} + +ul.playlist.gold li .controls .statusbar .position { + background-color:#996600; + border-right:3px solid #996600; + border-radius:3px; + -moz-border-radius:3px; + -webkit-border-radius:3px; +} + +ul.playlist.gold li .controls .statusbar .loading { + background-color:#ffeedd; +} + +ul.playlist.gold li .timing, +ul.playlist.use-peak.gold li .peak { + background-color:#CC9900; + border-color:#ffcc33; +} + +ul.playlist.use-spectrum.gold li.sm2_playing .spectrum-container { + background-color:#cc9900; + border-color:#ffcc33; +} + +ul.playlist.use-spectrum.gold li.sm2_playing .spectrum-container .spectrum { + background-color:#fff; +} + +ul.playlist.gold.use-peak li .peak .l, +ul.playlist.gold.use-peak li .peak .r { + border-color:#fff; + background-color:#fff; +} + + +/* ZOMG PONIES!!!ONEONEONE */ + +ul.playlist.bubblegum li a { + font-family:"comic sans ms",verdana,arial,tahoma,"sans serif"; /* heh */ +} + +ul.playlist.bubblegum li.sm2_paused, +ul.playlist.bubblegum li.sm2_paused:hover { + background-color:#ffccee; +} + +ul.playlist.bubblegum li.sm2_paused a, +ul.playlist.bubblegum li.sm2_paused:hover a, +ul.playlist.bubblegum li.sm2_paused .timing, +ul.playlist.use-peak.bubblegum li.sm2_paused .peak { + color:#ff6699; +} + +ul.playlist.bubblegum li:hover { + background-color:#ffddee; +} + +ul.playlist.bubblegum li.sm2_playing, +ul.playlist.bubblegum li.sm2_playing:hover { + background-color:#ff7799; +} + +ul.playlist.bubblegum li .controls { + background-color:transparent; +} + +ul.playlist.bubblegum li .controls .statusbar { + background-color:#fff; + border-color:#fff; +} + +ul.playlist.bubblegum li .controls .statusbar .position { + background-color:#ffaacc; + border-right:3px solid #ffaacc; + border-radius:3px; + -moz-border-radius:3px; + -webkit-border-radius:3px; +} + +ul.playlist.bubblegum li .controls .statusbar .loading { + background-color:#ffeedd; +} + +ul.playlist.bubblegum li .timing, +ul.playlist.use-peak.bubblegum li .peak { + background-color:#ffaacc; + border-color:#ffccee; +} + +ul.playlist.use-spectrum.bubblegum li.sm2_playing .spectrum-container { + background-color:#ffaacc; + border-color:#ffccee; +} + +ul.playlist.use-spectrum.bubblegum li.sm2_playing .spectrum-container .spectrum { + background-color:#fff; +} + +ul.playlist.bubblegum.use-peak li .peak .l, +ul.playlist.bubblegum.use-peak li .peak .r { + border-color:#fff; + background-color:#fff; +} + + +ul.playlist.shiny li.sm2_paused, +ul.playlist.shiny li.sm2_playing { + background-image:url(../image/top-highlight.png); + background-repeat:repeat-x; + background-position:0px -1px; + _background-image:none; /* can't be bothered with IE 6. */ +} \ No newline at end of file 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