resources/src/mediawiki.skinning/content.thumbnails-common.less

   1 /**
   2  * These styles are common to both print and screen media.
   3  * Use the -print or without postfix files to apply styles more selectively.
   4  */
   5
   6 /* stylelint-disable selector-class-pattern */
   7
   8 @import 'mediawiki.skin.variables.less';
   9 @import 'content.variables.less';
  10 @import 'mediawiki.mixins.less';
  11
  12 /* @noflip */
  13 div.tright,
  14 div.floatright,
  15 table.floatright {
  16         clear: right;
  17         float: right;
  18
  19         body.skin--responsive & {
  20                 @media all and ( max-width: @max-width-breakpoint-mobile ) {
  21                         clear: both;
  22                         float: none;
  23                 }
  24         }
  25 }
  26
  27 /* @noflip */
  28 div.tleft,
  29 div.floatleft,
  30 table.floatleft {
  31         float: left;
  32         clear: left;
  33
  34         @media all and ( max-width: @max-width-breakpoint-mobile ) {
  35                 body.skin--responsive & {
  36                         clear: both;
  37                         float: none;
  38                 }
  39         }
  40 }
  41
  42 div,
  43 table {
  44         &.floatright {
  45                 /* @noflip */
  46                 margin: @margin-floatright;
  47         }
  48
  49         &.floatleft {
  50                 /* @noflip */
  51                 margin: @margin-floatleft;
  52         }
  53 }
  54
  55 div.thumb {
  56         width: auto;
  57         background-color: transparent;
  58         margin-bottom: @margin-bottom-thumb;
  59 }
  60
  61 /* @noflip */
  62 div.tleft {
  63         margin: @margin-tleft;
  64 }
  65
  66 /* @noflip */
  67 div.tright {
  68         margin: @margin-tright;
  69 }
  70
  71 .thumbcaption {
  72         text-align: start;
  73         line-height: @line-height-thumbcaption;
  74         padding: 3px;
  75
  76         &:empty {
  77                 padding: 0;
  78         }
  79 }
  80
  81 div.thumbinner {
  82         padding: 3px;
  83         text-align: center;
  84         /* new block formatting context,
  85          * to clear background from floating content */
  86         overflow: hidden;
  87 }
  88
  89 // When rendering two images side by side, ensure they always appear side by side as intended
  90 // Avoid image child overflowing the container (T200518)/
  91 // T38030 and T148505
  92
  93 @media all and ( max-width: @max-width-breakpoint-mobile ) {
  94         body.skin--responsive & {
  95                 .mw-parser-output {
  96                         .thumb .thumbinner {
  97                                 .flex-display();
  98                                 place-content: flex-start center;
  99                                 flex-flow: column wrap;
 100
 101                                 > .thumbcaption {
 102                                         .flex( 1, 0, 100% );
 103                                         display: block;
 104                                 }
 105                         }
 106                 }
 107         }
 108 }