MediaWiki:Common.css
Jump to navigation
Jump to search
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.
/***** CSS placed here will be applied to all skins on the entire site. *****/
/************
* Main Page *
*************/
.MPheading {
font-size: 2em;
font-weight: 800;
text-align: center;
background:0 0;
background-image: linear-gradient(to right,rgba(var(--wiki-sidebar-link-color--rgb),0) 0,var(--wiki-sidebar-link-color) 33%,var(--wiki-sidebar-link-color) 66%,rgba(var(--wiki-sidebar-link-color--rgb),0) 100%);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
}
.page-The_Flight_Simulator_Wiki .mw-parser-output .gallery {
text-align: center;
margin: 10px 0;
}
.mp-box {
border:1px solid white;
margin:10px 0;
padding:5px;
}
@media screen and (min-width: 1080px){
.page-The_Flight_Simulator_Wiki .mw-parser-output {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.mainpage-left {
width: calc(100% - 550px);
}
.mainpage-right {
width: 500px;
}
}
/************
* Social for Main Page *
Code adopted from https://dotage.wiki.gg/wiki/MediaWiki:Common.css by Skeleklin
*************/
.gg-section {
max-width: 50%;
padding: 0 2rem 2rem 2rem;
border-radius: 10px;
}
.gg-section .content {
margin: 0;
}
.gg-social {
padding: 1em 2em 2em 2em;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
color: rgba(255,255,255,0.8);
display: flex;
align-items: center;
gap: 2em;
margin-bottom: 2em;
max-width: max-content;
}
.gg-social img {
height: 50px;
width: auto;
}
.gg-social a {
color: #fff !important;
}
.gg-social.discord {
background: #7289DA;
}
.gg-social.twitter {
background: #56bbf9;
}
.gg-social.steam {
background: #1b2838;
}
.card {
min-width: 200px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
transition: box-shadow 0.15s, transform 0.2s;
background: #ffffffa3;
}
.card:hover {
box-shadow: rgba(0,0,0,0.16) 0px 1px 13px;
transform: translate(0, -5px);
}
.card__top {
height: 100px;
overflow: hidden;
position: relative;
}
.card__top pre {
padding: 0;
margin: 0;
background: none;
}
.card__top a {
position: absolute;
left: 0;
}
.card h2 {
border: none;
font-size: 1.5em;
margin: 0;
padding: 1em;
}
.gg-container {
display: flex;
width: 100%;
gap: 1em;
margin-top: 4em;
}
.gg-box {
color: white;
position: relative;
margin-bottom: 50px;
width: 200px;
}
.gg-box__header {
font-family: "Vinque";
font-size: 1.5em;
color: #36363d;
background: var(--content-bg);
/* margin-bottom: -9px; */
position: absolute;
top: -34px;
padding: 0.25em 0.5em;
border-radius: 8px;
border-bottom-left-radius: 0;
}
.gg-box__content {
padding: 1em 0.5em 0.5em;
background: #4c682fb3;
border-radius: 8px;
border: 2px solid #23253766;
}
.gg-content__item {
padding: 0.25em 0.5em;
background: #534d26db;
border-radius: 5px;
margin-bottom: 0.25em;
}
.gg-content__item a, .da-content__item a.new {
color: #fff;
}
/************
* Infoboxes *
*************/
:root {
--pi-background: var(--wiki-content-background-color);
--pi-secondary-background: var(--wiki-accent-color);
--pi-secondary-background--rgb: var(--wiki-accent-color--rgb);
--pi-secondary-background-label: var(--wiki-accent-label-color);
--pi-border-color: rgba(var(--pi-secondary-background--rgb),0.5);
--pi-width: 300px;
}
.portable-infobox {
border:1px solid var(--pi-border-color);
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
text-align:center;
font-size:1.5em;
background:var(--pi-secondary-background);
color:var(--pi-secondary-background-label);
}
.portable-infobox,
.portable-infobox .pi-title {
border-radius: 2px;
}
.portable-infobox .pi-header {
padding: 0.5em;
font-size: 1.2em;
}
.portable-infobox .pi-data {
background:rgba(var(--pi-secondary-background--rgb), 0.18);
border-bottom: none;
border-top-width: 1px;
border-top-style: solid;
}
.pi-horizontal-group-item,
.portable-infobox .pi-secondary-background.pi-navigation,
.pi-panel-scroll-wrapper, .pi-media-collection-tabs {
background:rgba(var(--pi-secondary-background--rgb), 0.18);
}
.pi-tab-link.current, .pi-section-tab.pi-section-active .pi-section-label {
color: var(--wiki-accent-label-color);
}
.portable-infobox .pi-collapse .pi-header {
cursor: pointer;
}
/* if an image is the full original width, make it the full actual width */
.pi-image-thumbnail[width="270"] {
width: var(--pi-width);
}
/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
border-bottom: 0;
font-family: var(--heading-font-family);
font-weight: 700;
margin: 0;
}
.portable-infobox .pi-secondary-background.pi-navigation {
text-align: center;
}
@media screen and (max-width: 720px){
.portable-infobox {
font-size: 0.85em;
}
}
/****************
* End infoboxes *
*****************/
/********************
* [[Template:Mbox]] *
*********************/
.mbox {
display: flex;
position: relative;
background-color: var(--wiki-content-background-color);
border: 1px solid var(--wiki-content-border-color);
border-left-width: 8px;
margin-bottom: 5px;
min-height: 32px;
}
.mbox-type-success {
border-color: var(--wiki-success-color);
}
.mbox-type-info {
border-color: var(--wiki-accent-color--hover);
}
.mbox-type-moderate {
border-color: var(--wiki-warning-color);
}
.mbox-type-important {
border-color: var(--wiki-alert-color);
}
.mbox__content {
display: table;
box-sizing: border-box;
width: 100%;
padding: 8px 15px;
}
.mbox__content__image {
display: table-cell;
width: 45px;
height: 100%;
text-align: center;
vertical-align: middle;
padding-right: 15px;
font-size: 2.5em;
line-height: 1;
}
.mbox__content__image .icon-filter {
filter: var(--wiki-icon-general-filter);
}
.mbox__content__wrapper {
display: table-cell;
vertical-align: middle;
}
.mbox__content__header {
display: block;
font-weight: bold;
}
.mbox__content__text {
display: block;
}
.mbox__content__text__comment {
font-size: small;
}
.mbox__content__aside {
display: table-cell;
width: 100px;
vertical-align: middle;
text-align: center;
padding-left: 15px;
border-left: 1px solid var(--wiki-content-border-color);
}
.mbox__close {
position: absolute;
right: 0;
top: 0;
padding: 2px 7px;
font-weight: bold;
font-size: 16px;
color: var(--wiki-content-text-color);
cursor: pointer;
transition: all .15s ease-in;
}
.mbox__close:hover {
color: var(--wiki-content-text-mix-color);
}
.mbox__close:after {
content: '×';
}
.mw-collapsed + .mbox__close {
transform: rotate(45deg);
padding: 4px 7px 5px 2px;
}
.mbox__content__image.fandom-icons {
font-size: 2em;
}
#siteNotice .mbox {
line-height: 1.4;
}
#siteNotice .mbox__close {
display: none;
}
.sitedir-ltr .mw-dismissable-notice-body,
.sitedir-rtl .mw-dismissable-notice-body {
clear: both;
margin: 0;
}
#siteNotice>#localNotice, .mw-dismissable-notice
{
margin: 5px;
background: #0002;
border: 1px solid var(--pi-secondary-background);
padding: .5em 1em 0;
}
/***********
* End Mbox *
************/
/*******************
* Navboxes
*******************/
/*
* CSS Vars
*
*/
.navbox {
--navbox-bg-color: var(--wiki-content-background-color);
--navbox-text-color: var(--wiki-content-text-color);
--navbox-title-color: rgba(var(--wiki-accent-color--rgb,rgb(102,102,102)),0.5);
--navbox-header-color: rgba(var(--wiki-accent-color--rgb,rgb(102,102,102)),0.3);
--navbox-alt-color: rgba(var(--wiki-accent-color--rgb,rgb(85,85,85)),0.1);
--navbox-border-color: var(--wiki-content-border-color);
}
.navbox {
width: 100%;
background: var(--navbox-bg-color, white);
color: var(--navbox-text-color, black);
margin: 1em auto;
font-size: 84%;
clear: both;
padding: 2px;
border-spacing: 0;
border: 1px solid var(--navbox-border-color, #AAA);
}
.navbox-title,
table.navbox th {
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
/* Even row striping */
.navbox-even {
background: var(--wiki-content-background-color--secondary);
color: #000;
}
/* Odd row striping */
.navbox-odd {
background: transparent;
}
.collapseButton {
font-weight: normal;
width: auto;
}
.navbox .collapseButton {
width: 6em;
}
.navbar {
font-size: 88%;
font-weight: normal;
}
.navbox .navbar {
font-size: 100%;
}
table.collapsed tr.collapsible {
display: none;
}
/* Merges navboxes that are directly under eachother */
.navbox + .navbox {
margin-top: -11px;
}
.navbox .navbox-title {
background: var(--navbox-title-color, #CCF);
color: var(--navbox-text-color, black);
font-weight: bold;
}
.navbox .navbox-vde {
float:left;
width:65px;
}
.navbox .navbox-title-padright {
padding-right: 65px;
}
.navbox .navbox-title-padleft {
padding-left: 65px;
}
.navbox .navbox-subgroup {
border-spacing: 0;
width: 100%;
}
.navbox .navbox-gutter {
height: 2px;
}
.navbox .navbox-subgroup .navbox-gutter {
background: var(--navbox-bg-color, white);
}
.navbox .navbox-section-row > td {
padding: 0;
height: 100%;
}
.navbox .navbox-section {
width: 100%;
border-spacing: 0;
}
.navbox .navbox-above,
.navbox .navbox-below {
background: var(--navbox-header-color, #DDF);
text-align: center;
}
.navbox .navbox-image {
background: var(--navbox-bg-color, white);
text-align: center;
}
.navbox .navbox-group,
.navbox .navbox-header {
background: var(--navbox-header-color, #DDF);
color: var(--navbox-text-color, black);
font-weight: bold;
height: 100%;
padding: 2px 4px;
}
.navbox .navbox-header-collapsible {
padding-left: 65px;
}
.navbox .navbox-group {
text-align: center;
padding-left: 1em;
padding-right: 1em;
white-space: nowrap;
}
.navbox .navbox-group,
.navbox .navbox-image-left {
border-right: 2px solid var(--navbox-bg-color, white);
}
.navbox-image-right {
border-left: 2px solid var(--navbox-bg-color, white);
}
.navbox .navbox-list {
background: var(--navbox-bg-color, white);
color: var(--navbox-text-color, black);
width: 100%;
height: 100%;
padding: 0;
}
.navbox .alt > .navbox-list {
background: var(--navbox-alt-color, #F7F7F7);
}
.navbox .navbox-list div {
padding: 0px 4px;
}
.navbox .navbox-list.no-group {
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
}
.navbox .mw-collapsible-toggle {
width: 65px;
}