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

From Tardis Wiki, the free Doctor Who reference
Blergh, it sort of does, but at the cost of making some stuff not properly readable; let's keep it as it is for now
(Hopefully this will give us the old blue look; if it's not properly working, I'll just revert my edit)
Tag: Reverted
(Blergh, it sort of does, but at the cost of making some stuff not properly readable; let's keep it as it is for now)
Tag: Undo
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 48: Line 60:
}
}
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 103: Line 113:
     text-align: right;
     text-align: right;
     width: auto;
     width: auto;
}
.table-wide-inner {
    width: 99%;
}
}


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


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


/*  =-=--=-=-=-=-=-
    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 {
    -webkit-border-radius: 10px 0px 0px 10px;
     color:#e7e7e7;
      -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: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
     font-family: "Rubik";
     text-align:left;
     text-align:left;
     line-height:120%;
     line-height:120%;
Line 227: Line 263:
}
}
   
   
.navbox-subgroup .navbox-title {
/*  =-=--=-=-=-=-=-
    -webkit-border-radius: 10px 0px 0px 10px;
      COLLAPSIBLES
      -moz-border-radius: 10px 0px 0px 10px;
    =-=-=-=-=-=-=-= */
        -ms-border-radius: 10px 0px 0px 10px;
      
        -o-border-radius: 10px 0px 0px 10px;
.navbox-subgroup .navbox-title {
            border-radius: 10px 0px 0px 10px;
     color:#000;
      -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: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
     font-family: "Rubik";
     text-align:left;
     text-align:left;
     line-height:120%;
     line-height:120%;
Line 246: Line 276:
     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 {
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;
}
}


.navbox-even {  
 
     background:#f7f7f7;
/*  =-=--=-=-=-=-=-
     color:#012c57;
      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;
}
}


.navbox-odd {  
/*  =-=--=-=-=-=-=-
     background:#012c57;
      Additional modifications
    color:white;
    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;
}
}


.navbox-list .navbox-even a:link,
.theme-fandomdesktop-light .mw-parser-output >  table.navbox > tbody > tr > td > .collapsible > tbody > tr > .navbox-title,
.navbox-even a:visited,
.theme-fandomdesktop-light .mw-parser-output >  table.navbox > tbody > tr > td > .collapsible > tbody > tr > th {
.navbox-even a:link {
     background: #484662;
     color:#012c57
}
}


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

edits

Cookies help us deliver our services. By using our services, you agree to our use of cookies.