Committer: esavintcev
LJSUP-10691: Image placeholders in commentsU 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); }