MediaWiki:Common.css: Difference between revisions

Revision as of 02:31, 1 March 2026

/* CSS placed here will be applied to all skins */

/* ---------------------------
   Font (fixed weights + no synth)
---------------------------- */
@font-face {
  font-family: Minecraft;
  font-style: normal;
  font-weight: 400;
  src: url('/betawiki/images/0/01/MinecraftRegular-Bmg3.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: Minecraft;
  font-style: italic;
  font-weight: 400;
  src: url('/betawiki/images/9/92/MinecraftItalic-R8Mo.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: Minecraft;
  font-style: normal;
  font-weight: 700;
  src: url('/betawiki/images/a/a9/MinecraftBold-nMK1.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: Minecraft;
  font-style: italic;
  font-weight: 700;
  src: url('/betawiki/images/6/63/MinecraftBoldItalic-1y1e.woff') format('woff');
  font-display: swap;
}

/* ---------------------------
   Global base
---------------------------- */
html {
  font-size: 16px;
  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none; /* stop fake bold/italic */
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('/betawiki/images/b/bf/DirtBackground.png');
  background-size: 100% 100%, 150px 150px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
}

body {
  background: rgba(0, 0, 0, 0);
  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

/* Headings + common text */
h1, h2, h3, p,
.mw-body h1, .mw-body .mw-heading1,
.mw-body-content h1, .mw-body-content .mw-heading1,
.mw-body-content h2, .mw-body-content .mw-heading2,
html, body, .mw-editsection {
  color: rgb(255, 255, 255);
  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

/* Ensure bold actually uses your bold file */
b, strong, h1, h2, h3 {
  font-weight: 700;
}

/* ---------------------------
   Page container (vignette behind content)
---------------------------- */
.mw-page-container {
  position: relative;
  z-index: 0;
  background:
    linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),
    url('/betawiki/images/6/67/Cobblestone.png');
  background-size: 100% 100%, 150px 150px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
}

/* Put the vignette behind actual content */
.mw-page-container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0)) left top / 80px 100% no-repeat,
    linear-gradient(to left,  rgba(0,0,0,.55), rgba(0,0,0,0)) right top / 80px 100% no-repeat,
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)) left top / 100% 80px no-repeat,
    linear-gradient(to top,    rgba(0,0,0,.55), rgba(0,0,0,0)) left bottom / 100% 80px no-repeat;
}

.mw-page-container > * {
  position: relative;
  z-index: 1;
}

.mw-halign-right {
  background: rgba(0, 0, 0, 0);
}

/* ---------------------------
   Vector containers + media styling
---------------------------- */
.vector-pinned-container {
  background-color: #0000004a;
  border: 2.5px solid;
  padding: 16px 16px;
  margin-bottom: 2rem;
}

figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
  border: 2.5px solid #ffffff;
  background: #f8f9fa;
}

figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'] {
  border: 2.5px solid #ffffff;
  border-bottom: 0;
  background-color: #0000004f;
}

