MediaWiki:Common.css: Difference between revisions

Revision as of 09:15, 14 September 2020

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

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Balsamiq+Sans:wght@700&display=swap');

body {
background: #ECE3F0;
}

#p-logo {
margin-top: 5px;
}

.mw-wiki-logo {
  background-image: url(/w/images/b/bc/Wiki.png);
}

#mw-panel .portal .body {
  font-family: Balsamiq Sans;
  font-size: 21px;
}

#mw-panel .portal .body li a,
#mw-panel .portal .body li a:visited {
  color:#000000
}

#mw-panel .portal h3 {
  font-family: Anton;
  font-size: 25px;
  color:darkblue;
}

.mw-body {
border: 1px solid #4B0081;
border-right: none;
}

div.vectorTabs ul li {
background-color: #ECE3F0;
}

#p-areas li a {
font-weight: bold;
}

#p-statcounter {
display: none;
}

#siteNotice {
margin-bottom: 1.25em;
}

div.twitterbox {
max-width: 320px;
border: 1px solid rgb(170, 170, 170);
}

span.editbutton {
    float:right;
    margin-right:5px;
    margin-top:2px;
    font-size:0.8em;
    color:#FFFFFF !important;
}

span.editbutton-left {
    float:left;
    margin-left:-65px;
    margin-top:2px;
    font-size:0.8em;
    color:#FFFFFF !important;
}

span.editbutton a,
span.editbutton-left a {
   color:#FFFFFF !important;
}

.navbox .mw-collapsible-toggle {
   font-weight:bold;
   margin-right:4px;
   color:#FFFFFF;
}

.navbox .mw-collapsible-text {
   color:#FFFFFF;
}

.navbox th,
.navbox th a {
   color:#FFFFFF;
}

.navbox.mw-collapsible tbody > tr:first-child > th:first-child {
	padding-left: 75px;
}

.infobox {
    max-width:100%;
}

.infobox a {
    color: white !important;
}

/* Standard table formatting */
/* <pre><nowiki> */
 
/* wikitable/prettytable class for skinning normal tables */
/* modified from http://wikimon.net/MediaWiki:Common.css */
 
table.wikitable,
table.prettytable {
  margin: 1em 1em 1em 0;
  background: ghostwhite;
  color:black;
  border: 1px #aaaaaa solid;
  border-collapse: collapse;
}
 
table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td {
  border: 1px #aaaaaa solid;
  padding: 0.2em;
}
 
table.wikitable td,
table.prettytable td {
  background: ghostwhite;
}
 
table.wikitable th,
table.wikitable > tr > th,
table.wikitable > * > tr > th,
table.prettytable th,
table.prettytable > tr > th,
table.prettytable > * > tr > th {
  background: #c0c0c0;
  text-align: center;
}

table.wikitable caption,
table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;
}

/* sortable table class for skinning sortable tables */

table.sortable {
  margin: 1em 1em 1em 0;
  background: ghostwhite;
  color:black;
  border: 1px #aaaaaa solid;
  border-collapse: collapse;
}
 
table.sortable th, table.sortable td {
  border: 1px #aaaaaa solid;
  padding: 0.2em;
}
 
table.sortable td {
  background: ghostwhite;
}
 
table.sortable th,
table.sortable > tr > th,
table.sortable > * > tr > th {
  background: #c0c0c0;
  text-align: center;
}

table.sortable caption {
  margin-left: inherit;
  margin-right: inherit;
}

/* Reduce page jumps by hiding collapsed/dismissed content */
.client-js .mw-special-Watchlist #watchlist-message,
.client-js .collapsible.collapsed > tbody > tr:not(:first-child) {
    display: none;
}

/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
    /* @noflip */
    float: right;
    font-weight: normal;
    color: white;
    /* @noflip */
    margin-left: 0.5em;
    /* @noflip */
    text-align: right;
    width: auto;
}
/* In navboxes, the show/hide button balances the v·d·e links
   from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
    width: 6em;
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
}
.navbox .mw-collapsible-toggle {
    width: 6em;
}

/*Copied from http://www.barelyfitz.com/projects/tabber/example.css used under mit license
see http://www.barelyfitz.com/projects/tabber/
*/
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
 REQUIRED to hide the non-active tab content.
 But do not hide them in the print stylesheet!
 --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
 .tabber = before the tabber interface is set up
 .tabberlive = after the tabber interface is set up
 --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-left:15px;
}

/*--------------------------------------------------
 ul.tabbernav = the tab navigation list
 li.tabberactive = the active tab
 --------------------------------------------------*/
ul.tabbernav {
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #CCC;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li {
 list-style: none;
 margin: 5px 0 0;
 display: inline-block !important;
}

ul.tabbernav li a {
 padding:3px 0.5em;
 margin-left:3px;
 border:1px solid #ccc;
 border-bottom:none;
 background:#f2f7ff;
 text-decoration:none;
}

