Template:Styles/mobile.css: Difference between revisions

Latest revision as of 12:35, 19 May 2025

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

THEMES

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

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

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

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

.navbox-inner, .navbox-subgroup {
	margin: 0;
	display: table;
}

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

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;
	margin-top: 0.3em;
	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:100%;
		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;
}

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

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;
}