MediaWiki:Common.css: Difference between revisions

Revision as of 19:05, 13 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('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.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;
  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;
}

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