MediaWiki:Minerva.less/navbox.less

/* ====================

        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; }

   }
   

}