MediaWiki:Common.css: Difference between revisions
Content deleted Content added
Keep sortable table headings clear of sort controls |
Restore Wikipedia message-box family styling and adapt accessible light/dark colours for Elite Dangerous Wiki |
||
| (4 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 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 {
Line 224 ⟶ 173:
.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:
background-repeat: no-repeat;
background-position: right 5px center;
background-size:
}
.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; }
}
| |||