skins/vector/screen.less

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