MediaWiki:Common.css

From Puella Magi Wiki
Revision as of 00:33, 10 December 2023 by Celtic Minstrel (talk | contribs) (Argh, line-height percentages are not relative to the parent… best I can do is reset it to the absolute value the parent set it to, which is the same in the default style but might end up being different in another style. Still better than the alternative though.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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.
/* -------------------------------------------------------------
 * Runes fonts
 * -------------------------------------------------------------*/

@font-face {
  font-family: MadokaRunes;
  src: url(/w/resources/assets/fonts/runes.ttf?1335354297);
}

@font-face {
  font-family: MadokaMusical;
  src: url(/w/resources/assets/fonts/runesmusical.ttf?1335354297);
}


/* -------------------------------------------------------------
 * TODO table
 * -------------------------------------------------------------*/

table.todo {
  width: 100%;
}

table.todo td:first-child {
  width: 70px;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
}

table.todo td:nth-child(2),
table.todo td:nth-child(3) {
  width: 70px;
  font-size: 11px;
  text-align: center;
}

table.todo td.waiting {
  background: #eee;
  font-weight: normal;
  color: #999;
}

table.todo td.working {
  background: #FFE5CC;
  color: #B44723;
}

table.todo td.working ~ td {
  background: #FFF9EF;
}

table.todo td.partial {
  background: #6E9591;
  color: #fff;
}

table.todo td.partial ~ td {
  background: #D9F2F5;
}

table.todo td.done {
  background: #3c3;
  color: #fff;
}

table.todo td.done ~ td {
  background: #E4FFE3;
}

/* -------------------------------------------------------------
 * Allow highlighting a section or similar target
 * ------------------------------------------------------------- */

.hilite-target:target {
  background-color: #ffa;
}

/* -------------------------------------------------------------
 * Inline spoilers tag
 * ------------------------------------------------------------- */

.inline-spoilers {
  /*background: #222;
  color: #222;*/
  background: white;
  color: white;
  border-bottom: 1px solid #b3b3b3;
  border-left:   1px solid #b3b3b3;
  border-right:  1px solid #b3b3b3;
  padding: 2px;
}

.inline-spoilers * {
  visibility: hidden;
}

.inline-spoilers:hover {
  color: inherit;
}

.inline-spoilers:hover * {
  visibility: inherit;
}

/* -------------------------------------------------------------
 * Tabbed interface
 * ------------------------------------------------------------- */

div.tabs {
  min-height:15em;
  position:relative;
  line-height:1;
  margin-top:1.5em;
  z-index:0;
  white-space: nowrap;
  overflow-x: clip;
}

div.tabs > div {
  display:inline;
  scroll-margin-top:1em;
  pointer-events: none;
}

div.tabs > div > a {
  color:#222;
  font-size:110%;
  font-weight:bold;
  text-decoration:none;
  background:linear-gradient(#ddd,#fff);
  padding:0.7em;
  border:0.1em outset #bbb;
  border-top-left-radius:0.5em;
  border-top-right-radius:0.5em;
  border-bottom:0.1em solid #fff;
  position: relative;
  z-index: -1;
  pointer-events: auto;
}

div.tabs > div:not(:target):not(.default) > a {
  border-bottom:none;
  background:#999;
}

div.tabs > div:target > a,
div.tabs > div.default > a {
  padding-bottom:0.154em;
  position:relative;
  z-index:1;
}

div.tabs > div > div {
  position:absolute;
  background:#fff;
  line-height:1.6;
  left:0;
  top:1.3em;
  bottom:0;
  right:0;
  overflow:auto;
  padding:0.3em;
  border:0.1em outset #bbb;
  border-top-right-radius:0em;
  border-top-right-radius:0.3em;
  border-bottom-left-radius:0.3em;
  border-bottom-right-radius:0.3em;
  white-space: normal;
  pointer-events: auto;
}

div.tabs > div:not(:target):not(.default) > div {
  z-index:-2;
}

div.tabs > div:target > div,
div.tabs > div.default > div {
  z-index:0;
}

div.tabs :target,
div.tabs .default {
  outline:none
}

div.tabs > .tab-nav {
  text-align: center;
  color:blue;
  height:1.5em;
  width:1em;
  top: -1.4em;
  position:absolute;
  z-index: 5;
  background:white;
  border: dotted 1px;
  padding: 0.7em 0.3em 0em 0.2em;
  cursor:pointer;
  user-select:none;
}

div.tabs > .tab-nav.left{
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0));
  border-radius: 0px 5px 5px 0px;
}

div.tabs > .tab-nav.right{
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0));
  border-radius: 5px 0px 0px 5px;
  right:0;
}

/* -------------------------------------------------------------
 * Allow flowing table of contents into columns
 * ------------------------------------------------------------- */

.column-toc .toc ul {
  column-count: var(--toc-columns);
}

/* -------------------------------------------------------------
 * HAXX
 * ------------------------------------------------------------- */

.pm-character-box-hack .mw-collapsible-toggle {
  margin-top: 30px;
  margin-right: 10px;
}