MediaWiki:Common.css: Difference between revisions

Latest revision as of 14:51, 15 August 2024

/* 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;
}

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