WordPress.org

Make WordPress Core

Changeset 22343


Ignore:
Timestamp:
10/31/2012 08:34:50 PM (8 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/media-views.css

    r22336 r22343  
    274274}
    275275
    276 .attachment .thumbnail {
     276/* Vertically center the icons. */
     277.attachment .icon {
     278    top: 50%;
     279    left: 50%;
     280}
     281
     282.attachment-preview .thumbnail:after {
     283    content: '';
     284    display: block;
     285    position: absolute;
     286    top: 0;
     287    left: 0;
     288    right: 0;
     289    bottom: 0;
     290    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
     291    overflow: hidden;
     292}
     293
     294.attachment .thumbnail img {
     295    top: 0;
     296    left: 0;
     297}
     298
     299.attachment .thumbnail .centered {
     300    position: absolute;
     301    top: 0;
     302    left: 0;
     303    width: 100%;
     304    height: 100%;
    277305    -webkit-transform: translate( 50%, 50% );
    278306    -moz-transform:    translate( 50%, 50% );
     
    282310}
    283311
    284 /* Vertically center the icons. */
    285 .attachment .icon {
    286     top: 50%;
    287     left: 50%;
    288 }
    289 
    290 .attachment-preview:after {
    291     content: '';
    292     display: block;
    293     position: absolute;
    294     top: 0;
    295     left: 0;
    296     right: 0;
    297     bottom: 0;
    298     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
    299     overflow: hidden;
    300 }
    301 
    302 .attachment .thumbnail img {
    303     top: 0;
    304     left: 0;
    305 }
    306 
    307312.attachment .icon,
    308 .attachment .thumbnail img {
     313.attachment .thumbnail .centered img {
    309314    -webkit-transform: translate( -50%, -50% );
    310315    -moz-transform:    translate( -50%, -50% );
  • trunk/wp-includes/media.php

    r22340 r22343  
    13281328            <% } else if ( 'image' === type ) { %>
    13291329                <div class="thumbnail">
    1330                     <img src="<%- url %>" draggable="false" />
     1330                    <div class="centered">
     1331                        <img src="<%- url %>" draggable="false" />
     1332                    </div>
    13311333                </div>
    13321334            <% } else { %>
Note: See TracChangeset for help on using the changeset viewer.