Difference between revisions of "MediaWiki:Common.css"

Revision as of 20:51, 12 August 2015

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

/* make the Cite extension list of references look smaller and highlight clicked reference in blue */
/* ===========Allows the use of tabs. Copied from mabi wiki ==============*/
ol.references { font-size: 90%; }
ol.references > li:target { background-color: #ddeeff; }
sup.reference:target { background-color: #ddeeff; }

.center, .center * {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.tabdiv > ul {
   width: auto;
   line-height: 1.5em;
   list-style-type: none;
   margin: 0;
   padding-bottom: 4px;
}

.tabdiv > ul a {
   width: auto;
   background-color: #e7f3e8;
   border: 1px solid #A0C6E3;
   margin-right: 0.5em;
   padding: 2px 0.75em;
   text-decoration: none;
}

.tabdiv > ul li {
   width: auto;
   display: inline-block;
}

.tabdiv > ul li.active a {
   width: auto;
   background-color: #A0C6E3;
   border: 1px solid #A0C6E3;
}

.tabdiv > div {
   width: auto;
   border: 1px solid #A0C6E3;
   padding: 1em;
   margin-top: -0.3em;
}



table.wikitable,
table.prettytable {
margin: 1em 1em 1em 0;
background: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
}

table.bluetable {
margin: 1em 1em 1em 0;
background: #cde8f7;
border: 1px #aaa solid;
border-collapse: collapse;
}

table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td, 
table.bluetable th, table.bluetable td {
border: 1px #aaa solid;
padding: 0.2em;
}

table.wikitable th,
table.prettytable th {
background: #f2f2f2;
text-align: center;
}

table.wikitable caption,
table.prettytable caption,
table.bluetable caption {
margin-left: inherit;
margin-right: inherit;
font-weight: bold;
}

table.prettytable code,
table.wikitable code,
table.bluetable code {
background-color: transparent;
}

/* Standard Navigationsleisten, aka box hiding thingy from .de.  Documentation at [[Wikipedia:NavFrame]]. */
 
div.Boxmerge,
div.NavFrame {
        margin: 0px;
        padding: 4px;
        border: 1px solid #aaa;
        text-align: center;
        border-collapse: collapse;
        font-size: 95%;
}
div.Boxmerge div.NavFrame {
        border-style: none;
        border-style: hidden;
}
div.NavFrame + div.NavFrame {
        border-top-style: none;
        border-top-style: hidden;
}
div.NavPic {
        background-color: #fff;
        margin: 0px;
        padding: 2px;
        float: left;
}
div.NavFrame div.NavHead {
        height: 1.6em;
        font-weight: bold;
        background-color: #ccf;
        position:relative;
}
div.NavFrame div.NavHead2 {
        height: 1.6em;
        font-weight: bold;
        background-color: #CCFFD3;
        position:relative;
}
div.NavFrame div.NavHead3 {
        height: 1.6em;
        font-weight: bold;
        background-color: #FFFFCC;
        position:relative;
}
div.NavFrame div.NavHead4 {
        height: 1.6em;
        font-weight: bold;
        background-color: #FFCCCC;
        position:relative;
}
div.NavFrame div.NavHead5 {
        height: 1.6em;
        font-weight: bold;
        background-color: #FF6600;
        position:relative;
}
div.NavFrame div.NavHead5 {
        height: 1.6em;
        font-weight: bold;
        background-color: #CCCCCC;
        position:relative;
}
div.NavFrame p {
        font-size: 100%;
}
div.NavFrame div.NavContent {
        font-size: 100%;
}
div.NavFrame div.NavContent p {
        font-size: 100%;
}
div.NavEnd {
        margin: 0px;
        padding: 0px;
        line-height: 1px;
        clear: both;
}
a.NavToggle {
        position:absolute;
        top:0px;
        right:3px;
        font-weight:normal;
        font-size:smaller;
}


/* wikitable/prettytable class for skinning normal tables */
table.wikitable,
table.prettytable {
    margin: 1em 1em 1em 0;
    background: #f9f9f9;
    border: 1px #aaa solid;
    border-collapse: collapse;
}
 
table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td {
    border: 1px #aaa solid;
    padding: 0.2em;
}
 
table.wikitable th,
table.prettytable th {
    background: #f2f2f2;
    text-align: center;
}
 
table.wikitable caption,
table.prettytable caption {
    margin-left: inherit;
    margin-right: inherit;
    font-weight: bold;
}
 
table.prettytable code,
table.wikitable code {
    background-color: transparent;
}

/* Article message box template styles */
table.ambox {
    margin: 0 10%;                       /* Will not overlap with other elements */
    border-collapse: collapse; 
    background: #fbfbfb; 
    border: 1px solid #aaa; 
    border-left: 10px solid #1e90ff;     /* Default "notice" blue */
}
table.ambox th.ambox-text, table.ambox td.ambox-text {      /* The message body cell(s) */
    padding: 0.25em 0.5em;            /* 0.5em left/right */
    width: 100%;                      /* Make all templates the same width regardless of text size */
}
table.ambox td.ambox-image {          /* The left image cell */
    padding: 2px 0px 2px 0.5em;       /* 0.5em left, 0px right */
    text-align: center; 
}
table.ambox td.ambox-imageright {     /* The right image cell */
    padding: 2px 4px 2px 0px;         /* 0px left, 4px right */
    text-align: center; 
}
table.ambox-notice {
    border-left: 10px solid #1e90ff;     /* Blue */
/* border-right: 10px solid #1e90ff; */  /* If you want two blue bars */
}
table.ambox-delete,
table.ambox-serious {
    border-left: 10px solid #b22222;     /* Red */
}
table.ambox-content {
    border-left: 10px solid #f28500;     /* Orange */
}
table.ambox-style {
    border-left: 10px solid #f4c430;     /* Yellow */
}
table.ambox-merge {
    border-left: 10px solid #9932cc;     /* Purple */
}
table.ambox-protection {
    border-left: 10px solid #bba;        /* Gray */
}
table.ambox.ambox-mini {                 /* small floating box variant */
    float: right;
    clear: right;
    margin: 0 0 0 1em;
    width: 25%;
}

/* Infobox template style */
.infobox {
    font-family: Tahoma;
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    color: black;
    margin-bottom: 0.5em;
    margin-left: 1em;
    padding: 0.2em;
    float: right;
    clear: right;
}
.infobox td,
.infobox th {
    vertical-align: top;
}
.infobox caption {
    font-size: larger;
    margin-left: inherit;
}
.infobox.bordered {
    border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
    border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
    border: 0;
}
 
.infobox.sisterproject {
    width: 20em;
    font-size: 90%;
}
 
@media print {
    .infobox.sisterproject {
        display: none;
    }
}
 
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
    border: 0;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
 
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
    border: 0;
    border-right: 1px solid #aaa;
}

/* Chocobo's Edits */

table.tbskill {
   font-size: 11px;
   font-family: Tahoma, Arial, Helvetica, sans-serif;
   text-align: center;
   width: 520px;
}
table.tbskill td.skilltitle {
	background-color: #a0c6e3;
}
table.tbskill td.skillcontent {
	background-color: #e7f3e8;
}

/* velocity7's Edits */

div.pad {
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Following Lines are now implemented in main.css
.roundtl, .roundtr, .roundbl, .roundbr {
   height: 5px;
}

.roundtl { 
   background: url(http://4urworld.net/mabinogi/wiki/skins/monobook/velo/tl.gif) no-repeat top left; 
}

.roundtr { 
   background: url(http://4urworld.net/mabinogi/wiki/skins/monobook/velo/tr.gif) no-repeat top right; 
}

.roundbl { 
   background: url(http://4urworld.net/mabinogi/wiki/skins/monobook/velo/bl.gif) no-repeat bottom left; 
}

.roundbr { 
   background: url(http://4urworld.net/mabinogi/wiki/skins/monobook/velo/br.gif) no-repeat bottom right; 
}
*/

/** velocity7: overwrite the above css classes, then remove roundt*2 and roundt*3.
roundconts should remain the same. once the above changes have been made, everything
be sure to make the URLs relative so that when domain changes occur and such, the 
links don't break.

also, if possible, please look at:

http://rafael.adm.br/css_browser_selector/

if this can be implemented, then we can make the site choose .gif for transparencies when it
comes to IE, and .png for firefox, as IE doesn't accept transparencies in .png */

/** UC: Thanks for the link. I will create the copies of png files and see if that feature can be done here. */

/** Hotarugirl's edits -- */

table.monstertable { border-spacing: 4px; }
table.monstertable TD.title { background-color:#333333; color:#ffffff; text-align: left;}

table.containertable { border-spacing: 4px; background-color:#a0c6e3; }
table.containertable TD { background-color:#e7f3e8; text-align: center; padding-left: 10px; padding-right:10px; padding-top:3px; padding-bottom:3px; }
table.containertable TD.title { background-color:#a0c6e3; text-align: center; font-weight: bold; }
table.containertable TD.key { background-color:#a0c6e3; text-align: right; font-weight: bold; padding-left: 0px; padding-right:0px; padding-top:0px; padding-bottom:0px }


/** End Taru's stuff */

TABLE.glovetable { border-spacing: 0px; border-collapse:collapse; font-family: Tahoma; text-align:center; font-size: 11px;}
TABLE.glovetable TR.title { background-color:black;}
TABLE.glovetable TD.names { background-color:#dddddd;}
TABLE.glovetable TD.tbimages { text-align:center; background-color: black;}
TABLE.glovetable TH { color: #ffffff; font-weight: bold;}

table.interactableitem {
   font-size: 11px;
   font-family: Tahoma, Arial, Helvetica, sans-serif;
   background: #FFFFFF;
   text-align: center;
   width: 700px;
}

table.interactableitem td.itembox {
   width: 11%;
   color: white;
   padding-right: 10px;
}

table.interactableitem td.itembox p {
   padding-left: 5px;
   padding-right: 5px;
}

table.interactableitem td {
   width: 10%;
}

/** BLUE BOX */

.roundcont {
   background: #A0C6E3;
   color: white;
}

.roundtl, .roundtr, .roundbl, .roundbr {
   height: 5px;
}

.roundtl { 
   background: url(/skins/monobook/velo/tl.gif) no-repeat top left; 
}

.roundtr { 
   background: url(/skins/monobook/velo/tr.gif) no-repeat top right; 
}

.roundbl { 
   background: url(/skins/monobook/velo/bl.gif) no-repeat bottom left; 
}

.roundbr { 
   background: url(/skins/monobook/velo/br.gif) no-repeat bottom right; 
}

/** GREEN BOX */

.roundcont2 {
   background: #E7F3E8;
}

/** ITEM BOX */

.roundcont3 {
   background: #333333;
}

/* ===========dfoplayer's stuff. Copied from mabi wiki ==============*/

/* Mouse-over boxes */

div#mouseover-custom {
    display: none;
}

div.mouseover-box {
    background-color: #e7f3e8;
    padding: 5px;
    border: 1px solid #aaa;
    border-radius: 5px;
    -moz-border-radius: 5px;
    text-align: center;
    vertical-align: middle;
}

br.mouseover-p {
    line-height: 0.4em;
}

/* tooltip will display on :hover event */
 
span.diff-html-changed:hover span.tip {
  display: block;
  z-index: 95;
  position: absolute;
  top: 2.5em;
  left: 0;
  width: auto;
  line-height: 1.2em;
  padding: 3px 7px 4px 6px;
  border: 1px solid #336;
  background-color: #f7f7ee;
  font-size: 10px;
  text-align: left;
}