MediaWiki:Common.less/navbox.less

@nav-blue: #d8e5ff;

/* ===========================
       [[Template:Navbox]]
   =========================== */

.navbox {
    font-size: .85em;
    background: @white;
    border-collapse: collapse;
    margin: 15px auto;
    width: 100%;
    clear: both;

    // only main navbox, not subnavboxes
    &:not(.navbox-collapsible) {
        box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.1);
    }

    // main header
    .navbox-title {
        font-size: 110%;
        background: @steel-blue;
        color: @white;
        text-align: center;
        padding: 3px 8px;

		// Fix toggle style being different before JS takes over.
		&::before,
        .mw-collapsible-toggle {
            font-size: .9em;
            margin-left: 5em;
            float: right;
            // Prevent toggling causing title shift due to float without a width.
            text-align: right;
            width: 4em;
        }
        
        a {
            color: @white;
        }
        
        a:visited {
        	color: @white;
        }

    }

    // footer
    .navbox-footer {
        background: @steel-blue;
        border-top: 1px;
        text-align: center;
        font-size: smaller;
        
        a {
            color: @white;
        }
        
        a:visited {
        	color: @white;
        }
        
    }

    // navbox grouping header
    .navbox-group-title {
        background: @mystic;
        border: 1px solid @nav-blue;
        border-width: 0 1px 1px 0; // right and bottom
        font-weight: bold;
        padding: 0 10px 5px 10px;
        width: 100px;

        //a {
        //    white-space: normal;
        //    color: @boulder;
        //}
        
        a:visited {
        	color: @steel-blue;
        }

    }

	// navbox group content
    .navbox-list {
        border-bottom: 1px solid @nav-blue;
        padding: 0 7px;
        
        ul {
        	margin: 0;
        }

        // list styling
        li {
            display: inline-block;

            & + li::before {
                content: ' • ';
                white-space: nowrap;
            }

        }

    }

	// nested group content
    .navbox-subgroup {
        border-spacing: 0;
        width: 100%;

        // if the nested group title ever needs to be changed
        .navbox-group-title {
            padding-bottom: 5px;
        }

    }

    // nested navboxes only
    .navbox.navbox-collapsible {
        font-size: 100%;
        margin: 5px 0 0;

        .navbox-title {
            background: @fountain-blue;
            padding: 0 8px;
        }

    }

    // images
    img {
        height: auto;
        width: auto;
        max-height: 1.6em; // limit to line-height
        padding: 0 1px;
    }

    // reduce gap between adjacent navboxes
    & + & {
        margin-top: -8px;
    }

}