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