Changeset 22343

Timestamp:

10/31/2012 08:34:50 PM (14 years ago)

Author:

koopersmith

Message:

Fix positioning of attachment thumbnail overlays.

Prevents the overlay from blocking buttons inside the attachment preview, such as the remove button in the gallery editor.

see #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (2 diffs)
• media.php (modified) (1 diff)

trunk/wp-includes/css/media-views.css

@@ -274 +274 @@
 }
 
-.attachment .thumbnail {
+/* Vertically center the icons. */
+.attachment .icon {
+        top: 50%;
+        left: 50%;
+}
+
+.attachment-preview .thumbnail:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
+        overflow: hidden;
+}
+
+.attachment .thumbnail img {
+        top: 0;
+        left: 0;
+}
+
+.attachment .thumbnail .centered {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
         -webkit-transform: translate( 50%, 50% );
         -moz-transform:    translate( 50%, 50% );
@@ -282 +310 @@
 }
 
-/* Vertically center the icons. */
-.attachment .icon {
-        top: 50%;
-        left: 50%;
-}
-
-.attachment-preview:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
-        overflow: hidden;
-}
-
-.attachment .thumbnail img {
-        top: 0;
-        left: 0;
-}
-
 .attachment .icon,
-.attachment .thumbnail img {
+.attachment .thumbnail .centered img {
         -webkit-transform: translate( -50%, -50% );
         -moz-transform:    translate( -50%, -50% );

trunk/wp-includes/media.php

@@ -1328 +1328 @@
                         <% } else if ( 'image' === type ) { %>
                                 <div class="thumbnail">
-                                        <img src="<%- url %>" draggable="false" />
+                                        <div class="centered">
+                                                <img src="<%- url %>" draggable="false" />
+                                        </div>
                                 </div>
                         <% } else { %>