skins/Vector/components/navigation.less

   1 @import 'mediawiki.mixins';
   2 @import 'personalMenu';
   3 @import 'search';
   4 @import 'tabs';
   5
   6 /* Hide, but keep accessible for screen-readers */
   7 #mw-navigation h2 {
   8         position: absolute;
   9         top: -9999px;
  10 }
  11
  12 /* Head */
  13 #mw-page-base {
  14         height: 5em;
  15         background-position: bottom left;
  16         background-repeat: repeat-x;
  17         /* This image is only a fallback (for IE 6-9), so we do not @embed it. */
  18         background-image: url( images/page-fade.png );
  19         .vertical-gradient(@body-background-color, @menu-background-color, 50%, 100%);
  20         background-color: @body-background-color;
  21 }
  22
  23 #mw-head-base {
  24         margin-top: -5em;
  25         margin-left: 10em;
  26         height: 5em;
  27 }
  28
  29 div#mw-head {
  30         position: absolute;
  31         top: 0;
  32         right: 0;
  33         width: 100%;
  34
  35         h3 {
  36                 margin: 0;
  37                 padding: 0;
  38         }
  39 }
  40
  41 /* Navigation Containers */
  42 #left-navigation {
  43         float: left;
  44         margin-left: 10em;
  45         margin-top: 2.5em;
  46         /* When right nav would overlap left nav, it's placed below it
  47            (normal CSS floats behavior). This rule ensures that no empty space
  48            is shown between them due to right nav's margin-top. Page layout
  49            is still broken, but at least the nav overlaps only the page title
  50            instead of half the content. */
  51         margin-bottom: -2.5em;
  52         /* IE 6 double-margin bug fix */
  53         display: inline;
  54 }
  55
  56 #right-navigation {
  57         float: right;
  58         margin-top: 2.5em;
  59 }
  60
  61 /* Logo */
  62 #p-logo {
  63         width: 10em;
  64         height: 160px;
  65
  66         a {
  67                 display: block;
  68                 width: 10em;
  69                 height: 160px;
  70                 background-repeat: no-repeat;
  71                 background-position: center center;
  72                 text-decoration: none;
  73         }
  74 }
  75
  76 /* Panel */
  77 div#mw-panel {
  78         font-size: @menu-main-font-size;
  79         position: absolute;
  80         top: 0;
  81         width: 10em;
  82         left: 0;
  83
  84         div.portal {
  85                 margin: 0 0.6em 0 0.7em;
  86                 padding: 0.25em 0;
  87                 direction: ltr;
  88                 background-position: top left;
  89                 background-repeat: no-repeat;
  90
  91                 h3 {
  92                         font-size: @menu-main-heading-font-size;
  93                         color: @menu-main-heading-color;
  94                         font-weight: normal;
  95                         margin: 0.5em 0 0 (@menu-main-body-margin-left/@menu-main-heading-font-size);
  96                         padding: 0.25em 0;
  97                         cursor: default;
  98                         border: 0;
  99                 }
 100
 101                 div.body {
 102                         margin-left: @menu-main-body-margin-left;
 103                         padding-top: 0;
 104                         .background-image( 'images/portal-break.png' );
 105                         background-repeat: no-repeat;
 106
 107                         ul {
 108                                 list-style-type: none;
 109                                 list-style-image: none;
 110                                 margin: 0;
 111                                 padding: @menu-main-body-padding;
 112
 113                                 li {
 114                                         line-height: 1.125em;
 115                                         margin: 0;
 116                                         padding: 0.25em 0;
 117                                         font-size: @menu-main-body-font-size;
 118                                         word-wrap: break-word;
 119
 120                                         a {
 121                                                 color: @menu-main-body-link-color;
 122                                                 &:visited {
 123                                                         color: @menu-main-body-link-visited-color;
 124                                                 }
 125                                         }
 126                                 }
 127                         }
 128                 }
 129         }
 130
 131         /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
 132         #p-logo + div.portal {
 133                 background-image: none;
 134                 margin-top: 1em;
 135                 h3 {
 136                         display: none;
 137                 }
 138                 div.body {
 139                         background-image: none;
 140                         margin-left: @menu-main-body-margin-left;
 141                 }
 142         }
 143 }