MediaWiki:Gadget-ms-Navbox.css: Difference between revisions

From Tardis Wiki, the free Doctor Who reference
(Making this look more consistent, so navbox subchildren get the white line in either case (whether you have the list and then the subchild, or the "outside" list inside the subchild).)
(Hopefully this will give us the old blue look; if it's not properly working, I'll just revert my edit)
Tag: Reverted
Line 12: Line 12:
     from the English Wikipedia.
     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). */


/*  ++++++++++++++++
/*  ++++++++++++++++
Line 60: Line 48:
}
}
div.NavPic {
div.NavPic {
    background-color: #D5D4f0;
     margin: 0px;
     margin: 0px;
     padding: 5px;
     padding: 5px;
     float: left;
     float: left;
 
}
}
div.NavFrame div.NavHead {
div.NavFrame div.NavHead {
Line 113: Line 103:
     text-align: right;
     text-align: right;
     width: auto;
     width: auto;
}
.table-wide-inner {
    width: 99%;
}
}


/*  +++++++++++++++
/*  +++++++++++++++
 
     DEFAULT SKIN
     NEW TARDIS SKIN
     FOR NAVBOXES
     FOR BASIC NAVBOXES.
     +++++++++++++++
   
    (based on a classic)
   
     +++++++++++++++++++
   
   
     =-=-=-=-=-=-=-=
     =-=-=-=-=-=-=-=
Line 133: Line 115:


table.navbox {     
table.navbox {     
     border:1px solid #ddd1bb; /*#e5c076 #9ec3f7*/
     border:none;
       -moz-box-shadow: inset 0 0 0 5px #9ca1af ;
    -webkit-border-radius: 10px 0px 0px 10px;
     -webkit-box-shadow: inset 0 0 0 5px #9ca1af;
      -moz-border-radius: 10px 0px 0px 10px;
         -ms-box-shadow: inset 0 0 0 5px #9ca1af;
        -ms-border-radius: 10px 0px 0px 10px;
         -o-box-shadow: inset 0 0 0 5px #9ca1af;  
        -o-border-radius: 10px 0px 0px 10px;
             box-shadow: inset 0 0 0 5px #9ca1af; /*#b19565 #5579ab #8b8780 */
            border-radius: 10px 0px 0px 10px;
     border-radius: 15px 8px 15px 8px;
       -moz-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
    background: #343246;
     -webkit-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
     color:#000;
         -ms-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
         -o-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
             box-shadow: inset -0px 0px 25px 4px #D5D4F0;
     background-color:transparent;
     color:#1F1E38;
     padding:5px;
     padding:5px;
     font-family: "Rubik";
     font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
     text-align:left;
     text-align:left;
     line-height:120%;
     line-height:120%;
Line 149: Line 135:
     margin-left:auto;
     margin-left:auto;
     width:97%;
     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;
}
}


/*  =-=-=-=-=-=-=-=
/*  =-=-=-=-=-=-=-=
Line 179: Line 154:
.navbox-abovebelow,  
.navbox-abovebelow,  
table.navbox th {
table.navbox th {
/*
    -webkit-border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
        -ms-border-radius: 10px 0px 0px 10px;
        -o-border-radius: 10px 0px 0px 10px;
            border-radius: 10px 0px 0px 10px;
      -moz-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
    -webkit-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -ms-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -o-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
            box-shadow: inset -0px 0px 25px #D5D4F0 4px;
*/
     text-align:center;
     text-align:center;
     color:#012c57;
     color:#012c57;
     font-family: "Rubik";
     font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
     padding:3px;
     padding:3px;
     font-weight:normal;
     font-weight:normal;
Line 189: Line 176:
     padding-left:1em;
     padding-left:1em;
     padding-right: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 */
}
}


Line 225: Line 195:
}
}


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


.navbox-even {
    background: #dce0ee;
}
.navbox-odd {
    background: #ccd3e5;
}
/*  =-=--=-=-=-=-=-
    Titles and headings
    (and notes)
    =-=-=-=-=-=-=-= */
   
.navbox-title,  
.navbox-title,  
table.navbox th {
table.navbox th {    
     color:#e7e7e7;
    -webkit-border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
        -ms-border-radius: 10px 0px 0px 10px;
        -o-border-radius: 10px 0px 0px 10px;
            border-radius: 10px 0px 0px 10px;
      -moz-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
    -webkit-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -ms-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -o-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
            box-shadow: inset -0px 0px 25px 4px #DFD4F0;
     color:#1F1E38;
     padding:5px;
     padding:5px;
     font-family: "Rubik";
     font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
     text-align:left;
     text-align:left;
     line-height:120%;
     line-height:120%;
Line 263: Line 227:
}
}
   
   
/*  =-=--=-=-=-=-=-
.navbox-subgroup .navbox-title {
      COLLAPSIBLES
    -webkit-border-radius: 10px 0px 0px 10px;
     =-=-=-=-=-=-=-= */
      -moz-border-radius: 10px 0px 0px 10px;
   
        -ms-border-radius: 10px 0px 0px 10px;
