MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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



/* General CSS */
/* ==================================================== */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&display=swap');
@font-face {
  font-family: "smalle";
  src: url('/smalle.woff2') format("woff2");
}

/* Dark mode fix - if the page is short, the bottom of the screen is light */
body {
  min-height: 100%;
}

/* Dark mode fix - uninvert the logo */
html.skin-theme-clientpref-night a.mw-wiki-logo {
  filter: invert(1) hue-rotate(180deg);
  -webkit-filter: invert(1) hue-rotate(180deg);
}

/* Dark mode fix - uninvert the image on the upload screen */
html.skin-theme-clientpref-night #mw-upload-thumbnail > div:nth-child(1) > canvas:nth-child(1) {
  filter: invert(1) hue-rotate(180deg);
  -webkit-filter: invert(1) hue-rotate(180deg);
}

/* ==================================================== */





/* CSS for Template:Dialogue and Template:DialogueBreak */
/* ==================================================== */

div.tagwiki-dialogue-break, div.tagwiki-dialogue-main-container {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  padding: 6px;
  gap: 14px;
  align-items: center;
  background-color: #040302;
  color: #fff;
}

/* Dark mode fix - when dark mode is on, everything apart from images gets inverted. We want normal stuff to be inverted again (so that it's normal) but we don't want to touch the images, so we remove all filters from them */
html.skin-theme-clientpref-night div.tagwiki-dialogue-break,
html.skin-theme-clientpref-night div.tagwiki-dialogue-main-container {
  filter: invert(1) hue-rotate(180deg);
  -webkit-filter: invert(1) hue-rotate(180deg);
}
html.skin-theme-clientpref-night div.tagwiki-dialogue-break img,
html.skin-theme-clientpref-night div.tagwiki-dialogue-main-container img {
  filter: none;
  -webkit-filter: none;
}

div.tagwiki-dialogue-break.tagwiki-dialogue-broken,
div.tagwiki-dialogue-main-container.tagwiki-dialogue-broken {
  background-color: #3f0000;
}

div.tagwiki-dialogue-main-container {
  height: 64px;
  justify-content: space-between;
}

div.tagwiki-dialogue-break {
  height: 32px;
  background-color: #040302;
  color: #9f9f9f;
}

div.tagwiki-dialogue-main-container > div.tagwiki-dialogue-text-container {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  flex-direction: row;
  gap: 14px;
  align-items: center;
}

div.tagwiki-dialogue-main-container > div.tagwiki-dialogue-text-container > div.tagwiki-dialogue-text {
  color: #b0b0b0;
  font-family: 'smalle', 'Silkscreen', 'VT323', monospace;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 0.5px;
}

div.tagwiki-dialogue-main-container > div.tagwiki-dialogue-source {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  gap: 5px;
  align-self: flex-start;
  border-bottom: 1px dotted #7f7f7f;
  cursor: default;
  font-family: sans-serif;
  flex-shrink: 0;
}

div.tagwiki-dialogue-main-container > div.tagwiki-dialogue-source > div.tagwiki-dialogue-source-question-mark {
  color: #7f7f7f;
}

div.tagwiki-dialogue-main-container > div.tagwiki-dialogue-source > div.tagwiki-dialogue-source-exclamation-point {
  display: none;
  color: #ff7f7f;
  font-weight: bold;
}

div.tagwiki-dialogue-main-container.tagwiki-dialogue-broken > div.tagwiki-dialogue-source > div.tagwiki-dialogue-source-exclamation-point {
  display: initial;
}

/* ==================================================== */