Welcome to the DFO World Wiki. With many major updates since the release of DFO, many items are missing. Visit Item Database Project to learn more.
Please remember to click "show preview" before saving the page.
Thanks for the updated logo snafuPop!

Difference between revisions of "MediaWiki:Common.css"

From DFO World Wiki
Jump to: navigation, search
Line 514: Line 514:
 
.jcarousel-control-prev,
 
.jcarousel-control-prev,
 
.jcarousel-control-next {
 
.jcarousel-control-next {
    position: absolute;
+
/*    position: absolute; allow navigation to be bottom of carousel */
 
     top: 45%;
 
     top: 45%;
 
     width: 30px;
 
     width: 30px;

Revision as of 15:58, 20 March 2021

/* 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 {
   line-height: 1.5em;
   list-style-type: none;
   margin: 0;
   padding-bottom: 4px;
}

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

.tabdiv > ul li {
   display: inline;
}

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

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

/* wikitable class for skinning tables */

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

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

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

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

table.wikitable 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;
}

/* 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;
}

/* velocity7's Edits */

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

/** 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;
}

/* ===========dfoplayer========== */
/* based from https://en.wikipedia.org/wiki/Template:Clickable_button
Main purpose is to create a floating "back to top button" */

.mw-ui-button.mw-ui-lavender {
/*background:#00af89;*/
background:#e6e6fa;
color:#fff;
border:1px solid #00af89;
text-shadow:0 1px rgba(0,0,0,0.1);
}

.mw-ui-button.mw-ui-lavender:hover {
background-color:#008c6d;
}

.mw-ui-button.mw-ui-lavender:focus {
box-shadow:0 0 0 1px #008c6d;
outline:none;
border-color:#fff;
}

.mw-ui-button.mw-ui-lavender:active,.mw-ui-button.mw-ui-lavender.mw-ui-checked {
background:#008c6d;
box-shadow:none;
}

.mw-ui-button.mw-ui-lavender.mw-ui-quiet:hover,.mw-ui-button.mw-ui-lavender.mw-ui-quiet:focus {
background:transparent;
color:#00af89;
}

.mw-ui-button.mw-ui-lavender.mw-ui-quiet:active,.mw-ui-button.mw-ui-lavender.mw-ui-quiet.mw-ui-checked {
color:#008c6d;
}

.mw-ui-button:focus::-moz-focus-inner,.mw-ui-button.mw-ui-progressive:focus::-moz-focus-inner,.mw-ui-button.mw-ui-primary:focus::-moz-focus-inner,.mw-ui-button.mw-ui-lavender:focus::-moz-focus-inner,.mw-ui-button.mw-ui-destructive:focus::-moz-focus-inner {
border-color:transparent;
}

.mw-ui-button:hover,.mw-ui-button:active,.mw-ui-button:visited,.mw-ui-button.mw-ui-progressive.mw-ui-quiet,.mw-ui-button.mw-ui-primary.mw-ui-quiet,.mw-ui-button.mw-ui-lavender.mw-ui-quiet,.mw-ui-button.mw-ui-destructive.mw-ui-quiet {
color:#555;
}

.mw-ui-button.mw-ui-progressive:disabled,.mw-ui-button.mw-ui-primary:disabled,.mw-ui-button.mw-ui-lavender:disabled,.mw-ui-button.mw-ui-destructive:disabled {
background:#ddd;
border-color:#ddd;
}

.mw-ui-button.mw-ui-progressive:disabled:hover,.mw-ui-button.mw-ui-primary:disabled:hover,.mw-ui-button.mw-ui-progressive:disabled:active,.mw-ui-button.mw-ui-primary:disabled:active,.mw-ui-button.mw-ui-progressive:disabled.mw-ui-checked,.mw-ui-button.mw-ui-primary:disabled.mw-ui-checked,.mw-ui-button.mw-ui-lavender:disabled:hover,.mw-ui-button.mw-ui-lavender:disabled:active,.mw-ui-button.mw-ui-lavender:disabled.mw-ui-checked,.mw-ui-button.mw-ui-destructive:disabled:hover,.mw-ui-button.mw-ui-destructive:disabled:active,.mw-ui-button.mw-ui-destructive:disabled.mw-ui-checked {
box-shadow:none;
}

.mw-ui-button.mw-ui-progressive.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-primary.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-lavender.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-destructive.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-quiet:disabled {
color:#ccc;
}

/* dfoplayer Table class for usage on Template:ClassSkills */

td.table-classSkillNav {
  padding: 10px;
  vertical-align: top;
  display: inline-block;
}

ul.table-classSkillNav {
  padding: 5px 10px;
  border: 1px solid black;
  border-image: none;
}
/* Table class for usage on Template:ClassSkills2 */

td.table-classSkillNav2 {
  border: 1px #333 solid;
  border-radius: 5px;
  padding: 0px 10px 10px 10px;
  margin: 5px;
  vertical-align: top;
  display: inline-block;
}
/* dfoplayer carousel for Template:Banner 
https://www.mediawiki.org/wiki/Snippets/Photo_Slider
 carousel */
.jcarousel {
    position: relative;
    overflow: hidden;
}
 
.jcarousel-wrapper {
	max-width: 1125px;
    margin: 0;
    position: relative;
}
 
.jcarousel .jcarousel-list {
    width: 20000em;
    position: relative;
    margin: 0;
    padding: 0;
}
 
.jcarousel .jcarousel-item {
    float: left;
}
 
.jcarousel-item img {
    display: block;
    max-width: 100%;
    height: auto !important; 
    margin: auto;
}

.jcarousel-item p{
    text-align: center;
}

/* a more specific selector takes precedence. override the previous paragraph item*/
.jcarousel-item .left p{
    text-align: left;
}

.jcarousel-control-prev,
.jcarousel-control-next {
/*    position: absolute; allow navigation to be bottom of carousel */
    top: 45%;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #fff;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
 
.jcarousel-control-prev {
    left: -15px;
}
 
.jcarousel-control-next {
    right: -15px;
}
 
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
 
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
 
.jcarousel-pagination {
    position: absolute;
    bottom: 10px;
    left: 15px;
}
 
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    margin-right: 2px;
    opacity: .75;
}
 
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}