MediaWiki:Wikia.css

/***** CSS placed here will be applied to all skins on the entire site. *****/

/* Mark redirects in Special:Allpages and Special:Watchlist */ .allpagesredirect { font-style: italic; } .allpagesredirect:after { color: #808080; content: " (redirect)" } .watchlistredir { font-style: italic; } /* MinifiedLeftTabs adds a cleaner style to the left tabs that are found in Special:Search and Special:Insights.

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:MinifiedLeftTabs/code.css&only=styles";

/*

General layout for each infobox, you can copy and paste .portable-infobox.pi-theme-nameofyourchoice for a different infobox, let say character for example.

you will need to create new template:nameofyourchoice for the template of your choice.



/*

Main title you can only change "background-color:" and "color:" for the color of your choice.



.portable-infobox.pi-theme-Species .pi-title { background-color: #70665C; color: #e5e5e5; border-color: #000000; border: 0.150em solid black; border-bottom: 0; text-align: center; } /*

main header, you can only change the "background-color:" use "color:" if you use the dark background color.

.portable-infobox.pi-theme-Species .pi-header { background-color: #8CA88A; /*	color: #e5e5e5;*/ border: 0; padding: 0.250em; padding-left: 0.500em; } /*

The td:first-child and td:last-child are the data row that will affect with the even and odd, see below about td:nth-child(*). You can remove the slash (/) and asteris (*) part for the border. it will be useful for some case.

.portable-infobox.pi-theme-Species .pi-data:first-child{ /*	border: 0.125em solid black;*/ padding: 0.625em 1em; padding-left: 0.500em; width: auto; text-align: left; } /*

Read above.

.portable-infobox.pi-theme-Species .pi-data:last-child { /*	border-right: 0.125em solid black;*/ padding: 0.625em 1em; padding-right:0.500em; width: auto; text-align: right; } /*

These tr:nth-child(even)&(odd) are very useful for stripped row. you can only change "color:"

.portable-infobox.pi-theme-Species .pi-data:nth-child(even) { background-color: #F2F2F2; width: auto; text-align: left; } .portable-infobox.pi-theme-Species .pi-data:nth-child(odd) { background-color: #E5E5E5; width: auto; text-align: left; } /*

Last CSS code that will be used as source link. you can only change the .species and "bacground-color:" use "border:" if you use dark background color.

.portable-infobox.pi-theme-Species .pi-navigation { background: #A3998F; /*	color: #e5e5e5;*/ text-align: right; padding-right: 0.500em; border-spacing: 0; -moz-border-radius: 0 0 0.500em 0.500em; -webkit-border-radius: 0 0 0.500em 0.500em; border-radius: 0 0 0.500em 0.500em; border: 0.250em solid black; border-top: 0; } /*

centering a text for creator section in every infobox as species, character, planets and so on.



.portable-infobox.pi-theme-Species .pi-data[data-source="Creator"] { text-align: center; place-content: center; }

/*

Character section, you can copy and paste the .character for a different CSS layout, see the example on .portable-infobox.pi-theme-Species to know what to change.

.portable-infobox.pi-theme-Character .pi-title { background-color: #53ACAC; color: #e5e5e5; border-color: #000000; border: 0.150em solid black; border-bottom: 0; text-align: center; } .portable-infobox.pi-theme-Character .pi-header { background-color: #8F8AA8; /*	color: #e5e5e5;*/ border: 0; padding: 0.250em; padding-left: 0.500em; } .portable-infobox.pi-theme-Character .pi-data:first-child{ /*	border: 0.125em solid black;*/ padding: 0.625em 1em; padding-left: 0.500em; width: auto; text-align: left; } .portable-infobox.pi-theme-Character .pi-data:last-child { /*	border-right: 0.125em solid black;*/ padding: 0.625em 1em; padding-right:0.500em; width: auto; text-align: right; } .portable-infobox.pi-theme-Character .pi-data:nth-child(even) { background-color: #F2F2F2; width: auto; text-align: left; } .portable-infobox.pi-theme-Character .pi-data:nth-child(odd) { background-color: #E5E5E5; width: auto; text-align: left; } .portable-infobox.pi-theme-Character .pi-navigation { background: #87C5C5; /*	color: #e5e5e5;*/ text-align: right; padding-right: 0.500em; border-spacing: 0; -moz-border-radius: 0 0 0.500em 0.500em; -webkit-border-radius: 0 0 0.500em 0.500em; border-radius: 0 0 0.500em 0.500em; border: 0.250em solid black; border-top: 0; }

/*=============================*/ /* notice warning for spoilers */ /*=============================*/

/* Alert Notice */ .WikiaArticle .spoiler_alert { font-size: 95%; text-align:center; width: 38em; margin: auto; margin-bottom: 1em; padding-top: 2.375em; padding: 2em; padding-bottom: 2.375em; border: 0.250em #FF0000 solid; border-collapse: collapse; background-color: #FF9999; -moz-border-radius: 0.500em; -webkit-border-radius: 0.500em; border-radius: 0.500em;

} /* Comic Notice */ .WikiaArticle .spoiler_comic { font-size: 95%; text-align:center; width: 38em; margin: auto; margin-bottom: 1em; padding-top: 2.375em; padding: 2em; padding-bottom: 2.375em; border: 0.250em #CD7002 solid; border-collapse: collapse; background-color: #FFC782; -moz-border-radius: 0.500em; -webkit-border-radius: 0.500em; border-radius: 0.500em;

} /* Novel Notice */ .WikiaArticle .spoiler_novel { font-size: 95%; text-align:center; width: 38em; margin: auto; margin-bottom: 1em; padding-top: 2.375em; padding: 2em; padding-bottom: 2.375em; border: 0.250em #8A8A8A solid; border-collapse: collapse; background-color: #E5E5E5; -moz-border-radius: 0.500em; -webkit-border-radius: 0.500em; border-radius: 0.500em;

} /* Game Notice */ .WikiaArticle .spoiler_game { font-size: 95%; text-align:center; width: 38em; margin: auto; margin-bottom: 1em; padding-top: 2.375em; padding:2em; padding-bottom: 2.375em; border: 0.250em #4B5137 solid; border-collapse: collapse; background-color: #C3CFA1; -moz-border-radius: 0.500em; -webkit-border-radius: 0.500em; border-radius: 0.500em;

}

/*====================================*/ /* notice warning for various message */ /*====================================*/

/* stub notice */ .WikiaArticle .stub {

position: relative; font-size: 95%; text-align:center; width: 42em; margin: auto; margin-bottom: 1em; box-sizing: border-box; background-clip: padding-box; border-left: solid 0.5em transparent; border-collapse: collapse; background-color: #EFEFEF; border-top-left-radius:0.5em; border-bottom-left-radius:0.5em; } .WikiaArticle .stub:before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin-left: -0.5em; border-top-left-radius: inherit; border-bottom-left-radius: inherit; background: linear-gradient(to bottom, black, #EFEFEF); }

/*========================*/ /* default notice layout. */ /*========================*/

span.header_notice { font-size:34px; line-height: 34px; }

display: grid; grid-gap:1em; grid-template-areas: "notice_image notice_text"; }
 * 1) notice {

display: inherit; -webkit-box-align: inherit; margin: auto; }
 * 1) notice_text{

padding:2.375em; padding-left:1em; }
 * 1) stud_text {

display: inherit; -webkit-box-align: inherit; margin: auto; }
 * 1) notice_image{

/*=======================*/ /* thumbnail without gap */ /*=======================*/

.article-thumb { margin: auto; }

/*===============*/ /* Tabber design */ /*===============*/ .tabber .tabbertab{ display:flex /*!important*/;

} .tabberlive .tabbertab { border:none /*!important*/; } ul.tabbernav { border-bottom: 0.10em solid #126590 /*!important*/; color:black; }

ul.tabbernav .tabberactive a { background-color: #126590 /*!important*/; -moz-border-radius:0.35em 0.35em 0 0 /*!important*/; -webkit-border-radius: 0.35em 0.35em 0 0 /*!important*/; border-radius:0.35em 0.35em 0 0 /*!important*/; border-top: 0.1em solid #126590 /*!important*/; border-left:0.1em solid #126590 /*!important*/; border-right:0.1em solid #126590 /*!important*/; color: #E5E5E5 /*!important*/; } ul.tabbernav li a { background-color: #7cb6d4 /*!important*/; -moz-border-radius:0.35em 0.35em 0 0 /*!important*/; -webkit-border-radius: 0.35em 0.35em 0 0 /*!important*/; border-radius:0.35em 0.35em 0 0 /*!important*/; border:1px solid #3991be /*!important*/; color: black /*!important*/; }

ul.tabbernav li a:hover { background-color: white /*!important*/; -moz-border-radius:0.35em 0.35em 0 0 /*!important*/; -webkit-border-radius: 0.35em 0.35em 0 0 /*!important*/; border-radius:0.35em 0.35em 0 0 /*!important*/; border:1px solid #3991be /*!important*/; color: black /*!important*/; }

ul.tabbernav li a:active { background-color: #7cb6d4 /*!important*/; -moz-border-radius:0.35em 0.35em 0 0 /*!important*/; -webkit-border-radius: 0.35em 0.35em 0 0 /*!important*/; border-radius:0.35em 0.35em 0 0 /*!important*/; border:1px solid #3991be /*!important*/; color: #E5E5E5 /*!important*/; }

/*species theme of tabber*/

/**/.Species { display: flex; }

.Species ul.tabbernav { border-bottom: 0.10em solid #70665C !important; color: #E5E5E5; overflow: hidden;

}

.Species ul.tabbernav .tabberactive a { background-color: #70665C !important; -moz-border-radius:0.35em 0.35em 0 0 !important; -webkit-border-radius: 0.35em 0.35em 0 0 !important; border-radius:0.35em 0.35em 0 0 !important; border-top: 0.1em solid #70665C !important; border-left:0.1em solid #70665C !important; border-right:0.1em solid #70665C !important; color: #E5E5E5 !important; }

.Species ul.tabbernav li a { background-color: #8CA88A !important; -moz-border-radius:0.35em 0.35em 0 0 !important; -webkit-border-radius: 0.35em 0.35em 0 0 !important; border-radius:0.35em 0.35em 0 0 !important; border:1px solid #70665C !important; color: #E5E5E5 !important; cursor: pointer; margin-left:0; margin-right:0; }

.Species ul.tabbernav li a:hover { background-color: white !important; -moz-border-radius:0.35em 0.35em 0 0 !important; -webkit-border-radius: 0.35em 0.35em 0 0 !important; border-radius:0.35em 0.35em 0 0 !important; border:1px solid #70665C !important; color: black !important; }

.Species ul.tabbernav li a:active { background-color: #8CA88A !important; -moz-border-radius:0.35em 0.35em 0 0 !important; -webkit-border-radius: 0.35em 0.35em 0 0 !important; border-radius:0.35em 0.35em 0 0 !important; border:1px solid #70665C !important; color: #E5E5E5 !important; }

/*===================*/ /* eras icons design */ /*===================*/

.eraicon { float:right; position:static; margin-bottom:0.35em; }

/**/

/*=====================*/ /* sandbox design test */ /*=====================*/

/*.Species { display: flex; flex-wrap: wrap; /*grid-template-rows: auto 1fr;*/ border: 1em black; }       .Species tab { order: 1; display: block; background-color: #70665C; color: #f1f1f1; padding: .5em 1em; margin-right: .25em; cursor: pointer; border: 0.1em solid black; border-bottom: 0; border-radius: 0.35em 0.35em 0 0; }       .Species row { order: 2; display: none; flex-grow: 1; width: auto; color: black; padding: 1em; border: 0.1em solid black; background-color: beige; }       .Species input[type="radio"] { display: none; }       .Species input[type="radio"]:checked+tab { background-color: cornsilk; color: black; }       .Species input[type="radio"]:checked+tab+row { display: block; }