Changeset 22343

Timestamp:

10/31/2012 08:34:50 PM (12 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 { %>