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