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