MediaWiki:Minerva.less/navbox.less

/* ====================
         navboxes
   ==================== */

@navbox-indent: .85em;

@navbox-header-color: #444444;
@navbox-subheader-color: #eeeeee;
@navbox-background-color: @white;
@navbox-border-color: #cccccc;

:root {
	--mobile-navbox-wide-bg-color: desaturate( lighten( #d8ccb4, 3% ), 2% );
	--mobile-navbox-linear-gradient: linear-gradient(to right, fade( @white, 0% ), @white 95%, @white );
}
.navbox {
    border: 1px solid @navbox-border-color;
    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: 719px) {

	    td,
	    th,
		tr,
		tbody,
		.navbox-subgroup {
		    display: block;
		}

	}

	@media screen and (min-width: 720px) {

		.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: @white;
    background-color: @navbox-header-color;
    font-size: 140%;
    text-align: center;
    padding: .25em 0;
    
    a {
    	color: @white;
    }

	@media screen and (min-width: 720px) {
		border-bottom: 1px solid @navbox-border-color;
	}

}

// group headings
.navbox-group-title {
    background-color: @navbox-subheader-color;
    text-align: left;
    padding: .2em @navbox-indent;

    // truncate header
	@media screen and (max-width: 719px) {
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}

	@media screen and (min-width: 720px) {
		border: 1px solid @navbox-border-color;
		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: 720px) {
		border-bottom: 1px solid @navbox-border-color;
	}

	ul {

		@media screen and (max-width: 719px) {
			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: 720px) {
			padding: .2em @navbox-indent .5em !important;
		}

	}

	li {
	    display: inline-flex;
	    align-items: center;
	    height: 3.5em;
	    margin: 0 0 0 @navbox-indent;

		@media screen and (min-width: 720px) {
			height: 2.1em;

			&:first-child {
				margin-left: 0;
			}

		}

	    & + li {
	        margin-left: .5em;
	    }

	    // create separator between links
	    & + li > a::before {
			content: '•';
			display: inline-block;
			white-space: pre-wrap;
	        position: relative;
	        left: -@navbox-indent / 2;
			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/>
	&:not([style*="center"])::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: 720px) {
			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: @navbox-subheader-color;
            padding: 0 @navbox-indent 0 @navbox-indent * 2;

			@media screen and (min-width: 720px) {
				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: 720px) {
				padding-top: 0;
			}

        }

        .navbox-group-title {
            background-color: transparent;
            padding-left: @navbox-indent * 3;

			@media screen and (min-width: 720px) {
				background-color: @navbox-subheader-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;
		}

    }
    
}