MediaWiki:Mobile.css

/* CSS placed here will affect users of the mobile site */ .nomobile { display: none; }

.client-js .toc-mobile { background-color: rgba(0, 0, 0, 0) !important; border: 1px solid #505050 !important; }

.overlay-enabled, background-color: rgba(0, 0, 0, 0.9); }
 * 1) content {

/* Fixes for defaults from Mobile Frontend */ /* Tables without classes should not have borders or backgrounds that are then inherited by tables that do have classes. */ table, table > tr > td, table > tr > th, table > * > tr > td, table > * > tr > th, .content table th, .content table td, .content table th { background: none; border-collapse: separate; border-spacing: 2px; border: none; }

/* Tables are tables, not blocks................... */ table { display: table; }

html, body, .primary-navigation-enabled { }

body #mw-mf-page-center, body.navigation-enabled #mw-mf-page-center { background-color: #204147; background-image: url("https://starcade.gamepedia.com/media/starcade.gamepedia.com/0/09/Wiki-bg.png"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; color: #fff; }

div#content { background: rgba(2, 26, 27, 0.8); border: none; margin: .5em; padding: .5em; }

a { color: #1d73a4; }

a:visited, a:hover { color: #4193cc; }

.mwm-notice, #searchbox { background: rgba(2, 26, 27, 0.8); border: none; }

.content table.wikitable { background: none; border: 1px solid #363636; color: #fff; }

.content table.wikitable > tr > th, .content table.wikitable > * > tr > th { background-color: #1cc1cf; border: 2px solid #363636; color: #fff; }

.content table.wikitable > tr > td, .content table.wikitable > * > tr > td { background: none; border: 1px solid #363636; padding: 0.2em; }

table.infobox { background: #222; background: rgba(0,0,0,.15); background: linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,.02) 100%); border: 1px solid #363636; border-spacing: 2px; width: 20em; float: right; margin: 0 0 2em 1em; }

table.infobox > tr > td, table.infobox > * > tr > td { background: none; padding: 0 .5em; text-align: right; }

table.infobox > tr > th, table.infobox > * > tr > th { background-color: #1cc1cf; padding-left: .5em; padding-right: .5em; }

table.infobox > tr > th.name, table.infobox > * > tr > th.name, table.infobox > tr > th.title, table.infobox > * > tr > th.title { font-size: 120%; text-align: center; }

table.infobox > tr > th.section, table.infobox > * > tr > th.section { text-align: center; }

table.infobox { background: rgba(0,0,0,.15) !important; border-spacing: 2px !important; float: none; margin: 0 auto 1em !important; }

table.infobox .header { display: table-cell; }

table.infobox { margin-right: auto; margin-left: auto !important; background: inherit; border: solid 1px #363636; max-width: 21em !important; width: auto !important; }

footer { background: rgba(2, 26, 27, 0.8); border: none; margin: .5em; padding: .5em; color: #fff; }

footer-info-mobile-switcher a, footer-info-mobile-switcher a:visited, footer-info-mobile-switcher a.external { font-weight:bold; }

/* Custom wiki styles */ .homePage { margin-top: 37px; }

.infoSection { margin: -35px 0 20px 0; width: 100%; }

.latestnews { background: #13171B; }

.newscontainer { overflow: hidden; margin-top: 2.5%; height: 75%; font-family: "Poppins"; }

.newscontainer .desc { font-size: 1vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.25vw; font-family: "Poppins"; }

.newscontainer span { float: right; margin-top: -1.45vw; font-size: 1vw; font-family: "Poppins"; font-weight: bold; color: #2e7384; }

.newscontainer .desc:nth-child(1) { width: 65%; }

.newscontainer .desc:nth-child(3) { width: 60%; }

.newscontainer .desc:nth-child(5) { width: 65%; }

.newscontainer .desc:nth-child(7) { width: 55%; }

.newscontainer .desc:nth-child(9) { width: 65%; }

.newscontainer .desc:nth-child(11) { width: 50%; }

.newscontainer .desc:nth-child(13) { width: 60%; }

.community { background: #13171B; }

.communitycontainer { display: inline-block; }

.communitycontainerbuttons { padding-bottom: 1.15vw; border-bottom: 3px solid #16444f; text-align: center; }

.communitybuttons:hover { background: #2e7384; transition: 0.3s; cursor: pointer; }

.communitybuttons { background: #16444f; height: 2.5vw; width: 8.7vw; display: inline-flex; margin: 1vw 1vw -0.25vw 1vw; color: #39cec5; font-family: 'Troika',sans-serif; justify-content: center; align-items: center; font-size: 1vw; }

.communityicons { margin-top: 1vw; text-align: center; }

.communityicons img { height: 2.5vw; width: 2.5vw; margin: -0.25vw 0.5VW; cursor: pointer; }

.communityicons img:hover { filter: hue-rotate(170deg); transition: 1s; -webkit-animation: flip-diagonal-2-fwd 0.8s cubic-bezier(0.455,0.030,0.515,0.955) both; animation: flip-diagonal-2-fwd 0.8s cubic-bezier(0.455,0.030,0.515,0.955) both; cursor: pointer; }

.trailerbanner { background: #13171B; }

.trailerbanner img { height: 10.469vw; width: 18.668vw; }

.info { margin: 2.5% 1%; padding: 10px; }

.info:last-child { padding: 10px 10px 5.5% 10px; }

.infoheader { height: 10%; width: 100%; padding-bottom: 5%; border-bottom: 3px solid #39cec5; }

.infotitle { font-family: 'Troika', sans-serif; font-size: 1.5vw; }

.infoarchive { float: right; font-family: 'Titillium Web', sans-serif; margin-top: -1.9vw; font-size: 1vw; font-family: "Poppins"; }

.infoarchive > a { color: #39cec5; text-decoration: none; }

.info { margin: 2.5% 1%; }

.tbbuttons { margin-top: 5%; }

.sectionButton { position: relative; display: inline-block; font-family: "Troika",sans-serif; width: 35.2%; margin: 0; padding: 0.6vw 7.5px; border-radius: 4px; text-align: center; text-transform: uppercase; transition: 0.3s; font-size: 120%; letter-spacing: 1.1px; line-height: 1.1; white-space: nowrap; cursor: pointer; overflow: hidden; z-index: 2; }

.feedback { float: right; }

.sectionButton:hover{ color: white; }

.sectionButton:after{ position: absolute; transition: 0.3s; content: ""; width: 0; bottom: -50%; background: #E64670; height: 200%; left: -10%; transform: skewX(15deg); z-index: -1; }

.sectionButton:hover:after{ left: -10%; width: 120%; }

.sectionButtonAccent { border: 0.2vw solid #E64670; color: #E64670; }

.sectionButtonSpecial { border: 0.2vw solid #2e7384; color: #2e7384; }

.sectionButtonCool { border: 0.2vw solid #39cec5; color: #39cec5; }

.sectionButtonAccent:after { background: #E64670; }

.sectionButtonSpecial:after { background: #2e7384; }

.sectionButtonCool:after { background: #39cec5; }

.games { margin: 0 auto; width: 100%; max-height: 100%; }

.featuredgames, .originalgames, .partnergames, .upcominggames, .newgames, .allgames { margin: 0; padding: 0 0 0 1.9%; }

.filterButtons { width: 100%; height: 75px; margin: 0 2.5%; }

.fbutton { width: 17.8%; max-height: 80%; border: 0.2vw solid #39CEC5; display: inline-block; margin: 1.4vw 0.3vw; border-radius: 3px; font-family: 'troika',sans-serif; font-size: 1.4vw; text-align: center; line-height: 150%; cursor: pointer; color: white; }

.fbutton:first-child { margin-left: 0; }

.fbutton:nth-child(3) { margin-right: 0; }

.activebutton { background: white; color: #3C7C8B; border: 3px solid white; }

.fbutton:hover { background: #39cec5; transition: 0.3s; }

.activebutton:hover { background: #fff; color: #e64670; transition: 0.5s; }