Site News
Warning: This wiki contains spoilers. Read at your own risk!

Social media: If you would like, please join our Discord server, and/or follow us on Twitter (X) or Tumblr!

MediaWiki:Mobile.css: Difference between revisions

From Fire Emblem Wiki, your source on Fire Emblem information. By fans, for fans.
m (Changed backgrounds in "wikitable" to background-color so they don't overwrite the background-image from "sortable")
m (Changed cell color to be table color, so the text color of a row or table can be conveniently changed)
Line 124: Line 124:
         color: #0c95c9;
         color: #0c95c9;
}
}
td{
table {
         color:  #d9d9d9;
         color:  #d9d9d9;
}
}

Revision as of 13:59, 18 June 2021

/* All CSS here will be loaded for users of the mobile site */

.mw-ui-icon.mw-ui-icon-element {
    -webkit-filter: invert(1);
    filter: invert(1);
}

#menus-cover {
    background: #0c0c0c;
}

body {
    color: #d9d9d9;
    min-height:100%;
}

#siteNotice {
    text-align:center;
    /*display: none;*/
}/*

#localNotice {
    display: none;
}*/

.mobilebg {
    width: 100% !important;
    font-size: 100% !important;
}

#personal .dropdown {
	border: 2px solid #dbb51f;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	background: rgba(0, 0, 0, 0.85);
}
@media screen and (max-width: 850px) {
    .sidebar-inner, .dropdown {
	border: 2px solid #dbb51f;
	border-radius: 7px;
	background: rgba(0, 0, 0, 0.85);
    }
}

@media screen and (max-width: 850px){
#ca-cargo-purge a {
        text-indent: -99999px;
        border: 0;
        background-color: transparent;
        background-repeat: no-repeat;
        display: inline-block;
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        margin-bottom: -0.5em;
        background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Antu_view-refresh.svg/20px-Antu_view-refresh.svg.png);
        background-image: linear-gradient(transparent,transparent),url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Antu_view-refresh.svg/20px-Antu_view-refresh.svg.png);
    filter: invert(1);
    -webkit-filter: invert(1);
    }
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
     #mw-header-nav-hack {
         background:#1a1a1a;
         border-top: solid 2px #232855;
    }
}


/* Zebra Tooltip styling */
.Zebra_Tooltip .Zebra_Tooltip_Message{
	border-color:#767676 !important;
	background:#FFFFFF !important;
	border-radius:0 !important;
	border-width:1px !important;
	box-shadow:none !important;
	color:#000000 !important;
	font-family:Arial, Helvetica, sans-serif !important;
	padding:2px 5px 1px !important;
	max-width:350px !important;
}

