MediaWiki:Gadget-ms-Navbox.css

/*  =================
    NAVBOXES
    =================
    This is for simple navigation,
    as with seasonal nav boxes,
    species nav boxes, etc.
    =================
    The core of this originally
    came from wowwiki.com,
    but it seemed to be a tweak
    of code originally taken
    from the English Wikipedia.
    ================== */
    
/*	The 2022 navbox design
	was created by [[user:SOTO]],
	with inspiration from the initial
	2018 project started by [[user:CzechOut]].
	
	(It draws on both our light and dark themes,
	so that it fits organically into either context.)
	
	Jan 2022: Navboxes are currently
	operational (and lookin' good). */


/*  ++++++++++++++++
    General tweak for navboxes
    +++++++++++++++++ */

.nowraplinks a { 
    white-space: nowrap;
}

/*  ++++++++++++++++
    NAVFRAME STUFF 
    ++++++++++++++++
    Standard Navigationsleisten, 
    aka box hiding thingy from .de.wikipedia 
    Documentation at 
    [[wikipedia:Wikipedia:NavFrame]]. 
    ++++++++++++++++ */

div.Boxmerge,
div.NavFrame {
    margin: 0px;
    padding: 4px;
    /* border: 1px solid #aaa; Border unnecessary and uncurved */
    text-align: center;
    border-collapse: collapse;
    font-size: 95%;
}
div.Boxmerge div.NavFrame {
    border-style: none;
    border-style: hidden;
}
div.NavFrame + div.NavFrame {
    border-top-style: none;
    border-top-style: hidden;
}
div.NavPic {
    margin: 0px;
    padding: 5px;
    float: left;
}
div.NavFrame div.NavHead {
    height: 1.6em;
    font-weight: bold;
    background-color: red;
    position:relative;
}
div.NavFrame p {
    font-size: 100%;
}

div.NavFrame div.NavContent {
    font-size: 100%;
}

div.NavFrame div.NavContent p {
    font-size: 100%;
}

div.NavEnd {
    margin: 0px;
    padding: 0px;
    line-height: 1px;
    clear: both;
}

a.NavToggle {
    position:absolute;
    top:0px;
    right:10px;
    font-weight:normal;
    font-size:smaller;
    margin-left:25px;
}

.NavToggle .collapseButton,
.NavToggle collapseButton {
    right:10px;
    font-weight:normal;
    font-size:smaller;
    text-align:right;
    margin-left:25px;
}

.collapseButton {
    float: right;
    font-weight: normal;
    margin-left: 0.5em;
    text-align: right;
    width: auto;
}

.table-wide-inner {
    width: 99%;
}

/*  +++++++++++++++

    NEW TARDIS SKIN
    FOR BASIC NAVBOXES.
    
    (based on a classic)
    
    +++++++++++++++++++
 
    =-=-=-=-=-=-=-=
    Navbox container style
    =-=-=-=-=-=-=-= */

table.navbox {    
    border:1px solid #ddd1bb; /*#e5c076 #9ec3f7*/
       -moz-box-shadow: inset 0 0 0 5px #9ca1af ;
    -webkit-box-shadow: inset 0 0 0 5px #9ca1af;
        -ms-box-shadow: inset 0 0 0 5px #9ca1af;
         -o-box-shadow: inset 0 0 0 5px #9ca1af; 
            box-shadow: inset 0 0 0 5px #9ca1af; /*#b19565 #5579ab #8b8780 */ 
    border-radius: 15px 8px 15px 8px;
    background: #343246;
    color:#000;
    padding:5px;
    font-family: "Maven Pro","Rubik";
    text-align:left;
    line-height:120%;
    margin-right:auto;
    margin-left:auto;
    width:97%;
    max-width: 658px;
    min-width: 530px;
}
:root.theme-light .timeless table.navbox,
.skin-citizen-light table.navbox {
    border: 1.5px solid #484662;
}

table.navbox a:link,
table.navbox a:visited {
    color: white;
}


/*  =-=-=-=-=-=-=-=
    Single pixel border between
    adjacent navboxes
    (doesn't work for IE6, but that's okay)
    =-=-=-=-=-=-=-= */

table.navbox + table.navbox { 
    margin-top:-1px;
}

/*  =-=-=-=-=-=-=-=-
    Title and above/below styles
    =-=-=-=-=-=-=-=- */

.navbox-title, 
.navbox-abovebelow, 
table.navbox th {
    text-align:center;
    color:#012c57;
    font-family: "Rubik";
    padding:5.41px;
    font-weight:normal;
    line-height:1.2;
    letter-spacing:3px;
    text-transform:uppercase;
    padding-left:1em;
    padding-right:1em;
}

