Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Gadget-ms-Navbox.css

MediaWiki interface page
Revision as of 16:47, 14 January 2022 by SOTO (talk | contribs)
Clear your cache often around here

After changes are made to this site's CSS or Javascript, you have to bypass your browser's cache to see the changes. You can always do this by going to your browser's preferences panel. But many browsers also offer keyboard shortcuts to save you that trouble. The following shortcuts work in the versions of the browsers that Tardis currently supports. They may not work in earlier versions.

  • Firefox: hold down Shift while performing a page reload.
  • Opera offers no default keyboard shortcut, but you can create a custom keyboard shortcut with the value Clear disk cache
  • Safari users should simultaneously hold down + Option + E. You may need to enable the Develop menu first
  • Chrome: press Ctrl + F5 or Shift + F5 while performing a page reload.
/*  =================
    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: "Rubik";
    text-align:left;
    line-height:120%;
    margin-right:auto;
    margin-left:auto;
    width:97%;
    max-width: 658px;
    min-width: 530px;
}
.theme-fandomdesktop-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:3px;
    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 {
    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 {
    color:#e7e7e7;
    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:#000;
    padding:5px;
    font-family: "Rubik";
    text-align:left;
    line-height:120%;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    background: #f1f2fb;
}
.collapsible .collapsed .navbox-title {
    background: #eff0fb; /* Introducing colour variation (greys) for collapsible navboxes.
    								Do not touch colour choices, or nth-childs. */
}
.collapsible tr:nth-child(3n) .collapsible .navbox-title {
	background: #dadbed;
}
.collapsible tr:nth-child(3n) .collapsed .navbox-title,
.collapsible tr:nth-child(14n+7) .collapsed .navbox-title,
.collapsible tr:nth-child(14n+29) .collapsed .navbox-title {
    background: #d8d9eb;
}
.collapsible tr:nth-child(5n+4) .collapsible .navbox-title,
.collapsible tr:nth-child(14n+27) .collapsible .navbox-title, /*These aren't duplicates*/
.collapsible tr:nth-child(14n+17) .collapsible .navbox-title, 
.collapsible tr:nth-child(14n+13) .collapsible .navbox-title {
    background: none;
}
.collapsible tr:nth-child(5n+12) .collapsible .navbox-title {
    background: white;
}
.collapsible tr:nth-child(14n+27) .collapsed .navbox-title,
.collapsible tr:nth-child(14n+17) .collapsed .navbox-title,
.collapsible tr:nth-child(14n+13) .collapsed .navbox-title {
    background: #fdfdff;
}

.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? */
}

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

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

.collapsible .navbox-subgroup .navbox-group {
    background: #8b85b9 ; /* #9d97c9 #464076 */ 
}
.collapsible .navbox-subgroup .navbox-subgroup .navbox-subgroup .navbox-group {
    background: #9d97c9; /* #bdb3cf #99a6cd */
}
.collapsible .navbox-subgroup .navbox-group a:link,
.collapsible .navbox-subgroup .navbox-group a:visited {
	color: white;
}
.collapsible .navbox-subgroup .navbox-abovebelow {
	background: #827cb3;
}
.collapsible .navbox-subgroup .navbox-abovebelow a:link,
.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,
table.navbox th .plainlinks a:link,
table.navbox th .plainlinks a:visited {
    color: #cfd1d9; /* #e7eaf3 */
}
table.navbox th .plainlinks a {
	font-weight: bold;
}
table.navbox th .plainlinks a:nth-child(1):link,
table.navbox th .plainlinks a:nth-child(1):visited {
	color: #e7e7e7;
}
.collapsible .collapsible .navbox-title .collapseButton,
.collapsible .collapsible table.navbox th .plainlinks a:link,
.collapsible .collapsible table.navbox th .plainlinks a:visited {
    color: #222331;
}

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


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

.theme-fandomdesktop-light .mw-parser-output >  table.navbox > tbody > tr > td > .collapsible > tbody > tr > .navbox-title,
.theme-fandomdesktop-light .mw-parser-output >  table.navbox > tbody > tr > td > .collapsible > tbody > tr > th {
    background: #484662;
}
 
@media print { .navbox { display: none; } }
Cookies help us deliver our services. By using our services, you agree to our use of cookies.