[Summary view] [Print] [Text view]

   1  /*
   2  Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
   3  */
   4  
   5  /* Navigation Labels */
   6  div.vectorTabs h3 {
   7      display: none;
   8  }
   9  
  10  /* Namespaces and Views */
  11  div.vectorTabs {
  12      /* @noflip */
  13      float: left;
  14      height: 2.5em;
  15      .background-image('images/tab-break.png');
  16      background-position: bottom left;
  17      background-repeat: no-repeat;
  18      padding-left: 1px;
  19  
  20      ul {
  21          /* @noflip */
  22          float: left;
  23          height: 100%;
  24          list-style-type: none;
  25          list-style-image: none;
  26          margin: 0;
  27          padding: 0;
  28          .background-image('images/tab-break.png');
  29          background-position: right bottom;
  30          background-repeat: no-repeat;
  31  
  32          li {
  33              /* @noflip */
  34              float: left;
  35              line-height: 1.125em;
  36              /* For IE6, overridden later to display:block by modern browsers */
  37              display: inline-block;
  38              height: 100%;
  39              margin: 0;
  40              padding: 0;
  41              background-color: #f3f3f3;
  42              .background-image('images/tab-normal-fade.png');
  43              background-position: bottom left;
  44              background-repeat: repeat-x;
  45              white-space: nowrap;
  46          }
  47  
  48          /* IGNORED BY IE6 which doesn't support child selector */
  49          > li {
  50              display: block;
  51          }
  52      }
  53  
  54      li {
  55          &.new {
  56              a,
  57              a:visited{
  58                  color: #a55858;
  59              }
  60          }
  61  
  62          &.selected {
  63              .background-image('images/tab-current-fade.png');
  64              a,
  65              a:visited{
  66                  color: #333;
  67                  text-decoration: none;
  68              }
  69          }
  70  
  71          &.icon {
  72              a {
  73                  background-position: bottom right;
  74                  background-repeat: no-repeat;
  75              }
  76          }
  77  
  78          a {
  79              /* For IE6, overridden later to display:block by modern browsers */
  80              display: inline-block;
  81              height: 1.9em;
  82              padding-left: 0.5em;
  83              padding-right: 0.5em;
  84              color: @menu-link-color;
  85              cursor: pointer;
  86              font-size: 0.8em;
  87          }
  88  
  89          /* Ignored by IE6 which doesn't support child selector */
  90          > a {
  91              display: block;
  92          }
  93      }
  94  
  95      span {
  96          display: inline-block;
  97          .background-image('images/tab-break.png');
  98          background-position: bottom right;
  99          background-repeat: no-repeat;
 100  
 101          a  {
 102              /* For IE6, overridden later to display:block by modern browsers */
 103              display: inline-block;
 104              padding-top: 1.25em;
 105          }
 106  
 107          /* Ignored by IE6 which doesn't support child selector */
 108          > a {
 109              /* @noflip */
 110              float: left;
 111              display: block;
 112          }
 113      }
 114  }
 115  
 116  /* Variants and Actions */
 117  div.vectorMenu {
 118      /* @noflip */
 119      direction: ltr;
 120      /* @noflip */
 121      float: left;
 122      cursor: pointer;
 123      position: relative;
 124  }
 125  
 126  body.rtl div.vectorMenu {
 127      /* @noflip */
 128      direction: rtl;
 129  }
 130  
 131  div#mw-head div.vectorMenu h3 {
 132      /* @noflip */
 133      float: left;
 134      .background-image('images/tab-break.png');
 135      background-repeat: no-repeat;
 136      background-position: bottom right;
 137      margin-left: -1px;
 138      font-size: 1em;
 139      height: 2.5em;
 140      // This effectively moves the "background border" outside of the element to act like a real
 141      // border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well.
 142      padding-right: 1px;
 143      margin-right: -1px;
 144  }
 145  
 146  div.vectorMenu h3 span {
 147      display: block;
 148      font-size: 0.8em;
 149      padding-left: 0.7em;
 150      padding-top: 1.375em;
 151      margin-right: 20px;
 152      font-weight: normal;
 153      color: @menu-main-heading-color;
 154  }
 155  
 156  div.vectorMenu h3 a {
 157      position: absolute;
 158      top: 0;
 159      right: 0;
 160      width: 20px;
 161      height: 2.5em;
 162      .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
 163      background-position: 100% 70%;
 164      background-repeat: no-repeat;
 165      .transition(background-position 250ms);
 166  }
 167  
 168  div.vectorMenu.menuForceShow h3 a {
 169      background-position: 100% 100%;
 170  }
 171  
 172  div.vectorMenuFocus h3 a {
 173      .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
 174  }
 175  
 176  div.vectorMenu div.menu {
 177      // Match the width of the dropdown "heading" (the tab)
 178      min-width: 100%;
 179      position: absolute;
 180      top: 2.5em;
 181      left: -1px;
 182      background-color: white;
 183      border: solid 1px silver;
 184      border-top-width: 0;
 185      clear: both;
 186      text-align: left;
 187      display: none;
 188  }
 189  
 190  /* Enable forcing showing of the menu for accessibility */
 191  div.vectorMenu:hover div.menu,
 192  div.vectorMenu.menuForceShow div.menu {
 193      display: block;
 194  }
 195  
 196  div.vectorMenu ul {
 197      list-style-type: none;
 198      list-style-image: none;
 199      padding: 0;
 200      margin: 0;
 201      text-align: left;
 202  }
 203  
 204  /* Fixes old versions of FireFox */
 205  div.vectorMenu ul,
 206  x:-moz-any-link {
 207      min-width: 5em;
 208  }
 209  
 210  /* Returns things back to normal in modern versions of FireFox */
 211  div.vectorMenu ul,
 212  x:-moz-any-link,
 213  x:default {
 214      min-width: 0;
 215  }
 216  
 217  div.vectorMenu li {
 218      padding: 0;
 219      margin: 0;
 220      text-align: left;
 221      line-height: 1em;
 222  }
 223  
 224  /* OVERRIDDEN BY COMPLIANT BROWSERS */
 225  div.vectorMenu li a {
 226      display: inline-block;
 227      padding: 0.5em;
 228      white-space: nowrap;
 229      color: @menu-link-color;
 230      cursor: pointer;
 231      font-size: 0.8em;
 232  }
 233  
 234  /* IGNORED BY IE6 */
 235  div.vectorMenu li > a {
 236      display: block;
 237  }
 238  
 239  div.vectorMenu li.selected a,
 240  div.vectorMenu li.selected a:visited {
 241      color: #333;
 242      text-decoration: none;
 243  }
 244  
 245  @import 'watchstar.less';