skins/Vector/components/common.less

   1 /*
   2  * Any rules which should not be flipped automatically in right-to-left situations should be
   3  * prepended with @noflip in a comment block.
   4  *
   5  * This stylesheet employs a few CSS trick to accomplish compatibility with a wide range of web
   6  * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
   7  * a rule that makes things work in IE6, and then following it with a rule that begins with
   8  * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
   9  * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
  10  * "IGNORED BY IE6" comments.
  11  */
  12 @import 'mediawiki.mixins';
  13
  14 /* Framework */
  15 html {
  16         font-size: @html-font-size;
  17 }
  18 html,
  19 body {
  20         height: 100%;
  21         margin: 0;
  22         padding: 0;
  23         font-family: @content-font-family;
  24 }
  25 body {
  26         background-color: @menu-background-color;
  27 }
  28
  29 /* Content */
  30 .mw-body,
  31 .parsoid-body {
  32         padding: @content-padding;
  33         background-color: @body-background-color;
  34         color: @content-font-color;
  35         direction: ltr;
  36 }
  37
  38 .mw-body {
  39         margin-left: 10em;
  40         /* Border on top, left, and bottom side */
  41         border: 1px solid @content-border-color;
  42         border-right-width: 0;
  43         /* Merge the border with tabs' one (in their background image) */
  44         margin-top: -1px;
  45
  46         // h1's can exist outside of mw-body-content so some heading styles
  47         // need to be defined in mw-body as well
  48         & h1,
  49         &-content h1,
  50         &-content h2 {
  51                 font-family: @content-heading-font-family;
  52                 line-height: @heading-line-height;
  53                 margin-bottom: 0.25em;
  54                 padding: 0;
  55
  56                 /* Fallback heading font for scripts which render poorly in @content-heading-font-family. */
  57                 /* See T73240 */
  58                 &:lang( ja ), /* See T65817 */
  59                 &:lang( he ), /* See T65843 and T65844 */
  60                 &:lang( ko ) { /* See T65827 */
  61                         font-family: @content-heading-font-family-generic;
  62                 }
  63         }
  64
  65         & h1,
  66         &-content h1 {
  67                 font-size: @content-heading-font-size;
  68         }
  69
  70         .firstHeading {
  71                 /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
  72                 overflow: visible;
  73         }
  74
  75         .mw-indicators {
  76                 float: right;
  77                 line-height: @content-line-height;
  78                 font-size: @content-font-size;
  79                 /* Ensure that this is displayed on top of .mw-body-content and clickable */
  80                 position: relative;
  81                 z-index: 1;
  82         }
  83
  84         .mw-indicator {
  85                 display: inline-block;
  86                 zoom: 1;
  87                 *display: inline; // stylelint-disable declaration-block-no-duplicate-properties
  88         }
  89 }
  90
  91 .mw-body-content {
  92         position: relative;
  93         line-height: @content-line-height;
  94         font-size: @content-font-size;
  95         z-index: 0;
  96
  97         p {
  98                 line-height: inherit;
  99                 margin: 0.5em 0;
 100         }
 101
 102         h1 {
 103                 margin-top: 1em;
 104         }
 105
 106         h2 {
 107                 font-size: 1.5em;
 108                 margin-top: 1em;
 109         }
 110
 111         h3,
 112         h4,
 113         h5,
 114         h6 {
 115                 line-height: @content-line-height;
 116                 margin-top: 0.3em;
 117                 margin-bottom: 0;
 118                 padding-bottom: 0;
 119         }
 120
 121         h3 {
 122                 font-size: 1.2em;
 123         }
 124
 125         h3,
 126         h4 {
 127                 font-weight: bold;
 128         }
 129
 130         h4,
 131         h5,
 132         h6 {
 133                 font-size: 100%; /* (reset) */
 134         }
 135
 136         #toc h2,
 137         .toc h2 {
 138                 font-size: 100%; /* (reset) */
 139                 font-family: @content-font-family;
 140         }
 141 }
 142
 143 /* Allow edit sections outside of mw-body-content (T160269) */
 144 .mw-editsection,
 145 .mw-editsection-like {
 146         font-family: @content-font-family;
 147 }
 148
 149 /* Hide empty portlets */
 150 div.emptyPortlet {
 151         display: none;
 152 }
 153
 154 ul {
 155         list-style-type: disc;
 156         .list-style-image-svg('images/bullet-icon.svg', 'images/bullet-icon.png');
 157 }
 158
 159 pre,
 160 .mw-code {
 161         line-height: 1.3em;
 162 }
 163
 164 /* Site Notice (includes notices from CentralNotice extension) */
 165 #siteNotice {
 166         font-size: 0.8em;
 167 }