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 div#content {
  31         margin-left: 10em;
  32         padding: @content-padding;
  33         /* Border on top, left, and bottom side */
  34         border: 1px solid @content-border-color;
  35         border-right-width: 0;
  36         /* Merge the border with tabs' one (in their background image) */
  37         margin-top: -1px;
  38         background-color: @body-background-color;
  39         color: @content-font-color;
  40         direction: ltr;
  41
  42         .mw-editsection,
  43         .mw-editsection-like {
  44                 font-family: @content-font-family;
  45         }
  46
  47         p {
  48                 line-height: inherit;
  49                 margin: 0.5em 0;
  50         }
  51
  52         h1,
  53         h2,
  54         #firstHeading {
  55                 font-family: @content-heading-font-family;
  56                 line-height: @heading-line-height;
  57                 margin-bottom: 0.25em;
  58                 padding: 0;
  59         }
  60
  61         h1,
  62         #firstHeading {
  63                 font-size: @content-heading-font-size;
  64         }
  65
  66         h2 {
  67                 font-size: 1.5em;
  68                 margin-top: 1em;
  69         }
  70
  71         h3,
  72         h4,
  73         h5,
  74         h6 {
  75                 line-height: @content-line-height;
  76                 margin-top: 0.3em;
  77                 margin-bottom: 0;
  78                 padding-bottom: 0;
  79         }
  80
  81         h3 {
  82                 font-size: 1.17em;
  83         }
  84
  85         h3,
  86         h4 {
  87                 font-weight: bold;
  88         }
  89
  90         h4,
  91         h5,
  92         h6 {
  93                 font-size: 100%; /* (reset) */
  94         }
  95
  96         #toc h2,
  97         .toc h2 {
  98                 font-size: 100%; /* (reset) */
  99                 font-family: @content-font-family;
 100         }
 101 }
 102
 103 /* Hide empty portlets */
 104 div.emptyPortlet {
 105                 display: none;
 106 }
 107
 108 ul {
 109         list-style-type: disc;
 110         .list-style-image('images/bullet-icon.png');
 111 }
 112
 113 pre, .mw-code {
 114         line-height: 1.3em;
 115 }
 116
 117 /* Site Notice (includes notices from CentralNotice extension) */
 118 #siteNotice {
 119         font-size: 0.8em;
 120 }
 121
 122 .redirectText {
 123         font-size: 140%;
 124 }
 125
 126 .redirectMsg img {
 127         vertical-align: text-bottom;
 128 }
 129
 130 #bodyContent {
 131         position: relative;
 132         line-height: @content-line-height;
 133         font-size: @content-font-size;
 134 }
 135
 136 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
 137 // FIXME: Should be part of jquery.tipsy.css
 138 .tipsy {
 139         font-size: 0.8em;
 140 }