MediaWiki:Mobile.css

/* CSS placed here will affect users of the mobile site */

body { background: #07060b url(https://static.wikia.nocookie.net/roguefrontiers_gamepedia_en/images/a/ac/MPbackground.jpg/revision/latest) no-repeat fixed top left; background-size: cover; }

body, h1, h2, h3, h4, h5, h6, p, div#content, div#content table { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #e5eaf0; }

p { line-height: 1.5; }

a, a:link, div#content a.external, div#content a.extiw, div#mw-panel div.portal div.body ul li a:link { color: #6677cc; }

a:visited, div#content a.external:visited, div#content a.extiw:visited, div#mw-panel div.portal div.body ul li a:visited { color: #475285; }

a.new, div#content a.new, #quickbar a.new, div#mw-panel div.portal div.body ul li a.new:link { color: #cc3d0e; }

a.new:visited, div#content a.new:visited, #quickbar a.new:visited, div#mw-panel div.portal div.body ul li a.new:visited { color: #7e2c10; }

ul { list-style-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%23475285%22%2F%3E%0A%3C%2Fsvg%3E%0A); }

h1, h2, h3, h4, h5, h6 { border-bottom-color: #c7d0db; }

fieldset { border-color: #c7d0db; }

/* Header and footer */

.header-container.header-chrome, #mw-mf-page-center { background: #212226; background: rgba(33, 34, 38, 0.85); ; }

footer>.post-content { margin: 42px 0 0; }

footer>.post-content>* { padding: 0 1em; }

footer>.post-content>.footer-hydra { padding: 0; }

footer .hlist li { margin-right: 0; }

.footer-box { width: 100%; text-align: center; }

.footer-box ul li { margin-right: 0.5em; }

.overlay #secondary-button.user-button, .header #secondary-button.user-button, .overlay .user-button, .header .user-button { background: transparent; }

/* end header and footer */

.nomobile { display: none; }

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

.mw-ui-button, .last-modified-bar #mw-mf-last-modified { background-color: rgba(0, 0, 0, 0); }

.overlay-enabled, #content { background: #27282d; background: rgba(39, 40, 45, 0.85); background: linear-gradient(to bottom right, rgba(39, 40, 45, 0.8), rgba(7, 6, 11, 0.9)); border-top: 1px solid #c7d0db; }

.mw-ui-icon-arrow::before { filter: invert(100%); }

.thumb, #content_wrapper .thumb, li.gallerybox div.thumb { background-color: rgba(0, 0, 0, 0); border: 1px solid #505050; }

.content table th { background-color: rgba(0, 0, 0, 0); }

.content table td, .content table th { border: 1px solid #505050; padding: 3px; }

.content table.wikitable { background-color: rgba(0, 0, 0, 0); margin: auto; margin-bottom: 1em; }

.content table.wikitable>tr>th, .content table.wikitable>tr>td, .content table.wikitable>*>tr>th, .content table.wikitable>*>tr>td { border: 1px solid #505050; }

.content table.wikitable>tr>th, .content table.wikitable>*>tr>th { background-color: inherit; padding: 3px; }

/* Responsive main page stuff */

/******************** /* Main menu styles * /********************/

.primary-navigation-enabled { border-left: 0!important; background: #07060b !important; }

border-left: 12px solid #27282d !important; background: transparent; }
 * 1) mw-mf-page-left {

background: transparent; }
 * 1) mw-mf-page-left ul {

border-bottom: 12px solid #27282d; }
 * 1) mw-mf-page-left ul:first-child {

border-top: 1px solid #27282d; border-bottom: 1px solid #27282d; background: transparent; text-shadow: none; width: 100%; }
 * 1) mw-mf-page-left ul li {

border: none; color: #6677cc; }
 * 1) mw-mf-page-left ul li a, #mw-mf-page-left ul.hlist li a {

border-left: 12px solid #aaaaaa; background: #505050; }
 * 1) mw-mf-page-left ul li:hover {

border: none; }
 * 1) mw-mf-page-left ul.hlist li:hover {

color: #ffffff; }
 * 1) mw-mf-page-left ul li:hover a, #mw-mf-page-left ul.hlist li:hover a {

.navigation-drawer ul { list-style: none; }

/* Recent changes */

.content .mw-changeslist table td { border: none; padding: 1px; }

/* Template documentation styles */

/* If modifying these styles, be sure to update the desktop skin! */

.doc, .doc-footer { border: 1px solid #c7d0db; border-radius: 7px; background: rgba(33, 34, 38, 0.75); margin-top: 0.5em; }

/********************* /* Front page styles * /*********************/

.fpbox { background: rgba(39, 40, 45, 0.5); border: 1px solid rgba(199, 208, 219, 0.5); box-shadow: 0 2px 5px rgba(7, 6, 11, 0.7); margin: 5px; padding: 5px; overflow: auto; border-radius: 5px; }

.fpbox .welcome { border-bottom: 1px solid #c7d0db; background: transparent; font-size: 150%; text-transform: uppercase; text-align: center; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading { border-bottom: 1px solid #c7d0db; background: transparent; font-size: 132%; font-variant: small-caps; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading .smalllink { color: #6677cc; font-weight: bold; font-size: 75%; }

.fpbox .body { overflow: hidden; }

.fpbox.mobilecollapsible .heading a.togglecollapse { display: block; padding: 0 0 0 15px; }

.fpbox.mobilecollapsible .heading a.togglecollapse:hover, .fpbox.mobilecollapsible .heading a.togglecollapse:active { text-decoration: none; }

.fpbox.mobilecollapsible.collapsed .heading { border: none; margin-bottom: -4px; }

.fpbox.mobilecollapsible.collapsed .heading a.togglecollapse { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAQAAABqrk9lAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiBgcKGQuEiih2AAAALklEQVQI12OczPD2vzAjAwMDAxMDAwPD2/9wJoQDZTIwvP0PZwozMsEYUAUQEwDWNwihamz9rAAAAABJRU5ErkJggg==") left center no-repeat; }

.fpbox.mobilecollapsible.collapsed .body { display: none; }

.fpbox.mobilecollapsible.expanded .heading a.togglecollapse { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAQAAADoz+32AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiBgcKGQFkX8FoAAAAIklEQVQI12Ns+M+ABJiEGREcYUYmBgaYgDAjAwMTjAERBABjNAH/5hy/QgAAAABJRU5ErkJggg==") left center no-repeat; }

.fpbox hr { border: none; border-bottom: 2px solid #c7d0db; }

.fpplainbox { padding: 5px 8px 10px 8px; margin: 0 5px 10px 5px; vertical-align: top; }

.fpmain .columns { overflow: hidden; }

.fpmain .columns .leftcol { width: 100%; margin: 0; padding: 0; }

.fpmain .columns .rightcol { width: 100%; margin: 0; padding: 0; }

@media (min-width: 400px) { .fpmain .columns .leftcol { float: left; width: 50%; margin: 0; padding: 0; }	.fpmain .columns .rightcol { float: right; width: 50%; margin: 0; padding: 0; } }

.fplinks { display: flex; flex-flow: row wrap; justify-content: center; margin: -2px -3px; }

.fplinks .linkslabel { border-bottom: 2px solid #c7d0db; margin: 6px 3px 0 3px; flex: 0 0 100%; }

.fplink { display: flex; align-items: stretch; justify-content: stretch; flex: 0 0 100%; padding: 2px 3px; box-sizing: border-box; }

@media (min-width: 400px) { .fplink { flex: 0 0 50%; } }

.fplink.wide { flex: 0 0 100%; }

.fplink .box { background: transparent; border: 2px solid #c7d0db; border-radius: 2px; box-shadow: 0 0 0 2px #c7d0db inset; display: flex; flex-flow: column nowrap; font-weight: bold; align-items: stretch; justify-content: stretch; text-transform: uppercase; flex-grow: 1; min-height: 4em; }

.fplink.image { justify-content: flex-start; }

.fplink.image .box { min-height: 70px; }

.fplink.image .box .image { display: flex; flex-grow: 1; min-height: 70px; }

.fplink.image .image a { min-height: 70px; }

.fplink.image .box .image img { max-width: 100% !important; width: auto !important; max-height: 70px !important; }

.fplink.image .image { font-size: 75%; }

.fplink .link { display: flex; align-items: stretch; justify-content: stretch; flex-grow: 1; }

.fplink a { display: flex; align-items: center; justify-content: center; flex-grow: 1; }

.fplink.image .link a { border-top: 2px solid #c7d0db; background: #e5eaf0 !important; }

.fpvideos { margin: 0 auto; overflow: hidden; text-align: center; max-width: 480px; }

.fpvideo .slideboxlightshow{ margin: 0 auto; }

.fpvideo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.fpbox .bigmobilelinks .rightcol { padding: 0.25em 0 0 0; }

@media (min-width: 400px) { .fpbox .bigmobilelinks .rightcol { padding: 0; } }

.fpbox .bigmobilelinks ul, .fpbox .bigmobilelinks .leftcol ul, .fpbox .bigmobilelinks .rightcol ul { list-style: none; margin: 0; padding: 0 15px; }

.fpbox .bigmobilelinks ul ul, div#content .fpbox .bigmobilelinks .leftcol ul ul, div#content .fpbox .bigmobilelinks .rightcol ul ul { list-style: none; padding: 0.25em 1em 0 1em; }

.fpbox .bigmobilelinks ul li div { display: flex; align-items: center; justify-content: center; background: rgba(7, 6, 11, 0.4); min-height: 4em; margin: 0.25em 0; padding: 0; }

.fpbox .bigmobilelinks a { display: flex; align-items: center; justify-content: center; background: rgba(7, 6, 11, 0.2); min-height: 4em; margin: 0.25em 0; padding: 0; }

div.cpbox div.feature { width: unset !important; }

/* Classes permitting setting of alignment on mobile only or differently on desktop and mobile */

/* (See .desktopleft, .desktopcenter, .desktopright in MediaWiki:Common.css for the desktop equivalents */

.mobileleft { text-align: left; }

.mobilecenter { text-align: center; }

.mobileright { text-align: right; }