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