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

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