resources/src/mediawiki.page.gallery.styles/gallery.css

   1 /* stylelint-disable selector-class-pattern */
   2
   3 /* Galleries */
   4 /* These display attributes look nonsensical, but are needed to support IE and FF2 */
   5 /* Don't forget to update gallery.print.css */
   6 li.gallerybox {
   7         vertical-align: top;
   8         display: -moz-inline-box;
   9         display: inline-block;
  10 }
  11
  12 ul.gallery,
  13 li.gallerybox {
  14         zoom: 1;
  15         *display: inline;
  16 }
  17
  18 ul.gallery {
  19         margin: 2px;
  20         padding: 2px;
  21         display: block;
  22 }
  23
  24 li.gallerycaption {
  25         font-weight: bold;
  26         text-align: center;
  27         display: block;
  28         word-wrap: break-word;
  29 }
  30
  31 li.gallerybox div.thumb {
  32         text-align: center;
  33         margin: 2px;
  34 }
  35
  36 li.gallerybox div.thumb img {
  37         display: block;
  38         margin: 0 auto;
  39 }
  40
  41 div.gallerytext {
  42         overflow: hidden;
  43         font-size: 94%;
  44         padding: 2px 4px;
  45         word-wrap: break-word;
  46 }
  47
  48 .galleryfilename {
  49         display: block;
  50 }
  51
  52 .galleryfilename-truncate {
  53         white-space: nowrap;
  54         overflow: hidden;
  55         text-overflow: ellipsis;
  56 }
  57
  58 /* new gallery stuff */
  59 ul.mw-gallery-nolines li.gallerybox div.thumb {
  60         background-color: transparent;
  61         border: 0;
  62 }
  63
  64 ul.mw-gallery-nolines li.gallerybox div.gallerytext {
  65         text-align: center;
  66 }
  67
  68 /* height constrained gallery */
  69
  70 ul.mw-gallery-packed li.gallerybox div.thumb,
  71 ul.mw-gallery-packed-overlay li.gallerybox div.thumb,
  72 ul.mw-gallery-packed-hover li.gallerybox div.thumb {
  73         background-color: transparent;
  74         border: 0;
  75 }
  76
  77 ul.mw-gallery-packed li.gallerybox div.thumb img,
  78 ul.mw-gallery-packed-overlay li.gallerybox div.thumb img,
  79 ul.mw-gallery-packed-hover li.gallerybox div.thumb img {
  80         margin: 0 auto;
  81 }
  82
  83 ul.mw-gallery-packed-hover li.gallerybox,
  84 ul.mw-gallery-packed-overlay li.gallerybox {
  85         position: relative;
  86 }
  87
  88 ul.mw-gallery-packed-hover div.gallerytextwrapper {
  89         overflow: hidden;
  90         height: 0;
  91 }
  92
  93 ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
  94 ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
  95 ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
  96         position: absolute;
  97         background: #fff;
  98         background: rgba( 255, 255, 255, 0.8 );
  99         padding: 5px 10px;
 100         bottom: 0;
 101         left: 0; /* Needed for IE */
 102         height: auto;
 103         max-height: 40%;
 104         overflow: hidden;
 105         font-weight: bold;
 106         margin: 2px; /* correspond to style on div.thumb */
 107 }
 108
 109 ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper p,
 110 ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper p,
 111 ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper p {
 112         text-overflow: ellipsis;
 113         white-space: nowrap;
 114         overflow: hidden;
 115 }
 116
 117 ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper:hover,
 118 ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper:hover,
 119 ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper:hover {
 120         overflow: visible;
 121         max-height: none;
 122 }
 123
 124 ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper:hover p,
 125 ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper:hover p,
 126 ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper:hover p {
 127         text-overflow: clip;
 128         white-space: normal;
 129         overflow: visible;
 130 }
 131
 132 ul.mw-gallery-packed-hover,
 133 ul.mw-gallery-packed-overlay,
 134 ul.mw-gallery-packed {
 135         text-align: center;
 136 }
 137
 138 /* Slideshow */
 139 ul.gallery.mw-gallery-slideshow {
 140         display: block;
 141         margin: 4em 0;
 142 }
 143
 144 ul.gallery.mw-gallery-slideshow .gallerycaption {
 145         font-size: 1.3em;
 146         margin: 0;
 147 }
 148
 149 ul.gallery.mw-gallery-slideshow .gallerycarousel.mw-gallery-slideshow-thumbnails-toggled {
 150         margin-bottom: 1.3em;
 151 }
 152
 153 ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons {
 154         opacity: 0.5;
 155         padding: 1.3em 0;
 156 }
 157
 158 ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons .oo-ui-buttonElement {
 159         margin: 0 2em;
 160 }
 161
 162 .mw-gallery-slideshow li.gallerybox.slideshow-current {
 163         background: #efefef;
 164 }
 165
 166 .mw-gallery-slideshow .gallerybox > div {
 167         max-width: 120px;
 168 }
 169
 170 ul.mw-gallery-slideshow li.gallerybox div.thumb {
 171         border: 0;
 172         background: transparent;
 173 }
 174
 175 ul.mw-gallery-slideshow li.gallerycarousel {
 176         display: block;
 177         text-align: center;
 178 }
 179
 180 .mw-gallery-slideshow-img-container a {
 181         display: block;
 182 }
 183
 184 @media screen {
 185         /* Background and border colors are defined separately for print mode */
 186         li.gallerybox div.thumb {
 187                 border: 1px solid #c8ccd1;
 188                 background-color: #f8f9fa;
 189         }
 190 }