skins/vector/components/tabs.less

   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 // The "Variants" menu has a really funny structure
 147 div#mw-head div.vectorMenu#p-variants {
 148         #p-variants-label span {
 149                 display: none;
 150         }
 151
 152         #mw-vector-current-variant {
 153                 display: inline-block;
 154                 float: left;
 155                 padding-right: 20px;
 156                 font-size: 0.8em;
 157                 padding-left: 0.5em;
 158                 padding-top: 1.375em;
 159                 font-weight: normal;
 160                 border: none;
 161                 background-image: none;
 162         }
 163 }
 164
 165 div.vectorMenu h3 span {
 166         display: block;
 167         font-size: 0.8em;
 168         padding-left: 0.7em;
 169         padding-top: 1.375em;
 170         margin-right: 20px;
 171         font-weight: normal;
 172         color: @menu-main-heading-color;
 173 }
 174
 175 div.vectorMenu h3 a {
 176         position: absolute;
 177         top: 0;
 178         right: 0;
 179         width: 20px;
 180         height: 2.5em;
 181         .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
 182         background-position: 100% 70%;
 183         background-repeat: no-repeat;
 184         .transition(background-position 250ms);
 185 }
 186
 187 div.vectorMenu.menuForceShow h3 a {
 188         background-position: 100% 100%;
 189 }
 190
 191 div.vectorMenuFocus h3 a {
 192         .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
 193 }
 194
 195 div.vectorMenu div.menu {
 196         // Match the width of the dropdown "heading" (the tab)
 197         min-width: 100%;
 198         position: absolute;
 199         top: 2.5em;
 200         left: -1px;
 201         background-color: white;
 202         border: solid 1px silver;
 203         border-top-width: 0;
 204         clear: both;
 205         text-align: left;
 206         display: none;
 207 }
 208
 209 /* Enable forcing showing of the menu for accessibility */
 210 div.vectorMenu:hover div.menu,
 211 div.vectorMenu.menuForceShow div.menu {
 212         display: block;
 213 }
 214
 215 div.vectorMenu ul {
 216         list-style-type: none;
 217         list-style-image: none;
 218         padding: 0;
 219         margin: 0;
 220         text-align: left;
 221 }
 222
 223 /* Fixes old versions of FireFox */
 224 div.vectorMenu ul,
 225 x:-moz-any-link {
 226         min-width: 5em;
 227 }
 228
 229 /* Returns things back to normal in modern versions of FireFox */
 230 div.vectorMenu ul,
 231 x:-moz-any-link,
 232 x:default {
 233         min-width: 0;
 234 }
 235
 236 div.vectorMenu li {
 237         padding: 0;
 238         margin: 0;
 239         text-align: left;
 240         line-height: 1em;
 241 }
 242
 243 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 244 div.vectorMenu li a {
 245         display: inline-block;
 246         padding: 0.5em;
 247         white-space: nowrap;
 248         color: @menu-link-color;
 249         cursor: pointer;
 250         font-size: 0.8em;
 251 }
 252
 253 /* IGNORED BY IE6 */
 254 div.vectorMenu li > a {
 255         display: block;
 256 }
 257
 258 div.vectorMenu li.selected a,
 259 div.vectorMenu li.selected a:visited {
 260         color: #333;
 261         text-decoration: none;
 262 }
 263
 264 @import 'watchstar.less';