MediaWiki:Common.css: Difference between revisions

Revision as of 01:09, 18 June 2026

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/assets/fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/assets/fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleMono-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/assets/fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/assets/fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleMono-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-family-base: "Atkinson Hyperlegible Next", sans-serif;
  --font-family-serif: "Atkinson Hyperlegible Next", sans-serif;
  --font-family-sans: "Atkinson Hyperlegible Next", sans-serif;
  --font-family-monospace: "Atkinson Hyperlegible Mono", monospace;
}

html,
body,
.mw-body,
.mw-body-content,
.mw-parser-output,
.vector-body,
.vector-page-titlebar,
.vector-header-container,
.vector-sticky-header,
.mw-footer,
.oo-ui-widget,
.cdx-label,
.cdx-button,
.cdx-text-input__input,
.cdx-select,
input,
textarea,
select,
button {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
}

code,
pre,
kbd,
samp,
tt,
.mw-code,
.mw-highlight,
.mw-editfont-monospace,
.mw-parser-output .monospaced,
.oo-ui-textInputWidget.oo-ui-widget-enabled textarea.mw-editfont-monospace {
  font-family: "Atkinson Hyperlegible Mono", monospace;
}

.mw-logo {
  display: flex !important;
  align-items: center;
  flex: 0 1 auto;
  min-width: 18em;
}

.vector-header {
  column-gap: 0.875rem;
  min-height: 6.5em;
}

.vector-header-start {
  flex: 0 1 auto;
}

.vector-header-end {
  flex: 1 1 auto;
  min-width: 0;
}

.vector-header-end .vector-search-box {
  flex: 1 1 18rem;
  min-width: 12rem;
}

.vector-header-end .vector-user-links {
  flex: 0 0 auto;
}

.mw-logo .mw-logo-icon {
  display: none !important;
}

.mw-logo .mw-logo-container {
  display: block !important;
  margin-left: 0 !important;
}

.mw-logo .mw-logo-wordmark {
  display: block !important;
  width: 18em !important;
  max-width: 18em;
  height: 6em !important;
  object-fit: contain;
}

@media (max-width: 1320px) {
  .mw-logo {
    min-width: 14em;
  }

  .vector-header {
    min-height: 5.125em;
  }

  .vector-header-end .vector-search-box {
    flex-basis: 14rem;
    min-width: 10rem;
  }

  .mw-logo .mw-logo-wordmark {
    width: 14em !important;
    max-width: 14em;
    height: 4.667em !important;
  }
}

@media (max-width: 1120px) {
  .mw-logo {
    min-width: 11em;
  }

  .vector-header {
    min-height: 4.125em;
  }

  .vector-header-end .vector-search-box {
    flex-basis: 11rem;
    min-width: 8rem;
  }

  .mw-logo .mw-logo-wordmark {
    width: 11em !important;
    max-width: 11em;
    height: 3.667em !important;
  }
}

@media (max-width: 860px) {
  .mw-logo {
    min-width: 0;
  }

  .vector-header {
    min-height: 3.5em;
  }

  .mw-logo .mw-logo-icon {
    display: block !important;
  }

  .mw-logo .mw-logo-container {
    display: none !important;
  }
}