resources/src/mediawiki/page/gallery.css

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