MediaWiki:Minerva.less/navbox.less
Jump to navigation
Jump to search
/* ====================
navboxes
==================== */
@navbox-indent: .85em;
@navbox-breakpoint-mobile: @width-breakpoint-tablet - 1;
@navbox-breakpoint-tablet: @width-breakpoint-tablet;
:root {
--mobile-navbox-wide-bg-color: desaturate( lighten( #d8ccb4, 3% ), 2% );
--mobile-navbox-linear-gradient: linear-gradient(to right, fade( @white, 0% ), var(--body-main) 95%, var(--body-main) );
}
.navbox {
border: 1px solid @BODY_BORDER;
box-shadow: @box-shadow;
font-size: .85em;
// get rid of stray default mobile css
.content & ul {
padding-left: 0;
li {
margin-bottom: 0;
}
}
@media screen and (max-width: @navbox-breakpoint-mobile) {
td,
th,
tr,
tbody,
.navbox-subgroup {
display: block;
}
}
@media screen and (min-width: @navbox-breakpoint-tablet) {
.content table&,
.content & table {
width: 100% !important;
}
}
.navbox-subgroup {
margin: 0;
}
.navbar {
display: none;
}
// hide images to improve performance
.plink-template,
img {
display: none;
}
}
// main navbox heading
.navbox-title {
color: @TEXT_COLOR;
background-color: @BODY_DARK;
font-size: 140%;
text-align: center;
padding: .25em @navbox-indent;
@media screen and (min-width: @navbox-breakpoint-tablet) {
border-bottom: 1px solid @BODY_BORDER;
}
}
// group headings
.navbox-group-title {
background-color: @BODY_MID;
text-align: left;
padding: .2em @navbox-indent;
// truncate header
@media screen and (max-width: @navbox-breakpoint-mobile) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media screen and (min-width: @navbox-breakpoint-tablet) {
border: 1px solid @BODY_BORDER;
border-width: 0 1px 1px 0;
width: 12vw;
}
}
// hide title for half-normal-half-subgroup groups
.navbox-group-title-hidden {
display: none;
}
.navbox-list {
padding: 0;
position: relative; // needed for ::after
@media screen and (min-width: @navbox-breakpoint-tablet) {
border-bottom: 1px solid @BODY_BORDER;
}
ul {
display: flex;
@media screen and (max-width: @navbox-breakpoint-mobile) {
white-space: nowrap;
overflow-x: auto; // don't combine these into one overflow:
overflow-y: hidden;
-webkit-overflow-scrolling: touch; // for inertia scrolling
}
@media screen and (min-width: @navbox-breakpoint-tablet) {
padding: .2em @navbox-indent .5em !important;
flex-wrap: wrap;
}
}
@media screen and (min-width: @navbox-breakpoint-tablet) {
&[style*="center"] ul {
justify-content: center;
}
}
li {
display: inline-flex;
align-items: center;
height: 3.5em;
margin: 0 0 0 @navbox-indent;
@media screen and (min-width: @navbox-breakpoint-tablet) {
height: 2.1em;
&:first-child {
margin-left: 0;
}
}
// create separator between links
& + li::before {
content: '•';
display: inline-block;
white-space: pre-wrap;
position: relative;
left: -@navbox-indent / 2;
color: var(--text-color);
pointer-events: none;
}
// for list items that use [[File: instead of plink/chatl,
// hide the second interpunct
& + li > a + a::before {
display: none;
}
&:last-child {
margin-right: 2em;
}
}
// gradient fade to indicate more content
// <https://stackoverflow.com/questions/35801932/>
&::after {
content: '';
display: block;
position: absolute;
background-image: var(--mobile-navbox-linear-gradient);
height: 100%;
width: 2.5em;
top: 0;
right: 0;
pointer-events: none;
@media screen and (min-width: @navbox-breakpoint-tablet) {
display: none;
}
}
// for lists with subgroups as children instead of actual items
&.navbox-parent {
border-bottom: 0;
padding: 0;
&::after {
display: none;
}
}
}
// nested groups
.navbox-group {
// two levels deep
& & {
.navbox-group-title {
background-color: @BODY_LIGHT;
padding: 0 @navbox-indent 0 @navbox-indent * 2;
@media screen and (min-width: @navbox-breakpoint-tablet) {
padding-left: @navbox-indent;
}
}
.navbox-list {
ul {
padding-left: @navbox-indent * 2;
}
li {
margin-bottom: 0;
// realign first list item with heading
&:first-child {
margin-left: 0;
}
}
}
// fake only one level of indentation
&.navbox-group-split .navbox-list ul {
padding-left: @navbox-indent;
}
}
// three levels deep
& & & {
&:first-child .navbox-group-title {
padding-top: .5em;
@media screen and (min-width: @navbox-breakpoint-tablet) {
padding-top: 0;
}
}
.navbox-group-title {
background-color: transparent;
padding-left: @navbox-indent * 3;
@media screen and (min-width: @navbox-breakpoint-tablet) {
background-color: var(--mobile-navbox-wide-bg-color);
padding-left: @navbox-indent;
}
}
.navbox-list ul {
padding-left: @navbox-indent * 3;
}
// fake only two levels of indentation
&.navbox-group-split .navbox-list ul {
padding-left: @navbox-indent * 2;
}
}
}