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