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