MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body { font-family: 'Lato', sans-serif; background: url(https://static.miraheze.org/worldflipperwiki/4/4d/Bg_pattern.jpg) 0 0 repeat; }

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body udt { font-family: 'Lato', sans-serif !important; }

background: url(https://static.miraheze.org/worldflipperwiki/8/84/Wiki_background.png); background-repeat: no-repeat; background-size: contain; background-position-x: center; border-bottom: solid 4px #ffffff4a !important; }
 * 1) mw-content-container {

background: white; background: rgba(255,255,255,0.9) !important; }
 * 1) mw-content {

.color-middle, .color-right, .color-left { background: #3366cc; }

.sidebar-chunk { background: white; background: rgba(248, 250, 255, 0.9) !important; border-radius: 20px; }

.grid-container { display: grid; grid-auto-columns: 1fr; }

.filter-button-selected, .filter-button-selected:hover { background:#ccc; }

/** Spoiler CSS **/ .spoiler-text { filter: blur(5px); transition-property: -webkit-filter; transition-duration: .4s; } .spoiler-text:hover, .spoiler-text:focus { filter: blur(0px); }

.spoiler-img { filter: blur(15px); transition-property: -webkit-filter; transition-duration: .4s; } .spoiler-img:hover, .spoiler-img:focus { filter: blur(0px); }

/** Card CSS **/ .card { box-shadow: 0 0 8px 0 rgba(0,0,0,0.2); margin: 0.5em; padding: 1em; border-radius: 8px; }

.card-header { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; background: linear-gradient(45deg, #b9ecff, transparent); padding: 0.25em .5em; }

.card table { width: 100%; border: none; }

.card table th { text-align: left; border: none; border-bottom: 1px solid #ccc; }

.card table td { text-align: right; border: none; border-bottom: 1px solid #ccc; }

table.half th, table.half td { width: 50%; }

.card table tr:last-of-type td, .card table tr:last-of-type th { border: none; }

/** Responsive Image **/ .res-img img { width: 100%; height: auto; }

/* CSS For No History Tabber (Template:Tab) */ .no-history-tabber-panel .oo-ui-optionWidget { color: black; font-family: Verdana, sans-serif; font-size: 12px; font-weight: 700; padding: 3px .5em; } .no-history-tabber-panel .oo-ui-optionWidget:hover { background-color: #e4e4e4 !important; } .no-history-tabber-panel .oo-ui-optionWidget.oo-ui-widget-enabled { border: 1px solid #e0e0e0; } .no-history-tabber-panel .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { border: 1px solid black; cursor: pointer; } .no-history-tabber-panel .oo-ui-tabOptionWidget .oo-ui-labelElement-label { border: 0 !important; margin: 0; padding: 0; line-height: normal; }

.no-history-tabber-panel .oo-ui-tabSelectWidget-framed { background-color: inherit; }

.no-history-tabber-panel .oo-ui-optionWidget { color: black; font-family: 'Lato',sans-serif !important; font-size: 14px; font-weight: 700; padding: 3px .5em; background: linear-gradient(to right, #d7e9fb 50%, white 50%); background-size: 200% 100%; background-position: right bottom; transition: all .25s ease-out; } .no-history-tabber-panel .oo-ui-optionWidget:hover { background-position: left bottom; } .no-history-tabber-panel .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { border: 1px solid #000; } /* End of No History Tabber CSS*/

/** Unit icon CSS **/ .icon-template { display: inline-block; text-align: center; padding: 3px; }

/** Cargo Tables **/ .cargoTable thead tr { background: #e2f2ff !important; border: 1px solid #d4d4d4; }

/** Notice Templates **/ .page-notice { padding: 0.25em 1em; background: #eee; margin:auto; max-width: 600px; border: 1px solid lightgray; border-left: 8px solid gray; }

/** Template:Page header **/ background-color: #b9ecff; border: 1px solid skyblue; display: grid; grid-template-columns: repeat(3, 1fr); padding: 1em; }
 * 1) page-header {

grid-row: 1; text-align: left; align-self: center; }
 * 1) page-header-left {

grid-row: 1; text-align: right; align-self: center; }
 * 1) page-header-right {

grid-row: 1; text-align: center; font-weight: bold; font-size: 1.4em; }
 * 1) page-header-center {

font-size: 0.7em; }
 * 1) page-subheader-center {

/** Template:Info grid **/ .info-grid { display: grid; grid-auto-columns: 1fr; grid-gap: 0.5em; }

.info-grid-image { grid-row: 1; grid-column-start: 1; grid-column-end: 8; text-align: center; padding: 1em; margin: auto; }

.info-grid-image img { width: 100%; height: auto; }

.info-grid-general { grid-row: 1; text-align: center; grid-column-start: 8; grid-column-end: 13; padding: 1em; }

.info-grid-general .wikitable { width: 100%; }

@media screen and (max-width: 768px) { .info-grid-image { grid-row: 1; grid-column-start: 1; grid-column-end: 13; }	.info-grid-general { grid-row: 2; grid-column-start: 1; grid-column-end: 13; } }

/* One-sided navigation menu */ /* One-sided navigation menu */ @media (min-width: 1340px) { #mw-content-block { display: grid; grid-template-rows: max-content; } #mw-content, #content-bottom-stuff { margin-left: 14em; } #mw-content-wrapper { grid-row-start: 1; grid-row-end: 99; grid-column: 1; order: unset; } #mw-site-navigation { grid-row: 1; grid-column: 1; order: unset; } #mw-related-navigation { grid-row: 2; grid-column: 1; width: 14em; padding: 0 1em 0 0; order: unset; } div.color-middle { margin-right: 0; } }

/* Re-aligning bottom logos */
 * 1) footer { padding-right: 1em; }

/* Footer link colors */ .mw-footer-container { color: black; padding: 1em 0; background: rgba(0,0,0,0.1); }

.mw-footer-container a { text-decoration: none; color: #3366cc; }

.mw-footer-container a:hover { color: #2952a3; text-decoration: underline; }

.mw-footer-container a:visited { color: #2a4b8d; }

.mw-footer ul { margin: 1em 0 0 0; }

.pixel-img { -ms-interpolation-mode: nearest-neighbor; image-rendering: crisp-edges; image-rendering: pixelated; }