zotonic_mod_admin

// use smaller grid gutter
@_thumbnail_gutter: 6px;

.connect-results {
    max-height: 400px;
    margin-top: @baseMargin;
    padding: 10px 0;
    overflow-x: hidden;
    overflow-y: auto;
    
    .row {
        margin-left: -@_thumbnail_gutter;
        margin-right: -@_thumbnail_gutter;
    }
}

.thumbnails {
    list-style: none;
    padding: 0;
    #3L > .clearfix;
    
    [class*="col-"] {
        padding-left: @_thumbnail_gutter;
        padding-right: @_thumbnail_gutter;
    }

    .thumbnail {
        @_padding: 5px;
        @_contentPartMargin: 0.25em;
        @_contentHeight: @thumbImageHeight;
        @_heigth: @_contentHeight + 2 * @_padding + 2px; // add border
        @_contentMargin: 1.5 * @_padding;
        @_fontSize: 12px;
        @_lineHeight: 1.1em;
        
        min-height: @_heigth;
        max-height: @_heigth;
        overflow: hidden;    
        #3L > .border-radius(2px);
        #3L > .box-shadow(none);
        cursor: pointer;
        margin-bottom: 2 * @_thumbnail_gutter;
        padding: @_padding;
        font-size: @_fontSize;
        line-height: @_lineHeight;
        position: relative;
        transition-duration: 0;
        -webkit-transition-duration: 0;
        
        &,
        a:link, 
        a:visited {
            color: @textColorDark;
        }
        
        &:hover {
            border-color: @borderColorSelection;
        }
        
        // fade out thumbnails that are connected to the page
        // except when it is a depiction predicate
        &.thumbnail-connected:not(.thumbnail-depiction) {
            &,
            h5, h6,
            a:link, 
            a:visited {
                color: @textColorLight;
            }
            img {
                opacity: .3;
            }
            background-color: @backgroundColorLightest;
        }
        
        .z-thumbnail-text {
            @_content_height: @_heigth - 2 * @_padding - 2; // subtract border too
            position: absolute;
            left: @_padding;
            top: @_padding;
            margin-right: @_padding;
            height: @_content_height;
            max-height: @_content_height;
            overflow: hidden;
        }
        
        img + .z-thumbnail-text {
            left: @_padding + @thumbImageWidth + @_contentMargin;
        }
        
        img {
            padding: 0;
            #3L > .border-radius(0);
            #3L > .box-shadow(none);
            margin: 0 @_contentMargin 0 0;
        }
        
        h5, h6, p {
            font-size: @_fontSize;
            line-height: @_lineHeight;
            font-weight: normal;
            margin: 0;
        }
        h5, h6 {
            &:extend(.admin-word-break);
        }
        h5 {
            font-weight: bold;
            margin-bottom: 2px;
        }
        h6 {
            text-transform: lowercase;
        }
        p {
            max-height: 2 * @_lineHeight;
            overflow: hidden;
        }
    }
}