MediaWiki:Common.css
Jump to navigation
Jump to search
In other languages: Čeština • Deutsch • Español • Eesti • Français • Italiano • 日本語 • Polski • Português do Brasil • Русский • Türkçe • 中文
CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Custom font */
@font-face {
font-family: 'Astroneer-Bold';
src: url('https://commons.wiki.gg/images/a/ab/Ndastroneer-bold_v2.woff2') format('woff2')
}
@font-face {
font-family: 'Astroneer-Regular';
src: url('https://commons.wiki.gg/images/7/7f/Ndastroneer-regular_v2.woff2') format('woff2')
}
@font-face {
font-family: 'Astroneer-Light';
src: url('https://commons.wiki.gg/images/f/f1/Ndastroneer-light_v2.woff2') format('woff2')
}
/* This governs the sections on the Community portal */
.cpbox {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.cpbox #admins {
box-sizing: border-box;
width: calc(33% - 10px);
margin: 5px;
flex-grow: 1;
min-width: 300px;
}
.cpbox #help {
box-sizing: border-box;
width: calc(67% - 10px);
margin: 5px;
flex-grow: 1;
}
/* Header Styles */
h1,h2,h3,h4,h5,h6,
.mw-body h1, .mw-body-content h1, .mw-body-content h2{
font-family: 'Roboto';
}
/* Template documentation styles */
/* If modifying these styles, be sure to update the mobile skin! */
.doc {
margin: 0em auto 1em;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #BDCAC3;
border-radius: 1em;
padding: 1em;
}
.doc-header {
padding-bottom: 3px;
border-bottom: 1px solid #BDCAC3;
margin-bottom: 1ex;
}
.doc-footer {
margin: 0;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #BDCAC3;
border-radius: 1em;
padding: 1em;
}
/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
.desktopleft {
text-align: left;
}
.desktopcenter {
text-align: center;
}
.desktopright {
text-align: right;
}
/* Template:FP links styles */
.fplinks {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: stretch;
text-align: center;
}
.fplink-outer {
flex-basis: calc(20% - 10px);
width: calc(20% - 15px);
min-width: 80px;
display: inline-block;
vertical-align: middle;
}
.fplink-wide {
flex-basis: calc(33% - 10px);
width: calc(33% - 15px);
}
.fplink-fullwidth {
flex-basis: 100%;
width: calc(100% - 15px);
font-weight: bold;
}
.fplink {
padding: 0.5em;
box-sizing: border-box;
width: 100%;
height: 100%;
display: table;
}
.fplink-plain {
background: transparent;
border-radius: 0;
border: 0;
box-shadow: none;
}
.fplink-inner {
display: table-row;
}
.fplink a {
display: table-cell;
vertical-align: middle;
}
.fplink-small .fplink img {
max-width: 50px;
}
.fplink img {
max-width: 150px;
width: 100%;
height: auto;
}
/*Table Alignment*/
tbody {
vertical-align: top;
}
.centeredTable td {
text-align: center;
}
.centeredTable td:first-child {
text-align:left;
}
.darktable td {
vertical-align: middle;
padding: 5px 10px;
}
/* Responsive Image Scaling */
img.responsive {
max-width: 100%;
height: auto;
}
/* Patch History */
.patchVersion{
color: white;
background: #2d9bf0;
font-size: 80%;
text-transform: uppercase;
border-radius: 3px;
padding: 2px 5px;
text-decoration: none;
}
.patchVersion.alpha{
color: white;
background: #59CBE8;
font-size: 80%;
text-transform: uppercase;
border-radius: 3px;
padding: 2px 5px;
text-decoration: none;
}
.patchVersion.prealpha{
color: white;
background: #E87722;
font-size: 80%;
text-transform: uppercase;
border-radius: 3px;
padding: 2px 5px;
text-decoration: none;
}
.patchType{
color: white;
background: #468202;
font-size: 80%;
text-transform: uppercase;
border-radius: 3px;
padding: 2px 5px;
text-decoration: none;
}
.patchType.hotfix{
color: white;
background: #FFCF01;
font-size: 80%;
text-transform: uppercase;
border-radius: 3px;
padding: 2px 5px;
text-decoration: none;
}
.patchType.unlisted{
color: white;
background: #E33718;
font-size: 80%;
text-transform: uppercase;
border-radius: 3px;
padding: 2px 5px;
text-decoration: none;
}
.history-container {
max-height: 15em;
overflow-y: auto;
padding: 1em 1.5em 0.25em;
border: 1px solid #e4eaee;
}
.history-container > ul {
margin: 0;
}
.history-container > ul > li {
margin-bottom: 0.75em;
list-style: none;
}
.history-container > ul > li > ul {
margin-bottom: 0;
}
/* Template:Spoil */
.spoiler-content{
background-color: rgba(127,127,127,1);
transition: all 0.3s;
cursor: pointer;
}
.spoiler-content > span{
opacity: 0;
transition: all 0.3s;
}
.spoiler-content.show,
.spoiler-content.hover:hover{
background-color: rgba(127,127,127,0);
}
.spoiler-content.show > span,
.spoiler-content.hover:hover > span{
opacity: 1;
}
.ambox {
border-bottom-color: #383838;
border-right-color: #383838;
border-top-color: #383838;
border-collapse: collapse;
font-size: 95%;
margin: 0 auto 2px auto;
width: 80%;
}
.ambox-gray {
border-left-color: #383838;
}
.ambox.ambox-tiny {
font-size: 90%;
margin: 2px 0;
width: auto;
}
.ambox + .ambox {
margin-top: -2px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.ambox-blue {
border-left: 10px solid #129af0;
}
.ambox-red {
border-left: 10px solid #ee3124;
}
.ambox-orange {
border-left: 10px solid #ed7522;
}
.ambox-yellow {
border-left: 10px solid #fecb00;
}
.ambox-purple {
border-left: 10px solid #923b91;
}
.ambox-gray {
border-left: 10px solid #caced0;
}
.ambox-green {
border-left: 10px solid #00b056;
}
/* Ambox small text */
.amsmalltext {
font-size: smaller;
margin-left: 0.8em;
margin-top: 0.5em;
}