.Zebra_Tooltip .Zebra_Tooltip_Arrow{
	height:0px !important;
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow div.Zebra_Tooltip_Arrow_Border{
	border-width:0px !important;
	box-shadow:none !important;
}

/*======================================COPIED FROM COMMON CSS===================================*/
 
/* wikitable/prettytable class for skinning normal tables */
table.wikitable {
	margin: 1em 1em 1em 0;
	background-color: #1a1a1a;
	/*border: 1px #aaa solid;*/
	border-collapse: collapse;
	empty-cells: show;
}
table.wikitable th, table.wikitable td {
	/*border: 1px #aaa solid;*/
	padding: 0.2em 0.4em;
}
table.wikitable th, table.wikitable td.hl3, table.wikitable th.hl3 {
	background-color: #232855 !important;
	text-align: center;
}
table.wikitable td.hl1, table.wikitable th.hl1 {
	background-color: #c5d8fc;
	text-align: center;
}
table.wikitable td.hl2, table.wikitable th.hl2 {
	background-color: #a7c1f2;
	text-align: center;
}
table.wikitable caption {
	margin-left: inherit;
	margin-right: inherit;
	font-weight: bold;
}
td a{
        color: #0c95c9;
}
table {
        color:  #d9d9d9;
}
/* prevent ugly horizontal page expansion */
pre {
	overflow: auto;
}
/* Page headings used throughout the wiki (though not very much at the time of writing...) */ 
.page-notice, .page-warning {
	border-width: 1px;
	border-style: solid;
	padding: 0.3em 0.5em;
	margin-bottom: 1em;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/* Used to add informative notices to the top of pages - BLUE */
.page-notice {
	background-color: #f9f9f9;
	border-color: #025e9d;
	text-align: left;
}
/* Used to add warning information to the top of pages - RED */
.page-warning {
	background-color: #ffffff;
	border-color: #c51919;
	border-width: 2px;
}
.pw-head {
	color: #c51919;
	font-weight: bold;
}
.center {
	text-align: center;
}
.center table {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.collapseButton {/* 'show'/'hide' buttons created dynamically */
	float: right;/* by the CollapsibleTables javascript in*/
	font-weight: normal; /* [[MediaWiki:Common.js]]are styled here*/
	text-align: right; /* so they can be customised.*/
	width: auto;
}
.default-border-radius {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.default-border-top {
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
}
.default-border-bottom {
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

.bgimage {
	background-image: url('images/1/16/Falchion_transparent.png');
	background-position: center center;
	background-repeat: no-repeat;
}

.tab_tab {
	border-radius: 7px 7px 0 0;
	-moz-border-radius: 7px 7px 0 0;
	-webkit-border-radius: 7px 7px 0 0;
	-khtml-border-radius: 7px 7px 0 0;
	-icab-border-radius: 7px 7px 0 0;
	-o-border-radius: 7px 7px 0 0;
	text-align: center;
	padding: 3px 5px;
	margin: 0px;
	border: 2px solid #B0B0B0;
	background-color: #232855;
	white-space: nowrap;
	cursor: pointer;
}
span.tab_tab:hover, div.tab_tab:hover, td.tab_tab:hover {
	background-color: #222222;
}
.tabselected {
	background-color: #222 !important;
	border-bottom: 2px solid #222;
	color: #d9d9d9;
}
.tabcontainer p {
	margin: 0;
}
/* Revision differences */
.diff-deletedline, .diff-addedline {
	color: black;
}
pre {
	background-color: #333;
	color: #D9D9D9;
}
/* Special:AllMessages */
.TablePager td {
	background-color: transparent;
}
.TablePager th {
	background-color: #555;
}
.TablePager tr:hover td {
	background-color: #333;
}
.am_default, .am_actual {
	color: black;
}
/* Edittools */
#editpage-specialchars {
	color: #ffffff;
	border-color: rgb(219, 181, 31);
	border-style: solid;
	border-width: 2px;
	padding: 10px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}
#editpage-specialchars table {
	color: #ffffff;
}
#mw-notification-area {
	color: black;
}

.firstHeading{ overflow: visible; }


.mw-ui-vform{ width: 410px !important; }

.tocnumber{ color: inherit; }


/* Makes Special:Editcount legible */
body.mw-special-Editcount form#editcount td, body.mw-special-Editcount form#editcount th {
    color: black;
}

@font-face {
    font-family: "AncientTongue";
    src: url("https://fireemblemwiki.org/w/images/2/2d/FEPR_Ancient_Language.ttf") format("truetype");
}

.ancient-tongue {
    font-family: AncientTongue;
    font-size: 150%;
}

/* Lazy cellpadding replacement */
table.cellpadding-1 td, table.cellpadding-1 th {
    padding: 1px;
}

table.cellpadding-2 td, table.cellpadding-2 th {
    padding: 2px;
}

table.cellpadding-3 td, table.cellpadding-3 th {
    padding: 3px;
}

table.cellpadding-4 td, table.cellpadding-4 th {
    padding: 4px;
}

table.cellpadding-5 td, table.cellpadding-5 th {
    padding: 5px;
}

/* References */
ol.references li:target, sup.reference:target {
	background-color: #003;
	color: #d9d9d9;
}

/*Round*/
.round {
    border-radius: 15px;
}

.roundtl {
    border-top-left-radius: 15px;
}

.roundt {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.roundtr {
    border-top-right-radius: 15px;
}

.roundbl {
    border-bottom-left-radius: 15px;
}

.roundb {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.roundbr {
    border-bottom-right-radius: 15px;
}

.roundl {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.roundr {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

/*Used for templates like ChapItems and ChapEnemies/ChapUnits*/
table.chapter-table { /*I'm not sure on the name*/
	margin: auto;
	border-radius: 15px;
	border: 1px solid #b0b0b0; /*(color2)*/
	background-color: #222222; /*(color3)*/
	text-align: center;
}

table.chapter-table th, table.chapter-table td {
	background-color: #232855; /*(color1)*/
	border: 1px solid #b0b0b0;
}


/*A very common table styling, used by tables like the name charts*/
table.basic {
	margin: auto;
	border-radius: 15px;
	border: 1px solid #b0b0b0;
	border-spacing: 3px;
	background-color: #232855;
	text-align: center;
}

table.basic th, table.basic td {
	background-color: #222222;
}

/*For item list templates, like WeaponStats or ItemData*/
@media screen and (min-width: 851px){
table.item-list {
	border: 3px solid #b0b0b0;
	background-color: #232855;
	border-radius: 20px;
	overflow: hidden;
	text-align: center;
	border-spacing: 0px;
}
}
@media screen and (max-width: 850px){
table.item-list {
	border: 3px solid #b0b0b0;
	background-color: #232855;
	border-radius: 20px;
	overflow: auto;
	text-align: center;
	border-spacing: 0px;
}
}


table.item-list tr:nth-child(even) {
	background-color: #222222;
}

/*mirrors*/
.mirrorX {
    display: inline-block;
    transform: scaleX(-1);
}
.mirrorY {
    display: inline-block;
    transform: scaleY(-1);
}
.mirrorXY {
    display: inline-block;
    transform: rotate(180deg);
}

/*======================================COPIED FROM TIMELESS===================================*/
html {
	/* This makes the footer always show up at the bottom of the page,
	   even if the actual page content is too short */
    min-height: 100%;
}

/* Link colours */
a:hover, a:visited {
	color: #08d; /*maybe temporary until I find a colour that works better on a dark background*/
}

a:hover {
	text-decoration: underline;
}

/* Header (search bar, user tools) */
#mw-header-container {
	background: black;
	background: rgba(0, 0, 0, 0.75);
	color: inherit;
}

#p-logo-text a {
	color: inherit;
}

#simpleSearch {
	background: black;
}

#simpleSearch input {
	color: #d9d9d9;
}

.mw-wiki-logo {
    background-image: url("/w/skins/logo.png");
    width: 500px;
    height: 200px;
}

/* Article content area */
.ts-inner {
    max-width: 120em;
}

#toc, .toc {
	background: none;
}

