[livejournal] r21210: LJSUP-10691: Image placeholders in comme...

U   trunk/cgi-bin/cleanhtml.pl
U   trunk/htdocs/stc/lj_base.css

Modified: trunk/cgi-bin/cleanhtml.pl
===================================================================
--- trunk/cgi-bin/cleanhtml.pl	2012-02-17 12:31:05 UTC (rev 21209)
+++ trunk/cgi-bin/cleanhtml.pl	2012-02-17 12:37:37 UTC (rev 21210)
@@ -1159,6 +1159,7 @@
                             '</a>';
                         $newdata .= $href_b_link ?
                             '<a href="' . $href_b_link .'" class="b-mediaplaceholder-external" title="' . LJ::Lang::ml("mediaplaceholder.link") . '">' .
+                            '<i class="b-mediaplaceholder-bg"></i>' .
                             '<i class="b-mediaplaceholder-pic"></i>' .
                             '<span class="b-mediaplaceholder-inner">' . LJ::Lang::ml("mediaplaceholder.link") . '</span>' .
                             '</a>' : '';

Modified: trunk/htdocs/stc/lj_base.css
===================================================================
--- trunk/htdocs/stc/lj_base.css	2012-02-17 12:31:05 UTC (rev 21209)
+++ trunk/htdocs/stc/lj_base.css	2012-02-17 12:37:37 UTC (rev 21210)
@@ -3776,10 +3776,10 @@
 	left: auto;
 	display: inline-block;
 	width: auto;
-	height: 23px;
+	height: 35px;
 	min-width: 100px;
-	margin: 0;
-	padding: 12px 10px 0 30px;
+	margin: 0 5px 0 0;
+	padding: 0 10px 0 30px;
 	vertical-align: top !important;
 	-moz-border-radius: 5px;
 	border-radius: 5px;
@@ -3787,13 +3787,23 @@
 	border: 1px solid rgba(220,220,220,0.35) !important;
 	background: rgb(0,0,0) !important;
 	background: rgba(0,0,0,0.35) !important;
-	font: 12px/1 Arial,sans-serif;
+	font: 12px/35px Arial,sans-serif;
 	text-align: left;
 	text-decoration: none !important;
 	text-shadow: none;
 	color: #FFF !important;
 	cursor: pointer;
+	*display: inline;
+	*zoom: 1;
 	}
+BODY .b-mediaplaceholder:hover,
+BODY .b-mediaplaceholder:active,
+BODY .b-mediaplaceholder:focus {
+	border: 1px solid rgb(220,220,220) !important;
+	border: 1px solid rgba(220,220,220,0.45) !important;
+	background: rgb(0,0,0) !important;
+	background: rgba(0,0,0,0.45) !important;
+	}
 	.b-mediaplaceholder .b-mediaplaceholder-inner {
 		position: relative;
 		top: auto;
@@ -3803,11 +3813,12 @@
 		height: auto;
 		margin: 0;
 		padding: 0 0 0 20px;
+		*zoom: 1;
 		}
 		.b-mediaplaceholder .b-mediaplaceholder-pic {
 			overflow: hidden;
 			position: absolute;
-			top: 0;
+			top: 50%;
 			left: 0;
 			display: block;
 			margin: 0;
@@ -3818,15 +3829,16 @@
 		.b-mediaplaceholder-photo .b-mediaplaceholder-pic {
 			width: 13px;
 			height: 11px;
+			margin-top: -6px;
 			background-position: 0 -50px;
 			}
 		.b-mediaplaceholder-video .b-mediaplaceholder-pic {
 			width: 12px;
 			height: 13px;
+			margin-top: -7px;
 			background-position: 0 -37px;
 			}
 		.b-mediaplaceholder-processing .b-mediaplaceholder-pic {
-			top: 50%;
 			width: 11px;
 			height: 3px;
 			margin-top: -2px;
@@ -3860,7 +3872,7 @@
 	display: inline-block;
 	width: 35px;
 	height: 37px;
-	margin: 0 10px 0 1px;
+	margin: 0 10px 0 0;
 	padding: 0;
 	vertical-align: top !important;
 	border: 0 !important;
@@ -3870,12 +3882,15 @@
 	text-shadow: none;
 	color: #FFF !important;
 	cursor: pointer;
+	*display: inline;
+	*zoom: 1;
 	}
-	.b-mediaplaceholder-external .b-mediaplaceholder-pic {
+	.b-mediaplaceholder-external .b-mediaplaceholder-bg {
 		overflow: hidden;
 		position: absolute;
 		top: 0;
 		left: 0;
+		opacity: 0.25;
 		display: block;
 		width: 35px;
 		height: 37px;
@@ -3884,6 +3899,22 @@
 		background: url(/img/mediaplaceholder.png?v=1) no-repeat 0 0;
 		font: 0/0 serif;
 		}
+	.b-mediaplaceholder-external:hover .b-mediaplaceholder-bg {
+		opacity: 0.35;
+		}
+	.b-mediaplaceholder-external .b-mediaplaceholder-pic {
+		overflow: hidden;
+		position: absolute;
+		top: 10px;
+		left: 12px;
+		display: block;
+		width: 16px;
+		height: 16px;
+		margin: 0;
+		padding: 0;
+		background: url(/img/mediaplaceholder.png?v=1) no-repeat -19px -37px;
+		font: 0/0 serif;
+		}
 	.b-mediaplaceholder-external .b-mediaplaceholder-arr {
 		border-right: 5px solid rgba(0,0,0,0.25);
 		}