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