MediaWiki:Vector-2022.css: Difference between revisions
Content deleted Content added
Apply reversible Elite Dangerous cockpit theme with locally hosted background and fonts; retain Vector layout and semantic message colours |
Use theme heading typography for the sticky page title |
||
| (7 intermediate revisions by the same user not shown) | |||
Line 16:
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-
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)}}
Line 31 ⟶ 33:
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-
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 .vector-sticky-pinned-container::after{background-image:linear-gradient(to bottom,transparent,var(--elite-frame))}
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}
| |||