Template:Navigation/styles.css

.template-navigation {
	background: var( --background-color-neutral-subtle );
	box-sizing: border-box;
	clear: both;
	float: right;
	margin: 0 0 1em 1em;
	position: relative;
	text-align: center;
	width: 310px;
}
.template-navigation.collapse .template-navigation-content {
	display: none;
}
.template-navigation.center .template-navigation-list {
	text-align: center;
}
.template-navigation.center .template-navigation-list p {
	margin: .5em 0;
}
.template-navigation.center .template-navigation-list ul {
	list-style: none;
	margin: 0;
}
.template-navigation.center .template-navigation-list ul ul {
	margin-bottom: .5em;
}
.template-navigation-header {
	cursor: pointer;
	font-weight: bold;
	margin: .5em;
}
.template-navigation-header:after {
	content: "▼";
	margin-left: .5em;
}
.template-navigation-header a {
	color: inherit;
	text-decoration: underline;
}
.template-navigation-content {
	margin: .5em;
	overflow: hidden;
}
.template-navigation-logo,
.template-navigation-image {
	margin: .5em;
}
.template-navigation-logo img,
.template-navigation-image img {
	vertical-align: middle;
	margin: auto;
}
.template-navigation-title {
	font-size: large;
	margin: 7px;
	text-align: center;
}
.template-navigation-subtitle {
	margin: .5em;
}
.template-navigation-text {
	margin: .5em;
}
.template-navigation-list {
	margin: 1em .5em;
	text-align: left;
}
.template-navigation-download {
	margin: .5em;
}
.template-navigation-download table {
	border-spacing: .5em;
	display: none;
	text-align: left;
}
.template-navigation-download table .cdx-button {
	width: 100%;
}

/**
 * Audio
 */
.template-navigation-audio {
	margin: 1em 0;
}
.template-navigation-audio-button {
	cursor: pointer;
	margin: 0 .5em;
}
.template-navigation-audio-button svg {
	vertical-align: middle;
}

/**
 * Pages
 */
.template-navigation-pages {
	margin: .5em;
	min-height: 1.6em;
}
.template-navigation-pages a {
	color: var( --background-color-disabled );
}
.template-navigation-pages .text {
	margin: 0 10px;
}
.template-navigation-pages .page {
	margin: 0 1px;
}
.template-navigation-pages .current {
	color: var( --color-progressive );
}
.template-navigation-pages a:hover,
.template-navigation-pages a:focus {
	color: var( --color-base );
	text-decoration: none;
}

/**
 * Study mode
 */
.template-navigation .template-study-mode .cdx-toggle-switch {
	text-align: left;
}

/**
 * Small screens
 */
@media screen and (max-width: 800px) {
	.template-navigation {
		float: none;
		margin: 1em 0;
		width: 100%;
	}
	.template-navigation-content {
		display: none;
	}
}

/* [[Category:Template style pages]] */