diff options
Diffstat (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/css/player.css')
| -rwxr-xr-x | docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/css/player.css | 525 |
1 files changed, 525 insertions, 0 deletions
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/css/player.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/css/player.css new file mode 100755 index 0000000..5c5907e --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/css/player.css @@ -0,0 +1,525 @@ +body {
+ font:normal 75% verdana,tahoma,arial,"sans serif";
+ background:#000;
+ color:#ccc;
+}
+
+/*
+
+ GENERAL RANT AWARENESS NOTICE
+ -----------------------------
+ You may see some complaining about Internet Explorer, PNG and opacity-related hacks.
+ Even the new (at time of writing, 12/2006) IE 7 has issues and other quirks. Too bad.
+
+*/
+
+.sm2player {
+ position:absolute;
+ left:1.75em;
+ top:5.5em;
+ z-index:3;
+ padding:1px;
+ height:20px;
+ font:normal x-small/19px arial,verdana,tahoma,"sans serif";
+ *line-height:18px;
+ color:#000;
+ zoom:1;
+}
+
+.sm2player.altFont {
+ /* font tweaks for mac which has tighter spacing */
+ letter-spacing:0px;
+}
+
+.sm2player,
+.sm2player .sm2playlist-box {
+/*
+ width:302px;
+ width:360px;
+*/
+}
+
+.sm2player .ui,
+.sm2player .sm2playlist {
+xfilter:alpha(opacity=90); /* Even IE 7 (still) sucks! */
+ opacity:0.9;
+}
+
+.sm2player .ui {
+ _filter:none; /* IE <7 sucks */
+}
+
+.sm2player.noOpacity .ui {
+ /* Safari (1.3.2 at least?) has render bugs with UI display + animated PNG progress bar when applying opacity */
+ opacity:1;
+}
+
+.sm2player .ui:hover {
+ opacity:1;
+ filter:alpha(opacity=100);
+}
+
+.sm2player a:focus {
+ outline:none;
+}
+
+.sm2player .left,
+.sm2player .mid,
+.sm2player .right {
+ position:relative;
+ float:left;
+ display:inline;
+ height:20px;
+ color:#fff;
+}
+
+.sm2player .left {
+ width:15px;
+ background:transparent url(../image/skin-0-ui.png) 0px 0px no-repeat;
+ _background-image:url(../image/skin-0-ui.gif); /* IE <7 */
+}
+
+.sm2player .left .trigger,
+.sm2player .left .trigger span {
+ display:block;
+ width:15px;
+ height:20px;
+}
+
+.sm2player .left .trigger.pauseplay span {
+ background:transparent url(../image/sec-left-arr0.png) 5px 6px no-repeat;
+ _background-image:url(../image/sec-left-arr0.gif);
+ _background-position:0px 0px;
+}
+
+.sm2player .left .trigger.pauseplay span.playing {
+ /* class applied while playing */
+ background-image:url(../image/sec-left-pause.gif);
+ background-position:6px 7px;
+}
+
+.sm2player .left .trigger:hover {
+ background:transparent url(../image/ui-highlight-2.png) 2px 0px no-repeat;
+ _background-image:url(../image/ui-highlight-2.gif);
+ /*_background-position:2px 2px;*/
+}
+
+.sm2player .mid {
+ position:relative;
+ width:223px;
+ _width:224px;
+ background:transparent url(../image/skin-0-ui.png) -14px 0px no-repeat;
+ _background-image:url(../image/skin-0-ui.gif);
+}
+
+.sm2player .mid .info {
+ position:absolute;
+ left:0px;
+ top:0px;
+ width:100%;
+ height:20px;
+ overflow:hidden;
+ text-indent:2px;
+ z-index:2;
+ cursor:default;
+}
+
+.sm2player .mid .progress {
+ position:relative;
+ display:block;
+ width:1px;
+ height:12px;
+ margin:4px 0px 0px 0px;
+ background:transparent url(../image/sec-mid-loaded.png) 0px 0px repeat-x;
+ _background-image:url(../image/sec-mid-loaded.gif);
+ background-color:#333;
+}
+
+.sm2player .mid .progress.loading {
+ position:relative;
+ display:block;
+ width:1px;
+ border-right:1px solid #333;
+}
+
+.sm2player .mid .slider {
+ position:absolute;
+ display:block;
+ width:12px;
+ height:12px;
+ left:0px;
+ top:0px;
+ margin-top:4px;
+ background:transparent url(../image/slider-1.png) 0px 0px no-repeat;
+ _background-image:url(../image/slider.gif);
+ z-index:1; /* swap between 1 and 2 to position on top */
+ z-index:2;
+ opacity:0.90;
+ /* filter:alpha(opacity=90); IE7 can't apply opacity to PNGs without messing up alpha transparency. Boo urns. */
+ _background-image:none;
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/slider-1.png');
+}
+
+.sm2player .mid:hover .slider {
+ opacity:0.95;
+ filter:alpha(opacity=95);
+}
+
+.sm2player .mid>.slider.active {
+ -moz-opacity:0.85;
+ filter:alpha(opacity=85);
+}
+
+.sm2player .mid .text,
+.sm2player .mid .default,
+.sm2player .mid .seek,
+.sm2player .mid .divider {
+ display:none;
+}
+
+.sm2player .mid .caption {
+ *position:absolute; /* required for scroll positioning to work under IE */
+ display:inline;
+ white-space:nowrap;
+ visibility:hidden; /* hidden by default */
+}
+
+.sm2player .mid .seek {
+ position:absolute;
+ left:0px;
+ top:0px;
+ text-indent:2px;
+}
+
+.sm2player .right {
+ background:transparent url(../image/skin-0-ui.png) 100% 0px no-repeat;
+ _background-image:url(../image/skin-0-ui.gif);
+ margin-left:1px;
+ _margin-left:0px; /* IE <7 sucks. */
+}
+
+.sm2player .right .divider {
+ /* one-pixel visual divider between bar / cap (yep, this is a UI nit-pick.) */
+ float:left;
+ display:inline;
+ width:1px;
+ height:20px;
+ overflow:hidden;
+ background:transparent url(../image/skin-0-ui.png) -1006px 0px no-repeat;
+ _background-image:url(../image/skin-0-ui.gif);
+ margin-left:-1px;
+ _display:none; /* IE <7 sucks. */
+}
+
+.sm2player .right .time {
+ float:left;
+ display:inline;
+ width:3em;
+ text-align:center;
+ margin:0px 1px 0px 3px;
+}
+
+.sm2player .right .trigger {
+ float:left;
+ display:inline;
+ width:14px;
+ height:20px;
+}
+
+.sm2player .right .trigger span {
+ display:block;
+ height:20px;
+}
+
+.sm2player .right .trigger.prev {
+ margin-left:1px;
+}
+
+.sm2player .right .trigger.s0 {
+ width:16px;
+}
+
+.sm2player .right .trigger.s1 {
+ width:18px;
+}
+
+.sm2player .right .trigger.s2 {
+ width:20px;
+}
+
+.sm2player .right .trigger.s3 {
+ width:12px;
+}
+
+.sm2player .right .trigger.s4 {
+ width:13px;
+}
+
+.sm2player .right .trigger {
+ background:transparent;
+}
+
+.sm2player .right .trigger.prev {
+}
+
+.sm2player .right .trigger.dropdown {
+ width:14px;
+ margin-right:2px;
+}
+
+.sm2player .right .trigger.dropdown span {
+ xwidth:14px;
+}
+
+.sm2player .right .trigger span {
+ background:transparent url(../image/sec-right-arr0.png) 3px 7px no-repeat;
+ _background-image:url(../image/sec-right-arr0.gif);
+ _background-position:0px 0px;
+ _background-image:none;
+}
+
+.sm2player .right .trigger.dropdown span {
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/sec-right-arr0.png');
+ _margin:7px 0px 0px 3px;
+ _height:13px;
+}
+
+.sm2player .right .trigger.prev span {
+ background:transparent url(../image/btn-prev.png) 4px 6px no-repeat;
+ _background-image:url(../image/btn-prev.gif);
+}
+
+.sm2player .right .trigger.next span {
+ background:transparent url(../image/btn-next.png) 3px 6px no-repeat;
+ _background-image:url(../image/btn-next.gif);
+}
+
+.sm2player .right .trigger.loop span {
+ background:transparent url(../image/loop.png) 3px 5px no-repeat;
+ opacity:0.5;
+ filter:alpha(opacity=50);
+ _background-image:none;
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/loop.png');
+ _margin:5px 0px 0px 3px;
+ _height:15px;
+}
+
+.sm2player .right .trigger.loop:hover>span {
+ opacity:0.75;
+ filter:alpha(opacity=75);
+}
+
+.sm2player .right .trigger.loop.active>span {
+ /*background-image:url(../image/loop-light.png);*/
+ opacity:1;
+ filter:none;
+}
+
+.sm2player .right .trigger.shuffle span {
+ background:transparent url(../image/shuffle-1.png) 2px 5px no-repeat;
+ opacity:0.5;
+ filter:alpha(opacity=50);
+ _background-image:none;
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/shuffle-1.png');
+ _margin:5px 0px 0px 2px;
+ _height:15px;
+}
+
+.sm2player .right .trigger.shuffle:hover>span {
+ opacity:0.75;
+ filter:alpha(opacity=75);
+}
+
+.sm2player .right .trigger.shuffle.active>span {
+ opacity:1;
+ filter:none;
+}
+
+.sm2player .right .trigger.mute span {
+ background:transparent url(../image/speaker.png) 3px 5px no-repeat;
+ _background-image:none;
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/speaker.png');
+ _margin:5px 0px 0px 3px;
+ _height:15px;
+}
+
+.sm2player .right .trigger.mute:hover>span {
+ opacity:0.75;
+ filter:alpha(opacity=75);
+}
+
+.sm2player .right .trigger.mute.active>span {
+ opacity:0.5;
+ filter:alpha(opacity=50);
+}
+
+.sm2player .right .trigger.volume span {
+ background:transparent url(../image/volume.png) 0px 4px no-repeat;
+ _background-image:none;
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/volume.png');
+ _margin:4px 0px 0px 0px;
+ _height:16px;
+}
+
+.sm2player .right .trigger:hover {
+ background:transparent url(../image/ui-highlight-2.png) -2px 0px no-repeat;
+ _background-image:url(../image/ui-highlight-2.gif);
+ /*_background-position:2px 2px;*/
+}
+
+.sm2playlist-box {
+ position:absolute;
+ /*width:256px;*/
+ /*overflow:hidden;*/
+ /*max-height:33.1em;*/
+ left:1px;
+ top:22px;
+ overflow:auto;
+ margin-top:-4px;
+}
+
+.sm2playlist {
+ position:relative;
+ /* zoom:1; stupid IE. */
+ margin-top:-999em; /* hidden by default */
+}
+
+.sm2playlist .hd,
+.sm2playlist .c {
+ position:relative;
+ height:3px;
+}
+
+.sm2playlist .hd {
+ background:transparent url(../image/skin-0-ui.png) no-repeat 0px 0px;
+ _background-image:url(../image/skin-0.ui.gif);
+ margin-right:2px;
+}
+
+.sm2playlist .hd .c {
+ /* not used? */
+}
+
+.sm2playlist .bd {
+ background:transparent url(../image/shade-left.png) repeat-y 0px 0px;
+ _background-image:none;
+ margin-right:2px;
+}
+
+.sm2playlist ul {
+ list-style-type:none;
+ margin:0px;
+ padding:0px;
+ padding-right:4px; /* space for background */
+ margin-right:-2px;
+ background:transparent url(../image/shade-right.png) repeat-y 100% 0px;
+ _background-image:none;
+ zoom:1; /* Even IE 7 needs this (!?) */
+}
+
+.sm2playlist ul li {
+ line-height:1.5em;
+}
+
+.sm2playlist ul li a {
+ display:block;
+ background:transparent;
+ margin-left:2px;
+ margin-right:-2px;
+ color:#999;
+ text-indent:0.25em;
+ text-decoration:none;
+ width:100%; /* stupid IE 7. */
+}
+
+.sm2playlist ul li a span {
+ display:block;
+ background:#222;
+ padding:0.1em 0.5em;
+ border-top:1px solid #333;
+ border-bottom:1px solid #000;
+ /* genie animation test */
+/*
+ white-space:nowrap;
+ overflow:hidden;
+*/
+}
+
+.sm2playlist ul li.alt a span {
+ background:#303030;
+ color:#c3c3c3;
+}
+
+.sm2playlist ul li:first-child a span {
+ border-top:none;
+}
+
+.sm2playlist ul li:last-child a span {
+ /*border-bottom:none;*/
+}
+
+.sm2playlist ul li a:hover span {
+ background-color:#444;
+ color:#fff;
+}
+
+.sm2playlist ul li a:hover span {
+ border-color:transparent;
+ _border-color:#333;
+}
+
+.sm2playlist ul li.highlight a {
+ background-color:#660000;
+}
+
+.sm2playlist ul li.highlight a span {
+ background:#161616 url(../image/notreallyajaxandyouknowit-dark.gif) no-repeat right 50%;
+ border-color:#000;
+ color:#ff9999;
+}
+
+.sm2playlist ul li.highlight a:hover {
+ background-color:#880000;
+ color:#fff;
+}
+
+.sm2playlist ul li a:focus {
+ outline:none;
+}
+
+.sm2playlist .ft {
+ background:transparent url(../image/skin-0-ui.png) no-repeat 0px 100%;
+ _background-image:url(../image/skin-0-ui.gif);
+ margin-right:2px;
+ height:2px;
+}
+
+.sm2playlist .ft .c {
+ position:absolute;
+ right:0px;
+ bottom:0px;
+ background:transparent url(../image/skin-0-ui.png) no-repeat 100% 100%;
+ _background-image:url(../image/skin-0-ui.gif);
+ margin-left:3px; /* leave room for left cap */
+ margin-right:-1px;
+ /* not needed */
+ display:none;
+
+}
+
+#soundmanager-debug {
+ position:absolute;
+ position:fixed;
+ right:20px;
+ bottom:20px;
+ display:none;
+ font-size:xx-small;
+ height:20em;
+ overflow:auto;
+ /* background:transparent url(../image/whiteout.png); */
+ background:#000;
+ padding:1em;
+ color:#fff;
+ filter:alpha(opacity=90);
+ opacity:0.9;
+}
|
