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 /*
 551  *
 552  * The following code is highly modified from monobook. It would be nice if the
 553  * preftoc id was more human readable like preferences-toc for instance,
 554  * howerver this would require backporting the other skins.
 555  */
 556
 557 /* Preferences */
 558 #preftoc {
 559         /* Tabs */
 560         width: 100%;
 561         float: left;
 562         clear: both;
 563         margin: 0 !important;
 564         padding: 0 !important;
 565         .background-image('images/preferences-break.png');
 566         background-position: bottom left;
 567         background-repeat: no-repeat;
 568 }
 569         #preftoc li {
 570                 /* Tab */
 571                 float: left;
 572                 margin: 0;
 573                 padding: 0;
 574                 padding-right: 1px;
 575                 height: 2.25em;
 576                 white-space: nowrap;
 577                 list-style-type: none;
 578                 list-style-image: none;
 579                 .background-image('images/preferences-break.png');
 580                 background-position: bottom right;
 581                 background-repeat: no-repeat;
 582         }
 583         /* Sadly, IE6 won't understand this */
 584         #preftoc li:first-child {
 585                 margin-left: 1px;
 586         }
 587         #preftoc a,
 588         #preftoc a:active {
 589                 display: inline-block;
 590                 position: relative;
 591                 color: @menu-link-color;
 592                 padding: 0.5em;
 593                 text-decoration: none;
 594                 background-image: none;
 595                 font-size: 0.9em;
 596         }
 597         #preftoc a:hover,
 598         #preftoc a:focus {
 599                 text-decoration: underline;
 600         }
 601         #preftoc li.selected a {
 602                 .background-image('images/preferences-fade.png');
 603                 background-position: bottom;
 604                 background-repeat: repeat-x;
 605                 color: #333;
 606                 text-decoration: none;
 607         }
 608 #preferences {
 609         float: left;
 610         width: 100%;
 611         margin: 0;
 612         margin-top: -2px;
 613         clear: both;
 614         border: solid 1px #ccc;
 615         background-color: #fafafa;
 616 }
 617 #preferences fieldset {
 618         border: none;
 619         border-top: solid 1px #ccc;
 620 }
 621 #preferences fieldset.prefsection {
 622         border: none;
 623         padding: 0;
 624         margin: 1em;
 625 }
 626 #preferences legend {
 627         color: #666;
 628 }
 629 #preferences fieldset.prefsection legend.mainLegend {
 630         display: none;
 631 }
 632 #preferences td {
 633         padding-left: 0.5em;
 634         padding-right: 0.5em;
 635 }
 636 .htmlform-tip {
 637         font-size: x-small;
 638         padding: .2em 2em;
 639         color: #666;
 640 }
 641 #preferences div.mw-prefs-buttons {
 642         padding: 1em;
 643 }
 644 #preferences div.mw-prefs-buttons input {
 645         margin-right: 0.25em;
 646 }
 647
 648 ul {
 649         list-style-type: disc;
 650         .list-style-image('images/bullet-icon.png');
 651 }
 652
 653 pre, .mw-code {
 654         line-height: 1.3em;
 655 }
 656
 657 /* Site Notice (includes notices from CentralNotice extension) */
 658 #siteNotice {
 659         font-size: 0.8em;
 660 }
 661 #firstHeading {
 662         padding-top: 0;
 663         margin-top: 0;
 664         font-size: @content-heading-font-size;
 665 }
 666
 667 /* Icon for Usernames */
 668 #pt-userpage,
 669 #pt-anonuserpage,
 670 #pt-login {
 671         background-position: left top;
 672         background-repeat: no-repeat;
 673         /* SVG support using a transparent gradient to guarantee cross-browser
 674          * compatibility (browsers able to understand gradient syntax support also SVG) */
 675         .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
 676         padding-left: 15px !important;
 677 }
 678
 679 .redirectText {
 680         font-size: 140%;
 681 }
 682
 683 .redirectMsg img {
 684         vertical-align: text-bottom;
 685 }
 686
 687 #bodyContent {
 688         position: relative;
 689         width: 100%;
 690         line-height: 1.5em;
 691         font-size: @content-font-size;
 692 }
 693
 694 /* mediawiki.notification */
 695 .skin-vector .mw-notification-area {
 696         font-size: 0.8em;
 697 }
 698 .skin-vector .mw-notification-area-layout {
 699         top: 7em;
 700 }
 701 .skin-vector .mw-notification {
 702         background-color: #fff;
 703         background-color: rgba(255, 255, 255, 0.93);
 704         padding: 0.75em 1.5em;
 705         border: solid 1px #a7d7f9;
 706         border-radius: 0.75em;
 707         -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 708         box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 709 }
 710
 711 /* Watch/Unwatch Icon Styling */
 712 #ca-unwatch.icon a,
 713 #ca-watch.icon a {
 714         margin: 0;
 715         padding: 0;
 716         outline: none;
 717         display: block;
 718         width: 26px;
 719         /* This hides the text but shows the background image */
 720         padding-top: 3.1em;
 721         margin-top: 0;
 722         /* Only applied in IE6 */
 723         margin-top: -0.8em !ie;
 724         height: 0;
 725         overflow: hidden;
 726         .background-image('images/watch-icons.png');
 727 }
 728 #ca-unwatch.icon a {
 729         background-position: -43px 60%;
 730 }
 731 #ca-watch.icon a {
 732         background-position: 5px 60%;
 733 }
 734 #ca-unwatch.icon a:hover,
 735 #ca-unwatch.icon a:focus {
 736         background-position: -67px 60%;
 737 }
 738 #ca-watch.icon a:hover,
 739 #ca-watch.icon a:focus {
 740         background-position: -19px 60%;
 741 }
 742 #ca-unwatch.icon a.loading,
 743 #ca-watch.icon a.loading {
 744         .background-image('images/watch-icon-loading.gif');
 745         background-position: 5px 60%;
 746 }
 747 #ca-unwatch.icon a span,
 748 #ca-watch.icon a span {
 749         display: none;
 750 }
 751 div.vectorTabs ul {
 752         .background-image('images/tab-break.png');
 753         background-position: right bottom;
 754         background-repeat: no-repeat;
 755 }
 756
 757 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
 758 .tipsy {
 759         font-size: 0.8em;
 760 }
 761
 762 /* Animate between standard and high definition layouts */
 763 body.vector-animateLayout {
 764         div#content,
 765         div#footer,
 766         #left-navigation {
 767                 .transition(margin-left 250ms, padding 250ms;);
 768         }
 769
 770         #p-logo {
 771                 .transition(left 250ms);
 772         }
 773
 774         #mw-panel {
 775                 .transition(padding-right 250ms);
 776         }
 777
 778         #p-search {
 779                 .transition(margin-right 250ms);
 780         }
 781
 782         #p-personal {
 783                 .transition(right 250ms);
 784         }
 785
 786         #mw-head-base {
 787                 .transition(margin-left 250ms);
 788         }
 789 }