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