Style:Navbox
border: 1px solid @menu-border-color-thick;
clear: both;
font-size: 0.95em;
text-align: center;
background-color: @article-color;
position: relative;
margin-top: 2em;
.navbox {
margin-top: 0;
}
/*show/hide logic*/
.navbox-collapser-label {
position: absolute;
top: 1em;
transform: translate(0, -50%);
right: .5rem;
z-index:2;
&::after {
content: "\f103";
color: @link-color;
cursor: pointer;
font-family: 'Font Awesome 6 Free';
font-weight: 900;
transform: scaleY(-1);
display: inline-block;
transition: transform 0.25s ease-in-out;
}
}
>.navbox-collapser-input:checked+.navbox-collapser-label::after {
transform: scaleY(1);
}
>.navbox-collapser-input {
display: none;
}
>.navbox-collapser-input:checked ~ .navbox-content {
display: none;
}
/*end show hide logic*/
.navbox-header {
position: relative;
background-color: @menu-heading-background-color;
border-bottom: 1px solid @menu-border-color-thin;
height: 2em;
.navbox-title {
margin: 0;
padding: .2em 0;
font-weight: bold;
line-height: 2em;
}
.navbox-edit {
position: absolute;
font-size: .7em;
top: 50%;
transform: translate(0, -50%);
left: .5rem;
}
}
.navbox-content {
display: grid;
line-height: 2;
overflow: hidden;
grid-template-columns: 100%;
grid-template-areas:
'above'
'content'
'below';
&.image {
grid-template-columns: auto min-content;
grid-template-areas:
'above above'
'content image'
'below below';
}
@media (max-width: 650px) {
grid-template-areas:
'above above'
'image image'
'content content'
'below below';
}
.navbox-above {
grid-area: above;
}
.navbox-below {
grid-area: below;
}
.navbox-image {
grid-area: image;
align-self: center;
}
.navbox-lists {
grid-area: content;
display: grid;
grid-template-columns: max-content 1fr;
align-self: start;
.navbox-row {
display: contents;
&:nth-child(2n-1)>* {
background-color: @article-color-contrast;
}
.navbox-group {
border-right: 2px solid @menu-border-color-thin;
background-color: var(--navbox-group-background, lavender);
color: var(--navbox-group-color, @black);
}
.navbox-group,
.navbox-list {
> p {
margin: 0 .5em;
}
> ul {
.mixin-hlist();
margin: 0 .5em;
}
> .navbox {
border: 0;
}
&.nogroup {
grid-column-end: span 2;
}
}
}
}
}