MediaWiki:Common.css

From Puella Magi Wiki
Revision as of 03:44, 19 August 2023 by Celtic Minstrel (talk | contribs) (Make tab view not look completely broken if there are too many tabs, and add support for tab scrolling provided appropriate JS is implemented)
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;
}

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

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

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

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

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