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