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         /* SVG support using a transparent gradient to guarantee cross-browser
 124          * compatibility (browsers able to understand gradient syntax support also SVG) */
 125         .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
 126         /* @noflip */
 127         background-position: 100% 60%;
 128         background-repeat: no-repeat;
 129         cursor: pointer;
 130         .transition(background-position 250ms);
 131 }
 132
 133 div.vectorMenu.menuForceShow {
 134         background-position: 100% 100%;
 135 }
 136
 137 div.vectorMenuFocus {
 138         /* SVG support using a transparent gradient to guarantee cross-browser
 139          * compatibility (browsers able to understand gradient syntax support also SVG) */
 140         .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
 141         background-position: 100% 60%;
 142 }
 143
 144 body.rtl div.vectorMenu {
 145         /* @noflip */
 146         direction: rtl;
 147 }
 148
 149 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 150 div#mw-head div.vectorMenu h3 {
 151         /* @noflip */
 152         float: left;
 153         .background-image('images/tab-break.png');
 154         background-repeat: no-repeat;
 155         background-position: bottom left;
 156         margin-left: -1px;
 157 }
 158
 159 /* IGNORED BY IE6 */
 160 div#mw-head div.vectorMenu > h3 {
 161         background-image: none;
 162 }
 163
 164 div#mw-head div.vectorMenu h4,
 165 div.vectorMenu#p-variants #mw-vector-current-variant {
 166         display: inline-block;
 167         float: left;
 168         font-size: 0.8em;
 169         padding-left: 0.5em;
 170         padding-top: 1.375em;
 171         font-weight: normal;
 172         border: none;
 173 }
 174
 175 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 176 div.vectorMenu h3 a {
 177         display: inline-block;
 178         width: 24px;
 179         height: 1.9em;
 180         text-decoration: none;
 181         .background-image('images/tab-break.png');
 182         background-repeat: no-repeat;
 183         background-position: bottom right;
 184 }
 185
 186 /* IGNORED BY IE6 */
 187 div.vectorMenu h3 > a {
 188         display: block;
 189 }
 190
 191 div.vectorMenu div.menu {
 192         position: relative;
 193         display: none;
 194         clear: both;
 195         text-align: left;
 196 }
 197
 198 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 199 body.rtl div.vectorMenu div.menu {
 200         /* @noflip */
 201         margin-left: 24px;
 202 }
 203
 204 /* IGNORED BY IE6 */
 205 body.rtl div.vectorMenu > div.menu {
 206         /* @noflip */
 207         margin-left: auto;
 208 }
 209
 210 /* IGNORED BY IE6 */
 211 /* Also fixes old versions of FireFox */
 212 body.rtl div.vectorMenu > div.menu,
 213 x:-moz-any-link {
 214         /* @noflip */
 215         margin-left: 23px;
 216 }
 217
 218 /* Enable forcing showing of the menu for accessibility */
 219 div.vectorMenu:hover div.menu,
 220 div.vectorMenu.menuForceShow div.menu {
 221         display: block;
 222 }
 223
 224 div.vectorMenu ul {
 225         position: absolute;
 226         background-color: white;
 227         border: solid 1px silver;
 228         border-top-width: 0;
 229         list-style-type: none;
 230         list-style-image: none;
 231         padding: 0;
 232         margin: 0;
 233         margin-left: -1px;
 234         text-align: left;
 235 }
 236
 237 /* Fixes old versions of FireFox */
 238 div.vectorMenu ul,
 239 x:-moz-any-link {
 240         min-width: 5em;
 241 }
 242
 243 /* Returns things back to normal in modern versions of FireFox */
 244 div.vectorMenu ul,
 245 x:-moz-any-link,
 246 x:default {
 247         min-width: 0;
 248 }
 249
 250 div.vectorMenu li {
 251         padding: 0;
 252         margin: 0;
 253         text-align: left;
 254         line-height: 1em;
 255 }
 256
 257 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 258 div.vectorMenu li a {
 259         display: inline-block;
 260         padding: 0.5em;
 261         white-space: nowrap;
 262         color: @menu-link-color;
 263         cursor: pointer;
 264         font-size: 0.8em;
 265 }
 266
 267 /* IGNORED BY IE6 */
 268 div.vectorMenu li > a {
 269         display: block;
 270 }
 271
 272 div.vectorMenu li.selected a,
 273 div.vectorMenu li.selected a:visited {
 274         color: #333;
 275         text-decoration: none;
 276 }
 277
 278 @import 'watchstar.less';