/* Was 88.4% (fractional px). Make it crisp. */
figure[typeof~='mw:File/Thumb'] > figcaption,
figure[typeof~='mw:File/Frame'] > figcaption {
  border: 2.5px solid #ffffff;
  border-top: 0;
  background-color: #00000052;
  font-size: 14px;
  line-height: 16px;
  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

.vector-pinnable-element .vector-menu-heading {
  color: #ffffff;
  font-weight: 400;
  cursor: default;
  padding: 6px 0;
  margin: 6px 0;
  border-bottom: 1px solid #eaecf0;
}

.vector-sticky-pinned-container::after {
  background: rgba(255, 255, 255, 0);
}

/* ---------------------------
   Links
---------------------------- */
a.new:visited { color: #ff9c02; }
a:visited     { color: #892dff; }
a.new         { color: #ff0000; }
a {
  text-decoration: none;
  color: #36c;
  background: none;
}

.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited {
  color: #ffffff;
  border-bottom: 2px solid;
}

.vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-active) > .vector-toc-link {
  color: #ffffff;
}

.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link,
.vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link {
  color: #ffffff;
  font-weight: 700;
}

/* ---------------------------
   Footer (avoid fractional sizes)
---------------------------- */
.mw-footer li {
  color: #ffffff;
  margin: 0;
  padding: 0.5em 0;
  font-size: 12px;
  line-height: 14px;
  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

/* ---------------------------
   Portable infobox (outside halo + crisp size)
---------------------------- */
.portable-infobox {
  position: relative;
  z-index: 0;

  background:
    linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
    url('/betawiki/images/9/90/SignBackground.png');
  background-size: 100% 100%, 150px 150px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;

  clear: right;
  float: right;

  /* Was .85em (fractional). */
  font-size: 14px;
  line-height: 16px;

  margin: 0 0 var(--pi-margin) var(--pi-margin);
  width: var(--pi-width);
  color: #000000;

  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

.portable-infobox::before {
  --shade: 14px;
  --dark: rgba(0,0,0,.55);

  content: "";
  position: absolute;
  inset: calc(-1 * var(--shade));
  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(to left,  var(--dark), rgba(0,0,0,0)) left top / var(--shade) 100% no-repeat,
    linear-gradient(to right, var(--dark), rgba(0,0,0,0)) right top / var(--shade) 100% no-repeat,
    linear-gradient(to top,   var(--dark), rgba(0,0,0,0)) left top / 100% var(--shade) no-repeat,
    linear-gradient(to bottom,var(--dark), rgba(0,0,0,0)) left bottom / 100% var(--shade) no-repeat;
}

.portable-infobox .pi-title {
  border-bottom: 2.5px solid;
  margin: 0;
  font-family: inherit;
  font-size: 28px;   /* crisp */
  line-height: 32px; /* crisp */
  color: #000000;
  font-weight: 700;
}

.pi-image-thumbnail {
  max-width: 270px;
  --pi-border-color: black;
  border-bottom: 2.5px solid;
  max-width: var(--pi-width);
  border-color: black;
  height: auto;
}

.pi-data {
  border-bottom-style: solid;
  border-bottom-width: 2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  color: #000000;
}

.pi-data-label { color: #000000; }

.portable-infobox .pi-border-color { border-color: #000000; }

/* ---------------------------
   Header + buttons
---------------------------- */
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
  width: 100%;
  min-height: 3.125rem;
  background-color: #141414;
  min-width: 31.25em;
  max-width: 99.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;

  border-left: 2.5px solid;
  border-right: 2.5px solid;
  border-bottom: 2.5px solid;
}

.cdx-button:enabled.cdx-button--weight-quiet,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet {
  filter: invert(100%);
}

/* ---------------------------
   Tables + metadata
---------------------------- */
.wikitable {
  background-color: #00000045;
  color: #ffffff;
  margin: 1em 0;
  border: 2.5px solid #ffffff;
  border-collapse: collapse;
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
  border: 2.5px solid #ffffff;
  padding: 0.2em 0.4em;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
  background-color: #0000004a;
  color: #ffffff;
  text-align: center;
}

#filetoc {
  background-color: #0000004a;
  text-align: center;
  border: 2.5px solid #ffffff;
  padding: 5px;
  font-size: 14px;
  line-height: 16px;
  margin: 0 0 0.5em 0;
  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

.mw_metadata td {
  background-color: #00000040;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.mw_metadata td,
.mw_metadata th {
  border: 2.5px solid #ffffff;
  padding-left: 5px;
  padding-right: 5px;
}

.mw_metadata th {
  background-color: #00000033;
  font-weight: 400;
  text-align: center;
}

/* ---------------------------
   Toggle button + code blocks
---------------------------- */
.vector-pinnable-header-toggle-button {
  display: none;
  border: 2.5px solid;
  padding: 4px 8px;
  background-color: #eaecf000;
  color: #ffffff;
  cursor: pointer;
  text-align: left;

  /* make it crisp */
  font-size: 12px;
  line-height: 14px;

  border-radius: 0px;
  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

.vector-pinnable-header-toggle-button:hover {
  color: #000000;
  border-color: #000000;
}

pre, code, .mw-code {
  background-color: #00000054;
  color: #ffffff;
  border: 2.5px solid #ffffff;
  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

.vector-sticky-header-context-bar-primary {
  font-family: Minecraft, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

/* ---------------------------
   Misc
---------------------------- */
ul {
  list-style-image: url();
}