Thanks for using our site!

If you're looking to become an editor, please read the Becoming an Editor section carefully.

Template:Styles/mobile.css

From ranchstory
Revision as of 13:03, 8 March 2023 by imported>Kiwibasket
Jump to navigationJump to search
/******************

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-ONLY

******************/
@media screen and (min-width: 600px) {
	.mobileresponsive, .mobiletable, .mobilecell {
		display: none;
	}
	.desktopresponsive {
		display: block;
	}
	.desktoptable {
		display: table;
	}
	.desktopgrid {
		display: grid;
	}
}

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

@media screen and (max-width: 600px) {
	ul {
		margin: 0.2em 0.5em !important;
		padding-left: 0.4em;
		line-height: 1.4em;
	}
	li {
		margin-bottom: 0.3em;
	}
	.eventtable {
		text-align: right;
	}
}

@media screen and (min-width: 600px) {
	ul {
		margin: 0.1em 0 0 1.2em;
	}
	.eventtable {
		text-align: right;
		margin-right: 10%;
		margin-top: -1.5em;
	}
}

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

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

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

.tabs-container 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;
}