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 ****/ .flexhome a { vertical-align: middle; } .home-section td { margin-left: 0.5em; display: flex; line-height: 1em; align-items: center; gap: 5px; } .home-section div { margin: 0.2em 0; } .home-section div a~p { margin: 0; margin-top: 0.2em; } .home-section .noicon { padding-left: 35px; }

@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; } .home-multicolumn { flex-wrap: wrap; gap: 0.7em; } } @media screen and (min-width: 720px) and (max-width: 1200px) { .home-multicolumn { display: grid !important; grid-template-columns: auto auto; } .home-multicolumn #console {grid-column:1; grid-row: 1;} .home-multicolumn #handheld {grid-column: 2; grid-row: 1 / 3;} .home-multicolumn #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; }