MediaWiki:Common.css
From Portals of Phereon Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* SKIN SPECIFIC STUFF IS IN HERE: MediaWiki:Timeless.css */
/* Imports go here */
@import url('https://fonts.googleapis.com/css?family=Tinos&display=swap');
@import url('https://fonts.googleapis.com/css?family=Inknut+Antiqua:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Tienne&display=swap');
@import url('https://fonts.googleapis.com/css?family=Bitter&display=swap');
@import url('https://fonts.googleapis.com/css?family=Volkhov&display=swap');
/* Default image CSS */
img {
max-width: 100%;
height: auto;
}
/* Make images responsive */
.responsive img,img.responsive {
max-width: 100%;
height: auto;
}
.banner img,img.banner {
max-width: 100%;
height: auto;
max-height: 10rem;
width: auto;
}
/* Hide main page title */
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
/* Clearfix */
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/*****************
* Mbox CSS start *
******************/
.mbox {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: auto;
box-sizing: border-box;
margin: 4px 5%;
border-width: 1px;
border-style: solid;
background: transparent;
padding: 0.25em;
font-size: 95%;
}
.mbox-small {
clear: right;
float: right;
margin: 4px 0 2px 1em;
box-sizing: border-box;
width: 238px;
font-size: 88%;
line-height: 1.25em;
}
.mbox-small.ambox {
clear: left;
float: left;
margin: 4px 1em 2px 0;
}
.mbox pre {
background-color: #f2f2f299;
}
.mbox div.mbox-message {
flex-basis: 100%;
padding: 0.25em;
text-align: left;
}
.mbox .mbox-date,
.mbox .mbox-info {
font-size:85%;
}
.mbox div.mbox-image {
padding: 0.25em;
}
.ambox {
margin: 0 5%;
border-color: #a2a9b1;
border-left: 10px solid #36c;
}
.cmbox {
border-color: #a2a9b1;
background-color: #dfe8ff;
}
.imbox {
border-width: 3px;
border-color: #36c;
}
.xmbox {
border-width: 2px;
border-color: #36c;
border-style: dotted;
}
.tmbox {
border-width: 2px;
border-color: #36c;
background: #f8eaba;
}
.ombox {
border-color: #36c;
}
.fmbox {
margin: 4px 0;
}
.mbox-small.imbox,
.mbox-small.xmbox,
.mbox-small.tmbox {
border-width: 1px;
}
.mbox-speedy,
.mbox-warning {
border-color: #b32424;
background-color: #fee7e6;
}
.ambox.mbox-speedy {
border-color: #a2a9b1;
border-left-color: #b32424;
}
.cmbox.mbox-speedy,
.xmbox.mbox-speedy,
.xmbox.mbox-delete,
.ombox.mbox-speedy,
.ombox.mbox-delete {
border-width: 3px;
}
.mbox-delete {
border-color: #b32424;
}
.ambox.mbox-delete {
border-color: #a2a9b1;
border-left-color: #b32424;
}
.cmbox.mbox-delete {
border-color: #a2a9b1;
background: #fee7e6;
}
.mbox-content {
border-color: #f28500;
}
.ambox.mbox-content {
border-color: #a2a9b1;
border-left-color: #f28500;
}
.cmbox.mbox-content {
border-color: #a2a9b1;
background: #ffe7ce;
}
.mbox-style {
border-color: #fc3;
}
.ambox.mbox-style {
border-color: #a2a9b1;
border-left-color: #fc3;
}
.cmbox.mbox-style {
border-color: #a2a9b1;
background: #fff9db;
}
.mbox-notice {
border-color: #36c;
}
.ambox.mbox-notice {
border-color: #a2a9b1;
border-left-color: #36c;
}
.cmbox.mbox-notice {
border-color: #a2a9b1;
background: #d8e8ff;
}
.mbox-move {
border-color: #93c;
}
.ambox.mbox-move {
border-color: #a2a9b1;
border-left-color: #93c;
}
.cmbox.mbox-move {
border-color: #a2a9b1;
background: #e4d8ff;
}
.mbox-protection {
border-color: #a2a9b1;
}
.ambox.mbox-protection {
border-color: #a2a9b1;
border-left-color: #a2a9b1;
}
.cmbox.mbox-protection {
border-color: #a2a9b1;
background: #efefe1;
}
.mbox-license {
border-color: #88a;
}
.mbox-featured {
border-color: #cba135;
}
.ambox.mbox-featured {
border-color: #a2a9b1;
border-left-color: #cba135;
}
.ambox + .ambox {
margin-top: -1px;
}
@media print {
.mbox {
display: none;
}
} /* no mbox when printing */
/***************
* Mbox CSS end *
****************/
/*****************************
* Stuff from Gamepedia start *
******************************/
/* Navbox template style */
/* Navbox container style */
.navbox {
border: 1px solid #9F6A00;
font-size: 88%;
text-align: center;
width: 100%;
margin: auto;
padding: 1px;
clear: both;
}
.navbox-inner,
.navbox-subgroup {
width: 100%;
}
/* Title, group and above/below styles */
.navbox-group,
.navbox-title,
.navbox-abovebelow {
text-align: center;
padding: 0.25em 1em;
line-height: 1.5em;
}
/* Group style */
th.navbox-group {
white-space: nowrap;
/* @noflip */
text-align: right;
}
.navbox,
.navbox-subgroup {
background-color: transparent;
}
.navbox-list {
line-height: 1.8em;
border-color: transparent; /* Must match background color */
}
/* Level 1 color */
.navbox th,
.navbox-title {
background-color: #282828;
border: 0 solid #9F6A00;
color: #FFFFFF;
}
/* Level 2 color */
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
background: #282828;
}
/* Level 3 color */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: #444444;
}
/* Odd row striping */
.navbox-odd {
background: transparent;
}
/* Even row striping */
.navbox-even {
background-color: rgba(128,128,128,0.3);
}
/* Single pixel border between adjacent navboxes */
table.navbox + table.navbox {
margin-top: -1px;
}
/* Default styling for Navbar template */
.navbar {
font-size: 88%;
font-weight: normal;
}
/* Navbar styling when nested in infobox and navbox */
.navbox .navbar {
display: block;
font-size: 100%;
}
.navbox-title .navbar {
float: left;
text-align: left;
margin-right: 0.5em;
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;
}
/* .navbox .mw-collapsible-toggle a, */
.wikitable .mw-collapsible-toggle a {
color: #F58120 !important;
}
.mw-collapsible-toggle.mw-collapsible-toggle-expanded a,
.mw-collapsible-toggle.mw-collapsible-toggle-collapsed a {
color: #F37F20;
}
/* Infobox template style */
.infobox {
background-color: rgba(0, 0, 0, 0);
border: 1px solid #505050;
float: right;
font-size: 89%;
margin-bottom: 0.5em;
padding: 0.2em;
width: 300px;
}
.infobox td.infoboxlabel {
border: 2px solid inherit;
font-weight: bold;
padding: 0.5px 7px;
text-align: right;
}
.infoboxname {
background-color: #f58120;
color: #000;
font-size: 110%;
font-weight: bold;
padding: 0.5em;
}
.infoboxdescription {
background-color: #f58120;
color: #000;
}
fieldset { border-color: #F37F20; }
#global-wrapper #preferences legend { color: #F37F20; }
.client-js #preferences fieldset { background: none; }
/* [[Template:Message]] */
table.gpmbox {
background:var(--message-background);
color:var(--text-color);
}
/***************************
* Stuff from Gamepedia end *
****************************/
/**********************
* Main page CSS start *
***********************/
/* Main page */
/* MP-Box stuff*/
.mp-box,
.mp-banner {
margin: 0.5em 0;
box-shadow: 0 0.25rem 0.35rem -0.25rem var(--mp-border,black);
}
.mp-box {
display: flex;
flex-flow: row wrap;
border: 1px solid var(--mp-border,black);
background: var(--secondary-lighter,#FAFAFA);
padding: 0.75em 1.5em;
width: 100%;
box-sizing: border-box;
}
.mp-box > * {
width: 100%;
}
.mp-heading {
color: var(--text);
font-size: 132%;
font-weight: bold;
margin: 0 0 0.5em;
padding: 0 0 0.25em;
text-align: center;
border-bottom: 1px solid var(--mp-border,black);
}
/* Progress ring stuff */
.progress-ring > svg {
transform: rotate(-90deg);
position: absolute;
}
.progress-ring {
display: inline-flex;
justify-content: center;
align-items: center;
/* font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif; */
}
.progress-ring .preline {
stroke-dashoffset: 0;
}
.mp-box hr {
border-style: solid none none none;
}
/* Announcement box stuff */
#announcement-mpbox hr:nth-last-of-type(1) {
display: none;
}
#announcement-mpbox > * > h4 {
margin: 0 0;
}
#announcement-mpbox > * > p {
margin: 0.25em 0;
}
#announcement-mpbox > * > p:nth-last-of-type(1) > small:nth-last-of-type(1),
#announcement-mpbox > * > p:nth-last-of-type(1) > small:nth-last-of-type(2) {
float: left;
}
/* Recent Changes stuff */
.mp-box .mw-changeslist {
font-size: 80%;
white-space: nowrap;
overflow: hidden;
padding-bottom: 0.5em;
}
.mp-box .mw-enhancedchanges-arrow-space,
.mp-box .mw-rcfilters-ui-highlights-enhanced-nested,
.mp-box .mw-changeslist-legend,
.mp-box .mw-rollback-link,
.mp-box .mw-changeslist-line-inner-userTalkLink,
.mp-box .mw-changeslist-line-inner-rollback,
.mp-box .mw-changeslist-line-inner-tags,
.mp-box .mw-changeslist-line-inner-watchingUsers {
display: none;
}
.mp-box .mw-changeslist-line-inner > * {
vertical-align: baseline;
}
.mp-box .mw-changeslist-line-inner-comment {
display: inline-block;
vertical-align: bottom;
overflow: hidden;
text-overflow: ellipsis;
max-width: 10em;
vertical-align: bottom;
margin-left: 3px;
}
.mp-box .mw-changeslist > h4 {
margin: 0.8em 0 0.4em;
}
/*.mp-box .mw-changeslist-line > tbody > tr > .mw-enhanced-rc {
max-width: 6em;
direction: rtl;
}
.mp-box .mw-changeslist-line-inner {
position: relative;
right: 2em;
}*/
.mp-box .mw-changeslist-line-inner .mw-title::after {
content:"";
display:block;
}
.mp-box .mw-changeslist-separator:empty::before {
content: "";
}
.mp-box .mw-changeslist-history {
display:none;
}
.mp-box .mw-changeslist-links > span:nth-child(2)::before,
.mp-box .mw-changeslist-links::before,
.mp-box .mw-changeslist-links::after {
content:"";
}
.mp-box .mw-changeslist-line-inner-userLink::before {
content:"["
}
.mp-box .mw-changeslist-line-inner-userLink::after {
content:"]"
}
.mp-box .mw-changeslist-diff {
text-transform: capitalize;
}
table.mw-enhanced-rc th,
table.mw-enhanced-rc td {
padding:0;
vertical-align:baseline;
}
.mp-box .mw-enhanced-rc > abbr {
position: relative;
left: 2em;
}
.mp-box .mw-changeslist > div {
position: relative;
right: 1.5em;
}
.mp-box .comment--without-parentheses:before,
.mp-box .comment--without-parentheses:after {
content:"";
}
/********************
* Main page CSS end *
*********************/
#mw-site-navigation .sidebar-inner h3,
#mw-related-navigation .sidebar-inner h3,
#mw-site-navigation .dropdown h3,
#mw-related-navigation .dropdown h3 {
border-color: var(--gray-lightish);
}