| Line 135: |
Line 135: |
| | } | | } |
| | | | |
| − | /* ==================== | + | /* Default style for navigation boxes */ |
| − | navboxes
| + | .navbox { /* Navbox container style */ |
| − | ==================== */
| + | box-sizing: border-box; |
| − | | + | border: 1px solid #a2a9b1; |
| − | @navbox-indent: .85em;
| + | width: 100%; |
| − | @navbox-border: darken( @mystic, 5% );
| + | clear: both; |
| − | | + | font-size: 88%; |
| − | .navbox {
| + | text-align: center; |
| − | border: 1px solid @navbox-border;
| + | padding: 1px; |
| − | box-shadow: @box-shadow;
| + | margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */ |
| − | font-size: .85em;
| + | } |
| − | | + | .navbox .navbox { |
| − | // get rid of stray default mobile css
| + | margin-top: 0; /* No top margin for nested navboxes */ |
| − | .content & ul {
| + | } |
| − | padding-left: 0;
| + | .navbox + .navbox { |
| − | | + | margin-top: -1px; /* Single pixel border between adjacent navboxes */ |
| − | li {
| + | } |
| − | margin-bottom: 0;
| + | .navbox-inner, |
| − | }
| + | .navbox-subgroup { |
| − | | + | width: 100%; |
| − | }
| + | } |
| − | | + | .navbox-group, |
| − | @media screen and (max-width: 719px) { | + | .navbox-title, |
| − | | + | .navbox-abovebelow { |
| − | td,
| + | padding: 0.25em 1em; /* Title, group and above/below styles */ |
| − | th,
| + | line-height: 1.5em; |
| − | tr,
| + | text-align: center; |
| − | tbody,
| + | } |
| − | .navbox-subgroup {
| + | th.navbox-group { /* Group style */ |
| − | display: block;
| + | white-space: nowrap; |
| − | }
| + | /* @noflip */ |
| − | | + | text-align: right; |
| − | } | + | } |
| − | | + | .navbox, |
| − | @media screen and (min-width: 720px) { | + | .navbox-subgroup { |
| − | | + | background-color: #fdfdfd; /* Background color */ |
| − | .content table&,
| + | } |
| − | .content & table {
| + | .navbox-list { |
| − | width: 100% !important;
| + | line-height: 1.5em; |
| − | }
| + | border-color: #fdfdfd; /* Must match background color */ |
| − | | + | } |
| − | }
| + | /* cell spacing for navbox cells */ |
| − | | + | tr + tr > .navbox-abovebelow, |
| − | .navbox-subgroup {
| + | tr + tr > .navbox-group, |
| − | margin: 0;
| + | tr + tr > .navbox-image, |
| − | }
| + | tr + tr > .navbox-list { /* Borders above 2nd, 3rd, etc. rows */ |
| − | | + | border-top: 2px solid #fdfdfd; /* Must match background color */ |
| − | .navbar { | |
| − | display: none;
| |
| − | }
| |
| − | | |
| − | //hide images to improve performance
| |
| − | .pic-link,
| |
| − | .chathead-link,
| |
| − | img {
| |
| − | display: none;
| |
| − | }
| |
| − | | |
| | } | | } |
| − | | + | .navbox th, |
| − | // main navbox heading
| |
| | .navbox-title { | | .navbox-title { |
| − | color: @white;
| + | background-color: #ccccff; /* Level 1 color */ |
| − | background-color: @steel-blue;
| + | } |
| − | font-size: 140%;
| + | .navbox-abovebelow, |
| − | font-weight: bold;
| + | th.navbox-group, |
| − | text-align: center;
| + | .navbox-subgroup .navbox-title { |
| − | padding: .25em 0;
| + | background-color: #ddddff; /* Level 2 color */ |
| − | | + | } |
| − | a,
| + | .navbox-subgroup .navbox-group, |
| − | a:not([href]) /* selflinks */ {
| + | .navbox-subgroup .navbox-abovebelow { |
| − | color: @white !important;
| + | background-color: #e6e6ff; /* Level 3 color */ |
| − | }
| + | } |
| − | | + | .navbox-even { |
| − | @media screen and (min-width: 720px) { | + | background-color: #f7f7f7; /* Even row striping */ |
| − | border-bottom: 1px solid @navbox-border;
| + | } |
| − | }
| + | .navbox-odd { |
| | + | background-color: transparent; /* Odd row striping */ |
| | + | } |
| | + | .navbox .hlist td dl, |
| | + | .navbox .hlist td ol, |
| | + | .navbox .hlist td ul, |
| | + | .navbox td.hlist dl, |
| | + | .navbox td.hlist ol, |
| | + | .navbox td.hlist ul { |
| | + | padding: 0.125em 0; /* Adjust hlist padding in navboxes */ |
| | + | } |
| | | | |
| | + | /* Default styling for Navbar template */ |
| | + | .navbar { |
| | + | display: inline; |
| | + | font-size: 88%; |
| | + | font-weight: normal; |
| | + | } |
| | + | .navbar ul { |
| | + | display: inline-block; |
| | + | white-space: nowrap; |
| | + | } |
| | + | .mw-body-content .navbar ul { |
| | + | line-height: inherit; |
| | + | } |
| | + | .navbar li { |
| | + | word-spacing: -0.125em; |
| | } | | } |
| − | | + | .navbar.mini li abbr[title] { |
| − | // group headings
| + | font-variant: small-caps; |
| − | .navbox-group-title { | + | border-bottom: none; |
| − | background-color: lighten( @loblolly, 5% );
| + | text-decoration: none; |
| − | font-weight: bold;
| + | cursor: inherit; |
| − | padding: .2em @navbox-indent;
| |
| − | | |
| − | // truncate header
| |
| − | @media screen and (max-width: 719px) { | |
| − | overflow: hidden;
| |
| − | white-space: nowrap;
| |
| − | text-overflow: ellipsis;
| |
| − | } | |
| − | | |
| − | @media screen and (min-width: 720px) {
| |
| − | border: 1px solid @navbox-border;
| |
| − | border-width: 0 1px 1px 0;
| |
| − | width: 12vw;
| |
| − | }
| |
| − | | |
| | } | | } |
| − | | + | /* Navbar styling when nested in infobox and navbox */ |
| − | // hide title for half-normal-half-subgroup groups | + | .infobox .navbar { |
| − | .navbox-group-title-hidden { | + | font-size: 100%; |
| − | display: none; | |
| | } | | } |
| − | | + | .navbox .navbar { |
| − | .navbox-list { | + | display: block; |
| − | padding: 0;
| + | font-size: 100%; |
| − | position: relative; // needed for ::after
| |
| − | | |
| − | @media screen and (min-width: 720px) {
| |
| − | border-bottom: 1px solid @navbox-border;
| |
| − | }
| |
| − | | |
| − | ul {
| |
| − | | |
| − | @media screen and (max-width: 719px) {
| |
| − | white-space: nowrap;
| |
| − | overflow-x: auto; // don't combine these into one overflow:
| |
| − | overflow-y: hidden;
| |
| − | -webkit-overflow-scrolling: touch; // for inertia scrolling
| |
| − | }
| |
| − | | |
| − | @media screen and (min-width: 720px) {
| |
| − | padding: .2em @navbox-indent .5em !important;
| |
| − | }
| |
| − | | |
| − | } | |
| − | | |
| − | li {
| |
| − | display: inline-flex;
| |
| − | align-items: center;
| |
| − | height: 3.5em;
| |
| − | margin: 0 0 0 @navbox-indent;
| |
| − | | |
| − | @media screen and (min-width: 720px) {
| |
| − | height: 2.1em;
| |
| − | | |
| − | &:first-child {
| |
| − | margin-left: 0;
| |
| − | }
| |
| − | | |
| − | }
| |
| − | | |
| − | & + li {
| |
| − | margin-left: .5em;
| |
| − | }
| |
| − | | |
| − | // create separator between links
| |
| − | & + li > a::before {
| |
| − | content: '•';
| |
| − | display: inline-block;
| |
| − | white-space: pre-wrap;
| |
| − | position: relative;
| |
| − | left: -@navbox-indent / 2;
| |
| − | color: @gray-chateau;
| |
| − | pointer-events: none;
| |
| − | }
| |
| − | | |
| − | // for list items that use [[File: instead of plink/chatl,
| |
| − | // hide the second interpunct
| |
| − | & + li > a + a::before {
| |
| − | display: none;
| |
| − | }
| |
| − | | |
| − | &:last-child {
| |
| − | margin-right: 2em;
| |
| − | }
| |
| − | | |
| − | }
| |
| − | | |
| − | // gradient fade to indicate more content
| |
| − | // <https://stackoverflow.com/questions/35801932/> | |
| − | &::after {
| |
| − | content: '';
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | background-image: linear-gradient(to right, fade( @white, 0% ), @white 95%, @white );
| |
| − | height: 100%;
| |
| − | width: 2.5em;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | pointer-events: none;
| |
| − | | |
| − | @media screen and (min-width: 720px) {
| |
| − | display: none;
| |
| − | }
| |
| − | | |
| − | }
| |
| − | | |
| − | // for lists with subgroups as children instead of actual items
| |
| − | &.navbox-parent {
| |
| − | border-bottom: 0;
| |
| − | padding: 0;
| |
| − | | |
| − | &::after {
| |
| − | display: none;
| |
| − | }
| |
| − | | |
| − | }
| |
| − | | |
| | } | | } |
| − | | + | .navbox-title .navbar { |
| − | // nested groups
| + | /* @noflip */ |
| − | .navbox-group { | + | float: left; |
| − | | + | /* @noflip */ |
| − | // two levels deep
| + | text-align: left; |
| − | & & {
| + | /* @noflip */ |
| − | | + | margin-right: 0.5em; |
| − | .navbox-group-title {
| |
| − | background-color: @mystic;
| |
| − | padding: 0 @navbox-indent 0 @navbox-indent * 2;
| |
| − | | |
| − | @media screen and (min-width: 720px) {
| |
| − | padding-left: @navbox-indent;
| |
| − | }
| |
| − | | |
| − | }
| |
| − | | |
| − | .navbox-list {
| |
| − | | |
| − | ul {
| |
| − | padding-left: @navbox-indent * 2;
| |
| − | }
| |
| − | | |
| − | li {
| |
| − | margin-bottom: 0;
| |
| − | | |
| − | // realign first list item with heading
| |
| − | &:first-child {
| |
| − | margin-left: 0;
| |
| − | }
| |
| − | | |
| − | }
| |
| − | | |
| − | }
| |
| − | | |
| − | // fake only one level of indentation
| |
| − | &.navbox-group-split .navbox-list ul {
| |
| − | padding-left: @navbox-indent;
| |
| − | }
| |
| − | | |
| − | }
| |
| − | | |
| − | // three levels deep
| |
| − | & & & {
| |
| − | | |
| − | &:first-child .navbox-group-title {
| |
| − | padding-top: .5em;
| |
| − | | |
| − | @media screen and (min-width: 720px) {
| |
| − | padding-top: 0;
| |
| − | }
| |
| − | | |
| − | }
| |
| − | | |
| − | .navbox-group-title {
| |
| − | background-color: transparent;
| |
| − | padding-left: @navbox-indent * 3;
| |
| − | | |
| − | @media screen and (min-width: 720px) {
| |
| − | background-color: desaturate( lighten( @mystic, 3% ), 2% );
| |
| − | padding-left: @navbox-indent;
| |
| − | }
| |
| − | | |
| − | }
| |
| − |
| |
| − | .navbox-list ul {
| |
| − | padding-left: @navbox-indent * 3;
| |
| − | }
| |
| − | | |
| − | // fake only two levels of indentation
| |
| − | &.navbox-group-split .navbox-list ul {
| |
| − | padding-left: @navbox-indent * 2;
| |
| − | }
| |
| − | | |
| − | }
| |
| − |
| |
| | } | | } |
| − |
| |
| | | | |
| | /* Styling for JQuery makeCollapsible, matching that of collapseButton */ | | /* Styling for JQuery makeCollapsible, matching that of collapseButton */ |
