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