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