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

   1 @import 'mediawiki.skin.variables.less';
   2
   3 /* stylelint-disable selector-class-pattern */
   4
   5 /* Galleries */
   6 /* Don't forget to update gallery.print.css */
   7
   8 // Increase specificity to override `.mw-content-rtl .mw-content-ltr ul` (T326017)
   9 // TODO: Galleries should not use `<ul>` (T38755)
  10 ul.gallery.gallery.gallery {
  11         margin: 2px;
  12         padding: 2px;
  13         display: block;
  14 }
  15
  16 li.gallerycaption {
  17         font-weight: bold;
  18         text-align: center;
  19         display: block;
  20         word-wrap: break-word;
  21 }
  22
  23 li.gallerybox {
  24         vertical-align: top;
  25         display: inline-block;
  26
  27         div.thumb {
  28                 text-align: center;
  29                 margin: 2px;
  30
  31                 img {
  32                         display: block;
  33                         margin: 0 auto;
  34                 }
  35         }
  36 }
  37
  38 div.gallerytext {
  39         overflow: hidden;
  40         font-size: 94%;
  41         padding: 9px 4px 17px;
  42         word-wrap: break-word;
  43
  44         // FIXME: This is for backwards compatibility with parser markup generated prior
  45         // to I5039c7ef9e07199c256fd568b4f94714e5831d17. It can be removed when we no longer
  46         // need to worry about that HTML.
  47         p {
  48                 margin: 0;
  49         }
  50 }
  51
  52 .galleryfilename {
  53         display: block;
  54
  55         &-truncate {
  56                 white-space: nowrap;
  57                 overflow: hidden;
  58                 text-overflow: ellipsis;
  59         }
  60 }
  61
  62 /* new gallery stuff */
  63 ul.mw-gallery-nolines li.gallerybox {
  64         div.thumb {
  65                 background-color: transparent;
  66                 border: 0;
  67         }
  68
  69         div.gallerytext {
  70                 text-align: center;
  71         }
  72 }
  73
  74 /* height constrained gallery */
  75
  76 ul.mw-gallery-packed,
  77 ul.mw-gallery-packed-overlay,
  78 ul.mw-gallery-packed-hover {
  79         text-align: center;
  80
  81         li.gallerybox div.thumb {
  82                 background-color: transparent;
  83                 border: 0;
  84
  85                 img {
  86                         margin: 0 auto;
  87                 }
  88         }
  89 }
  90
  91 ul.mw-gallery-packed-hover,
  92 ul.mw-gallery-packed-overlay {
  93         li.gallerybox {
  94                 position: relative;
  95         }
  96 }
  97
  98 ul.mw-gallery-packed-hover div.gallerytextwrapper {
  99         overflow: hidden;
 100         height: 0;
 101 }
 102
 103 ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
 104 ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
 105 ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
 106         position: absolute;
 107         background: @background-color-backdrop-light;
 108         padding: 5px 10px;
 109         bottom: 0;
 110         left: 0; /* Needed for IE */
 111         height: auto;
 112         max-height: 40%;
 113         overflow: hidden;
 114         font-weight: bold;
 115         margin: 2px; /* correspond to style on div.thumb */
 116
 117         p {
 118                 text-overflow: ellipsis;
 119                 white-space: nowrap;
 120                 overflow: hidden;
 121         }
 122
 123         &:hover {
 124                 overflow: visible;
 125                 max-height: none;
 126
 127                 p {
 128                         text-overflow: clip;
 129                         white-space: normal;
 130                         overflow: visible;
 131                 }
 132         }
 133 }
 134
 135 /* Slideshow */
 136 // Increase specificity to override `.mw-content-rtl .mw-content-ltr ul` (T326017)
 137 // TODO: Galleries should not use `<ul>` (T38755)
 138 ul.gallery.gallery.gallery.mw-gallery-slideshow {
 139         display: block;
 140         margin: 4em 0;
 141 }
 142
 143 .mw-gallery-slideshow {
 144         .gallerycaption {
 145                 font-size: 1.3em;
 146                 margin: 0;
 147         }
 148
 149         /* `li` item */
 150         .gallerycarousel {
 151                 display: block;
 152                 text-align: center;
 153
 154                 &.mw-gallery-slideshow-thumbnails-toggled {
 155                         margin-bottom: 1.3em;
 156                 }
 157         }
 158
 159         .mw-gallery-slideshow-buttons {
 160                 opacity: 0.5;
 161                 padding: 1.3em 0;
 162                 white-space: nowrap;
 163
 164                 .oo-ui-buttonElement {
 165                         margin: 0 2em;
 166
 167                         &:first-child {
 168                                 margin-left: 0;
 169                         }
 170
 171                         &:last-child {
 172                                 margin-right: 0;
 173                         }
 174                 }
 175         }
 176
 177         .gallerybox {
 178                 &.slideshow-current {
 179                         background: @background-color-interactive;
 180                 }
 181
 182                 > div {
 183                         max-width: 120px;
 184                 }
 185
 186                 div.thumb {
 187                         border: 0;
 188                         background: transparent;
 189                 }
 190         }
 191 }
 192
 193 .mw-gallery-slideshow-img-container a {
 194         display: block;
 195 }
 196
 197 @media screen {
 198         /* Background and border colors are defined separately for print mode */
 199         li.gallerybox div.thumb {
 200                 background-color: @background-color-neutral-subtle;
 201                 border: @border-subtle;
 202         }
 203 }