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