MediaWiki:Common.css: Difference between revisions
Content deleted Content added
Style imported Fandom tables and identify imported history |
Restore Wikipedia message-box family styling and adapt accessible light/dark colours for Elite Dangerous Wiki |
||
| (11 intermediate revisions by 2 users not shown) | |||
Line 34:
.mw-parser-output :is(.infobox-image, .wikia-infobox-image, .wikia-infobox-caption, .pi-image, .pi-caption) { text-align: center; }
.mw-parser-output :is(.infobox img, .wikia-infobox img, .portable-infobox img) { max-width: 100%; height: auto; }
.mw-parser-output :is(.navbox, .vertical-navbox) { border: 1px solid var(--elite-border); background: var(--elite-subtle); color: var(--elite-ink); padding: .3em; }
.mw-parser-output .navbox-title { background: var(--elite-accent-bg); color: var(--elite-heading); font-weight: bold; text-align: center; }
Line 75 ⟶ 63:
.elite-home .elite-two { grid-template-columns: 1fr; }
.mw-parser-output :is(.infobox,.wikia-infobox,.portable-infobox) { float: none; margin: 1em auto; }
}
@media (max-width: 420px) { .elite-home .elite-grid { grid-template-columns: 1fr; } }
/* Matched wordmark images for Vector light and dark appearances. */
html.skin-theme-clientpref-night .mw-logo-container.skin-invert { filter: none; color-scheme: normal; }
Line 113 ⟶ 97:
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > :is(thead, tbody, tfoot) > tr > th,
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > tr > th {
background-color: var(--elite-subtle, #f8f9fa);
color: var(--elite-ink, #202122);
text-align: center;
Line 127 ⟶ 111:
.fandom-import-mark img, .fandom-import-legend img { background: #fff; border-radius: 2px; }
/* Navigation templates: compact horizontal lists, including imported subgroups. */
.mw-parser-output table.navbox {
box-sizing: border-box; width: 100%; clear: both; margin: 1em 0;
border-collapse: separate; border-spacing: 2px; font-size: 88%; line-height: 1.5;
}
.mw-parser-output table.navbox-subgroup {
box-sizing: border-box; width: 100%; border: 0; border-collapse: separate;
border-spacing: 2px; background: transparent; color: inherit; font-size: 100%;
}
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-title {
padding: .35em .55em; vertical-align: middle;
}
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-group {
padding: .35em .6em; background: var(--elite-accent-bg); color: var(--elite-heading);
text-align: center; font-weight: bold; vertical-align: middle;
}
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-list {
padding: .35em .65em; background: var(--elite-surface); color: var(--elite-ink);
text-align: left; vertical-align: middle;
}
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-list:has(> .navbox-subgroup) {
background: transparent;
}
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-list > ul {
margin: 0; padding: 0; list-style: none;
}
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-list > ul > li {
display: inline; margin: 0; padding: 0;
}
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-list > ul > li + li::before {
content: ' • '; color: var(--elite-muted);
}
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-footer {
padding: .4em .6em; background: var(--elite-accent-bg); color: var(--elite-heading);
font-weight: normal; text-align: center;
}
.mw-parser-output .navbox .navbox { margin: 0; font-size: 100%; }
@media (max-width: 720px) {
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-group { min-width: 5.5em; }
.mw-parser-output table.navbox { font-size: 90%; }
}
/* Keep the warm hierarchy visible in the Vector dark palette. */
html.skin-theme-clientpref-night body .mw-parser-output table.navbox :is(.navbox-title, .navbox-group, .navbox-footer),
html.skin-theme-clientpref-night body .mw-parser-output table.navbox-subgroup .navbox-group {
background-color: var(--elite-accent-bg) !important; color: var(--elite-heading);
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body .mw-parser-output table.navbox :is(.navbox-title, .navbox-group, .navbox-footer),
html.skin-theme-clientpref-os body .mw-parser-output table.navbox-subgroup .navbox-group {
background-color: var(--elite-accent-bg) !important; color: var(--elite-heading);
}
}
/* Portable infobox labels: keep ordinary field names readable. */
.mw-parser-output .portable-infobox .pi-data-label { flex: 0 0 40%; overflow-wrap: normal; word-break: normal; }
.mw-parser-output .portable-infobox .pi-data-value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Imported navboxes: format directly nested list items inline. */
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-list > li { display: inline; list-style: none; margin: 0; padding: 0; }
.mw-parser-output :is(.navbox, .navbox-subgroup) .navbox-list > li + li::before { content: " • "; color: var(--elite-muted); }
/* Keep sorting indicators clear of imported table headings. */
.mw-parser-output table.jquery-tablesorter th.headerSort,
.client-js .mw-parser-output table.sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable) {
padding-inline-end: 31px;
background-repeat: no-repeat;
background-position: right 5px center;
background-size: 20px auto;
}
.rtl .mw-parser-output table.jquery-tablesorter th.headerSort,
.rtl.client-js .mw-parser-output table.sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable) {
background-position: left 5px center;
}
/* Show the Wikipedia-style padlock only once when MediaWiki also supplies a default icon. */
.mw-indicators:has(#mw-indicator-pp-default) [id^="mw-indicator-protection-"] { display: none; }
/* Message boxes: Wikipedia family geometry with a local light/dark palette.
* Upstream family rules remain in Module:Message box/*.css (page history retains attribution).
* Article notices use a coloured left rail; talk/file/other boxes use full borders;
* category notices use coloured fills. Do not impose one width or border on every family.
*/
.mw-parser-output {
--ed-mbox-ink: #202122;
--ed-mbox-edge: #a2a9b1;
--ed-mbox-neutral: #fbfbfb;
--ed-mbox-interactive: #f8f9fa;
--ed-mbox-talk: #f8eaba;
--ed-mbox-talkedge: #c0c090;
--ed-mbox-blue: #36c;
--ed-mbox-red: #b32424;
--ed-mbox-orange: #f28500;
--ed-mbox-yellow: #fc3;
--ed-mbox-purple: #9932cc;
--ed-mbox-protection: #a2a9b1;
--ed-mbox-license: #8888aa;
--ed-mbox-featured: #cba135;
--ed-mbox-speedy: #fee7e6;
--ed-mbox-catnotice: #dfe8ff;
--ed-mbox-catred: #ffdbdb;
--ed-mbox-catorange: #ffe7ce;
--ed-mbox-catyellow: #fff9db;
--ed-mbox-catpurple: #e4d8ff;
--ed-mbox-catprotection: #efefe1;
--ed-mbox-warningedge: #bb7070;
--ed-mbox-link: #2855aa;
--ed-mbox-visited: #65449b;
--ed-mbox-newlink: #a51d2d;
}
@media screen {
html.skin-theme-clientpref-night .mw-parser-output {
--ed-mbox-ink: #eaecf0;
--ed-mbox-edge: #72777d;
--ed-mbox-neutral: #20272e;
--ed-mbox-interactive: #272e35;
--ed-mbox-talk: #2e2505;
--ed-mbox-talkedge: #b9b18b;
--ed-mbox-blue: #76a7ff;
--ed-mbox-red: #f28585;
--ed-mbox-orange: #f6a44b;
--ed-mbox-yellow: #f1ce63;
--ed-mbox-purple: #c59aef;
--ed-mbox-protection: #b9b99a;
--ed-mbox-license: #a5acd2;
--ed-mbox-featured: #e7c675;
--ed-mbox-speedy: #310402;
--ed-mbox-catnotice: #0d1a27;
--ed-mbox-catred: #330000;
--ed-mbox-catorange: #331a00;
--ed-mbox-catyellow: #332b00;
--ed-mbox-catpurple: #180d2a;
--ed-mbox-catprotection: #212112;
--ed-mbox-warningedge: #f28585;
--ed-mbox-link: #88a3e8;
--ed-mbox-visited: #b7a0e6;
--ed-mbox-newlink: #ff8585;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .mw-parser-output {
--ed-mbox-ink: #eaecf0;
--ed-mbox-edge: #72777d;
--ed-mbox-neutral: #20272e;
--ed-mbox-interactive: #272e35;
--ed-mbox-talk: #2e2505;
--ed-mbox-talkedge: #b9b18b;
--ed-mbox-blue: #76a7ff;
--ed-mbox-red: #f28585;
--ed-mbox-orange: #f6a44b;
--ed-mbox-yellow: #f1ce63;
--ed-mbox-purple: #c59aef;
--ed-mbox-protection: #b9b99a;
--ed-mbox-license: #a5acd2;
--ed-mbox-featured: #e7c675;
--ed-mbox-speedy: #310402;
--ed-mbox-catnotice: #0d1a27;
--ed-mbox-catred: #330000;
--ed-mbox-catorange: #331a00;
--ed-mbox-catyellow: #332b00;
--ed-mbox-catpurple: #180d2a;
--ed-mbox-catprotection: #212112;
--ed-mbox-warningedge: #f28585;
--ed-mbox-link: #88a3e8;
--ed-mbox-visited: #b7a0e6;
--ed-mbox-newlink: #ff8585;
}
}
html body .mw-parser-output .ambox:not(.notheme),
html body .mw-parser-output .tmbox:not(.notheme),
html body .mw-parser-output .ombox:not(.notheme),
html body .mw-parser-output .imbox:not(.notheme),
html body .mw-parser-output .cmbox:not(.notheme),
html body .mw-parser-output .fmbox:not(.notheme) { color: var(--ed-mbox-ink); max-width: 100%; }
html body .mw-parser-output .ambox:not(.notheme),
html body .mw-parser-output .mbox:not(.notheme) { background: var(--ed-mbox-neutral) !important; border-color: var(--ed-mbox-edge) !important; border-left-color: var(--ed-mbox-blue) !important; }
html body .mw-parser-output .tmbox:not(.notheme) { background: var(--ed-mbox-talk) !important; border-color: var(--ed-mbox-talkedge) !important; }
html body .mw-parser-output .ombox:not(.notheme) { background: var(--ed-mbox-interactive) !important; border-color: var(--ed-mbox-edge) !important; }
html body .mw-parser-output .imbox:not(.notheme) { background: var(--ed-mbox-interactive) !important; border-color: var(--ed-mbox-blue) !important; }
html body .mw-parser-output .cmbox:not(.notheme) { background: var(--ed-mbox-catnotice) !important; border-color: var(--ed-mbox-edge) !important; }
html body .mw-parser-output .fmbox:not(.notheme) { border-color: var(--ed-mbox-edge) !important; }
html body .mw-parser-output .fmbox:not(.fmbox-editnotice):not(.notheme) { background: var(--ed-mbox-interactive) !important; }
html body .mw-parser-output .fmbox.fmbox-warning:not(.notheme) { background: var(--ed-mbox-catred) !important; border-color: var(--ed-mbox-warningedge) !important; }
html body .mw-parser-output .ambox-speedy:not(.notheme) { border-left-color: var(--ed-mbox-red) !important; background: var(--ed-mbox-speedy) !important; }
html body .mw-parser-output .imbox-speedy:not(.notheme),
html body .mw-parser-output .ombox-speedy:not(.notheme) { border-color: var(--ed-mbox-red) !important; background: var(--ed-mbox-speedy) !important; }
html body .mw-parser-output .tmbox-speedy:not(.notheme) { border-color: var(--ed-mbox-red) !important; background: var(--ed-mbox-speedy) !important; }
html body .mw-parser-output .cmbox-speedy:not(.notheme) { background: var(--ed-mbox-catred) !important; border-color: var(--ed-mbox-red) !important; }
html body .mw-parser-output .ambox-delete:not(.notheme) { border-left-color: var(--ed-mbox-red) !important; }
html body .mw-parser-output .imbox-delete:not(.notheme),
html body .mw-parser-output .ombox-delete:not(.notheme) { border-color: var(--ed-mbox-red) !important; }
html body .mw-parser-output .tmbox-delete:not(.notheme) { border-color: var(--ed-mbox-red) !important; }
html body .mw-parser-output .cmbox-delete:not(.notheme) { background: var(--ed-mbox-catred) !important; }
html body .mw-parser-output .ambox-content:not(.notheme) { border-left-color: var(--ed-mbox-orange) !important; }
html body .mw-parser-output .imbox-content:not(.notheme),
html body .mw-parser-output .ombox-content:not(.notheme) { border-color: var(--ed-mbox-orange) !important; }
html body .mw-parser-output .tmbox-content:not(.notheme) { border-color: var(--ed-mbox-orange) !important; }
html body .mw-parser-output .cmbox-content:not(.notheme) { background: var(--ed-mbox-catorange) !important; }
html body .mw-parser-output .ambox-style:not(.notheme) { border-left-color: var(--ed-mbox-yellow) !important; }
html body .mw-parser-output .imbox-style:not(.notheme),
html body .mw-parser-output .ombox-style:not(.notheme) { border-color: var(--ed-mbox-yellow) !important; }
html body .mw-parser-output .tmbox-style:not(.notheme) { border-color: var(--ed-mbox-yellow) !important; }
html body .mw-parser-output .cmbox-style:not(.notheme) { background: var(--ed-mbox-catyellow) !important; }
html body .mw-parser-output .ambox-move:not(.notheme) { border-left-color: var(--ed-mbox-purple) !important; }
html body .mw-parser-output .imbox-move:not(.notheme),
html body .mw-parser-output .ombox-move:not(.notheme) { border-color: var(--ed-mbox-purple) !important; }
html body .mw-parser-output .tmbox-move:not(.notheme) { border-color: var(--ed-mbox-purple) !important; }
html body .mw-parser-output .cmbox-move:not(.notheme) { background: var(--ed-mbox-catpurple) !important; }
html body .mw-parser-output .ambox-protection:not(.notheme) { border-left-color: var(--ed-mbox-protection) !important; }
html body .mw-parser-output .imbox-protection:not(.notheme),
html body .mw-parser-output .ombox-protection:not(.notheme) { border-color: var(--ed-mbox-protection) !important; }
html body .mw-parser-output .cmbox-protection:not(.notheme) { background: var(--ed-mbox-catprotection) !important; }
html body .mw-parser-output .imbox-license:not(.notheme) { border-color: var(--ed-mbox-license) !important; }
html body .mw-parser-output .imbox-featured:not(.notheme) { border-color: var(--ed-mbox-featured) !important; }
/* Slightly deeper light-mode links stay readable on the reference pastel fills. */
html body .mw-parser-output :is(.ambox,.mbox,.tmbox,.ombox,.imbox,.cmbox,.fmbox):not(.notheme) a[href]:not(.new) { color: var(--ed-mbox-link); }
html body .mw-parser-output :is(.ambox,.mbox,.tmbox,.ombox,.imbox,.cmbox,.fmbox):not(.notheme) a[href]:visited:not(.new) { color: var(--ed-mbox-visited); }
html body .mw-parser-output :is(.ambox,.mbox,.tmbox,.ombox,.imbox,.cmbox,.fmbox):not(.notheme) a.new { color: var(--ed-mbox-newlink); }
/* Compatibility for old generic mbox markup, without affecting family geometry. */
.mw-parser-output .mbox:not(.notheme) { box-sizing: border-box; border: 1px solid var(--ed-mbox-edge); border-left: 10px solid var(--ed-mbox-blue); padding: .35em .5em; margin: .4em 0; }
html body .mw-parser-output .mbox.mbox-delete:not(.notheme),
html body .mw-parser-output .mbox.mbox-speedy:not(.notheme) { border-left-color: var(--ed-mbox-red) !important; }
html body .mw-parser-output .mbox.mbox-speedy:not(.notheme) { background: var(--ed-mbox-speedy) !important; }
.mw-parser-output :is(.ambox,.tmbox,.ombox,.imbox,.cmbox,.fmbox) :is(.mbox-text,.mbox-text-span) { overflow-wrap: anywhere; }
@media (max-width: 719px) {
html body.mediawiki .mw-parser-output :is(.ambox.mbox-small-left,.tmbox.mbox-small,.ombox.mbox-small) { float: none; clear: both; width: auto; max-width: 100%; margin: 4px 0; }
}
/* Preserve readable legacy dark table headings independently of message boxes. */
@media screen {
html.skin-theme-clientpref-night .mw-parser-output tr[style*="#333333"] > :is(th,td),
html.skin-theme-clientpref-night .mw-parser-output tr[style*="#333;"] > :is(th,td) { color: #eaecf0; }
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .mw-parser-output tr[style*="#333333"] > :is(th,td),
html.skin-theme-clientpref-os .mw-parser-output tr[style*="#333;"] > :is(th,td) { color: #eaecf0; }
}
| |||