skins/vector/screen.less

   1 /*
   2  * Any rules which should not be flipped automatically in right-to-left situations should be
   3  * prepended with @noflip in a comment block.
   4  *
   5  * This stylesheet employs a few CSS trick to accomplish compatibility with a wide range of web
   6  * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
   7  * a rule that makes things work in IE6, and then following it with a rule that begins with
   8  * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
   9  * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
  10  * "IGNORED BY IE6" comments.
  11  */
  12 @import "mediawiki.mixins";
  13
  14 /* Framework */
  15 html {
  16         font-size: @html-font-size;
  17 }
  18 html,
  19 body {
  20         height: 100%;
  21         margin: 0;
  22         padding: 0;
  23         font-family: @content-font-family;
  24 }
  25 body {
  26         background-color: #f6f6f6;
  27         font-size: @body-font-size;
  28 }
  29 /* Content */
  30 div#content {
  31         line-height: @content-line-height;
  32         margin-left: 10em;
  33         padding: @content-padding;
  34         /* Border on top, left, and bottom side */
  35         border: 1px solid #a7d7f9;
  36         border-right-width: 0;
  37         /* Merge the border with tabs' one (in their background image) */
  38         margin-top: -1px;
  39         background-color: white;
  40         color: @content-font-color;
  41         direction: ltr;
  42 }
  43 /* Hide, but keep accessible for screen-readers */
  44 #mw-navigation h2 {
  45         position: absolute;
  46         top: -9999px;
  47 }
  48 /* Head */
  49 #mw-page-base {
  50         height: 5em;
  51         background-color: white;
  52         .background-image('images/page-fade.png');
  53         background-position: bottom left;
  54         background-repeat: repeat-x;
  55 }
  56 #mw-head-base {
  57         margin-top: -5em;
  58         margin-left: 10em;
  59         height: 5em;
  60 }
  61 div#mw-head {
  62         position: absolute;
  63         top: 0;
  64         right: 0;
  65         width: 100%;
  66 }
  67 div#mw-head h3 {
  68         margin: 0;
  69         padding: 0;
  70 }
  71 /* Hide empty portlets */
  72 div.emptyPortlet {
  73                 display: none;
  74 }
  75 /* Personal */
  76 #p-personal {
  77         position: absolute;
  78         top: 0.33em;
  79         right: 0.75em;
  80         /* Display on top of page tabs - bugs 37158, 48078 */
  81         z-index: 100;
  82 }
  83 #p-personal h3 {
  84         display: none;
  85 }
  86 #p-personal ul {
  87         list-style-type: none;
  88         list-style-image: none;
  89         margin: 0;
  90         padding-left: 10em; /* Keep from overlapping logo */
  91 }
  92 #p-personal li {
  93         line-height: 1.125em;
  94         /* @noflip */
  95         float: left;
  96         margin-left: 0.75em;
  97         margin-top: 0.5em;
  98         font-size: @menu-personal-font-size;
  99         white-space: nowrap;
 100 }
 101 /* Navigation Containers */
 102 #left-navigation {
 103         float: left;
 104         margin-left: 10em;
 105         margin-top: 2.5em;
 106         /* When right nav would overlap left nav, it's placed below it
 107            (normal CSS floats behavior). This rule ensures that no empty space
 108            is shown between them due to right nav's margin-top. Page layout
 109            is still broken, but at least the nav overlaps only the page title
 110            instead of half the content. */
 111         margin-bottom: -2.5em;
 112         /* IE 6 double-margin bug fix */
 113         display: inline;
 114 }
 115 #right-navigation {
 116         float: right;
 117         margin-top: 2.5em;
 118 }
 119 /* Navigation Labels */
 120 div.vectorTabs h3,
 121 div.vectorMenu h3 span {
 122         display: none;
 123 }
 124 /* Namespaces and Views */
 125 div.vectorTabs {
 126         /* @noflip */
 127         float: left;
 128         height: 2.5em;
 129 }
 130 div.vectorTabs {
 131         .background-image('images/tab-break.png');
 132         background-position: bottom left;
 133         background-repeat: no-repeat;
 134         padding-left: 1px;
 135 }
 136 div.vectorTabs ul {
 137         /* @noflip */
 138         float: left;
 139         height: 100%;
 140         list-style-type: none;
 141         list-style-image: none;
 142         margin: 0;
 143         padding: 0;
 144 }
 145 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 146 div.vectorTabs ul li {
 147         /* @noflip */
 148         float: left;
 149         line-height: 1.125em;
 150         display: inline-block;
 151         height: 100%;
 152         margin: 0;
 153         padding: 0;
 154         background-color: #f3f3f3;
 155         .background-image('images/tab-normal-fade.png');
 156         background-position: bottom left;
 157         background-repeat: repeat-x;
 158         white-space: nowrap;
 159 }
 160 /* IGNORED BY IE6 */
 161 div.vectorTabs ul > li {
 162         display: block;
 163 }
 164 div.vectorTabs li.selected {
 165         .background-image('images/tab-current-fade.png');
 166 }
 167 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 168 div.vectorTabs li a {
 169         display: inline-block;
 170         height: 1.9em;
 171         padding-left: 0.5em;
 172         padding-right: 0.5em;
 173         color: @menu-link-color;
 174         cursor: pointer;
 175         font-size: 0.8em;
 176 }
 177 /* IGNORED BY IE6 */
 178 div.vectorTabs li > a {
 179         display: block;
 180 }
 181 div.vectorTabs li.icon a {
 182         background-position: bottom right;
 183         background-repeat: no-repeat;
 184 }
 185 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 186 div.vectorTabs span a  {
 187         display: inline-block;
 188         padding-top: 1.25em;
 189 }
 190 /* IGNORED BY IE6 */
 191 div.vectorTabs span > a {
 192         /* @noflip */
 193         float: left;
 194         display: block;
 195 }
 196 div.vectorTabs span {
 197         display: inline-block;
 198         .background-image('images/tab-break.png');
 199         background-position: bottom right;
 200         background-repeat: no-repeat;
 201 }
 202 div.vectorTabs li.selected a,
 203 div.vectorTabs li.selected a:visited{
 204         color: #333;
 205         text-decoration: none;
 206 }
 207 div.vectorTabs li.new a,
 208 div.vectorTabs li.new a:visited{
 209         color: #a55858;
 210 }
 211 /* Variants and Actions */
 212 div.vectorMenu {
 213         /* @noflip */
 214         direction: ltr;
 215         /* @noflip */
 216         float: left;
 217         /* SVG support using a transparent gradient to guarantee cross-browser
 218          * compatibility (browsers able to understand gradient syntax support also SVG) */
 219         .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
 220         /* @noflip */
 221         background-position: 100% 60%;
 222         background-repeat: no-repeat;
 223         cursor: pointer;
 224 }
 225 div.vectorMenuFocus {
 226         /* SVG support using a transparent gradient to guarantee cross-browser
 227          * compatibility (browsers able to understand gradient syntax support also SVG) */
 228         .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
 229         background-position: 100% 60%;
 230 }
 231 body.rtl div.vectorMenu {
 232         /* @noflip */
 233         direction: rtl;
 234 }
 235 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 236 div#mw-head div.vectorMenu h3 {
 237         /* @noflip */
 238         float: left;
 239         .background-image('images/tab-break.png');
 240         background-repeat: no-repeat;
 241         background-position: bottom left;
 242         margin-left: -1px;
 243 }
 244 /* IGNORED BY IE6 */
 245 div#mw-head div.vectorMenu > h3 {
 246         background-image: none;
 247 }
 248 div#mw-head div.vectorMenu h4,
 249 div.vectorMenu#p-variants #mw-vector-current-variant {
 250         display: inline-block;
 251         float: left;
 252         font-size: 0.8em;
 253         padding-left: 0.5em;
 254         padding-top: 1.375em;
 255         font-weight: normal;
 256         border: none;
 257 }
 258 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 259 div.vectorMenu h3 a {
 260         display: inline-block;
 261         width: 24px;
 262         height: 1.9em;
 263         text-decoration: none;
 264         .background-image('images/tab-break.png');
 265         background-repeat: no-repeat;
 266         background-position: bottom right;
 267 }
 268 /* IGNORED BY IE6 */
 269 div.vectorMenu h3 > a {
 270         display: block;
 271 }
 272 div.vectorMenu div.menu {
 273         position: relative;
 274         display: none;
 275         clear: both;
 276         text-align: left;
 277 }
 278 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 279 body.rtl div.vectorMenu div.menu {
 280         /* @noflip */
 281         margin-left: 24px;
 282 }
 283 /* IGNORED BY IE6 */
 284 body.rtl div.vectorMenu > div.menu {
 285         /* @noflip */
 286         margin-left: auto;
 287 }
 288 /* IGNORED BY IE6 */
 289 /* Also fixes old versions of FireFox */
 290 body.rtl div.vectorMenu > div.menu,
 291 x:-moz-any-link {
 292         /* @noflip */
 293         margin-left: 23px;
 294 }
 295 /* Enable forcing showing of the menu for accessibility */
 296 div.vectorMenu:hover div.menu,
 297 div.vectorMenu div.menuForceShow {
 298         display: block;
 299 }
 300 div.vectorMenu ul {
 301         position: absolute;
 302         background-color: white;
 303         border: solid 1px silver;
 304         border-top-width: 0;
 305         list-style-type: none;
 306         list-style-image: none;
 307         padding: 0;
 308         margin: 0;
 309         margin-left: -1px;
 310         text-align: left;
 311 }
 312 /* Fixes old versions of FireFox */
 313 div.vectorMenu ul,
 314 x:-moz-any-link {
 315         min-width: 5em;
 316 }
 317 /* Returns things back to normal in modern versions of FireFox */
 318 div.vectorMenu ul,
 319 x:-moz-any-link,
 320 x:default {
 321         min-width: 0;
 322 }
 323 div.vectorMenu li {
 324         padding: 0;
 325         margin: 0;
 326         text-align: left;
 327         line-height: 1em;
 328 }
 329 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 330 div.vectorMenu li a {
 331         display: inline-block;
 332         padding: 0.5em;
 333         white-space: nowrap;
 334         color: @menu-link-color;
 335         cursor: pointer;
 336         font-size: 0.8em;
 337 }
 338 /* IGNORED BY IE6 */
 339 div.vectorMenu li > a {
 340         display: block;
 341 }
 342 div.vectorMenu li.selected a,
 343 div.vectorMenu li.selected a:visited {
 344         color: #333;
 345         text-decoration: none;
 346 }
 347 /* Search */
 348 #p-search h3 {
 349         display: none;
 350 }
 351 #p-search {
 352         /* @noflip */
 353         float: left;
 354 }
 355 #p-search {
 356         margin-right: 0.5em;
 357         margin-left: 0.5em;
 358 }
 359 #p-search form,
 360 #p-search input {
 361         margin: 0;
 362         margin-top: 0.4em;
 363 }
 364 div#simpleSearch {
 365         display: block;
 366         width: 14em;
 367         height: 1.4em;
 368         margin-top: 0.65em;
 369         position: relative;
 370         min-height: 1px; /* Gotta trigger hasLayout for IE7 */
 371         border: solid 1px #aaa;
 372         color: black;
 373         background-color: white;
 374         .background-image('images/search-fade.png');
 375         background-position: top left;
 376         background-repeat: repeat-x;
 377 }
 378 div#simpleSearch input:focus {
 379         outline: none;
 380 }
 381 div#simpleSearch input.placeholder {
 382         color: #999;
 383 }
 384 div#simpleSearch input::-webkit-input-placeholder {
 385         color: #999;
 386 }
 387 div#simpleSearch input:-moz-placeholder {
 388         color: #999;
 389 }
 390 div#simpleSearch input:-ms-input-placeholder {
 391         color: #999;
 392 }
 393 div#simpleSearch input#searchInput {
 394         position: absolute;
 395         top: 0;
 396         left: 0;
 397         width: 90%;
 398         margin: 0;
 399         padding: 0;
 400         padding-left: 0.2em;
 401         padding-top: 0.2em;
 402         padding-bottom: 0.2em;
 403         outline: none;
 404         border: none;
 405         /*
 406          * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
 407          * this from ever being shown anyways.
 408         */
 409         font-size: 13px;
 410         color: black;
 411         background-color: transparent;
 412         direction: ltr;
 413 }
 414 div#simpleSearch button#searchButton {
 415         position: absolute;
 416         width: 10%;
 417         right: 0;
 418         top: 0;
 419         padding: 0;
 420         padding-top: 0.3em;
 421         padding-bottom: 0.2em;
 422         padding-right: 0.4em;
 423         margin: 0;
 424         border: none;
 425         cursor: pointer;
 426         background-color: transparent;
 427         background-image: none;
 428 }
 429 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 430 div#simpleSearch button#searchButton img {
 431         border: none;
 432         margin: 0;
 433         margin-top: -3px;
 434         padding: 0;
 435 }
 436 /* IGNORED BY IE6 */
 437 div#simpleSearch button#searchButton > img {
 438         margin: 0;
 439 }
 440 /* Panel */
 441 div#mw-panel {
 442         font-size: @menu-main-font-size;
 443         position: absolute;
 444         top: 160px;
 445         padding-top: 1em;
 446         width: 10em;
 447         left: 0;
 448 }
 449 div#mw-panel div.portal {
 450         padding-bottom: 1.5em;
 451         direction: ltr;
 452 }
 453 div#mw-panel div.portal h3 {
 454         font-weight: normal;
 455         color: #444;
 456         padding: @menu-main-heading-padding;
 457         cursor: default;
 458         border: none;
 459         font-size: @menu-main-heading-font-size;
 460 }
 461 div#mw-panel div.portal div.body {
 462         padding-top: 0.5em;
 463         margin: @menu-main-body-margin;
 464
 465         .background-image('images/portal-break.png');
 466         background-repeat: no-repeat;
 467         background-position: top left;
 468 }
 469 div#mw-panel div.portal div.body ul {
 470         list-style-type: none;
 471         list-style-image: none;
 472         padding: @menu-main-body-padding;
 473         margin: 0;
 474 }
 475 div#mw-panel div.portal div.body ul li {
 476         line-height: 1.125em;
 477         padding: 0;
 478         padding-bottom: 0.5em;
 479         margin: 0;
 480         font-size: @menu-main-body-font-size;
 481         word-wrap: break-word;
 482 }
 483 div#mw-panel div.portal div.body ul li a {
 484         color: @menu-main-body-link-color;
 485         &:visited {
 486                 color: @menu-main-body-link-visited-color;
 487         }
 488 }
 489
 490 /* Footer */
 491 div#footer {
 492         margin-left: 10em;
 493         margin-top: 0;
 494         padding: 0.75em;
 495         direction: ltr;
 496 }
 497 div#footer ul {
 498         list-style-type: none;
 499         list-style-image: none;
 500         margin: 0;
 501         padding: 0;
 502 }
 503 div#footer ul li {
 504         margin: 0;
 505         padding: 0;
 506         padding-top: 0.5em;
 507         padding-bottom: 0.5em;
 508         color: #333;
 509         font-size: 0.7em;
 510 }
 511 div#footer #footer-icons {
 512         float: right;
 513 }
 514
 515 body.ltr div#footer #footer-places {
 516         /* @noflip */
 517         float: left;
 518 }
 519 div#footer #footer-info li {
 520         line-height: 1.4em;
 521 }
 522 div#footer #footer-icons li {
 523         float: left;
 524         margin-left: 0.5em;
 525         line-height: 2em;
 526         text-align: right;
 527 }
 528 div#footer #footer-places li {
 529         float: left;
 530         margin-right: 1em;
 531         line-height: 2em;
 532 }
 533 /* Logo */
 534 #p-logo {
 535         position: absolute;
 536         top: -160px;
 537         left: 0;
 538         width: 10em;
 539         height: 160px;
 540 }
 541 #p-logo a {
 542         display: block;
 543         width: 10em;
 544         height: 160px;
 545         background-repeat: no-repeat;
 546         background-position: center center;
 547         text-decoration: none;
 548 }
 549
 550 ul {
 551         list-style-type: disc;
 552         .list-style-image('images/bullet-icon.png');
 553 }
 554
 555 pre, .mw-code {
 556         line-height: 1.3em;
 557 }
 558
 559 /* Site Notice (includes notices from CentralNotice extension) */
 560 #siteNotice {
 561         font-size: 0.8em;
 562 }
 563 #firstHeading {
 564         padding-top: 0;
 565         margin-top: 0;
 566         font-size: @content-heading-font-size;
 567 }
 568
 569 /* Icon for Usernames */
 570 #pt-userpage,
 571 #pt-anonuserpage,
 572 #pt-login {
 573         background-position: left top;
 574         background-repeat: no-repeat;
 575         /* SVG support using a transparent gradient to guarantee cross-browser
 576          * compatibility (browsers able to understand gradient syntax support also SVG) */
 577         .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
 578         padding-left: 15px !important;
 579 }
 580
 581 .redirectText {
 582         font-size: 140%;
 583 }
 584
 585 .redirectMsg img {
 586         vertical-align: text-bottom;
 587 }
 588
 589 #bodyContent {
 590         position: relative;
 591         width: 100%;
 592         line-height: 1.5em;
 593         font-size: @content-font-size;
 594 }
 595
 596 /* mediawiki.notification */
 597 .skin-vector .mw-notification-area {
 598         font-size: 0.8em;
 599 }
 600 .skin-vector .mw-notification-area-layout {
 601         top: 7em;
 602 }
 603 .skin-vector .mw-notification {
 604         background-color: #fff;
 605         background-color: rgba(255, 255, 255, 0.93);
 606         padding: 0.75em 1.5em;
 607         border: solid 1px #a7d7f9;
 608         border-radius: 0.75em;
 609         -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 610         box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 611 }
 612
 613 /* Watch/Unwatch Icon Styling */
 614 #ca-unwatch.icon a,
 615 #ca-watch.icon a {
 616         margin: 0;
 617         padding: 0;
 618         outline: none;
 619         display: block;
 620         width: 26px;
 621         /* This hides the text but shows the background image */
 622         padding-top: 3.1em;
 623         margin-top: 0;
 624         /* Only applied in IE6 */
 625         margin-top: -0.8em !ie;
 626         height: 0;
 627         overflow: hidden;
 628         .background-image('images/watch-icons.png');
 629 }
 630 #ca-unwatch.icon a {
 631         background-position: -43px 60%;
 632 }
 633 #ca-watch.icon a {
 634         background-position: 5px 60%;
 635 }
 636 #ca-unwatch.icon a:hover,
 637 #ca-unwatch.icon a:focus {
 638         background-position: -67px 60%;
 639 }
 640 #ca-watch.icon a:hover,
 641 #ca-watch.icon a:focus {
 642         background-position: -19px 60%;
 643 }
 644 #ca-unwatch.icon a.loading,
 645 #ca-watch.icon a.loading {
 646         .background-image('images/watch-icon-loading.gif');
 647         background-position: 5px 60%;
 648 }
 649 #ca-unwatch.icon a span,
 650 #ca-watch.icon a span {
 651         display: none;
 652 }
 653 div.vectorTabs ul {
 654         .background-image('images/tab-break.png');
 655         background-position: right bottom;
 656         background-repeat: no-repeat;
 657 }
 658
 659 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
 660 .tipsy {
 661         font-size: 0.8em;
 662 }
 663
 664 /* Animate between standard and high definition layouts */
 665 body.vector-animateLayout {
 666         div#content,
 667         div#footer,
 668         #left-navigation {
 669                 .transition(margin-left 250ms, padding 250ms;);
 670         }
 671
 672         #p-logo {
 673                 .transition(left 250ms);
 674         }
 675
 676         #mw-panel {
 677                 .transition(padding-right 250ms);
 678         }
 679
 680         #p-search {
 681                 .transition(margin-right 250ms);
 682         }
 683
 684         #p-personal {
 685                 .transition(right 250ms);
 686         }
 687
 688         #mw-head-base {
 689                 .transition(margin-left 250ms);
 690         }
 691 }