[livejournal] r21205: 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-16 14:50:55 UTC (rev 21204)
+++ trunk/cgi-bin/cleanhtml.pl	2012-02-16 16:03:21 UTC (rev 21205)
@@ -1157,7 +1157,11 @@
                             '<span class="b-mediaplaceholder-label b-mediaplaceholder-loading">' . LJ::Lang::ml("mediaplaceholder.loading") . '</span>'.
                             '</span>' .
                             '</a>';
-                        $newdata .= $href_b_link ? '<a href="' . $href_b_link .'" class="b-mediaplaceholder-external" title="' . LJ::Lang::ml("mediaplaceholder.link") . '">' . LJ::Lang::ml("mediaplaceholder.link") . '</a>' : '';
+                        $newdata .= $href_b_link ?
+                            '<a href="' . $href_b_link .'" class="b-mediaplaceholder-external" title="' . LJ::Lang::ml("mediaplaceholder.link") . '">' .
+                            '<i class="b-mediaplaceholder-pic"></i>' .
+                            '<span class="b-mediaplaceholder-inner">' . LJ::Lang::ml("mediaplaceholder.link") . '</span>' .
+                            '</a>' : '';
                         $alt_output = 1;
                         $opencount{"img"}++;
                     }

Modified: trunk/htdocs/stc/lj_base.css
===================================================================
--- trunk/htdocs/stc/lj_base.css	2012-02-16 14:50:55 UTC (rev 21204)
+++ trunk/htdocs/stc/lj_base.css	2012-02-16 16:03:21 UTC (rev 21205)
@@ -3776,16 +3776,17 @@
 	left: auto;
 	display: inline-block;
 	width: auto;
-	height: 22px;
+	height: 23px;
 	min-width: 100px;
 	margin: 0;
-	padding: 10px 10px 0 30px;
-	background: rgb(0,0,0);
-	background: rgba(0,0,0,0.35);
+	padding: 12px 10px 0 30px;
+	vertical-align: top !important;
 	-moz-border-radius: 5px;
 	border-radius: 5px;
-	border: 1px solid rgb(255,255,255) !important;
-	border: 1px solid rgba(255,255,255,0.3) !important;
+	border: 1px solid rgb(220,220,220) !important;
+	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;
 	text-align: left;
 	text-decoration: none !important;
@@ -3793,7 +3794,7 @@
 	color: #FFF !important;
 	cursor: pointer;
 	}
-	.b-mediaplaceholder-inner {
+	.b-mediaplaceholder .b-mediaplaceholder-inner {
 		position: relative;
 		top: auto;
 		left: auto;
@@ -3803,7 +3804,7 @@
 		margin: 0;
 		padding: 0 0 0 20px;
 		}
-		.b-mediaplaceholder-pic {
+		.b-mediaplaceholder .b-mediaplaceholder-pic {
 			overflow: hidden;
 			position: absolute;
 			top: 0;
@@ -3817,12 +3818,12 @@
 		.b-mediaplaceholder-photo .b-mediaplaceholder-pic {
 			width: 13px;
 			height: 11px;
-			background-position: 0 -29px;
+			background-position: 0 -50px;
 			}
 		.b-mediaplaceholder-video .b-mediaplaceholder-pic {
 			width: 12px;
 			height: 13px;
-			background-position: 0 -16px;
+			background-position: 0 -37px;
 			}
 		.b-mediaplaceholder-processing .b-mediaplaceholder-pic {
 			top: 50%;
@@ -3831,7 +3832,7 @@
 			margin-top: -2px;
 			background: url(/img/preloader-s.gif?v=1) no-repeat 0 0;
 			}
-		.b-mediaplaceholder-label {
+		.b-mediaplaceholder .b-mediaplaceholder-label {
 			display: none;
 			position: static;
 			top: auto;
@@ -3848,3 +3849,44 @@
 		.b-mediaplaceholder-processing .b-mediaplaceholder-view {
 			display: none;
 			}
+BODY .b-mediaplaceholder-external:link,
+BODY .b-mediaplaceholder-external:visited,
+BODY .b-mediaplaceholder-external:hover,
+BODY .b-mediaplaceholder-external:active,
+BODY .b-mediaplaceholder-external:focus {
+	position: relative;
+	top: auto;
+	left: auto;
+	display: inline-block;
+	width: 35px;
+	height: 37px;
+	margin: 0 10px 0 1px;
+	padding: 0;
+	vertical-align: top !important;
+	border: 0 !important;
+	font: 10px/1 Arial,sans-serif;
+	text-align: left;
+	text-decoration: none !important;
+	text-shadow: none;
+	color: #FFF !important;
+	cursor: pointer;
+	}
+	.b-mediaplaceholder-external .b-mediaplaceholder-pic {
+		overflow: hidden;
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: block;
+		width: 35px;
+		height: 37px;
+		margin: 0;
+		padding: 0;
+		background: url(/img/mediaplaceholder.png?v=1) no-repeat 0 0;
+		font: 0/0 serif;
+		}
+	.b-mediaplaceholder-external .b-mediaplaceholder-arr {
+		border-right: 5px solid rgba(0,0,0,0.25);
+		}
+	.b-mediaplaceholder-external .b-mediaplaceholder-inner {
+		display: none !important;
+		}