Hoppa till innehållet

Mall:Mobilvänlig navbox/styles.css

Från Plutten
.navigeringsbox + .navigeringsbox,
.navbox + .navigeringsbox,
.navigeringsbox + style + .navbox {
	margin-top: -1px;
}
.navigeringsbox {
	border: var(--border-color-base, #aaa) 1px solid;
	margin: auto;
	margin-top: 1em;
	clear: both;
	font-size: 88%;
	text-align: center;
	padding: 2px;
}
.navigeringsbox .vr-lankar {
	float: left;
	text-align: left;
	width: 2.3em;
}
.navigeringsbox .huvudrubrik {
	background: #b0c4de;
}
.navigeringsbox .huvudrubrik > span {
	font-size: 110%;
}
.navigeringsbox .huvudrubrik,
.navigeringsbox .grupprubrik {
	padding: 0.1em 1em;
	font-weight: bold;
}
.navigeringsbox .innehall {
	display: grid;
	grid-template-columns: fit-content(10em) auto max-content;
}
.navigeringsbox .malltopp,
.navigeringsbox .mallfot {
    background: #d0e0f5;
    margin-top: 2px;
    grid-column: 1/4;
}
.navigeringsbox .bild,
.navigeringsbox .grupprubrik,
.navigeringsbox .grupp-med-rubrik,
.navigeringsbox .grupp-utan-rubrik {
	display: flex;
	align-items: center;
	margin-top: 2px;
}
.navigeringsbox .bild {
    margin-left: 2px;
	grid-column: 3;
	grid-row: span 10;
}
.navigeringsbox .grupprubrik {
	grid-column: 1 / 2;
	text-align: right;
	background: #d0e0f5;
	justify-content: flex-end;
}
.navigeringsbox .grupp-med-rubrik {
	grid-column: 2 / 3;
	text-align: left;
	margin-left: 2px;
	justify-content: flex-start;
}
.navigeringsbox .grupp-utan-rubrik {
	grid-column: 1 / 3;
	justify-content: center;
}
@media (max-width: 640px) {
	.navigeringsbox .innehall,
	.navigeringsbox .bild,
	.navigeringsbox .grupprubrik,
	.navigeringsbox .grupp-med-rubrik,
	.navigeringsbox .grupp-utan-rubrik {
		display: block;
		text-align: center;
		margin-left: 0;
	}
}
@media screen {
	html.skin-theme-clientpref-night .navigeringsbox .huvudrubrik {
		background: #222;
	}
	html.skin-theme-clientpref-night .navigeringsbox .grupprubrik,
	html.skin-theme-clientpref-night .navigeringsbox .malltopp,
	html.skin-theme-clientpref-night .navigeringsbox .mallfot {
		background: #333;
	}
}
@media screen and (prefers-color-scheme: dark) {
	/* automatic mode */
	html.skin-theme-clientpref-os .navigeringsbox .huvudrubrik {
		background: #222;
	}
	html.skin-theme-clientpref-os .navigeringsbox .grupprubrik,
	html.skin-theme-clientpref-os .navigeringsbox .malltopp,
	html.skin-theme-clientpref-os .navigeringsbox .mallfot {
		background: #333;
	}
}