.navbox-subgroup .navbox-title {
        -o-border-radius: 10px 0px 0px 10px;
     color:#000;
            border-radius: 10px 0px 0px 10px;
      -moz-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
     -webkit-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -ms-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -o-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
            box-shadow: inset -0px 0px 25px 4px #D5D4F0;
     color:#1F1E38;
     padding:5px;
     padding:5px;
     font-family: "Rubik";
     font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
     text-align:left;
     text-align:left;
     line-height:120%;
     line-height:120%;
Line 276: Line 246:
     margin-right:auto;
     margin-right:auto;
     margin-top:5px;
     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-group,  
.navbox-subgroup .navbox-abovebelow {  
.navbox-subgroup .navbox-abovebelow {  
     background: #e6e6ff;
     background:#e6e6ff;
}
}


.navbox-list .navbox {
.navbox-even {  
width: 100%;
     background:#f7f7f7;
    margin: 0;
     color:#012c57;
     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 {
.navbox-odd {  
     /* background: #817ca9; */
     background:#012c57;
    background: #464076;      /* THink this one needs to be removed? */
     color:white;
}
 
.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,
.navbox-list .navbox-even a:link,
.theme-fandomdesktop-light .mw-parser-output >  table.navbox > tbody > tr > td > .collapsible > tbody > tr > th {
.navbox-even a:visited,
     background: #484662;
.navbox-even a:link {
     color:#012c57
}
}


/* EXCEPTIONS */
.navbox-odd a:visited,
.page-content .navbox-list > div > p {
.navbox-odd a:link,
    line-height: inherit;
.navbox-list .navbox-odd a:visited {
    margin-bottom: 0;
     color:#fff;
    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; } }
@media print { .navbox { display: none; } }

Revision as of 23:22, 8 January 2023

/*  =================
    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.
    ================== */

/*  ++++++++++++++++
    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 {
    background-color: #D5D4f0;
    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;
}

/*  +++++++++++++++
    DEFAULT SKIN
    FOR NAVBOXES
    +++++++++++++++
 
    =-=-=-=-=-=-=-=
    Navbox container style
    =-=-=-=-=-=-=-= */

table.navbox {    
    border:none;
    -webkit-border-radius: 10px 0px 0px 10px;
       -moz-border-radius: 10px 0px 0px 10px;
        -ms-border-radius: 10px 0px 0px 10px;
         -o-border-radius: 10px 0px 0px 10px;
            border-radius: 10px 0px 0px 10px;
       -moz-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
    -webkit-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -ms-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
         -o-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
            box-shadow: inset -0px 0px 25px 4px #D5D4F0;
    background-color:transparent;
    color:#1F1E38;
    padding:5px;
    font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
    text-align:left;
    line-height:120%;
    margin-right:auto;
    margin-left:auto;
    width:97%;
}

/*  =-=-=-=-=-=-=-=
    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 {
/*
    -webkit-border-radius: 10px 0px 0px 10px;
       -moz-border-radius: 10px 0px 0px 10px;
        -ms-border-radius: 10px 0px 0px 10px;
         -o-border-radius: 10px 0px 0px 10px;
            border-radius: 10px 0px 0px 10px;
       -moz-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
    -webkit-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -ms-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
         -o-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
            box-shadow: inset -0px 0px 25px #D5D4F0 4px;
*/
    text-align:center;
    color:#012c57;
    font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
    padding:3px;
    font-weight:normal;
    line-height:1.2;
    letter-spacing:3px;
    text-transform:uppercase;
    padding-left:1em;
    padding-right:1em;
}

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

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

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

.navbox-list { 
    border-left:2px solid #fdfdfd;
}

.navbox-title, 
table.navbox th {     
    -webkit-border-radius: 10px 0px 0px 10px;
       -moz-border-radius: 10px 0px 0px 10px;
        -ms-border-radius: 10px 0px 0px 10px;
         -o-border-radius: 10px 0px 0px 10px;
            border-radius: 10px 0px 0px 10px;
       -moz-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
    -webkit-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -ms-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
         -o-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
            box-shadow: inset -0px 0px 25px 4px #DFD4F0;
    color:#1F1E38;
    padding:5px;
    font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
    text-align:left;
    line-height:120%;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
}

.navbox-abovebelow, 
.navbox-group { 
    background-color:#012c57;
    color:white;
}
 
.navbox-subgroup .navbox-title { 
    -webkit-border-radius: 10px 0px 0px 10px;
       -moz-border-radius: 10px 0px 0px 10px;
        -ms-border-radius: 10px 0px 0px 10px;
         -o-border-radius: 10px 0px 0px 10px;
            border-radius: 10px 0px 0px 10px;
       -moz-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
    -webkit-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
        -ms-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
         -o-box-shadow: inset -0px 0px 25px 4px #D5D4F0;
            box-shadow: inset -0px 0px 25px 4px #D5D4F0;
    color:#1F1E38;
    padding:5px;
    font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
    text-align:left;
    line-height:120%;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
}

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

.navbox-even { 
    background:#f7f7f7;
    color:#012c57;
}

.navbox-odd { 
    background:#012c57;
    color:white;
}

.navbox-list .navbox-even a:link,
.navbox-even a:visited,
.navbox-even a:link {
    color:#012c57
}

.navbox-odd a:visited,
.navbox-odd a:link,
.navbox-list .navbox-odd a:visited {
    color:#fff;
}
 
@media print { .navbox { display: none; } }
Retrieved from "https://tardis.wiki/w/index.php?title=MediaWiki:Gadget-ms-Navbox.css&oldid=3381755"