New comment bubble styling! props matveb, iandstewart, fixes #17741.

git-svn-id: http://svn.automattic.com/wordpress/trunk@18255 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentyeleven/colors/dark.css

@@ -205,13 +205,10 @@ a:active img[class*="wp-image-"] {
 
 /* Comments link */
 .entry-header .comments-link a {
-	background: #242424;
+	background: #282828 url(../images/comment-bubble-dark.png) no-repeat;
 	border-color: #222;
 	color: #888;
 }
-.entry-header .comments-link a .leave-reply {
-	background-position-y: -24px;
-}
 
 /* Singular content styles for Posts and Pages */
 .singular .entry-title {

wp-content/themes/twentyeleven/inc/theme-options.php

@@ -370,7 +370,7 @@ function twentyeleven_print_link_color_style() {
 		.entry-header .comments-link a:focus,
 		.entry-header .comments-link a:active,
 		.feature-slider a.active {
-			background: <?php echo $link_color; ?>;
+			background-color: <?php echo $link_color; ?>;
 		}
 	</style>
 <?php

wp-content/themes/twentyeleven/style.css

@@ -992,48 +992,32 @@ a:active img[class*="wp-image-"] {
 
 /* Comments link */
 .entry-header .comments-link a {
-	background: #eee;
+	background: #eee url(images/comment-bubble.png) no-repeat;
-	border: 1px solid #ddd;
+	color: #666;
-	-moz-border-radius: 24px;
+	font-size: 13px;
-	border-radius: 24px;
+	font-weight: normal;
-	color: #777;
+	line-height: 36px;
-	font-size: 18px;
-	font-weight: 300;
-	line-height: 48px;	
 	overflow: hidden;
+	padding: 0 0 0;
 	position: absolute;
+	top: 1.5em;
+	right: 0;
 	text-align: center;
 	text-decoration: none;
-	top: .5em;
+	width: 43px;
-	right: 0;
+	height: 36px;
-	width: 48px;
-	height: 48px;
 }
 .entry-header .comments-link a:hover,
 .entry-header .comments-link a:focus,
 .entry-header .comments-link a:active {
-	background: #1982d1;
+	background-color: #1982d1;
-	border-color: #1573bb;
-	border-color: rgba(0,0,0,0.2);
 	color: #fff;
 	color: rgba(255,255,255,0.8);
 }
 .entry-header .comments-link .leave-reply {
-	background: url(images/icon-comment.png) no-repeat;
+	 visibility: hidden;
-	color: transparent;
-	display: inline-block;
-	font-family: "Arial Unicode MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 26px;
-	height: 24px;
-	line-height: 12px;
-	opacity: 0.25;
-	position: relative;
-	width: 24px;
-}
-.entry-header .comments-link a:hover .leave-reply {
-	background-position-y: -24px;
-	opacity: 0.5;
 }
+
 /*
 	Post Formats Headings
 	To hide the headings, display: none the ".entry-header .entry-format" selector,
@@ -1214,6 +1198,9 @@ blockquote.pull {
 /* =Image
 ----------------------------------------------- */
 
+.indexed.format-image .entry-header {
+	min-height: 61px; /* Prevent the comment icon from colliding with the image when there is no title */
+}
 .indexed.format-image .entry-content {
 	padding-top: 0.5em;
 }