MediaWiki:Vector-2022.css: Difference between revisions

/* Elite Dangerous Wiki cockpit theme. Local assets; Vector layout and semantic boxes retained. */
@font-face{font-family:Elite Rajdhani;src:url('/w/images/wiki-theme/rajdhani-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Elite Rajdhani;src:url('/w/images/wiki-theme/rajdhani-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
body.skin-vector-2022{--elite-frame:#eae7e1;--elite-panel:#fffdf9;--elite-glass:rgba(250,248,243,.95);--elite-line:#c8c3ba;--elite-hud:#a54400;--elite-hud-soft:rgba(165,68,0,.10);--elite-text:#24272b;--elite-shade:rgba(237,234,227,.94);--font-family-base:'Segoe UI',Roboto,Arial,sans-serif;--font-family-heading:'Elite Rajdhani','Segoe UI',Arial,sans-serif;font-family:var(--font-family-base);color:var(--elite-text);background:linear-gradient(var(--elite-shade),var(--elite-shade)),url('/w/images/wiki-theme/galaxy-1920.webp') center top/cover fixed,var(--elite-frame)}
html.skin-theme-clientpref-night body.skin-vector-2022{--elite-frame:#080c12;--elite-panel:#111820;--elite-glass:rgba(17,24,32,.94);--elite-line:#35424e;--elite-hud:#ff9d42;--elite-hud-soft:rgba(255,157,66,.12);--elite-text:#edf0f2;--elite-shade:rgba(5,9,15,.73)}
@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os body.skin-vector-2022{--elite-frame:#080c12;--elite-panel:#111820;--elite-glass:rgba(17,24,32,.94);--elite-line:#35424e;--elite-hud:#ff9d42;--elite-hud-soft:rgba(255,157,66,.12);--elite-text:#edf0f2;--elite-shade:rgba(5,9,15,.73)}}
body.skin-vector-2022 :is(.mw-page-container,.mw-body){background:transparent}
body.skin-vector-2022 :is(.vector-body,.mw-body-content){font-family:var(--font-family-base)}
body.skin-vector-2022 :is(h1,h2,h3,h4,h5,h6,.firstHeading,.vector-pinnable-header-label,.vector-menu-heading){font-family:var(--font-family-heading);font-weight:600;letter-spacing:.015em}
body.skin-vector-2022 .firstHeading{font-weight:700;font-size:2.3em;line-height:1.15}
body.skin-vector-2022 .mw-header{background:var(--elite-glass);border-bottom:1px solid var(--elite-line);box-shadow:inset 0 -2px var(--elite-hud-soft),0 8px 28px #0002}
body.skin-vector-2022 .vector-header-container{background:transparent}
body.skin-vector-2022 .vector-sticky-header{background:var(--elite-panel);border-bottom:2px solid var(--elite-hud)}
body.skin-vector-2022 .mw-body-header{background:var(--elite-panel);border:1px solid var(--elite-line);border-top:3px solid var(--elite-hud);padding:1rem 1.25rem .75rem;border-radius:6px 6px 0 0}
body.skin-vector-2022 .vector-page-toolbar{background:var(--elite-panel);padding:0 1.25rem;border-inline:1px solid var(--elite-line);margin-bottom:0}
body.skin-vector-2022 #bodyContent{background:var(--elite-panel);padding:1.25rem;border:1px solid var(--elite-line);border-top:0;border-radius:0 0 6px 6px;box-shadow:0 16px 40px #0002}
body.skin-vector-2022 :is(.vector-column-start .vector-toc,.vector-column-end .vector-pinnable-element){background:var(--elite-glass);border:1px solid var(--elite-line);border-top:2px solid var(--elite-hud);padding:.7rem;border-radius:4px}
body.skin-vector-2022 :is(.vector-column-start,.vector-column-end) .vector-pinned-container{background:transparent;padding-inline:0}
body.skin-vector-2022 .vector-column-start .vector-toc{box-sizing:border-box;padding:.75rem 1.5rem 1rem}
body.skin-vector-2022 .vector-dropdown-content{background:var(--elite-glass);border-color:var(--elite-line);box-shadow:0 12px 36px #0004}
@supports(backdrop-filter:blur(8px)){body.skin-vector-2022 :is(.mw-header,.vector-dropdown-content,.vector-column-start .vector-toc,.vector-column-end .vector-pinnable-element){backdrop-filter:blur(8px)}}
body.skin-vector-2022 :is(.vector-toc-link,.mw-parser-output a):focus-visible{outline:2px solid var(--elite-hud);outline-offset:3px}
body.skin-vector-2022 .mw-parser-output>.mw-heading2{border-bottom-color:var(--elite-line);border-left:3px solid var(--elite-hud);padding-left:.6rem}
body.skin-vector-2022 .mw-parser-output .infobox{border-color:var(--elite-line);border-top:3px solid var(--elite-hud);box-shadow:0 6px 20px #0002}
body.skin-vector-2022 .mw-parser-output .infobox :is(th,.infobox-title){font-family:var(--font-family-heading)}
body.skin-vector-2022 .mw-parser-output .elite-hero{background:linear-gradient(100deg,rgba(6,12,20,.96),rgba(6,12,20,.68)),url('/w/images/wiki-theme/galaxy-1920.webp') center/cover;border:1px solid #46505a;border-top:3px solid #ff9d42;border-radius:4px;padding:clamp(1.5rem,4vw,3rem);color:#f2f4f6;box-shadow:0 16px 36px #0003}
body.skin-vector-2022 .mw-parser-output .elite-hero h2{font-family:var(--font-family-heading);font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.08;font-weight:700;color:#fff;border:0;margin:.3em 0}
body.skin-vector-2022 .mw-parser-output .elite-hero :is(.elite-lead,.elite-eyebrow){color:#e0e5eb}
body.skin-vector-2022 .mw-parser-output .elite-hero .elite-eyebrow{color:#ffb16b;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}
body.skin-vector-2022 .mw-parser-output .elite-actions a{background:#ff9d42;color:#17120e;border:1px solid #ffb66f;border-radius:3px;font-weight:600;box-shadow:0 4px 14px #0003}
body.skin-vector-2022 .mw-parser-output .elite-actions a:hover{background:#ffb66f;color:#17120e}
body.skin-vector-2022 .mw-parser-output .elite-home :is(.elite-card,.elite-panel){border-color:var(--elite-line);border-top:2px solid var(--elite-hud);border-radius:4px;background:var(--elite-panel);box-shadow:0 5px 18px #0001}
body.skin-vector-2022 .mw-parser-output .elite-card h3{font-size:1.5rem}
body.skin-vector-2022 .mw-parser-output .elite-card:hover{border-color:var(--elite-hud)}
body.skin-vector-2022 #footer{display:flex;flex-direction:column;gap:.85rem;box-sizing:border-box;border:1px solid var(--elite-line);background:var(--elite-glass);padding:1rem;border-radius:4px;margin-top:1.5rem}
body.skin-vector-2022 #footer :is(#footer-info,#footer-places,#footer-icons){float:none;margin:0;padding:0;list-style:none}
body.skin-vector-2022 #footer li{float:none;margin:0;padding:0;overflow-wrap:anywhere}
body.skin-vector-2022 #footer-info li+li{margin-top:.6rem}
body.skin-vector-2022 #footer-places{display:flex;flex-wrap:wrap;gap:.65rem 1rem}
body.skin-vector-2022 #footer-places-frontier-attribution{flex-basis:100%;line-height:1.6}
body.skin-vector-2022 #footer-icons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}
body.skin-vector-2022 .vector-sticky-pinned-container::after{content:none}
@media(max-width:999px){body.skin-vector-2022{background-attachment:scroll}body.skin-vector-2022 :is(.mw-body-header,.vector-page-toolbar,#bodyContent){padding-inline:1rem}body.skin-vector-2022 :is(.mw-header,.vector-dropdown-content,.vector-column-start .vector-toc,.vector-column-end .vector-pinnable-element){backdrop-filter:none}}
@media(max-width:500px){body.skin-vector-2022 .firstHeading{font-size:1.9em}body.skin-vector-2022 :is(.mw-body-header,.vector-page-toolbar,#bodyContent){padding-inline:.75rem}body.skin-vector-2022 .mw-parser-output .elite-hero{padding:1.25rem}body.skin-vector-2022 .mw-parser-output .elite-actions{display:flex;flex-wrap:wrap;gap:.5rem}body.skin-vector-2022 .mw-parser-output .elite-actions a{margin:0}}
@media(prefers-reduced-motion:reduce){body.skin-vector-2022 .elite-home *{transition:none;animation:none}}
@media screen{html body.skin-vector-2022 .mw-parser-output .elite-home .elite-hero :not(a){background:transparent!important}}
/* Vector has a blanket Main Page dark-mode reset. Override only our home components. */
@media screen{html body.skin-vector-2022 .mw-parser-output .elite-home .elite-hero{background:linear-gradient(100deg,rgba(6,12,20,.92),rgba(6,12,20,.48)),url('/w/images/wiki-theme/galaxy-1920.webp') center/cover!important;color:#f2f4f6!important;border-color:#46505a!important;border-top-color:#ff9d42!important}html body.skin-vector-2022 .mw-parser-output .elite-home .elite-hero::after{display:none}html body.skin-vector-2022 .mw-parser-output .elite-home .elite-hero :is(h2,.elite-lead){color:#f2f4f6!important}html body.skin-vector-2022 .mw-parser-output .elite-home .elite-eyebrow{color:#ffb16b!important}html body.skin-vector-2022 .mw-parser-output .elite-home .elite-actions a{background:#ff9d42!important;color:#17120e!important;border-color:#ffb66f!important}html body.skin-vector-2022 .mw-parser-output .elite-home :is(.elite-card,.elite-panel){background:var(--elite-panel)!important;border-color:var(--elite-line)!important;border-top-color:var(--elite-hud)!important}}
@media print{body.skin-vector-2022{background:#fff;color:#000}body.skin-vector-2022 :is(#bodyContent,.mw-body-header,.vector-page-toolbar,.elite-hero,#footer){background:#fff!important;color:#000!important;box-shadow:none;border-color:#999}body.skin-vector-2022 .mw-parser-output .elite-hero *{color:#000!important}}
@media print{body.skin-vector-2022 #footer-icons.noprint{display:none}}
@media(forced-colors:active){body.skin-vector-2022{background:Canvas;color:CanvasText}body.skin-vector-2022 :is(#bodyContent,.mw-body-header,.mw-header,.elite-hero,.vector-dropdown-content){background:Canvas!important;box-shadow:none;backdrop-filter:none}}
@media(forced-colors:active){html body.skin-vector-2022 .mw-parser-output .elite-home .elite-hero,html body.skin-vector-2022 .mw-parser-output .elite-home .elite-actions a{background:Canvas!important;color:CanvasText!important}html body.skin-vector-2022 .mw-parser-output .elite-home .elite-hero :is(h2,.elite-lead,.elite-eyebrow){color:CanvasText!important}}

@media(max-width:999px){body.skin-vector-2022 .vector-dropdown-content{background:var(--elite-panel)}}
body.skin-vector-2022 .vector-sticky-header :is(.mw-page-title-main,.mw-page-title-namespace,.mw-page-title-separator){font-family:var(--font-family-heading);font-weight:600;letter-spacing:.015em}