.navbox-title a:link, table.navbox th a:link,
.navbox-title a:visited, table.navbox th a:visited,
.navbox .mw-collapsible-toggle a {
    color: #ede0c7;
    font-weight: bold;
}

/* Currently disabled: this detects italics combined with a second link, and turns off bold for both.
.navbox-title i + a:link, table.navbox th i + a:link,
.navbox-title i a:link, table.navbox th i a:link,
.navbox-title i + a:visited, table.navbox th i + a:visited,
.navbox-title i a:visited, table.navbox th i a:visited {
    font-weight: normal;
}*/
.navbox-subgroup .navbox-title a:link, .navbox-subgroup table.navbox th a:link, .navbox-subgroup .navbox-title a:visited, .navbox-subgroup table.navbox th a:visited {
    font-weight: normal; /* Removing bold from subsections, at least for now */
}

/*  =-=--=-=-=-=-=-
    Group style
    =-=-=-=-=-=-=-= */

.navbox-group {    
    white-space:nowrap;
    text-align:right;
    font-weight:normal;
    padding-left:1em;
    padding-right:1em;
}

.navbox, 
.navbox-subgroup { 
    background:#fdfdfd;
}

/*  =-=--=-=-=-=-=-
    Main list style
    =-=-=-=-=-=-=-= */
    
.navbox-list { 
    border-left:2px solid #fdfdfd;
}

.navbox-even {
    background: #dce0ee;
}
.navbox-odd {
    background: #ccd3e5;
}

/*  =-=--=-=-=-=-=-
    Titles and headings
    		(and notes)
    =-=-=-=-=-=-=-= */
    
.navbox-title, table.navbox th
.navbox-title .selflink, table.navbox th .selflink,
.navbox .navbar a {
    color:#e7e7e7!important;
    padding:5px;
    font-family: "Rubik";
    text-align:left;
    line-height:120%;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
}

.navbox-abovebelow, 
.navbox-group { 
    background-color:#012c57;
    color:white;
}
 
/*  =-=--=-=-=-=-=-
      COLLAPSIBLES
    =-=-=-=-=-=-=-= */
    
.navbox-subgroup .navbox-title {
    color:#0f0f10!important;
    padding:7.4px;
    font-family: "Rubik";
    text-align:left;
    line-height:120%;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    background: #f1f2fb;
}
.mw-collapsible .mw-collapsible + .navbox-title a:visited,
table.navbox .mw-collapsible .mw-collapsible th a:visited,
table.navbox .mw-collapsible .mw-collapsible .mw-collapsible-toggle a {
    color: #383a54;
}
table.navbox .mw-collapsible .mw-collapsible .mw-collapsible-toggle a {
    color: #383a54;
}
.mw-collapsible tr:nth-child(3n) .mw-collapsible .navbox-title {
	background: #dadbed;
}
.mw-collapsible tr:nth-child(3n) .mw-collapsed .navbox-title,
.mw-collapsible tr:nth-child(14n+7) .mw-collapsed .navbox-title,
.mw-collapsible tr:nth-child(14n+17) .mw-collapsed .navbox-title,
.mw-collapsible tr:nth-child(14n+29) .mw-collapsed .navbox-title {
    background: #d8d9e3;
    padding: 6.99px;
}
.mw-collapsible tr:nth-child(5n+4) .mw-collapsible .navbox-title,
.mw-collapsible tr:nth-child(14n+27) .mw-collapsible .navbox-title, /*These aren't duplicates*/
.mw-collapsible tr:nth-child(14n+17) .mw-collapsible:not(.mw-collapsed) .navbox-title, 
.mw-collapsible tr:nth-child(14n+13) .mw-collapsible .navbox-title {
    background: none;
    padding: 7.14px;
}
.mw-collapsible tr:nth-child(5n+12) .mw-collapsible .navbox-title {
    background: white;
}
.mw-collapsible tr:nth-child(14n+27) .mw-collapsed .navbox-title,
.mw-collapsible tr:nth-child(14n+13) .mw-collapsed .navbox-title {
    background: #fdfdff;
    padding: 5.88px;
}
.mw-collapsible .mw-collapsed .navbox-title,
.mw-collapsible tr:nth-child(14n+16) .mw-collapsed .navbox-title,
.mw-collapsible tr:nth-child(14n+17) .mw-collapsible:not(.mw-collapsed) .navbox-title {
    background: #eff0fb; /* Introducing colour variation (greys) for collapsible navboxes.
    								Do not touch colour choices, or nth-childs. */
}

.navbox-subgroup .navbox-group, 
.navbox-subgroup .navbox-abovebelow { 
    background: #e6e6ff;
}

