MediaWiki:Common.css: Difference between revisions

Latest revision as of 01:29, 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: 1rem;
  min-height: 6.5em;
}

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

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

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

.vector-header-end .vector-user-links {
  flex: 0 1 auto;
  min-width: max-content;
}

.mw-logo .mw-logo-icon {
  display: none !important;
  width: 4.75rem !important;
  height: auto !important;
  max-width: 4.75rem;
  max-height: 4.75rem;
  object-fit: contain;
}

.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: 1500px) {
  .mw-logo {
    min-width: 16em;
  }

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

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

  .mw-logo .mw-logo-wordmark {
    width: 16em !important;
    max-width: 16em;
    height: 5.333em !important;
  }
}

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

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

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

  .mw-logo .mw-logo-wordmark {
    width: 13.5em !important;
    max-width: 13.5em;
    height: 4.5em !important;
  }
}

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

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

  .mw-logo .mw-logo-wordmark {
    width: 10.5em !important;
    max-width: 10.5em;
    height: 3.5em !important;
  }
}

@media (max-width: 700px) {
  .mw-logo {
    min-width: 4.75rem;
  }

  .vector-header {
    min-height: 5.25rem;
  }

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

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