Themes: Switch to a text overlay instead of an icon on hover. Numerous reasons outlined in the ticket.

props shaunandrews.
fixes #26440.


git-svn-id: https://develop.svn.wordpress.org/trunk@26708 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/wp-admin.css

@@ -6440,29 +6440,6 @@ span.imgedit-scale-warn {
 	transition:         opacity 0.2s ease-in-out;
 }
 
-.theme-browser .theme:after {
-	display: block;
-	opacity: 0;
-	content: '\f348';
-	-webkit-font-smoothing: antialiased;
-	font: normal 64px/1 'dashicons';
-	vertical-align: middle;
-	text-align: center;
-	color: #000;
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	padding-top: 24%;
-	text-shadow: 0 1px 20px rgba(255,255,255,0.9);
-	-webkit-transition: opacity 0.2s ease-in-out;
-	transition:         opacity 0.2s ease-in-out;
-}
-
-.theme-browser .theme:hover:after {
-	opacity: 0.6;
-}
-
 .theme-browser .theme:hover .theme-screenshot {
 	background: #fff;
 }
@@ -6471,6 +6448,29 @@ span.imgedit-scale-warn {
 	opacity: 0.4;
 }
 
+.theme-browser .theme .more-details {
+	opacity: 0;
+	position: absolute;
+		top: 35%;
+		right: 25%;
+		left: 25%;
+	background: rgba(0,0,0,0.7);
+	color: #fff;
+	font-size: 15px;
+	text-shadow: 0 1px 0 rgba(0,0,0,0.6);
+	-webkit-font-smoothing: antialiased;
+	font-weight: 600;
+	padding: 15px 12px;
+	text-align: center;
+	border-radius: 3px;
+	-webkit-transition: opacity 0.1s ease-in-out;
+	transition:         opacity 0.1s ease-in-out;
+}
+
+.theme-browser .theme:hover .more-details {
+	opacity: 1;
+}
+
 /**
  * Displays a theme update notice
  * when an update is available.

src/wp-admin/themes.php

@@ -220,6 +220,7 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_
 	<# } else { #>
 		<div class="theme-screenshot blank"></div>
 	<# } #>
+	<span class="more-details"><?php _e( 'Theme Details' ); ?></span>
 	<div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
 	
 	<# if ( data.active ) { #>