resources/src/mediawiki.skinning/logo.less

   1 // We have to render the wordmark image before the print dialog is invoked, otherwise the image
   2 // won't render in the printed file. Use a little hack to render the image outside the viewport
   3 // and bring it in the viewport in print view.
   4 /* stylelint-disable-next-line selector-class-pattern */
   5 .firstHeading {
   6         // We could also use a CSS background to display the logo.
   7         // The problem is that the logo won't be printed unless the user prints the background too.
   8         // Note. This specification does not fully define the interaction of :before and :after with
   9         // replaced elements (such as IMG in HTML). This will be defined in more detail in a future
  10         // specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content
  11         & when( @logo-enabled = 1 ) {
  12                 &::before {
  13                         content: @logo-wordmark-url;
  14                         display: block;
  15                         height: ~'@{logo-wordmark-height}px';
  16                         left: -9999px;
  17                         line-height: 0;  // line-height is needed for correctly displaying the size of the content box.
  18                         margin-bottom: 20px;
  19                         position: absolute;
  20                         width: ~'@{logo-wordmark-width}px';
  21                 }
  22         }
  23 }