.navbox-list .navbox {
	width: 100%;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
.navbox-subgroup .navbox .navbox-list {
    border-left-width: 0;
}
.navbox-subgroup > tbody > tr > .navbox-list > div {
    padding: 0!important;
}

.navbox-abovebelow, .navbox-group {
    /* background: #817ca9; */
    background: #464076;      /* THink this one needs to be removed? */
}

.mw-collapsible .navbox-group + td .navbox-subgroup .navbox-subgroup .navbox-group {
    background: #99a6cd;
}

.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
    background: #8b85b9;
}

.mw-collapsible .navbox-subgroup .navbox-group {
    background: #8b85b9 ; /* #9d97c9 #464076 */ 
}
.mw-collapsible .navbox-subgroup .navbox-subgroup .navbox-subgroup .navbox-group {
    background: #9d97c9; /* #bdb3cf #99a6cd */
}
.mw-collapsible .navbox-subgroup .navbox-group a:link,
.mw-collapsible .navbox-subgroup .navbox-group a:visited {
	color: white;
}
.mw-collapsible .navbox-subgroup .navbox-abovebelow {
	background: #827cb3;
}
.mw-collapsible .navbox-subgroup .navbox-abovebelow a:link,
.mw-collapsible .navbox-subgroup .navbox-abovebelow a:visited {
    color: white; /* ffefcf */
}


/*  =-=--=-=-=-=-=-
    	COLUMNS
    =-=-=-=-=-=-=-= */
    
.navbox-columns-table td {
    background: #eff0fb;
}
.navbox-columns-table td:nth-child(3n) {
	background: #dadbed;
}
.navbox-columns-table td:nth-child(3n) {
    background: #d8d9eb;
}
.navbox-columns-table td:nth-child(5n+4),
.navbox-columns-table td:nth-child(14n+17),
.navbox-columns-table td:nth-child(14n+13),
.navbox-columns-table td:nth-child(5n+12) {
    background: #edeffffb;
}


/*  =-=--=-=-=-=-=-
      Various exceptions
    =-=-=-=-=-=-=-= */
    
table.navbox .navbox-list a:link,
table.navbox .navbox-list a:visited {
	color: #1d1746;
}

.navbox-abovebelow {
    background: #32588d;
    background: #5579ab;
    background: #99a6cd;
}

.table-wide .navbox > tbody > tr > td {
    box-shadow: inset 0 -13px #596a9f;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
}
.table-wide .navbox .navbox > tbody > tr > td {
    box-shadow: none;
    border-radius: 0;
}

table.navbox .navbox-list a.new {
    color: #ac0109;
}


/*  =-=--=-=-=-=-=-
      BUTTONS (needs to stay near bottom)
    =-=-=-=-=-=-=-= */

.navbox-title .collapseButton {
    color: #cfd1d9; /* #e7eaf3 */
}

.mw-collapsible .mw-collapsible .navbox-title .collapseButton {
    color: #222331;
}

/*  =-=--=-=-=-=-=-
      Additional modifications
    			for light mode		(greater contrast)
    =-=-=-=-=-=-=-= */


:root.theme-light .timeless .mw-parser-output > .navbox > tbody > tr > td > .mw-collapsed > tbody > tr > .navbox-title,
:root.theme-light .timeless .mw-parser-output > .navbox > tbody > tr > td > .mw-collapsed > tbody > tr > th,
.skin-citizen-light .mw-parser-output > .navbox > tbody > tr > td > .mw-collapsed > tbody > tr > .navbox-title,
.skin-citizen-light .mw-parser-output > .navbox > tbody > tr > td > .mw-collapsed > tbody > tr > th {
    background: #524f72;
}

:root.theme-light .timeless .mw-parser-output >  table.navbox > tbody > tr > td > .mw-collapsible > tbody > tr > .navbox-title,
:root.theme-light .timeless .mw-parser-output >  table.navbox > tbody > tr > td > .mw-collapsible > tbody > tr > th,
.skin-citizen-light .mw-parser-output >  table.navbox > tbody > tr > td > .mw-collapsible > tbody > tr > .navbox-title,
.skin-citizen-light .mw-parser-output >  table.navbox > tbody > tr > td > .mw-collapsible > tbody > tr > th {
    background: #484662;
}

/* EXCEPTIONS */
.page-content .navbox-list > div > p {
    line-height: inherit;
    margin-bottom: 0;
    padding-top: 0.25px;
    padding-bottom: 0.25px;
    border-bottom: solid 2px white;
}
.navbox-subgroup > tbody > tr:last-of-type > .navbox-list {
    padding-bottom: 1.5px!important;
}
 
@media print { .navbox { display: none; } }