Template:Styles/mobile.css

/******************

THEMES



.theme-table { background-color: #eaecf0 !important; }

.mobilenav > * > tr > th { background-color: #f8f9fa; font-size: 110%; }

.mobilenav > * > tr > td { background-color: #d9eceb }

/******************

TOC / SECTION HEADERS



table h4 { font-size: 100%; padding: 0; margin: 0; }

/******************

MOBILE RESPONSIVE

/* common breakpoints: mobile: 320px - 720px (max-width: 720px) tablet: 720px - 1000px (min-width: 720px, max-width: 1000px) desktop: 1000px; wide desktop: 1200px; extrawide desktop: 2000px; (min-width: 1000px)

/* desktop */ @media screen and (min-width: 720px) { .mobileresponsive, .mobileblock, .mobiletable, .mobilecell { display: none; }	.desktopresponsive, .desktopblock { display: block; }	.desktoptable { display: table; }	.desktopgrid { display: grid; }	ul { margin: 0.1em 0 0 1.2em; }	.eventtable { text-align: right; margin-right: 10%; margin-top: -0.5em; }	.eventdiv { margin:0; margin-bottom: 1.5em; } }

/* mobile */ @media screen and (max-width: 720px) { .desktopresponsive, .desktopblock, .desktoptable, .desktopgrid, .desktopcell { display: none; }	.mobileresponsive, .mobileblock { display: block; }	.mobiletable { display: table; }	.mobilecell { display: table-cell; }

ul { margin: 0.2em 0.5em !important; padding-left: 0.4em; line-height: 1.4em; }	li { margin-bottom: 0.3em; }	.eventtable { text-align: right; }	.eventdiv { margin: 0.3em 0 1.2em 0; } }

/* homepage */ @media screen and (min-width: 1000px) { .flexhome { width:95%; margin:auto; }	.flexhome .bokujou { width: 60%; }	.flexhome .runefactory, .flexhome .related { width: 20%; } } @media screen and (max-width: 1000px) { .flexhome { flex-wrap: wrap; }	.flexhome .bokujou { width:100%; }	.flexhome .runefactory, .flexhome .related { flex-shrink: 1; flex-grow: 1; }	.homesection { flex-wrap: wrap; gap: 0.7em; } } @media screen and (min-width: 720px) and (max-width: 1200px) { .homesection { display: grid !important; grid-template-columns: auto auto; }	.homesection .console {grid-column:1; grid-row: 1;} .homesection .handheld {grid-column: 2; grid-row: 1 / 3;} .homesection .modern {grid-column:1; grid-row: 2;} } @media screen and (max-width: 720px) { .flexhome { width:100%; }	.flexhome .bokujou, .flexhome .runefactory, .flexhome .related { width:100%; } }

/******************

PADDING/MARGINS



/* Table padding */ table.padding-1em > tr > td, table.padding-1em > * > tr > td { padding: 0.7em 1em; }

table.padding-07em > tr > td, table.padding-07em > * > tr > td { padding: 0.5em 0.7em; }

table.padding-05em > tr > td, table.padding-05em > * > tr > td { padding: 0.3em 0.5em; }

table.padding-03em > tr > td, table.padding-03em > * > tr > td { padding: 0.1em 0.3em; }

/* Table Heading */ table.header-1em > tr > th, table.header-1em > * > tr > th { padding: 0.7em 1em; }

table.header-07em > tr > th, table.header-07em > * > tr > th { padding: 0.5em 0.7em; }

table.header-05em > tr > th, table.header-05em > * > tr > th { padding: 0.3em 0.5em; }

table.header-03em > tr > th, table.header-03em > * > tr > th { padding: 0.1em 0.3em; }

/* Floats */

.floatleft, .floatright { margin: 0 0.3em 0 0; }

/******************

BREAKS



hr { margin: 0.5em; height: 0.5px; background-color: darkgrey; }

/******************

TABS (ACCORDION)



.tabs.tabs-tabbox { max-width: 100% !important; float: none !important; }

.tabs-header { margin: 0 !important; border: 0 !important; text-align: center; }

.tabs-container { border: 0; }

.eventtabs div { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; vertical-align: middle; }

.mobilecollapse-black .collapsible-heading { background: #BCBCBC !important; margin:0; padding:0; } .mobilecollapse-purple .collapsible-heading { background: #BF94E4 !important; margin:0; padding:0; } .mobilecollapse-blue .collapsible-heading { background: #7CB9EA !important; margin:0; padding:0; } .mobilecollapse-green .collapsible-heading { background: #75D986 !important; margin:0; padding:0; } .mobilecollapse-yellow .collapsible-heading { background: #F3E86C !important; margin:0; padding:0; } .mobilecollapse-orange .collapsible-heading { background: #F3BA6C !important; margin:0; padding:0; } .mobilecollapse-red .collapsible-heading { background: #F77377 !important; margin:0; padding:0; } .mobilecollapse-pink .collapsible-heading { background: #F99CD1 !important; margin:0; padding:0; } .mobilecollapse-light .collapsible-heading { background: #CFDBEB !important; margin:0; padding:0; } .mobilecollapse-nav .collapsible-heading { background: #c3e2e0 !important; border-top: 1.5px #f9f9f9 solid !important; border-bottom: 1.5px #f9f9f9 solid !important; margin:0; padding:0; } .mobilecollapse-nav .tabs-container div.tabs-content { border: 0; display: block; }

.mobilecollapse-nav .tabs-container .tabs-content table { display: table; }