datenspuren mitschnitte styling

content/static/datenspuren/2011/script/play-resources.js

@@ -27,14 +27,17 @@ $(document).ready(function() {
 			    return r.type;
 			}).some(canPlayVideo)) {
 	    var img = that.find('img');
+	    img.before('<p class="play">▶</p>');
 	    var poster = img.attr('src');
-	    img.mouseover(function() {
+	    var isPreview = false;
+	    that.find("img, .play").mouseover(function() {
 		img.attr('src', preview);
-	    });
-	    img.mouseout(function() {
+	    }).
+	    mouseout(function() {
 		img.attr('src', poster);
-	    });
-	    img.click(function() {
+	    }).
+	    click(function() {
+		that.find(".play").remove();
 		var video = $('<video controls="controls" autoplay="autoplay"></video>');
 		sources.forEach(function(source) {
 		    var src = $('<source></source>');

content/static/datenspuren/2011/style/style.css

@@ -276,8 +276,9 @@ dl dd {
 .resource {
     display: inline-block;
     margin: auto 2px 0;
-    width: 390px;
+    width: 392px;
     text-align: center;
+    position: relative;
 }
 
 .resource h4 {
@@ -286,13 +287,15 @@ dl dd {
     vertical-align: bottom;
 }
 
-.resource img {
+.resource img, .resource video {
     max-width: 95%;
 }
 
 .resource ul {
     list-style-type: none;
     font-size: 90%;
+    margin: 0 auto;
+    padding: 0;
 }
 .resource li {
     display: inline-block;
@@ -300,5 +303,33 @@ dl dd {
 }
 .resource li .size {
     padding-left: 0.5em;
-    font-size: 80%;
+    font-size: 75%;
+    color: #333;
+}
+.resource .play {
+    position: absolute;
+    text-align: center;
+    right: 0;
+    left: 0;
+    top: 35%;
+    bottom: 50%;
+    font-size: 400%;
+    font-weight: bold;
+    color: white;
+    text-shadow: black 2px 2px 0;
+    z-index: 10;
+    margin: 0;
+}
+.resource .play:hover {
+    color: #ffff7f;
+    text-shadow: black 2px 2px 0;
+    opacity: 0;
+    -webkit-transition: opacity 2s ease-in;
+    -moz-transition: opacity 2s ease-in;
+    -o-transition: opacity 2s ease-in;
+    -ms-transition: opacity 2s ease-in;	
+    transition: opacity 2s ease-in;
+}
+.resource img, .resource .play {
+    cursor: pointer;
 }