MediaWiki:Common.less/files.less

From the RuneScape Wiki, the wiki for all things RuneScape
Jump to: navigation, search
// <pre>
/* -------------------------
      files and captions
   ------------------------- */

/* single thumbnails */
div.thumbinner {
    border: 1px solid @mw-notice-border;
    background: none;
    padding: 0;
}

// core mediawiki classes use the html selector for some dumb reason
html .thumbimage {
    border: none;
}

html .thumbcaption {
    color: @shuttle-gray;
    background: @mw-notice-background;
    border-top: 1px solid @mw-notice-border;
    padding: .4em .6em;
    box-sizing: border-box;
    word-wrap: break-word;
}

.thumbcaption .magnify {
    display: none;
}

.article-thumb {
    padding: 2px;
}

/* -----------------
       galleries
   ----------------- */
li.gallerybox div.thumb {
    background: @mw-notice-background;
    border-color: @mw-notice-border;
}

div.gallerytext {
    color: @shuttle-gray;
    font-size: .85em;
    line-height: 1.6em;

    p {
        margin: .5em 0;
    }

}

/* hide border from image galleries */
.gallery-image-wrapper {
    border: none !important;
}

// add background color to gallery item if image is too close to page background color
// usage: <gallery class="gallery-bg"> to give all items in the gallery a background
//        <gallery class="gallery-bg-4"> to give only the fourth item a background

.gallery-bg .gallerybox .thumb,
.gallery-bg.mw-gallery-packed .gallerybox .thumb {
    background-color: @shuttle-gray;
    overflow: hidden;
}

.gallery-bg .gallerybox img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
}

.gallery-bg-repeat(@count; @i: 1) when (@i =< @count) {

    [email protected]{i} .gallerybox:nth-of-type(@{i}) {

        .thumb {
            &:extend(.gallery-bg .gallerybox .thumb);
        }

        img {
            &:extend(.gallery-bg .gallerybox img);
        }

    }

    .gallery-bg-repeat(@count; (@i + 1));

}

// the number of times this loops must be kept in sync with [[MediaWiki:Vector-darkmode.less/files.less]]
.gallery-bg-repeat(10);

/* -------------------------------------
      header at the top of file pages
   ------------------------------------- */

#filetoc {
	background: @mw-notice-background;
    border: 1px solid @mw-notice-border;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 1.5em;
}

// inventory item galleries
.gallery-inv-items img {
	image-rendering: pixelated;
}