More prominent metadata panel invite.

The invite animation has been made more prominent and the chevron
is highlighted. this only applies until the user opens the
panel for the first time.

Change-Id: I91d1b9bffaf302890f63b741313aa47cc4beef24

resources/mmv/ui/img/drag-active.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="16"
+   viewBox="0 0 29.999999 16"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="drag.svg">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1118"
+     inkscape:window-height="643"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="11.733333"
+     inkscape:cx="-0.085227273"
+     inkscape:cy="7.1903409"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <rect
+     width="14.503"
+     height="1.489"
+     rx=".25"
+     ry=".25"
+     x="15.244"
+     y="-3.474"
+     transform="rotate(30)"
+     fill="#aaa"
+     id="rect4"
+     style="fill:#347bff;fill-opacity:1" />
+  <rect
+     width="14.503"
+     height="1.489"
+     rx=".25"
+     ry=".25"
+     x="-10.736"
+     y="-13.015"
+     transform="matrix(-.866 .5 -.5 -.866 0 0)"
+     fill="#aaa"
+     id="rect6"
+     style="fill:#347bff;fill-opacity:1" />
+</svg>

resources/mmv/ui/mmv.ui.metadataPanelScroller.less

@@ -5,7 +5,7 @@
 .mw-mmv-post-image {
 	.animation( mw-mmv-appear-animation 0.5s ease 0s 1 normal forwards );
 	&.invite {
-		.animation( mw-mmv-invite-animation 0.5s ease 0s 1 normal forwards );
+		.animation( mw-mmv-invite-animation 1s ease 0s 1 normal forwards );
 	}
 }
 
@@ -41,8 +41,8 @@
 	0% {
 		margin-top: 0px;
 	}
-	50% {
-		margin-top: -15px;
+	33% {
+		margin-top: -30px;
 	}
 	100% {
 		margin-top: 0;
@@ -79,13 +79,17 @@
 	background-repeat: no-repeat;
 	background-position: center bottom;
 	margin: 0 auto;
-	opacity: 0.6;
+	opacity: 0.7;
 	transition: opacity 0.25s;
 
 	&.pointing-down {
 		background-position: center top;
 		.rotate(180deg);
 	}
+	.mw-mmv-post-image.invite & {
+		background-image: url(img/drag-active.svg);
+		opacity: 0.9;
+	}
 }
 
 .mw-mmv-post-image:hover .mw-mmv-drag-icon {