#mw-content-container {
	background: none;
}

#mw-content-block {
	border: 2px solid #dbb51f;
	border-radius: 25px;
	background: black;
	background: rgba(0, 0, 0, 0.7);
}

#mw-content, #mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
	border: none;
	background: none;
}

#mw-page-header-links li.selected a {
	color: #46C;
}

/* Images */
li.gallerybox {
    border: 2px solid #ccc;
    background-color: #333;
}

#mw-content li.gallerybox div.thumb {
    background: 0 0;
}

div.gallerytext {
    background-color: #232855;
}

div.tright {
    background: none;
}

div.thumbinner {
    background-color: #333;
    border-color: #ccc;
}

div.thumbinner img {
    border-color: #ccc;
}

/* Tables */
table {
    border-collapse: separate;
    border-spacing: 2px 2px;
}

@media (max-width: 720px) {
    table, .tab_main {
        width: 100% !important;
        display: block !important;
        overflow-x: auto;
        padding: 0 !important;
        border: none !important;
    }
}

table.wikitable {
	background: none;
	color: inherit;
	border: 1px solid #a2a9b1;
}

table.wikitable > tr > th, table.wikitable > * > tr > th {
	background-color: #232855;
}

table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
	border: 1px solid #a2a9b1;
	padding: 0.2em 0.4em;
}

table.cargoTable td {
	background-color: #222;
}

/* Edit page */
div.editOptions {
	background: none;
}

/* Upload page */
.htmlform-tip {
	color: #999;
}

/* Recent changes */
fieldset {
	background: none;
}

fieldset legend, .mw-changeslist-legend, .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
	background: none;
	color: inherit;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select {
	background: white;
}

#mw-indicator-mw-helplink a {
	filter: invert(100%);
	color: #f72;
}

