Mall:Mobilvänlig navbox/styles.css
Utseende
.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;
}
}