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