Difference between revisions of "MediaWiki:Common.css"

Revision as of 19:46, 11 June 2015

/* CSS placed here will be applied to all skins */

/* Global styles */
.centered { text-align: center; }
.clearfix { clear: left; }

/* Infobox styles */
.infobox { float: right; width: 24em; font-size: 88%; background: #f9f9f9; border: 1px solid #ccc; margin: 5px; }
.infobox th { background: #d9d9d9; font-size: small; }

/* Infobox 2 styles */
.infobox2 { float: left; width: 24em; font-size: 88%; background: #f9f9f9; border: 1px solid #ccc; clear:both;}
.infobox2 th { background: #d9d9d9; font-size: small; }


/* Main page styles */
.mainpage { width: 100%; margin-bottom: 4px; border: 1px solid #ccc; background: #f9f9f9; border-collapse: collapse; }
.mainpage th { font-size:100%; text-align: center; background-color: #1c1c1c; color: #ffffff; }
.mainpage td { text-align: center; }
.mainpage td.col2 { background: #fdfdfd; }
.mainpage tr.top td { vertical-align: top; }
.mainpage tr.bold td { font-weight: bold; }
.mainpage tr.maps td { width: 14.2%; }

th.mainhead { text-align: center; background-color: #1c1c1c; color: #ffffff; font-size:12px; }
.events { width: 24em; margin: 0; font-size: 12px; }
div.date { height: 28px; font-size: 9px; padding-right: 10px; }
div.date div.start { position: relative; text-align: right; }
div.date div.end { position: relative; top: -27px; text-align: right; }

/* Ambox styles */
.ambox { margin: 0px 10%; border: 1px solid #aaa; background: #fbfbfb; }
.ambox td.notice  { border-left: 10px solid #1e90ff; }
.ambox td.style   { border-left: 10px solid #ffcc00; }
.ambox td.content { border-left: 10px solid #f28500; }
.ambox td.delete  { border-left: 10px solid #b22222; }
.ambox td.default { border-left: 10px solid #000000; }
.ambox td.image   { padding: 0 0.5em }
.ambox td.message { width: 100%; }
.ambox .smalltext { font-size: 95%; }

/* League table styles */
tr.first > td { background: #ffdf61; }
tr.second > td { background: #cbcbcb; }
tr.third > td { background: #c99e69; }
tr.playoffs > td { background: #D0F0C0; }
tr.relplayoffs > td { background: #FFE6E6; }
tr.relegated > td { background: #fcc; }

/* Navbox styles */
.navbox { font-size: 11px; background: #f9f9f9; border: 1px solid #ccc; width: 100%; }
.navbox th { background: #1c1c1c; font-size: 12px; color: #ffffff; }
span.controls { float: left; margin-left: 5px; font-size: 9px; font-weight: normal; color: #fff; }
.navbox th a, .navbox th span.plainlinks a.external, span.controls span.plainlinks a.external { color: #ffffff; }
.navbox th a:hover, .navbox th span.plainlinks a.external:hover, span.controls span.plainlinks a.external:hover { color: #ffffff; text-decoration: underline; }
.navbox th a:visited, .navbox th span.plainlinks a.external:visited, span.controls span.plainlinks a.external:visited { color: #ffffff; }
.navbox td.group { width: 8em; text-align: right; background: #d9d9d9; padding-left: 11.25px; padding-right: 11.25px; }
.navbox td.row1 { background: #fdfdfd; }

/* Map location styles */
.maploc { width: 810px; margin: 0 auto; }
.maploc div.container { width: 800px; position: relative; margin: 0 auto; }
.maploc div.container div.marker { width: 21px; height: 31px; position: absolute; background: url(../images/d/d5/Map_marker.png); z-index: 0; cursor: pointer; }
.maploc div.container div.marker div { width: 160px; height: 20px; position: relative; top: -25px; left: -69px; background-color: white; background-image: linear-gradient( to bottom, white, #eee ); box-shadow: 0px 5px 5px rgba(0,0,0,0.5); text-align: center; font-size: small; border-radius: 10px; display: none; }
.maploc div.container div.marker:hover div { display: block; z-index: 1; }
@media screen and (max-width:1024px) {
  .maploc div.container div.marker:active div { display: block; z-index: 1; }
}

/* Legacy brackets */
/* Attribution: Liquipedia */
div.legacy .bracket {
 font-size: 11px;
 background: white;
 display: table;
}
 
div.legacy .bracket-column {
 float: left;
 position: relative;
}
 
div.legacy .bracket-header {
 border-radius: 2px;
 border: 1px solid #aaa;
 padding: 2px 0 2px 0;
 position: relative;
 left: 0;
 right: 0;
 line-height:18px;
 margin-bottom: 20px;
 text-align: center;
 background: #1c1c1c;
 color: #ffffff;
}
 
div.legacy .bracket-cell-r1 {
 height: 36px;
}
div.legacy .bracket-cell-r2 {
 height: 72px;
}
div.legacy .bracket-cell-r3 {
 height: 144px;
}
div.legacy .bracket-cell-r4 {
 height: 288px;
}
div.legacy .bracket-cell-r5 {
 height: 576px;
}
div.legacy .bracket-cell-r6 {
 height: 1152px;
}
div.legacy .bracket-cell-r7 {
 height: 2304px;
}
div.legacy .bracket-cell-r1, div.legacy .bracket-cell-r2, div.legacy .bracket-cell-r3, div.legacy .bracket-cell-r4, div.legacy .bracket-cell-r5, div.legacy .bracket-cell-r6, div.legacy .bracket-cell-r7 {
 position: relative;
}
 
div.legacy .bracket-team-top, div.legacy .bracket-team-bottom {
border-radius:0 0 2px 2px;
border:solid #aaa 1px;
position:absolute;
padding: 1px 1px 1px 5px;
min-height:20px;
line-height:18px;
background: #f2f2f2;
left:0;
right:0;
}
 
div.legacy .bracket-team-top {
 bottom:0;
 border-radius:5px 5px 0 0;
}
 
div.legacy  .bracket-score {
 text-align:center;
 background:#ebebeb;
 border-left:1px solid #aaa;
 position:absolute;
 line-height:22px;
 right:0;
 top:0;
 bottom:0;
}
 
div.legacy .bracket-team-bottom .bracket-score {
 border-bottom-right-radius: 2px;
}
 
div.legacy .bracket-team-top .bracket-score {
 border-top-right-radius: 2px;
}
 
div.ib-sr { border-bottom:1px solid #aaa; }
div.ib-sr:last-child { border-bottom:0px hidden; }
 
 
div.ib-sr div {
    display:inline-block;
    padding:1px 0px;
    border-left:1px solid #aaa;
    text-align:center;
}
 
div.ib-sr div#title{
    display:inline-block;
    padding:1px 0px 1px 1px;
    border:none;
    width:83px;
    text-align:left;
}
 
div.ib-sr div#lvl1 { width:66%; }
div.ib-sr div#lvl2 { width:33%; }
div.ib-sr div#lvl3 { width:22%; }
div.ib-sr div#lvl4 { width:16.3%; }
 
/* Match summary */
div.legacy .bracket-game-details div.match-row {
    letter-spacing: -3px;
    min-height: 21px;
    padding-top:1px;
    position: relative;
}
 
div.legacy .bracket-game-details div.match-row .left {
    height: 0px;
    width: 80px;
    position: absolute;
    left: 2px;
}
 
div.legacy .bracket-game-details div.match-row .right {
    height: 0px;
    width: 80px;
    position: absolute;
    right: 2px;
}

div.legacy .bracket-game-details div.match-row .left div, div.legacy .bracket-game-details div.match-row .right div  {
    height: 0px;
}
 
div.legacy .bracket-game-details div.draft {
    position: absolute;
    width: 149px;
}
 
div.legacy .bracket-game-details .left .check {
    left: 5px;
    position: absolute;
}
 
div.legacy .bracket-game-details .right .check {
    right: 5px;
    position: absolute;
}
 
div.legacy .bracket-game-details div.map {
    font-size: 10px;
    letter-spacing: 0;
    height: 0px;
    width: 100%;
    position: absolute;
    top: 3px;
}
 
div.legacy .bracket-game-details div.draft a img {
    border:2px solid;
    margin:-2px;
    display:inline block;
}
 
div.legacy .bracket-game-details div.draft.dire a img {
    border-color:#E79E7E;
}
 
div.legacy .bracket-game-details div.draft.radiant a img {
    border-color:#BCD985;
}
div.legacy .bracket-game-details div.date {
    border-bottom: 1px dotted #aaa;
    line-height:1.8em;
    font-size:85%;
    text-align:center;
}
 
div.bracket-game-details {
    width:390px;
    text-align:center;
    border:1px solid #aaa;
    display: none;
    background: rgba(242, 242, 242, 0.9);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 4px 4px 6px #BBBBBB;
    z-index: 100;
    position:absolute;
}
 
div.header {
    display:table-row;
    font-weight:bold;
    padding: 2px 5px;
}
 
div.legacy .bracket-game-details .header div {
    display:table-cell;
    line-height:26px;
    width:195px;
    padding-bottom:0px;
    border-bottom: 1px solid #aaa;
}
 
div.legacy .bracket-game-details .header div.left {
    text-align:right;
    padding-right:2px;
    float:none;
}
 
div.legacy .bracket-game-details .header div.right {
    text-align:left;
    padding-left:2px;
    float:none;
}
 
div.legacy .bracket-game-details div.icons {
    margin-top:2px;
    border-top: 1px solid #aaa;
    padding:2px;
}
 
div.legacy .bracket-game .icon,
.match-row-icon {
    height: 12px;
    width: 12px;
    background: url(http://comp.tf/images/c/c5/Bracketinfoicon.png) no-repeat transparent;
    z-index: 50;
    position: absolute;
}
div.legacy .bracket-game .icon {
    right: 16px;
}
.match-row-icon {
    left: -8.5px;
    top: 4px;
}
.match-row div.bracket-game-details {
        font-size: 85%;
        font-weight: normal;
}

div.flag-placeholder-small {
    width: 43px;
    height: 18px;
    text-align: center;
    display: inline-block;
}

div.flag-placeholder-big, div.legacy .bracket-game-details .header div.flag-placeholder-big {
    width: 60px;
    height: 25px;
    text-align: center;
    display: inline-block; 
    border: none;
}

/* Overrides */
.left { float: left; }
.right { float: right; }

/* This CSS snippet applies to the Top Contributions extension tables only (installed on 31/07) */

.contributionscores-wrapper       {  }
.contributionscores-title         { background-color: #aaaaaa; margin-bottom: 0px; padding-left: .4em; }
.contributionscores .header { background-color: #cccccc; border-bottom: 1px solid #999999; font-weight: bold; }
.contributionscores .odd        { background-color: #eeeeee; }
.contributionscores .header td   { padding-left: .2em; padding-right: .2em; }
.contributionscores .content   { padding-left: .2em; padding-right: .2em; }

/* Main page header code */

#prefcontrol{padding-top:2px;}

div.mp-topbanner { width:100%;margin:0 0 6px 0;border:1px solid #ddd;position:relative;height:80px; }
div.mp-title { position:absolute;float:left;display:inline-block;height:80px;top:50%;font-size:162%;margin-top:-24px; }
div.mp-title-links { float:right;font-size: 95%;height:80px; }
div.mp-portal-links { width:100%;font-size:120%;padding:2px 0; }
div.mp-box-header { border:1px solid #BFB1A3;border-width:1px 1px 0;padding:0.1em;text-align:center;margin-bottom:0px; }
div.mp-small-link { font-size:80%;float:right;padding-right:5px;margin-bottom:.1em; }
div.mp-box-content { border:1px solid #BFB1A3;text-align:left;background-color:#fff;margin: 0 0 10px;padding:0.5em; }
div.mw-content-ltr h2 { overflow:hidden; }

table.mptop2 { margin-left:180px; }

pre.mw-code.mw-css { font-size:11px; }

.bannerfull { background: #e0af96 url(/images/9/99/Mainpagebanner.png) no-repeat; height: 130px; width: 1228px; }

/*Removing the Main Page / Community Portal Title*/
body.page-Main_Page h1.firstHeading {
    display:none;
}

body.page-Comptf:Community_portal h1.firstHeading {
    display:none;
}

/* Brackets */
.bracket {
 font-size: 11px;
 background: white;
 display: table;
}
 
.bracket-column {
 float: left;
 position: relative;
}
 
.bracket-header {
 border-radius: 2px;
 border: 1px solid #aaa;
 padding: 2px 0 2px 0;
 position: relative;
 left: 0;
 right: 0;
 line-height:18px;
 margin-bottom: 20px;
 text-align: center;
 background: #ebebeb;
}
 
.bracket-cell-r1 {
 height: 36px;
}
.bracket-cell-r2 {
 height: 72px;
}
.bracket-cell-r3 {
 height: 144px;
}
.bracket-cell-r4 {
 height: 288px;
}
.bracket-cell-r5 {
 height: 576px;
}
.bracket-cell-r6 {
 height: 1152px;
}
.bracket-cell-r7 {
 height: 2304px;
}
.bracket-cell-r1, .bracket-cell-r2, .bracket-cell-r3, .bracket-cell-r4, .bracket-cell-r5, .bracket-cell-r6, .bracket-cell-r7 {
 position: relative;
}
 
.bracket-team-top, .bracket-team-bottom {
border-radius:0 0 2px 2px;
border:solid #aaa 1px;
position:absolute;
padding: 1px;
min-height:20px;
line-height:18px;
background: #f2f2f2;
left:0;
right:0;
}
 
.bracket-team-top {
 bottom:0;
 border-radius:2px 2px 0 0;
}
 
.bracket-score {
 text-align:center;
 background:#ebebeb;
 border-left:1px solid #aaa;
 position:absolute;
 line-height:22px;
 right:0;
 top:0;
 bottom:0;
}
 
.bracket-team-bottom .bracket-score {
 border-bottom-right-radius: 2px;
}
 
.bracket-team-top .bracket-score {
 border-top-right-radius: 2px;
}
 
div.ib-sr { border-bottom:1px solid #aaa; }
div.ib-sr:last-child { border-bottom:0px hidden; }
 
 
div.ib-sr div {
    display:inline-block;
    padding:1px 0px;
    border-left:1px solid #aaa;
    text-align:center;
}
 
div.ib-sr div#title{
    display:inline-block;
    padding:1px 0px 1px 1px;
    border:none;
    width:83px;
    text-align:left;
}
 
div.ib-sr div#lvl1 { width:66%; }
div.ib-sr div#lvl2 { width:33%; }
div.ib-sr div#lvl3 { width:22%; }
div.ib-sr div#lvl4 { width:16.3%; }
 
/* Match summary */
.bracket-game-details div.match-row {
    letter-spacing: -3px;
    min-height: 21px;
    padding-top:1px;
    position: relative;
}
 
.bracket-game-details div.match-row .left {
    height: 0px;
    width: 80px;
    position: absolute;
    left: 2px;
}
 
.bracket-game-details div.match-row .right {
    height: 0px;
    width: 80px;
    position: absolute;
    right: 2px;
}

.bracket-game-details div.match-row .left div, .bracket-game-details div.match-row .right div  {
    height: 0px;
}
 
.bracket-game-details div.draft {
    position: absolute;
    width: 149px;
}
 
.bracket-game-details .left .check {
    left: 5px;
    position: absolute;
}
 
.bracket-game-details .right .check {
    right: 5px;
    position: absolute;
}
 
.bracket-game-details div.map {
    font-size: 10px;
    letter-spacing: 0;
    height: 0px;
    width: 100%;
    position: absolute;
    top: 3px;
}
 
.bracket-game-details div.draft a img {
    border:2px solid;
    margin:-2px;
    display:inline block;
}
 
.bracket-game-details div.draft.dire a img {
    border-color:#E79E7E;
}
 
.bracket-game-details div.draft.radiant a img {
    border-color:#BCD985;
}
.bracket-game-details div.date {
    border-bottom: 1px dotted #aaa;
    line-height:1.8em;
    font-size:85%;
    text-align:center;
}
 
div.bracket-game-details {
    width:390px;
    text-align:center;
    border:1px solid #aaa;
    display: none;
    background: rgba(242, 242, 242, 0.9);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 4px 4px 6px #BBBBBB;
    z-index: 100;
    position:absolute;
}
 
div.header {
    display:table-row;
    font-weight:bold;
    padding: 2px 5px;
}
 
.bracket-game-details .header div {
    display:table-cell;
    line-height:26px;
    width:195px;
    padding-bottom:0px;
    border-bottom: 1px solid #aaa;
}
 
.bracket-game-details .header div.left {
    text-align:right;
    padding-right:2px;
    float:none;
}
 
.bracket-game-details .header div.right {
    text-align:left;
    padding-left:2px;
    float:none;
}
 
.bracket-game-details div.icons {
    margin-top:2px;
    border-top: 1px solid #aaa;
    padding:2px;
}
 
.bracket-game .icon,
.match-row-icon {
    height: 12px;
    width: 12px;
    background: url(http://comp.tf/images/c/c5/Bracketinfoicon.png) no-repeat transparent;
    z-index: 50;
    position: absolute;
}
.bracket-game .icon {
    right: 16px;
}
.match-row-icon {
    left: -8.5px;
    top: 4px;
}
.match-row div.bracket-game-details {
        font-size: 85%;
        font-weight: normal;
}

div.flag-placeholder-small {
    width: 43px;
    height: 18px;
    text-align: center;
    display: inline-block;
}

div.flag-placeholder-big, .bracket-game-details .header div.flag-placeholder-big {
    width: 60px;
    height: 25px;
    text-align: center;
    display: inline-block; 
    border: none;
}