Tech, Bureaucrats, emailconfirmed, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Suppressors, Administrators, threadmoderator
118,865
edits
no edit summary
(Undo revision 3010227 by OncomingStorm12th (talk)) |
No edit summary Tags: Mobile edit Mobile web edit |
||
| (84 intermediate revisions by 4 users not shown) | |||
| 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 51: | Line 63: | ||
padding: 5px; | padding: 5px; | ||
float: left; | float: left; | ||
} | } | ||
div.NavFrame div.NavHead { | div.NavFrame div.NavHead { | ||
| Line 102: | Line 113: | ||
text-align: right; | text-align: right; | ||
width: auto; | width: auto; | ||
} | |||
.table-wide-inner { | |||
width: 99%; | |||
} | } | ||
/* +++++++++++++++ | /* +++++++++++++++ | ||
FOR NAVBOXES | NEW TARDIS SKIN | ||
+++++++++++++++ | FOR BASIC NAVBOXES. | ||
(based on a classic) | |||
+++++++++++++++++++ | |||
=-=-=-=-=-=-=-= | =-=-=-=-=-=-=-= | ||
| Line 114: | Line 133: | ||
table.navbox { | table.navbox { | ||
border:1px solid #e5c076 | border:1px solid #ddd1bb; /*#e5c076 #9ec3f7*/ | ||
-moz-box-shadow: inset 0 0 | -moz-box-shadow: inset 0 0 0 5px #9ca1af ; | ||
-webkit-box-shadow: inset 0 0 | -webkit-box-shadow: inset 0 0 0 5px #9ca1af; | ||
-ms-box-shadow: inset 0 0 | -ms-box-shadow: inset 0 0 0 5px #9ca1af; | ||
-o-box-shadow: inset 0 0 | -o-box-shadow: inset 0 0 0 5px #9ca1af; | ||
box-shadow: inset 0 0 | box-shadow: inset 0 0 0 5px #9ca1af; /*#b19565 #5579ab #8b8780 */ | ||
background | border-radius: 15px 8px 15px 8px; | ||
background: #343246; | |||
color:#000; | color:#000; | ||
padding:5px; | padding:5px; | ||
font-family: "Rubik"; | font-family: "Maven Pro","Rubik"; | ||
text-align:left; | text-align:left; | ||
line-height:120%; | line-height:120%; | ||
| Line 129: | Line 149: | ||
margin-left:auto; | margin-left:auto; | ||
width:97%; | 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; | |||
} | |||
/* =-=-=-=-=-=-=-= | /* =-=-=-=-=-=-=-= | ||
| Line 148: | Line 180: | ||
.navbox-abovebelow, | .navbox-abovebelow, | ||
table.navbox th { | table.navbox th { | ||
text-align:center; | text-align:center; | ||
color:# | color:#012c57; | ||
font-family: "Rubik"; | font-family: "Rubik"; | ||
padding: | padding:5.41px; | ||
font-weight:normal; | font-weight:normal; | ||
line-height:1.2; | line-height:1.2; | ||
| Line 163: | Line 190: | ||
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, | |||
.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 */ | |||
} | } | ||
| Line 182: | Line 227: | ||
} | } | ||
/* =-=--=-=-=-=-=- | |||
Main list style | |||
=-=-=-=-=-=-=-= */ | |||
.navbox-list { | .navbox-list { | ||
border-left:2px solid #fdfdfd; | border-left:2px solid #fdfdfd; | ||
} | } | ||
.navbox- | .navbox-even { | ||
background: #dce0ee; | |||
} | |||
- | .navbox-odd { | ||
background: #ccd3e5; | |||
} | |||
color:# | /* =-=--=-=-=-=-=- | ||
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; | padding:5px; | ||
font-family: "Rubik"; | font-family: "Rubik"; | ||
| Line 205: | Line 262: | ||
.navbox-abovebelow, | .navbox-abovebelow, | ||
.navbox-group { | .navbox-group { | ||
background-color:# | background-color:#012c57; | ||
color:white; | color:white; | ||
} | } | ||
/* =-=--=-=-=-=-=- | |||
COLLAPSIBLES | |||
=-=-=-=-=-=-=-= */ | |||
.navbox-subgroup .navbox-title { | |||
color:#0f0f10!important; | |||
color:# | padding:7.4px; | ||
padding: | |||
font-family: "Rubik"; | font-family: "Rubik"; | ||
text-align:left; | text-align:left; | ||
| Line 223: | Line 279: | ||
margin-right:auto; | margin-right:auto; | ||
margin-top:5px; | 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-group, | ||
.navbox-subgroup .navbox-abovebelow { | .navbox-subgroup .navbox-abovebelow { | ||
background:# | 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; | |||
} | } | ||
.navbox- | .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; | |||
} | } | ||
.navbox- | table.navbox .navbox-list a.new { | ||
color: #ac0109; | |||
color: | } | ||
/* =-=--=-=-=-=-=- | |||
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; | |||
} | } | ||
.navbox- | :root.theme-light .timeless .mw-parser-output > table.navbox > tbody > tr > td > .mw-collapsible > tbody > tr > .navbox-title, | ||
.navbox- | :root.theme-light .timeless .mw-parser-output > table.navbox > tbody > tr > td > .mw-collapsible > tbody > tr > th, | ||
.navbox- | .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; | |||
} | } | ||
.navbox- | /* EXCEPTIONS */ | ||
. | .page-content .navbox-list > div > p { | ||
.navbox- | 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; } } | @media print { .navbox { display: none; } } | ||