MediaWiki:Common.css: Difference between revisions

Content deleted Content added
m Restore semantic message-box colours and borders in dark mode; preserve light appearance and layout
Restore Wikipedia message-box family styling and adapt accessible light/dark colours for Elite Dangerous Wiki
 
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(.ambox, .mbox, .tmbox, .imbox, .cmbox, .ombox) {
box-sizing: border-box; margin: 1em auto; border: 1px solid var(--elite-border);
border-left: 5px solid #a35a00; padding: .35em; background: var(--elite-subtle); color: var(--elite-ink);
width: 80%; max-width: 100%; line-height: 1.5;
}
.mw-parser-output .ambox td { color: var(--elite-ink) !important; }
.mw-parser-output :is(.ambox-image, .mbox-image) { width: 52px; text-align: center; vertical-align: middle; }
.mw-parser-output .ambox-small { float: right; clear: right; width: 25em; margin: .5em 0 .8em 1em; font-size: 90%; }
.mw-parser-output :is(.ambox-red, .mbox-delete) { border-left-color: #d33; }
.mw-parser-output :is(.ambox-yellow, .ambox-orange, .mbox-content) { border-left-color: #ea9700; }
.mw-parser-output :is(.ambox-blue, .mbox-notice, .notice) { border-left-color: #36c; }
.mw-parser-output .ambox-green { border-left-color: #14866d; }
.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; }
.mw-parser-output :is(.ambox,.mbox,.tmbox,.imbox,.cmbox,.ombox) { width: 100%; }
}
@media (max-width: 420px) { .elite-home .elite-grid { grid-template-columns: 1fr; } }
Line 197 ⟶ 184:
/* 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-box dark palette: retain semantic colours and original border widths.
/* Message boxes: Wikipedia family geometry with a local light/dark palette.
* Override Vector metadata resets using a complete background declaration.
* Upstream family rules remain in Module:Message box/*.css (page history retains attribution).
* Explicit day mode and automatic mode on a light OS remain unchanged. */
* 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 body .mw-parser-output :is(.ambox,.mbox,.cmbox,.imbox,.tmbox,.fmbox,.ombox,.dmbox):not(.notheme) {
--ed-mbox-ink: #eaecf0;
--elite-box-bg: #242a30; --elite-box-edge: #8a949f;
--ed-mbox-edge: #72777d;
background: var(--elite-box-bg) !important; color: #eaecf0 !important;
--ed-mbox-neutral: #20272e;
border-color: var(--elite-box-edge) !important;
--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.skin-theme-clientpref-night body .mw-parser-output .tmbox:not(.notheme) { --elite-box-bg: #39311d; --elite-box-edge: #b9b18b; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox,.cmbox,.imbox):not(.notheme) { --elite-box-bg: #182f49; --elite-box-edge: #76a7ff; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-notice,.ambox-blue,.mbox-notice,.mbox-blue,.cmbox-notice,.cmbox-blue,.imbox-notice,.imbox-blue,.tmbox-blue,.fmbox-blue,.ombox-blue,.dmbox-blue):not(.notheme) { --elite-box-bg: #182f49; --elite-box-edge: #76a7ff; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-content,.ambox-orange,.mbox-content,.mbox-orange,.cmbox-content,.cmbox-orange,.imbox-content,.imbox-orange,.tmbox-content,.tmbox-orange,.fmbox-content,.fmbox-orange,.ombox-content,.ombox-orange,.dmbox-content,.dmbox-orange):not(.notheme) { --elite-box-bg: #402a18; --elite-box-edge: #f6a44b; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-style,.ambox-yellow,.mbox-style,.mbox-yellow,.cmbox-style,.cmbox-yellow,.imbox-style,.imbox-yellow,.tmbox-style,.tmbox-yellow,.fmbox-style,.fmbox-yellow,.ombox-style,.ombox-yellow,.dmbox-style,.dmbox-yellow):not(.notheme) { --elite-box-bg: #3b3319; --elite-box-edge: #f1ce63; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-move,.ambox-purple,.mbox-move,.mbox-purple,.cmbox-move,.cmbox-purple,.imbox-move,.imbox-purple,.tmbox-move,.tmbox-purple,.fmbox-move,.fmbox-purple,.ombox-move,.ombox-purple,.dmbox-move,.dmbox-purple):not(.notheme) { --elite-box-bg: #302341; --elite-box-edge: #c59aef; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-protection,.mbox-protection,.cmbox-protection,.imbox-protection,.tmbox-protection,.fmbox-protection,.ombox-protection,.dmbox-protection):not(.notheme) { --elite-box-bg: #303024; --elite-box-edge: #b9b99a; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-green,.mbox-green,.cmbox-green,.imbox-green,.tmbox-green,.fmbox-green,.ombox-green,.dmbox-green):not(.notheme) { --elite-box-bg: #19372d; --elite-box-edge: #62c49c; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-license,.mbox-license,.cmbox-license,.imbox-license,.tmbox-license,.fmbox-license,.ombox-license,.dmbox-license):not(.notheme) { --elite-box-bg: #282b3b; --elite-box-edge: #a5acd2; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-featured,.mbox-featured,.cmbox-featured,.imbox-featured,.tmbox-featured,.fmbox-featured,.ombox-featured,.dmbox-featured):not(.notheme) { --elite-box-bg: #3a301b; --elite-box-edge: #e7c675; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-delete,.ambox-red,.ambox-warning,.mbox-delete,.mbox-red,.mbox-warning,.cmbox-delete,.cmbox-red,.cmbox-warning,.imbox-delete,.imbox-red,.imbox-warning,.tmbox-delete,.tmbox-red,.tmbox-warning,.fmbox-delete,.fmbox-red,.fmbox-warning,.ombox-delete,.ombox-red,.ombox-warning,.dmbox-delete,.dmbox-red,.dmbox-warning):not(.notheme) { --elite-box-bg: #432125; --elite-box-edge: #f28585; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox-speedy,.mbox-speedy,.cmbox-speedy,.imbox-speedy,.tmbox-speedy,.fmbox-speedy,.ombox-speedy,.dmbox-speedy):not(.notheme) { --elite-box-bg: #4b1c24; --elite-box-edge: #ff9696; }
html.skin-theme-clientpref-night body .mw-parser-output .ambox:not(.notheme) { border-color: #6e7a87 !important; border-left-color: var(--elite-box-edge) !important; }
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox,.mbox,.tmbox,.ombox,.dmbox):not(.notheme) > :is(thead,tbody,tfoot) > tr > :is(td,th):not(.notheme),
html.skin-theme-clientpref-night body .mw-parser-output :is(.ambox,.mbox,.tmbox,.ombox,.dmbox):not(.notheme) > tr > :is(td,th):not(.notheme) { background: transparent !important; color: inherit !important; }
html.skin-theme-clientpref-night body .mw-parser-output tr[style*="#333333"] > :is(th,td),
html.skin-theme-clientpref-night body .mw-parser-output tr[style*="#333;"] > :is(th,td) { color: #eaecf0; }
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox,.mbox,.cmbox,.imbox,.tmbox,.fmbox,.ombox,.dmbox):not(.notheme) {
--ed-mbox-ink: #eaecf0;
--elite-box-bg: #242a30; --elite-box-edge: #8a949f;
--ed-mbox-edge: #72777d;
background: var(--elite-box-bg) !important; color: #eaecf0 !important;
--ed-mbox-neutral: #20272e;
border-color: var(--elite-box-edge) !important;
--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.skin-theme-clientpref-os body .mw-parser-output .tmbox:not(.notheme) { --elite-box-bg: #39311d; --elite-box-edge: #b9b18b; }
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox,.cmbox,.imbox):not(.notheme) { --elite-box-bg: #182f49; --elite-box-edge: #76a7ff; },
html body .mw-parser-output .tmbox:not(.notheme),
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-notice,.ambox-blue,.mbox-notice,.mbox-blue,.cmbox-notice,.cmbox-blue,.imbox-notice,.imbox-blue,.tmbox-blue,.fmbox-blue,.ombox-blue,.dmbox-blue):not(.notheme) { --elite-box-bg: #182f49; --elite-box-edge: #76a7ff; }
html body .mw-parser-output .ombox:not(.notheme),
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-content,.ambox-orange,.mbox-content,.mbox-orange,.cmbox-content,.cmbox-orange,.imbox-content,.imbox-orange,.tmbox-content,.tmbox-orange,.fmbox-content,.fmbox-orange,.ombox-content,.ombox-orange,.dmbox-content,.dmbox-orange):not(.notheme) { --elite-box-bg: #402a18; --elite-box-edge: #f6a44b; }
html body .mw-parser-output .imbox:not(.notheme),
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-style,.ambox-yellow,.mbox-style,.mbox-yellow,.cmbox-style,.cmbox-yellow,.imbox-style,.imbox-yellow,.tmbox-style,.tmbox-yellow,.fmbox-style,.fmbox-yellow,.ombox-style,.ombox-yellow,.dmbox-style,.dmbox-yellow):not(.notheme) { --elite-box-bg: #3b3319; --elite-box-edge: #f1ce63; }
html body .mw-parser-output .cmbox:not(.notheme),
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-move,.ambox-purple,.mbox-move,.mbox-purple,.cmbox-move,.cmbox-purple,.imbox-move,.imbox-purple,.tmbox-move,.tmbox-purple,.fmbox-move,.fmbox-purple,.ombox-move,.ombox-purple,.dmbox-move,.dmbox-purple):not(.notheme) { --elite-box-bg: #302341; --elite-box-edge: #c59aef; }
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-protection,.mbox-protection,.cmbox-protection,.imbox-protection,.tmbox-protection,.fmbox-protection,.ombox-protection,.dmbox-protection):not(.notheme) { color: var(--eliteed-boxmbox-bg: #303024ink); max--elite-box-edgewidth: #b9b99a100%; }
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-green,.mbox-green,.cmbox-green,.imbox-green,.tmbox-green,.fmbox-green,.ombox-green,.dmbox-green):not(.notheme) { --elite-box-bg: #19372d; --elite-box-edge: #62c49c; },
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-license,.mbox-license,.cmbox-license,.imbox-license,.tmbox-license,.fmbox-license,.ombox-license,.dmbox-license):not(.notheme) { background: var(--eliteed-boxmbox-bg:neutral) #282b3b!important; border-color: var(-elite-boxed-mbox-edge) !important; border-left-color: #a5acd2var(--ed-mbox-blue) !important; }
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-featured,.mbox-featured,.cmbox-featured,.imbox-featured,.tmbox-featured,.fmbox-featured,.ombox-featured,.dmbox-featured):not(.notheme) { background: var(--eliteed-boxmbox-bg:talk) #3a301b!important; border-color: var(-elite-boxed-edge:mbox-talkedge) #e7c675!important; }
html body .mw-parser-output .ombox:not(.notheme) { background: var(--ed-mbox-interactive) !important; border-color: var(--ed-mbox-edge) !important; }
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-delete,.ambox-red,.ambox-warning,.mbox-delete,.mbox-red,.mbox-warning,.cmbox-delete,.cmbox-red,.cmbox-warning,.imbox-delete,.imbox-red,.imbox-warning,.tmbox-delete,.tmbox-red,.tmbox-warning,.fmbox-delete,.fmbox-red,.fmbox-warning,.ombox-delete,.ombox-red,.ombox-warning,.dmbox-delete,.dmbox-red,.dmbox-warning):not(.notheme) { --elite-box-bg: #432125; --elite-box-edge: #f28585; }
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox-speedy,.mbox-speedy,.cmbox-speedy,.imbox-speedy,.tmbox-speedy,.fmbox-speedy,.ombox-speedy,.dmbox-speedy):not(.notheme) { background: var(--eliteed-boxmbox-bg:interactive) #4b1c24!important; border-color: var(-elite-boxed-edge:mbox-blue) #ff9696!important; }
html.skin-theme-clientpref-os body .mw-parser-output .amboxcmbox:not(.notheme) { border-colorbackground: #6e7a87var(--ed-mbox-catnotice) !important; border-left-color: var(--eliteed-boxmbox-edge) !important; }
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox,.mbox,.tmbox,.ombox,.dmbox)fmbox:not(.notheme) >{ border-color:is var(thead,tbody,tfoot--ed-mbox-edge) >!important; tr > :is(td,th):not(.notheme),}
html.skin-theme-clientpref-os body .mw-parser-output :is(.ambox,.mbox,.tmbox,.ombox,.dmbox)fmbox:not(.notheme) > tr > :is(td,thfmbox-editnotice):not(.notheme) { background: transparentvar(--ed-mbox-interactive) !important; color: inherit !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.skin-theme-clientpref-os body .mw-parser-output tr[style*="#333333"] > :is(th,td),
html.skin-theme-clientpref-os body .mw-parser-output tr[style*="#333;"] > .ambox-speedy:isnot(th,td.notheme) { border-left-color: #eaecf0var(--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; }
}