/* Diff pages */
.diff-addedline {
	background-color: #9c9;
}

.diff-deletedline {
	background-color: #cc8;
}

.diff-context {
	background-color: #111;
	color: #555;
}

.diff-deletedline, .diff-addedline {
	color: black;
}

/* File pages */
ul#filetoc {
	background: transparent;
	border: solid #d9d9d9;
	border-width: 1px 1px 0.2em;
}
.mw_metadata td {
    background-color: #222222 !important;
    border-color: #b0b0b0 !important; 
}
.mw_metadata th {
    background-color: #232855 !important;
    border-color: #b0b0b0 !important; 
}

/* Others */
.mw-notification-content, .oo-ui-menuSelectWidget {
    color: black;
}

.mw-body fieldset#mw-searchoptions {
	background: none;
	color: #d9d9d9;
}

.warningbox {
    background-color: #222222 !important;
    border-color: #b0b0b0 !important;
    color: #d9d9d9 !important;
}

code {
    color: #d9d9d9;
    background-color: #232855;
}

/* Used for lists in columns */
.col-list ol, .col-list ul {
	margin-top: 0;
}

/* Styles for both .calculation and .location */
.calculation, .location {
	border: 1px solid #b0b0b0;
	background-color: #232855;
	border-radius: 15px;
}

.calculation td, .calculation th, .location td, .location th {
	border: 1px solid #b0b0b0;
	background-color: #222;
}

/* Used for tables such as {{AS calculations}} */
.location {
	border-spacing: 4px;
}

.location td, .location th {
	padding: 3px;
}

/* Used for tables such as {{ItemLoc}} */
.calculation {
	font-size: 85%;
	text-align: center;
}

/* Used for tables commonly used in unused content or pre-release pages */
.unused {
	margin: auto;
	background-color: #232855;
	border: 2px solid #b0b0b0;
	width: 75%;
	border-radius: 10px;
	text-align: center
}

.unused td:first-child, .unused th:first-child {
	padding: 5px;
}

.unused td:last-child, .unused th:last-child {
	background-color: #222;
	padding: 10px;
	border: 1px solid #b0b0b0;
	border-radius: 25px
}

/* For character and boss stat tables */
.stat-table {
	border-spacing: 5px;
	border-radius: 20px;
	border: 2px solid #d0d0d0;
	background: #222;
	margin: auto;
	text-align: center;
}

.stat-table th a:not(.new):not(.mw-selflink):not(.mw-collapsible-text) {
	color: #b0b0b0;
}

.stat-table td, .stat-table th {
	padding: 3px;
}

.stat-table td td, .stat-table td th {
	background: #232855;
	border: 1px solid #b0b0b0;
}

.stat-table img {
	max-width: unset !important;
}

/* For infoboxes */
.infobox { /* style for the main table */
	width: 250px;
	border-spacing: 0;
	border: 2px solid #d0d0d0;
	background: #232855;
	border-radius: 20px;
	font-size: 11px;
	margin: 0 0 10px 1px;
	float: right;
	clear: right;
}

.infobox table { /* style for sub-tables */
	width: 100%;
	margin: auto;
	border-spacing: 0;
	border: 1px solid #d0d0d0;
	background: #222;
	border-radius: 15px;
}

.infobox td, .infobox th { /* effectively .cellpadding-3 */
	padding: 3px;
}

/* automatically resizes images wider than 200px to fit; does not allow for images to be wider than 200px even when set to be */
.infobox img {
	max-width: 200px !important;
	height: auto;
}

.infobox tr:first-child tr:first-child th { /* First cell of first sub-table, which usually has the article title */
	background: #232855;
    border-bottom: 1px solid #d0d0d0;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    font-size: 13px;
}

.infobox tr:not(:first-child) table th { /* gives all cells in the second sub-table a right border */
	border-right: 1px solid #d0d0d0;
	text-align: right;
	width: 30%;
}

/* Gives all cells in the second sub-table in rows after the first a top border */
.infobox tr:not(:first-child) table tr:not(:first-child) td,
	.infobox tr:not(:first-child) table tr:not(:first-child) th {
	border-top: 1px solid #d0d0d0;
}