MediaWiki:Common.css

From SteamWorld Wiki
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 */
@import url(https://fonts.googleapis.com/css?family=Sniglet);

/* Main page layout */
#fp-2column.fp-container {
    display: grid;
    grid-template-areas: "a" "b" "c";
    grid-template-columns: 100%;
}
@media screen and (min-width:990px) {
    #fp-2column.fp-container {
        grid-template-areas: "a b" "c c";
        grid-template-columns: 50% 50%;
    }
}
@media screen and (min-width:1350px) {
    #fp-2column.fp-container {
        grid-template-areas: "a b" "c b";
        grid-template-columns: auto 520px;
    }
}
#fp-top {
    grid-area: a;
}
#fp-flex {
    grid-area: b;
}
#fp-bottom {
    grid-area: c;
}

/* Main page formatting */
.fpbox {
  width:100%;
  border-radius: 10px;
  background: #793920;
  margin-bottom: 15px;
}

.fpbox .heading {
  background: #793920;
  border: 2px solid #793920;
  border-radius: 7px 7px 0px 0px;
  padding:3px;
  vertical-align:top;
  color: #FFF;
  text-align: center;
  font-weight: bold;
}

.fpbox .body {
  background: #efc897;
  border-radius: 10px;
  padding: 5px;
  margin: 2px;
  border-bottom: 2px solid #793920;
}

.fp-section {
  margin: 5px;
}

/* Background */
body {
	background: url(/images/5/57/Site-background.png) no-repeat center center fixed;
	background-size: cover;
	background-color: #e2c07f;
}

/* Content theming */
#content,
#mw-head {
  border-radius: 3px;
  font-family: Helvetica,Arial,sans-serif;
}
.mw-body {
    background-color: #fad29d;
    border: 1px solid #793920;
}
.content-wrapper a,
#mw-panel .portal .body li a,
.vector-menu-tabs li a,
.content-wrapper a:visited,
#mw-panel .portal .body li a:visited,
.vector-menu-tabs li a:visited {
    color: #296537;
}
.catlinks,
.toc {
    background-color: #fde1bd;
}
#mw-page-base {
	background: none;
}
h1, h2, h3, h4, h5, h6 {
  color: #2a0800;
  font-family: Helvetica,Arial,sans-serif !important;
}

/* Left portal theming */
#mw-panel .portal {
    margin-bottom: 2px;
    border: 2px solid #793920;
    border-radius: 3px;
    background-color: #fad29d;
    font-family: Helvetica,Arial,sans-serif;
}
#mw-panel .portal .vector-menu-heading {
	font-weight: bold;
    color: #793920;
	border-bottom: 1px #793920 solid;
}

/* Top tabs theming */
.vector-menu-tabs li a,
#p-cactions {
  background: #ecbc81;
  border-radius: 3px 3px 0 0;
  border-top: 1px solid #793920;
}
#p-cactions-label {
 background: transparent !important;
}
.vector-menu-tabs li.selected a,
.mw-navigation {
  background-color: #fad29d;
  background-image: none;
}
.vector-menu-tabs,
.vector-menu-tabs li,
.vector-menu-tabs li.selected,
.vector-menu-tabs span,
.vector-menu-tabs ul {
  background: transparent;
}
#ca-nstab-main > span:nth-child(1) > a:nth-child(1),
#ca-view > span:nth-child(1) > a:nth-child(1) {
  border-left: 1px solid #793920;
}
#ca-talk > span:nth-child(1) > a:nth-child(1),
#p-cactions {
  border-right: 1px solid #793920;
}

/** Tabs theming for MW 1.37 **/
.vector-menu-tabs li a,
#p-cactions {
  background: #ecbc81;
  border-radius: 3px 3px 0 0;
  border-top: 1px solid #793920;
}
#p-cactions-label {
 background: transparent !important;
}
.vector-menu-tabs li.selected a,
.mw-navigation {
  background-color: #fad29d;
  background-image: none;
}
.vector-menu-tabs,
.vector-menu-tabs li,
.vector-menu-tabs li.selected,
.vector-menu-tabs span,
.vector-menu-tabs ul {
  background: transparent;
}
#ca-nstab-main > a:nth-child(1),
#ca-view > a:nth-child(1) {
  border-left: 1px solid #793920;
}
#ca-talk > a:nth-child(1) {
 border-right: 1px solid #793920;
}

/* Footer theming */
#footer-places {
	display: none;
}

#footer {
padding: 1.25em 1.25em 0.5em 1.25em;
margin-bottom: 3em;
margin-top: 4px;
font-size: 17px;
}

/* Thumbnails formatting */
li.gallerybox div.thumb {
  border: none;
  background: none;
}

/* Navbox theming */
.mw-collapsible-toggle,
.mw-collapsible-toggle a {
  color: #FFF;
}

/* Wikitable formatting */
.wikitable > tr > th, .wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
	border: 1px solid #793920;
}
 .wikitable,
 .WikiaTable {
  border: 2px solid #793920;
}
.wikitable th,
.WikiaTable th {
     background-color: #793920 !important;
     color: #fff;
}
.wikitable td, .WikiaTable td {
     background: #fad29d;
     margin: 1px;
}
.table,
.wikitable {
  display: inline-table;
  overflow-x: auto;
  white-space: normal;
}
.wikitable {
	border-collapse: collapse;
}
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td,
.wikitable th,
.wikitable > tr > th,
.wikitable > * > tr > th {
  padding: .2em .4em;
}

/* Portable infobox */

.portable-infobox .pi-header,
.portable-infobox .pi-title {
  background: #793920;
  color: #FFFFFF;
  border:0px solid;
  border-color: #793920;
  border-radius:0px;
}

.portable-infobox .pi-data-label {
    background: #fad29d;
    color: #793920;
    border:0px solid ;
    border-color: #793920;
    padding:2px 6px;
    border-radius:0px;
    font-size:12px;
    text-align:left;
}

.pi-image {
   width: auto;
   height: auto;
}

.pi-image-thumbnail {
    width: auto;
    height: auto;
}

.pi-data-value {
    margin:auto;
}

.pi-horizontal-group .pi-data-label,
.pi-horizontal-group .pi-header {
    text-align:center;
}

.pi-caption, .pi-data,
.pi-navigation {
	padding-left: 4px;
	padding-right: 4px;
}

.pi-item-spacing {
    padding-top:2px;
    padding-bottom:2px;
}

.portable-infobox .pi-data-label a,
.portable-infobox .pi-header a {
	color: #fad29d;
	font-weight:inherit;
}

.portable-infobox {
	border      : 3px solid;
	border-color: #793920;
	background  : none;
	border-bottom-color: #793920;
}

.portable-infobox {
   width: 350px;
}

@media (max-width:720px) {
  .portable-infobox {
    width: 100%
  }
}