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         position: absolute;
  64         top: -160px;
  65         left: 0;
  66         width: 10em;
  67         height: 160px;
  68
  69         a {
  70                 display: block;
  71                 width: 10em;
  72                 height: 160px;
  73                 background-repeat: no-repeat;
  74                 background-position: center center;
  75                 text-decoration: none;
  76         }
  77 }
  78
  79 /* Panel */
  80 div#mw-panel {
  81         font-size: @menu-main-font-size;
  82         position: absolute;
  83         top: 160px;
  84         padding-top: 1em;
  85         width: 10em;
  86         left: 0;
  87
  88         div.portal {
  89                 margin: 0 0.6em 0 0.7em;
  90                 padding: 0.25em 0;
  91                 direction: ltr;
  92                 background-position: top left;
  93                 background-repeat: no-repeat;
  94                 .background-image('images/portal-break.png');
  95
  96                 h3 {
  97                         font-size: @menu-main-heading-font-size;
  98                         color: @menu-main-heading-color;
  99                         font-weight: normal;
 100                         margin: 0;
 101                         padding: @menu-main-heading-padding;
 102                         cursor: default;
 103                         border: none;
 104                 }
 105
 106                 div.body {
 107                         margin: @menu-main-body-margin;
 108                         padding-top: 0;
 109
 110                         ul {
 111                                 list-style-type: none;
 112                                 list-style-image: none;
 113                                 margin: 0;
 114                                 padding: @menu-main-body-padding;
 115
 116                                 li {
 117                                         line-height: 1.125em;
 118                                         margin: 0;
 119                                         padding: 0.25em 0;
 120                                         font-size: @menu-main-body-font-size;
 121                                         word-wrap: break-word;
 122
 123                                         a {
 124                                                 color: @menu-main-body-link-color;
 125                                                 &:visited {
 126                                                         color: @menu-main-body-link-visited-color;
 127                                                 }
 128                                         }
 129                                 }
 130                         }
 131                 }
 132
 133                 &.first {
 134                         background-image: none;
 135                         margin-top: 0;
 136                         h3 {
 137                                 display: none;
 138                         }
 139                         div.body {
 140                                 margin-left: 0.5em;
 141                         }
 142                 }
 143         }
 144 }