MediaWiki:Vector-2022.css: Difference between revisions

/* Elite Dangerous theme foundation for Vector 2022. */
body.skin-vector-2022 {
  --elite-frame: #ece8df;
  --elite-header: #faf8f3;
  --elite-panel: #fffefa;
  --elite-line: #d3cabc;
  --elite-hud: #a84b0b;
  --elite-hud-soft: rgba(168, 75, 11, .09);
  background-color: var(--elite-frame);
}
html.skin-theme-clientpref-night body.skin-vector-2022 {
  --elite-frame: #090d11;
  --elite-header: #101820;
  --elite-panel: #11171c;
  --elite-line: #34424a;
  --elite-hud: #ffad4b;
  --elite-hud-soft: rgba(255, 173, 75, .10);
}
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os body.skin-vector-2022 {
    --elite-frame: #090d11;
    --elite-header: #101820;
    --elite-panel: #11171c;
    --elite-line: #34424a;
    --elite-hud: #ffad4b;
    --elite-hud-soft: rgba(255, 173, 75, .10);
  }
}
body.skin-vector-2022 .mw-page-container { background-color: var(--elite-panel); }
body.skin-vector-2022 .mw-header {
  background-color: var(--elite-header);
  border-bottom: 1px solid var(--elite-line);
  box-shadow: inset 0 -2px 0 var(--elite-hud-soft);
}
body.skin-vector-2022 .vector-sticky-header {
  border-bottom: 2px solid var(--elite-hud);
}
body.skin-vector-2022 .vector-column-start .vector-toc,
body.skin-vector-2022 .vector-column-end .vector-pinnable-element {
  border-top: 2px solid var(--elite-hud);
  padding-top: .55rem;
}
body.skin-vector-2022 .vector-toc-link:focus-visible,
body.skin-vector-2022 .mw-parser-output a:focus-visible {
  outline: 2px solid var(--elite-hud);
  outline-offset: 2px;
}
body.skin-vector-2022 .mw-parser-output .elite-hero {
  background-image: linear-gradient(125deg, var(--elite-hud-soft), transparent 60%);
  border-top-color: var(--elite-hud);
}
body.skin-vector-2022 .mw-parser-output .elite-home :is(.elite-card, .elite-panel) {
  border-color: var(--elite-line);
}
body.skin-vector-2022 #footer { border-top: 1px solid var(--elite-line); }
/* Match Vector's scrolling fade to the themed page surface. */
body.skin-vector-2022 .vector-sticky-pinned-container::after {
  background-image: linear-gradient(to bottom, transparent, var(--elite-panel));
}