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