skins/vector/components/navigation.less

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