MediaWiki:Common.css: Difference between revisions

Revision as of 14:12, 30 July 2023

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&display=swap');
@font-face {
  font-family: "smalle";
  src: url('https://tadeln.stary.pc.pl/download/misc/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.client-darkmode 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.client-darkmode #mw-upload-thumbnail > div:nth-child(1) > canvas:nth-child(1) {
  filter: invert(1) hue-rotate(180deg);
  -webkit-filter: invert(1) hue-rotate(180deg);
}



div.tagwiki-dialogue-break, div.tagwiki-dialogue-main-container {
  display: flex;
  width: 100%;
  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.client-darkmode div.tagwiki-dialogue-break,
html.client-darkmode div.tagwiki-dialogue-main-container {
  filter: invert(1) hue-rotate(180deg);
  -webkit-filter: invert(1) hue-rotate(180deg);
}

html.client-darkmode div.tagwiki-dialogue-break img,
html.client-darkmode 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;
}