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                 padding-bottom: 1.5em;
  90                 direction: ltr;
  91
  92                 h3 {
  93                         font-weight: normal;
  94                         color: #444;
  95                         padding: @menu-main-heading-padding;
  96                         cursor: default;
  97                         border: none;
  98                         font-size: @menu-main-heading-font-size;
  99                 }
 100
 101                 div.body {
 102                         padding-top: 0.5em;
 103                         margin: @menu-main-body-margin;
 104
 105                         .background-image('images/portal-break.png');
 106                         background-repeat: no-repeat;
 107                         background-position: top left;
 108
 109                         ul {
 110                                 list-style-type: none;
 111                                 list-style-image: none;
 112                                 padding: @menu-main-body-padding;
 113                                 margin: 0;
 114
 115                                 li {
 116                                         line-height: 1.125em;
 117                                         padding: 0;
 118                                         padding-bottom: 0.5em;
 119                                         margin: 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 }