MediaWiki:Mobile.css

/* CSS placed here will affect users of the mobile site */ /* Header and footer */ .header-container.header-chrome, background: #212121; }
 * 1) mw-mf-page-center {

/* Header and footer */ .header-container.header-chrome, background: #212121; }
 * 1) mw-mf-page-center {

/* Custom fonts */ @font-face { font-family: 'Asul'; font-style: normal; font-weight: 400; src: local('Asul'), local('Asul-Regular'), url(https://commons.gamepedia.com/media/hydra/fonts/Asul-Regular.ttf) format('truetype'); }

@font-face { font-family: 'Behrensschrift'; font-style: normal; font-weight: 400; src: local('Behrensschrift'), local('Behrensschrift'), url(https://commons.gamepedia.com/media/hydra/fonts/Behrensschrift.ttf) format('truetype'); }

/****************** /* General styles * /******************/ body, .overlay-enabled, #content, body.mediawiki.navigation-enabled #mw-mf-page-center { background: #0b2125 url("https://static.wikia.nocookie.net/handoffate_gamepedia/images/a/af/Skin-Mobile-Background.jpg/revision/latest") center top no-repeat !important; color: #a8a8a8 !important; font-family: 'Asul', sans-serif; }

div#searchbox { border: 1px solid #595a4d; }

body.mediawiki

h1, h2 { color: #fcfbfc !important; border-bottom: 1px solid #595a4d; font-family: 'Behrensschrift', 'Asul', sans-serif !important; }

h3, h4 { color: #f9fafa !important; border-bottom: 1px solid #595a4d; font-family: 'Asul', sans-serif !important; }

h5, h6 { color: #f9fafa !important; font-family: 'Asul', sans-serif !important; }

border-bottom: 1px solid #595a4d; }
 * 1) content_wrapper .section {

border-top: 6px solid #7c7c7c; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #7c7c7c; background: transparent; color: #a8a8a8; padding: 8px; margin-bottom: 5px; }
 * 1) content .thumb {

table, table.wikitable, table.wikitable > * > tr > th { border: none; border-collapse: separate; border-spacing: 1px !important; background: transparent; padding: 3px; margin: auto; margin-bottom: 5px; }

table th, table.wikitable th { border-top: 2px solid #7c7c7c; border-right: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 2px solid #7c7c7c; background: transparent; font-family: 'Behrensschrift', 'Asul', sans-serif !important; font-variant: normal !important; color: #f9fafa; margin: 0; padding: 0 3px 3px 3px; }

table td, table.wikitable td { border-top: 2px solid #595a4d; border-right: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 2px solid #595a4d; background: transparent; color: #a8a8a8; vertical-align: middle; padding: 4px 8px; }

div#footer { border-top: 6px solid #7c7c7c; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #7c7c7c; background: transparent; color: #a8a8a8; margin: 0 10px 10px 10px; padding: 8px; }

.mwm-notice { border: none; background: transparent; color: #a8a8a8; }

pre, .mw-code { border-radius: 2px; border: none; background: #333333; color: #b7b9c6 !important; padding: 2px 2px; white-space: pre-wrap; word-wrap: break-word; }

code { background: transparent; white-space: pre-wrap; word-wrap: break-word; }

input, select, textarea { font-family: 'Asul', sans-serif; border: none; background: #b7b9c6; color: #333333; padding: 2px 2px; }

button, input[type="submit"], input[type="button"], input[type="reset"] { border: none; border-radius: 0; box-shadow: 0 0 8px #165662 inset; background: #165662; background: rgba(22, 86, 98, 0.6); color: #b2b2b2 !important; padding: 2px 2px; }

border-top: 6px solid #7c7c7c !important; border-right: 6px solid transparent !important; border-bottom: 6px solid transparent !important; border-left: 6px solid #7c7c7c !important; background: #0f3b45 !important; color: #a8a8a8 !important; }
 * 1) mf-notification {

.toast { border-top: 6px solid #7c7c7c; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #7c7c7c; background: #0f3b45; color: #a8a8a8; }

.drawer { background: #0f3b45; }

/******************* /* Search elements * /*******************/ border-bottom: 5px solid #471726; background: #0f3b45; color: #a8a8a8; }
 * 1) mw-mf-header, #mw-mf-overlay .header, .full-screen-search #mw-mf-header {

}
 * 1) mw-mf-main-menu-button {

a.escapeOverlay, button.escapeOverlay { }

.search-box .clearlink { }

a.watch-this-article { }

a.watch-this-article.watched { }

input:not([type="submit"]), textarea { border: none; background: #b7b9c6; color: #333333; padding: 2px 2px; }

.full-screen-search #results { border-bottom: 5px solid #595a4d; background: #0f3b45; color: #a8a8a8; }

ul.suggestions-results { background: #0f3b45; }

ul.suggestions-results li.suggestions-result { border: 1px solid #595a4d; color: #a8a8a8; }

ul.suggestions-results li.suggestions-result a, ul.suggestions-results li.suggestions-result a:active, ul.suggestions-results li.suggestions-result a:hover, ul.suggestions-results li.suggestions-result a:visited { color: #a8a8a8; }

ul.suggestions-results li.suggestions-result:hover { background: #7c7c7c; color: #f9fafa; }

ul.suggestions-results li.suggestions-result:hover a, ul.suggestions-results li.suggestions-result:hover a:active, ul.suggestions-results li.suggestions-result:hover a:hover, ul.suggestions-results li.suggestions-result:hover a:visited { color: #f9fafa; }

/******************** /* Main menu styles * /********************/ .primary-navigation-enabled { border-left: 12px solid #595a4d; background: #300b0b !important; font-family: 'Behrensschrift', 'Asul', sans-serif; }

border-left: 12px solid #595a4d; background: transparent; }
 * 1) mw-mf-page-left {

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

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

border-top: 1px solid #595a4d; border-bottom: 1px solid #595a4d; background: transparent; text-shadow: none; }
 * 1) mw-mf-page-left ul li {

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

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

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

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

/*************** /* Link styles * /***************/ a, a:link { color: #aef3ff; }

a:visited { color: #95d4dd; }

a.new { color: #ffa785 !important; }

a.new:visited { color: #dca894 !important; }

a.stub { color: #69ff69; }

a.stub:visited { color: #64dc64; }

a.extiw, a.external { color: #b8b8ff; }

a.extiw:visited, a.external:visited { color: #9e9edf; }

a:active { color: #d1d1d1 !important; }

/*************************** /* Template example styles * /***************************/ span.templateexample { font-family: monospace; }

span.templateexample span.templatelink { font-weight: bold; }

span.templateexample span.paramname { }

span.templateexample span.paramvalue { color: #888888; font-style: italic; }

/******************** /* Notice templates * /********************/ .topNotice { border-top: 6px solid #7c7c7c; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #7c7c7c; background: transparent; color: #a8a8a8; padding: 3px; }

.topNotice .heading { font-size: 132%; }

.topNotice.delete { border-top: 6px solid #ba3e3e; border-left: 6px solid #ba3e3e; color: #be9292; }

.topNotice.move, .topNotice.merge, .topNotice.split { border-top: 6px solid #ba7c3e; border-left: 6px solid #ba7c3e; color: #bea892; }

.topNotice.pagestub, .topNotice.imagerequest, .topNotice.nowalkthrough { border-top: 6px solid #3eba3e; border-left: 6px solid #3eba3e; color: #92be92; }

/****************** /* Image licenses * /******************/ table.imageLicense { border-top: 6px solid #7c7c7c; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #7c7c7c; background: transparent; color: #a8a8a8; padding: 3px; }

table.imageLicense.nolicense { border-top: 6px solid #ba3e3e; border-left: 6px solid #ba3e3e; color: #be9292; }

/********************* /* Front page styles * /*********************/ .fpbox { border-top: 6px solid #7c7c7c; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #7c7c7c; background: transparent; color: #a8a8a8; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; }

.fpbox .welcome { border: none; background: transparent url("https://static.wikia.nocookie.net/handoffate_gamepedia/images/7/7b/Skin-Heading-Background.png/revision/latest") left bottom / 100% 8px no-repeat; font-family: 'Behrensschrift', 'Asul', sans-serif !important; font-variant: normal !important; color: #f9fafa; font-size: 150%; text-align: center; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading { border: none; background: transparent url("https://static.wikia.nocookie.net/handoffate_gamepedia/images/7/7b/Skin-Heading-Background.png/revision/latest") left bottom / 100% 4px no-repeat; font-family: 'Behrensschrift', 'Asul', sans-serif !important; font-variant: normal !important; color: #f9fafa; font-size: 132%; margin: 0 0 10px 0; padding: 0 0 5px 0; }

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

.fpbox hr { border: none; border-bottom: 1px solid #422b23; }

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

.fplinks { margin: -2px -3px; }

.fplinks .linkslabel { border-bottom: 1px solid #595a4d; background: transparent; font-family: 'Behrensschrift', 'Asul', sans-serif !important; font-variant: normal !important; color: #f9fafa; margin: 6px 3px 0 3px; }

.fplink { display: inline-block; vertical-align: middle; width: 100%; }

/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */ .fplink .box { display: table; width: 100%; border-spacing: 2px 3px; border-collapse: separate; }

.fplink .box .row { display: table-row; }

.fplink .box .row .cell { display: table-cell; position: relative; border: none; border-radius: 0; box-shadow: 0 0 8px #165662 inset; background: #165662; background: rgba(22, 86, 98, 0.6); color: #000000; text-align: center; vertical-align: middle; }

.fplink.wide .box .row .cell { padding: 0 5px; }

.fplink.image { width: 76px; height: 74px; }

.fplink.image .box .row .cell { text-shadow: -1px -1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, 1px 1px 0 #000000; width: 70px; height: 70px; vertical-align: bottom; }

.fplink.image .box .row .cell .image img { width: 70px; height: 70px; }

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

.fplink.wide { width: 100%; } }

@media (min-width: 294px) { .fplink { width: 33.333%; }

.fplink.wide { width: 66.666%; } }

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

.fplink.wide { width: 50%; }

.fplink.image { width: 106px; height: 104px; }

.fplink.image .box .row .cell{ width: 100px; height: 100px; }

.fplink.image .box .row .cell .image img { width: 100px; height: 100px; } }

@media (min-width: 506px) { .fplink { width: 20%; }

.fplink.wide { width: 40%; } }

@media (min-width: 612px) { .fplink { width: 16.666%; }

.fplink.wide { width: 33.333%; } }

@media (min-width: 718px) { .fplink { width: 14.285%; }

.fplink.wide { width: 28.571%; } }

@media (min-width: 824px) { .fplink { width: 12.5%; }

.fplink.wide { width: 25%; } }

@media (min-width: 930px) { .fplink { width: 11.111%; }

.fplink.wide { width: 22.222%; } }

@media (min-width: 1036px) { .fplink { width: 10%; }

.fplink.wide { width: 20%; }

.fplink.image { width: 126px; height: 124px; }

.fplink.image .box .row .cell{ width: 120px; height: 120px; }

.fplink.image .box .row .cell .image img { width: 120px; height: 120px; } }

.fplink.image .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 75%; z-index: 1; }

.fplink.image a { z-index: 2; }

.fplink a { display: block; position: relative; top: 0; right: 0; bottom: 0; left: 0; padding: 3px 5px; }

.fplink.wide a { margin: 0 -5px; }

.fplink.image a { top: auto; }

.fplink a, .fplink a:link { color: #f0efeb !important; }

.fplink a:visited { color: #cecaba !important; }

.fplink a.new { color: #000000 !important; }

.fplink a.new:visited { color: #222222 !important; }

.fplink a:active { color: #e4a8bc !important; }

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

.fpvideo { position: relative; padding-top: 25px; padding-bottom: 56.25%; height: 0; }

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

/****************** /* Infobox styles * /******************/ .stdinfobox { border-top: 6px solid #7c7c7c; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #7c7c7c; background: transparent; color: #a8a8a8; text-align: center; vertical-align: top; padding: 3px; overflow: hidden; }

.stdinfobox .title { border: none; background: transparent url("https://static.wikia.nocookie.net/handoffate_gamepedia/images/7/7b/Skin-Heading-Background.png/revision/latest") left bottom / 100% 4px no-repeat; font-family: 'Behrensschrift', 'Asul', sans-serif !important; font-variant: normal !important; color: #f9fafa; font-size: 150%; font-weight: bold; text-align: center; overflow: auto; }

.stdinfobox .subtitle { border-bottom: 1px solid #595a4d; font-family: 'Behrensschrift', 'Asul', sans-serif !important; font-variant: normal !important; color: #f9fafa; text-align: center; overflow: auto; }

.stdinfobox .box { display: inline-block; border-top: 2px solid #7c7c7c; border-right: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 2px solid #7c7c7c; background: transparent; color: #a8a8a8; text-align: left; margin: 0 0 10px 0; padding: 3px; vertical-align: top; }

.stdinfobox img { }

.stdinfobox .body { display: inline-block; vertical-align: top; }

.stdinfobox .image { text-align: center; }

.stdinfobox .image .image { }

.stdinfobox .image img { }

.stdinfobox .image .image img { }

.stdinfobox table { display: table; width: auto; margin: 0 auto; }

.stdinfobox table tr th { border: none !important; box-shadow: none; background: transparent !important; font-family: 'Behrensschrift', 'Asul', sans-serif !important; font-variant: normal !important; color: #f9fafa; text-align: right; vertical-align: top; white-space: nowrap; width: 1%; }

.stdinfobox table tr td { border: none !important; background: transparent !important; color: #a8a8a8 !important; text-align: left; vertical-align: center; }

.stdinfobox table tr th.wide, .stdinfobox table tr td.wide { text-align: left; padding: 0 0 1px 3px; }

.stdinfobox table tr th.indent, .stdinfobox table tr td.indent { padding-left: 23px; }

/********************* /* Navigation tables * /*********************/ table.nav { border: none; border-collapse: separate; border-spacing: 1px !important; background: transparent; margin: 0 auto 10px auto; padding: 0; clear: both; }

table.nav th, table.nav tr th, table.nav > tr > th, table.nav > * > tr > th { border-top: 2px solid #7c7c7c; border-right: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 2px solid #7c7c7c; background: transparent; font-family: 'Behrensschrift', 'Asul', sans-serif !important; font-variant: normal !important; color: #f9fafa; font-size: 116%; text-align: center; vertical-align: top; margin: 0; padding: 0 5px 5px 5px; }

table.nav td, table.nav tr td, table.nav > tr > td, table.nav > * > tr > td { border-top: 2px solid #595a4d; border-right: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 2px solid #595a4d; background: transparent; color: #a8a8a8; margin: 0; padding: 3px 11px 8px 11px; }

table.nav td.list, table.nav tr td.list, table.nav > tr > td.list, table.nav > * > tr > td.list { padding: 0; }

table.nav td .item { display: inline-block; border-right: 1px solid #595a4d; margin: 3px 0 6px 0; padding: 0 11px 2px 11px; }

table.nav td .item:last-child { border: none; }

/****************** /* General styles * /******************/ .contentbox { border-top: 6px solid #7c7c7c; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #7c7c7c; background: transparent; color: #a8a8a8; overflow: auto; margin: 0 0 3px 0; padding: 3px; }

span.bullet { font-size: 1%; }

span.bullet:after { font-size: 10000%; content: "•"; }

.dablink { padding: 3px 3em 10px 3em; font-style: italic; }

span.ghost { color: #888888; /* For any text that appear fainter for some reason */ }

.columns { padding: 0; margin: 10px -10px 0 -10px; overflow: hidden; }

.columns .leftcol { float: left; width: 50%; margin: 0; padding: 0; }

.columns .centercol { float: left; margin: 0; padding: 0; }

.columns .rightcol { float: right; width: 50%; margin: 0; padding: 0; }

.columns .column { margin-left: 10px; margin-right: 10px; }

div#content .columns .leftcol > *, div#content .columns .centercol > *, div#content .columns .rightcol > * { margin-left: 10px; margin-right: 10px; }

div#content .columns .leftcol > ul, div#content .columns .centercol > ul, div#content .columns .rightcol > ul { margin-left: 15px; padding-left: 15px; margin-right: 10px; }

div#content .columns .leftcol .column > *, div#content .columns .centercol .column > *, div#content .columns .rightcol .column > * { margin-left: 0; margin-right: 0; }

.nomobile { display: none; }