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.
Code adpoted from https://flight.wiki.gg/ by https://flight.wiki.gg/ *****/
/************
* 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-Farming_Simulator_Wiki .mw-parser-output .gallery {
text-align: center;
margin: 10px 0;
}
.mp-box {
border:1px solid white;
margin:10px 0;
padding:5px;
}
.mp-links > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 10px;
gap:5px;
}
.mp-links > ul > li {
display:flex;
flex-flow:row nowrap;
align-items:center;
text-align:center;
justify-content:center;
box-sizing:border-box;
flex:max(calc(50% - 5px),5em) 1 1;
border:1px solid var(--wiki-content-link-color);
background-color:rgba(var(--wiki-content-link-color--rgb),0.05);
font-size:115%;
font-weight:bold;
text-transform:uppercase;
border-radius:3px
}
.mp-links.columns-1 > ul > li {flex: max(calc(100% - 5px), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - 5px), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc(33% - 5px), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - 5px), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - 5px), 5em) 1 1;}
.mp-links > ul > li:hover {
background-color:rgba(var(--wiki-content-link-color--rgb), 0.2);
outline:2px solid var(--wiki-content-border-color);
}
.mp-links > ul > li > a {
display:flex;
align-items:center;
height:100%;
flex:1 1 auto;
box-sizing:border-box;
padding:5px;
}
.mp-links > ul > li > a:first-child {
justify-content:right;
}
.mp-links > ul > li > a:only-child {
justify-content:center;
}
@media screen and (min-width: 1080px){
.page-Farming_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: #a0c213;
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: #a0c213;
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 *
*****************/
/*******************
* 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;
}
/********************
* [[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 *
************/
/* #region Interwiki dropdown */
#p-lang-btn {
align-self: center;
float: right;
margin-left: 5px;
}
#p-lang-btn .vector-menu-content li {
margin: 0.2em 0.5em;
}
#p-lang-btn .vector-menu-content {
padding: 0.2em 0;
}
#p-lang-btn .vector-menu-content li:hover {
background-color: rgba(var(--content-default-link-color--rgb), 0.25);
border-radius: 2px;
}
#p-lang-btn .menu li a {
text-transform: none;
color: var(--content-text-color);
}
#p-lang-btn-label::before,
#p-lang-btn-label::after {
content: '';
background-position: 100% 50%;
background-repeat: no-repeat;
display: inline-block;
width: 1.25em;
height: 1em;
vertical-align: middle;
}
#p-lang-btn-label::before {
margin-right: 5px;
filter: var(--oo-ui-icon-filter--normal-progressive);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z'/%3E%3C/svg%3E%0A");
}
#p-lang-btn-label::after {
filter: var(--oo-ui-icon-filter--normal-progressive);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22/%3E%3C/svg%3E");
}
/* #endregion */