|
|
| (2 intermediate revisions by the same user not shown) |
| Line 4: |
Line 4: |
| | .mw-references-wrap { font-size: small; } | | .mw-references-wrap { font-size: small; } |
| | | | |
| − | /* Boxes, boxes everywhere */ | + | /* Infoboxes */ |
| − | /* These colors are purposefully a bit washed out. We want to provide a hint that's distinctive enough to imply a new section or element, whilst not overpowering everything else or creating undue emphasis. Could be done way easier with CSS Custom Properties. Boo IE! Boo! */
| + | .infobox { |
| − | | + | max-width: 320px; |
| − | .box {
| + | border: 1px solid #aaaaaa; |
| − | padding: 1em;
| + | background-color: #f9f9f9; |
| − | border: 1px solid hsl(0, 0%, 89%);
| + | color: black; |
| − | background-color: hsl(0, 0%, 100%);
| + | margin-bottom: 0.5em; |
| − | clear: both;
| + | margin-left: 1em; |
| − | overflow: hidden;
| + | padding: 0.2em; |
| − | }
| + | float: right; |
| − | | + | clear: right; |
| − | /* Box color variants. */
| |
| − | | |
| − | .box.gray {
| |
| − | border-color: hsl(0, 0%, 87%);
| |
| − | background-color: hsl(0, 0%, 98%);
| |
| − | }
| |
| − | .box.gray .box { background-color: hsl(0, 0%, 93%); }
| |
| − | .box.gray .header { background-color: hsl(0, 0%, 80%); }
| |
| − | | |
| − | .box.red {
| |
| − | border-color: hsl(354, 71.5%, 87%);
| |
| − | background-color: hsl(354, 71.5%, 98%);
| |
| − | }
| |
| − | .box.red .box { background-color: hsl(354, 71.5%, 93%); }
| |
| − | .box.red .header { background-color: hsl(354, 71.5%, 80%); }
| |
| − | | |
| − | | |
| − | .box.orange {
| |
| − | border-color: hsl(39, 71.5%, 87%);
| |
| − | background-color: hsl(39, 71.5%, 98%);
| |
| − | }
| |
| − | .box.orange .box { background-color: hsl(39, 71.5%, 93%); }
| |
| − | .box.orange .header { background-color: hsl(39, 71.5%, 80%); }
| |
| − | | |
| − | .box.yellow {
| |
| − | border-color: hsl(55, 71.5%, 87%);
| |
| − | background-color: hsl(55, 71.5%, 98%);
| |
| − | }
| |
| − | .box.yellow .box { background-color: hsl(55, 71.5%, 93%); }
| |
| − | .box.yellow .header { background-color: hsl(55, 71.5%, 80%); }
| |
| − | | |
| − | .box.green {
| |
| − | border-color: hsl(73, 71.5%, 87%);
| |
| − | background-color: hsl(73, 71.5%, 98%);
| |
| − | }
| |
| − | .box.green .box { background-color: hsl(73, 71.5%, 93%); }
| |
| − | .box.green .header { background-color: hsl(73, 71.5%, 80%); }
| |
| − | | |
| − | .box.cerulean {
| |
| − | border-color: hsl(196, 71.5%, 87%);
| |
| − | background-color: hsl(196, 71.5%, 98%);
| |
| − | }
| |
| − | .box.cerulean .box { background-color: hsl(196, 71.5%, 93%); }
| |
| − | .box.cerulean .header { background-color: hsl(196, 71.5%, 80%); }
| |
| − | | |
| − | .box.blue {
| |
| − | border-color: hsl(225, 71.5%, 87%);
| |
| − | background-color: hsl(225, 71.5%, 98%);
| |
| − | }
| |
| − | .box.blue .box { background-color: hsl(225, 71.5%, 93%); }
| |
| − | .box.blue .header { background-color: hsl(225, 71.5%, 80%); }
| |
| − | | |
| − | | |
| − | .box.purple {
| |
| − | border-color: hsl(259, 71.5%, 87%);
| |
| − | background-color: hsl(259, 71.5%, 98%);
| |
| − | }
| |
| − | .box.purple .box { background-color: hsl(259, 71.5%, 93%); }
| |
| − | .box.purple .header { background-color: hsl(259, 71.5%, 80%); }
| |
| − | | |
| − | | |
| − | .box.pink {
| |
| − | border-color: hsl(334, 71.5%, 87%);
| |
| − | background-color: hsl(334, 71.5%, 98%);
| |
| − | }
| |
| − | .box.pink .box { background-color: hsl(334, 71.5%, 93%); }
| |
| − | .box.pink .header { background-color: hsl(334, 71.5%, 80%); }
| |
| − | | |
| − | /* Amboxes (article message box) */
| |
| − | | |
| − | .box.ambox {
| |
| − | max-width: 50em;
| |
| − | margin-right: auto;
| |
| − | margin-left: auto;
| |
| − | padding: .5em 1em;
| |
| − | border-left-width: 10px;
| |
| − | line-height: 1.25;
| |
| − | }
| |
| − | .box.ambox + .box.ambox { margin-top: -1px; }
| |
| − | .box.ambox .ambox__icon { padding-right: 1em; }
| |
| − | .box.ambox.section { /* Smaller, section-specific variant */
| |
| − | max-width: 20em;
| |
| − | margin-left: 0;
| |
| − | padding: .5em;
| |
| − | font-size: smaller;
| |
| − | }
| |
| − | .box.ambox.section .ambox__icon { padding-right: .5em; }
| |
| − | | |
| − | /* Boxes - Licenses */
| |
| − | .box.license {
| |
| − | border-width: 2px;
| |
| − | }
| |
| − | | |
| − | /* Boxes - Documentation */
| |
| − | #template-documentation { margin-top: 1em; }
| |
| − | #template-documentation.box {
| |
| − | border-width: 3px;
| |
| − | border-style: dashed;
| |
| − | }
| |
| − | | |
| − | /* Boxes - Infoboxes. */
| |
| − | | |
| − | .box.infobox {
| |
| − | width: 100%;
| |
| − | max-width: 320px;
| |
| − | margin-left: 1em;
| |
| − | margin-bottom: 1em;
| |
| − | padding: .5em;
| |
| − | float: right;
| |
| − | clear: right;
| |
| − | font-size: small;
| |
| − | }
| |
| − | .infobox th, .infobox td {
| |
| − | padding: 2px 4px;
| |
| − | text-align: left;
| |
| − | vertical-align: top;
| |
| − | }
| |
| − | .infobox .infobox__image {
| |
| − | text-align: center;
| |
| − | }
| |
| − | .infobox .infobox__caption {
| |
| − | text-align: center;
| |
| − | }
| |
| − | .infobox .infobox__title {
| |
| − | font-size: 1.6em;
| |
| − | font-weight: bold;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .infobox .infobox__heading {
| |
| − | padding: .125em .5em;
| |
| − | font-weight: bold;
| |
| − | text-align: center;
| |
| − | }
| |
| − | | |
| − | | |
| − | /* Style for horizontal lists (separator following item).
| |
| − | @source mediawiki.org/wiki/Snippets/Horizontal_lists
| |
| − | @revision 8 (2016-05-21)
| |
| − | @author [[wikipedia:User:Edokter]]
| |
| − | */
| |
| − | .hlist dl,
| |
| − | .hlist ol,
| |
| − | .hlist ul {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − | /* Display list items inline */
| |
| − | .hlist dd,
| |
| − | .hlist dt,
| |
| − | .hlist li {
| |
| − | margin: 0;
| |
| − | display: inline;
| |
| − | }
| |
| − | /* Display nested lists inline */
| |
| − | .hlist.inline,
| |
| − | .hlist.inline dl,
| |
| − | .hlist.inline ol,
| |
| − | .hlist.inline ul,
| |
| − | .hlist dl dl, .hlist dl ol, .hlist dl ul,
| |
| − | .hlist ol dl, .hlist ol ol, .hlist ol ul,
| |
| − | .hlist ul dl, .hlist ul ol, .hlist ul ul {
| |
| − | display: inline;
| |
| − | }
| |
| − | /* Hide empty list items */
| |
| − | .hlist .mw-empty-li {
| |
| − | display: none;
| |
| − | }
| |
| − | /* Generate interpuncts */
| |
| − | .hlist dt:after {
| |
| − | content: ": ";
| |
| − | }
| |
| − | /**
| |
| − | * Note hlist style usage differd in
| |
| − | * the Minerva skin. Remember .hlist is a class defined in core as well! Please check Minerva desktop (and Minerva.css) when changing
| |
| − | * See https://phabricator.wikimedia.org/T213239
| |
| − | */
| |
| − | .hlist dd:after,
| |
| − | .hlist li:after {
| |
| − | content: " · ";
| |
| − | font-weight: bold;
| |
| − | }
| |
| − | .hlist dd:last-child:after,
| |
| − | .hlist dt:last-child:after,
| |
| − | .hlist li:last-child:after {
| |
| − | content: none;
| |
| − | }
| |
| − | /* Add parentheses around nested lists */
| |
| − | .hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
| |
| − | .hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
| |
| − | .hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
| |
| − | content: " (";
| |
| − | font-weight: normal;
| |
| − | }
| |
| − | .hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
| |
| − | .hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
| |
| − | .hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
| |
| − | content: ")";
| |
| − | font-weight: normal;
| |
| − | }
| |
| − | /* Put ordinals in front of ordered list items */
| |
| − | .hlist ol {
| |
| − | counter-reset: listitem;
| |
| − | }
| |
| − | .hlist ol > li {
| |
| − | counter-increment: listitem;
| |
| − | }
| |
| − | .hlist ol > li:before {
| |
| − | content: " " counter(listitem) "\a0";
| |
| − | }
| |
| − | .hlist dd ol > li:first-child:before,
| |
| − | .hlist dt ol > li:first-child:before,
| |
| − | .hlist li ol > li:first-child:before {
| |
| − | content: " (" counter(listitem) "\a0";
| |
| − | }
| |
| − | | |
| − | /* Unbulleted lists */
| |
| − | .plainlist ol,
| |
| − | .plainlist ul {
| |
| − | line-height: inherit;
| |
| − | list-style: none none;
| |
| − | margin: 0;
| |
| − | }
| |
| − | .plainlist ol li,
| |
| − | .plainlist ul li {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − | | |
| − | /* Navboxes */
| |
| − | | |
| − | .navbox { /* Navbox container style */
| |
| − | box-sizing: border-box;
| |
| − | border: 1px solid #a2a9b1;
| |
| − | width: 100%;
| |
| − | clear: both;
| |
| − | font-size: 88%;
| |
| − | text-align: center;
| |
| − | padding: 1px;
| |
| − | margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */
| |
| − | }
| |
| − | .navbox .navbox {
| |
| − | margin-top: 0; /* No top margin for nested navboxes */
| |
| − | }
| |
| − | .navbox + .navbox {
| |
| − | margin-top: -1px; /* Single pixel border between adjacent navboxes */
| |
| − | }
| |
| − | .navbox-inner,
| |
| − | .navbox-subgroup {
| |
| − | width: 100%;
| |
| − | }
| |
| − | .navbox-group,
| |
| − | .navbox-title,
| |
| − | .navbox-abovebelow {
| |
| − | padding: 0.25em 1em; /* Title, group and above/below styles */
| |
| − | line-height: 1.5em;
| |
| − | text-align: center;
| |
| − | }
| |
| − | th.navbox-group { /* Group style */
| |
| − | white-space: nowrap;
| |
| − | /* @noflip */
| |
| − | text-align: right;
| |
| − | }
| |
| − | .navbox,
| |
| − | .navbox-subgroup {
| |
| − | background-color: #fdfdfd; /* Background color */
| |
| − | }
| |
| − | .navbox-list {
| |
| − | line-height: 1.5em;
| |
| − | border-color: #fdfdfd; /* Must match background color */
| |
| − | }
| |
| − | /* cell spacing for navbox cells */
| |
| − | tr + tr > .navbox-abovebelow,
| |
| − | tr + tr > .navbox-group,
| |
| − | tr + tr > .navbox-image,
| |
| − | tr + tr > .navbox-list { /* Borders above 2nd, 3rd, etc. rows */
| |
| − | border-top: 2px solid #fdfdfd; /* Must match background color */
| |
| − | }
| |
| − | .navbox th,
| |
| − | .navbox-title {
| |
| − | background-color: #ccccff; /* Level 1 color */
| |
| − | }
| |
| − | .navbox-abovebelow,
| |
| − | th.navbox-group,
| |
| − | .navbox-subgroup .navbox-title {
| |
| − | background-color: #ddddff; /* Level 2 color */
| |
| | } | | } |
| − | .navbox-subgroup .navbox-group, | + | .infobox td, |
| − | .navbox-subgroup .navbox-abovebelow { | + | .infobox th { |
| − | background-color: #e6e6ff; /* Level 3 color */
| + | vertical-align: top; |
| | + | text-align: left; |
| | } | | } |
| − | .navbox-even { | + | .infobox caption { |
| − | background-color: #f7f7f7; /* Even row striping */
| + | font-size: larger; |
| | + | margin-left: inherit; |
| | } | | } |
| − | .navbox-odd { | + | .infobox.bordered { |
| − | background-color: transparent; /* Odd row striping */
| + | border-collapse: collapse; |
| | } | | } |
| − | .navbox .hlist td dl, | + | .infobox.bordered td, |
| − | .navbox .hlist td ol, | + | .infobox.bordered th { |
| − | .navbox .hlist td ul,
| + | border: 1px solid #aaaaaa; |
| − | .navbox td.hlist dl,
| |
| − | .navbox td.hlist ol,
| |
| − | .navbox td.hlist ul {
| |
| − | padding: 0.125em 0; /* Adjust hlist padding in navboxes */
| |
| | } | | } |
| − | | + | .infobox.bordered .borderless td, |
| − | /* Default styling for Navbar template */
| + | .infobox.bordered .borderless th { |
| − | .navbar { | + | border: 0; |
| − | display: inline;
| |
| − | font-size: 88%;
| |
| − | font-weight: normal;
| |
| | } | | } |
| − | .navbar ul { | + | .infobox .infobox_title, |
| − | display: inline-block;
| + | .infobox .infobox_subtitle, |
| − | white-space: nowrap;
| + | .infobox .infobox_image, |
| | + | .infobox .infobox_caption, |
| | + | .infobox .infobox_heading { |
| | + | text-align: center; |
| | } | | } |
| − | .mw-body-content .navbar ul {
| + | .infobox .infobox__caption { |
| − | line-height: inherit;
| + | font-size: smaller; |
| − | }
| |
| − | .navbar li {
| |
| − | word-spacing: -0.125em;
| |
| − | }
| |
| − | .navbar.mini li abbr[title] {
| |
| − | font-variant: small-caps;
| |
| − | border-bottom: none;
| |
| − | text-decoration: none;
| |
| − | cursor: inherit;
| |
| − | }
| |
| − | /* Navbar styling when nested in infobox and navbox */
| |
| − | .infobox .navbar { | |
| − | font-size: 100%;
| |
| − | }
| |
| − | .navbox .navbar {
| |
| − | display: block;
| |
| − | font-size: 100%;
| |
| − | }
| |
| − | .navbox-title .navbar {
| |
| − | float: left;
| |
| − | text-align: left;
| |
| − | margin-right: 0.5em;
| |
| − | }
| |
| − | | |
| − | /* Infobox chronology */
| |
| − | .chronology {
| |
| − | width: 100%;
| |
| − | table-layout: fixed;
| |
| | } | | } |
| − | .chronology
| |
| − | .chronology th, .chronology td {
| |
| − | width: 33.333%;
| |
| − | padding: 0 .125em;
| |
| − | text-align: center;
| |
| − | }
| |
| | | | |
| − | /* Hide something from view whilst keeping it accessible to screen readers. */ | + | /* Documentation template */ |
| − | .visuallyhidden {
| + | #template-documentation { |
| − | width: 1px;
| + | margin-top: 16px; |
| − | height: 1px;
| + | padding: 16px; |
| − | margin: -1px;
| + | border-width: 3px; |
| − | padding: 0;
| + | border-style: dashed; |
| − | border: 0;
| |
| − | position: absolute;
| |
| − | overflow: hidden;
| |
| − | clip: rect(0 0 0 0);
| |
| | } | | } |
