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