ul.tabbernav li a:link { color:#448; }
ul.tabbernav li a:visited { color:#667; }

ul.tabbernav li a:hover {
 color:#000;
 background:#fff9f2;
 border-color:#ccc;
}

ul.tabbernav li.tabberactive a {
 background-color:#fff;
 border-bottom:1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover {
 color:#000;
 background:#fff;
 border-bottom:1px solid #fff;
}

/*--------------------------------------------------
 .tabbertab = the tab content
 Add style only after the tabber interface is set up (.tabberlive)
 --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #ccc;
 border-top:0;
 border-left:none;
 border-right:none;
 border-bottom:none;
 max-width: 100% !important;

 /* If you don't want the tab size changing whenever a tab is changed
 you can set a fixed height */
 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
 scrollbar when necessary */
 /* overflow:auto; */
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}
/* Float right */
.goright {
clear:right;
float:right;
}
 
/* fulltabs class to allow for full tabber width */
.fulltabs .tabberlive {
    margin-left: 0;
}
.fulltabs .goright {
    clear: none;
    float: none;
}

ul span.commaSep:last-of-type {
display: none;
}

/* --------------------------------------------------
MAIN PAGE PORTALS CSS FOLLOWS. 
ORIGINAL CONCEPT COURTESY OF THE ZELDA WIKI.
http://www.zeldawiki.org
ADJUSTED BY KeybladeSpyMaster. Updated May 12, 2015
-------------------------------------------------- */

/* Main Page Portals: Nav class */

.nav {
    padding:0;
    display:inline-block;
}

.nav:hover .dropdown{
    display:block;
}

/* Main Page Portals: Container */
.container{
    position:absolute;
    height: 450px;
}

.dropdown {
border:2px solid #BFBFBF;
border-radius:10px;
display:none;
float:left;
left:-45%;
right:-45%;
position:relative;
z-index: 100;
color:#000000;
}

.dropdown a{
color:#FFFFFF;
text-decoration:none;
}

.dropdown caption {
    width:inherit;
}

.dropdown td {
vertical-align:top;
padding:1px;
white-space:nowrap;
}

.dropdown td p a {
border:1px solid #3e4874;
font-size:90%;
line-height: 1.2em;
margin: 3px 3px;
padding:3px;
}

.dropdown p{
margin:0;
padding:0;
}

caption a, .dropdown th a{
display:block;
padding: 2px;
}

.dropdown caption a {
padding:5px 20px 5px 20px;
font-size:150%;
}

/* Main Page Portals: Character Table */

.dropdowntable td {
border:white solid 1px;
}

.dropdowntable td a {
background-color: #000000;
background-image: -moz-linear-gradient(center top, #06305B, #3e4874);
background-image: -webkit-linear-gradient(top, #06305B, #3e4874);
background-image: -o-linear-gradient(top, #06305B, #3e4874);
background-image: -ms-linear-gradient(top, #06305B, #3e4874);
background-image: linear-gradient(top, #06305B, #3e4874);
color: #FFFFFF;
font-weight: normal;
display: block;
padding: 2px;
}

.dropdowntable td a:hover{
background-image: -moz-linear-gradient(center top, #bfbfff, #3e4874);
background-image: -webkit-linear-gradient(top, #bfbfff, #3e4874);
background-image: -o-linear-gradient(top, #bfbfff, #3e4874);
background-image: -ms-linear-gradient(top, #bfbfff, #3e4874);
background-image: linear-gradient(top, #bfbfff, #3e4874);
}

/* Thumbnails */
div.thumb div.thumbinner div.magnify {
 display:none !important;
}
div.thumb div.thumbinner div {
 background:none !important;
 border:none !important;
 color:#fff;
}
div.thumb div.thumbinner a {
 color:#ddd;
}
div.thumb div.thumbinner a:visited {
 color:#aaa;
}
div.thumb div.thumbinner a:hover {
 color:#fff;
}
div.thumb div.thumbinner {
 background:#454659;
 background:linear-gradient(top,#c1c0c0,#454659);
 background:-o-linear-gradient(top,#c1c0c0,#454659);
 background:-ms-linear-gradient(top,#c1c0c0,#454659);
 background:-moz-linear-gradient(top,#c1c0c0,#454659);
 background:-webkit-linear-gradient(top,#c1c0c0,#454659);
 border:none !important;
 border-radius:5px;
 box-shadow:2px 2px 6px #7f7f7f; /* This is needed for browser compatibility */
 box-shadow:2px 2px 6px rgba(0,0,0,0.5);
 padding:5px !important;
}
div.thumb .thumbimage {
 border:none !important;
 border-radius:5px;
}
div.thumb .thumbimage:hover {
 -moz-transform:scale(1.02);
 -webkit-transform:scale(1.02);
}

img.medal {
width: 100%;
height: auto; 
max-width: 350px;
max-height: auto;
}

/* Remove breadcrumbs for specific articles */
.page-Kingdom_Hearts_Unchained_χ_Union_χ .subpages, .page-Kingdom_Hearts_Unchained_χ_Union_χ .PageHeader h2 {display: none;}

/* Dismissable SiteNotice */
.sitedir-ltr .mw-dismissable-notice-body {
	margin: 0 60px 0.5em 0;
}
.sitedir-rtl .mw-dismissable-notice-body {
	margin: 0 0 0.5em 60px;
}

/* Needed for cookie consent bar to be GDPR compliant */
body.cmp-state--bar {
  margin-bottom: 118px;
}

/* Flexible tables */
.flex {
	display: flex;
}
.flex tbody {
	display: table;
	width: 100%;
}

/* Allow limiting of which header levels are shown in a TOC through {{TOClimit}} - from KHWiki */
.toclimit-2 .toclevel-2 {display:none;}
.toclimit-3 .toclevel-3 {display:none;}
.toclimit-4 .toclevel-4 {display:none;}
.toclimit-5 .toclevel-5 {display:none;}
.toclimit-6 .toclevel-6 {display:none;}
.toclimit-7 .toclevel-7 {display:none;}