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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/***** CSS placed here will be applied to all skins on the entire site. *****/

/* Mark redirects in Special:Allpages and Special:Watchlist */
.allpagesredirect {
   font-style: italic;
}
.allpagesredirect:after {
   color: #808080; content: " (redirect)"
}
.watchlistredir {
   font-style: italic;

/* Hide image attribution */
.picture-attribution { display:none !important; }

}
.hiddenStructure {
    display: none;
}

/* Giving headers and TOC a little extra space */
h2 {
   margin-top: 20px;
}
.toc {
   margin-top: 20px;
}

/* Infobox template style */
.infobox {
   border: 1px solid #aaaaaa;
   background-color: #f9f9f9;
   color: black;
   margin-bottom: 0.5em;
   margin-left: 1em;
   padding: 0.2em;
   float: right;
   clear: right;
}
.infobox td,
.infobox th {
   vertical-align: top;
}
.infobox caption {
   font-size: larger;
   margin-left: inherit;
}
.infobox.bordered {
   border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
   border: 1px solid #aaaaaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
   border: 0;
}

/* Forum formatting (by -Algorithm & -Splaka) */
.forumheader {
   border: 1px solid #aaa;
   margin-top: 1em;
   padding: 12px;
}
.forumlist td.forum_edited a {
   color: black;
   text-decoration: none;
}
.forumlist td.forum_title a {
   padding-left: 20px;
}
.forumlist td.forum_title a.forum_new {
   font-weight: bold;
   background: url(/images/4/4e/Forum_new.gif) center left no-repeat;
   padding-left: 20px;
}
.forumlist td.forum_title a.forum_new:visited {
   font-weight: normal;
   background: none;
   padding-left: 20px;
}
.forumlist th.forum_title {
   padding-left: 20px;
}

/* Recent changes byte indicators */
.mw-plusminus-pos {
   color: #006500;
}
.mw-plusminus-neg {
   color: #8B0000;
}

/* Image frame fix */
div.tright, div.tleft {
   border: 1px solid silver;
}

div.thumbinner {
   background: inherit;
   border: none;
   color: inherit;
}
#article div.thumb {
   color:inherit;
}

/* === Babel === */

div.babelbox {
   float: right;
   margin-left: 1em;
   margin-bottom: 0.5em;
   width: 246px;
   border: 1px solid #99B3FF;
   padding: 2px 0 2px 0;
}
.lang-blockN, .lang-block0, .lang-block1, .lang-block2, .lang-block3 {
   margin: 2px 4px 2px 4px; /* t, l, b, r */
   width:238px;
   border-collapse: collapse;
}
td.lang-codeN, td.lang-code0, td.lang-code1, td.lang-code2, td.lang-code3 {
   text-align:center;
   font-size:14pt;
   width:45px;
   height:45px;
}
td.lang-descriptionN, td.lang-description0, td.lang-description1,
td.lang-description2, td.lang-description3 {
  font-size:8pt;
  padding:4pt;
  line-height:1.25em;
}

.lang-block0 {
   border:1px solid #FFB3B3;
}
td.lang-code0 {
  background-color: #FFB3B3;
  color: black;
}
td.lang-description0 {
  background-color: #FFE0E8;
  color: black;
}

.lang-block1,  .lang-block2, .lang-block3  {
   border:1px solid #99B3FF;
}
td.lang-code1, td.lang-code2, td.lang-code3 {
  background-color: #99B3FF;
  color: black;
}
td.lang-description1,  td.lang-description2, td.lang-description3 {
  background-color: #E0E8FF;
  color: black;
}

.lang-blockN {
   border:1px solid #6EF7A7;
}
td.lang-codeN {
  background-color: #6EF7A7;
  color: black;
}
td.lang-descriptionN {
  background-color: #C5FCDC;
  color: black;
}

/* Prevent line breaks in silly places where desired (nowrap)
   and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
	white-space: nowrap;
}


.spoiler_box {
  display: inline-block; /* you could do this as a full-width block instead */
  position: relative; /* needed for placeholder positioning */
  min-width: 72px; /* 72px if box-sizing is border-box; ensures the placeholder is fully visible if the text is smaller than the placeholder text */
}

.spoiler_box:not(:hover) {
  background-color: black; /* these two colors must be equivalent A */
  color: transparent; /* these two colors must be equivalent B */
  min-width: 72px; /* 72px if box-sizing is border-box; ensures the placeholder is fully visible if the text is smaller than the placeholder text */
}

.spoiler_box:not(:hover) * {
  color: black; /* "send link" - cdi king */
}

.spoiler_box:not(:hover)::before {
  position: absolute;
  content: 'SPOILERS!'; /* non-breaking spaces probably necessary */
  color: white;
}

.spoiler_highlight {
  position: relative; /* needed for placeholder positioning */
  display: inline; /* you could do this as a full-width block instead */
}

.spoiler_highlight:not(:hover) {
  background-color: black; /* these two colors must be equivalent A */
  color: transparent; /* these two colors must be equivalent B */
}

.spoiler_highlight:not(:hover) * {
  color: black; /* "send link" - cdi king */
}

.spoiler_highlight:not(:hover)::before {
  content: 'SPOILERS!'; /* non-breaking spaces probably necessary */
  position: absolute;
  top: -3px;
  color: white;
}

.spoilerz {
  background: #333333;
  border-radius: 0.2em;
  color: transparent;
}
.spoilerz:target {
  background: transparent;
  color: inherit;
}

.mw-collapsible .mw-collapsible-toggle {
    float:left;
}

/* Script related classes */
/* Big shoutouts to the Dragalia Lost wiki */

.script-script {
	display: grid;
	grid-template-areas:
		"icon speaker"
		"icon text";
	justify-content: start;
}

.script-icon {
	grid-area: icon;
}

.script-speaker {
	font-weight: bold;
	grid-area: speaker;
	padding-left: 0.5em;
}

.script-text {
	grid-area: text;
	padding-left: 0.5em;
}