MediaWiki:Common.css: Difference between revisions

From Puella Magi Wiki
Jump to navigation Jump to search
(Allow highlighting a section or similar target)
(Code for a tabbed interface, hoisted from a W3C example - https://www.w3.org/Style/Examples/007/target.en.html)
Line 96: Line 96:
}
}


/* -------------------------------------------------------------
* Tabbed interface
* ------------------------------------------------------------- */
div.tabs {
  min-height: 7em;
  position: relative;
  line-height: 1;
  z-index: 0;
}
div.tabs > div {
  display: inline;
}
div.tabs > div > a {
  color: black;
  background: #ccc;
  padding: 0.2em;
  border: 0.1em outset #bbb;
  border-bottom: 0.1em solid #ccc;
}
div.tabs > div:not(:target) > a {
  border-bottom: none;
  background: #999
}
div.tabs > div:target > a,
:target .default > a {
  border-bottom: 0.1em solid #ccc;
  background: #ccc;
}
div.tabs > div > div {
  background: #ccc;
  z-index: -2;
  left: 0; top: 1.3em;
  bottom: 0; right: 0;
  overflow: auto;
  padding: 0.3em;
  border: 0.1em outset #bbb;
}
div.tabs > div:not(:target) > div {
  position: absolute;
};
div.tabs > div:target > div, :target .default > div {
  position: absolute;
  z-index: -1;
}
div.tabs :target {
  outline: none;
}


/* -------------------------------------------------------------
/* -------------------------------------------------------------

Revision as of 23:41, 17 August 2023

/* -------------------------------------------------------------
 * 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, .inline_spoilers a, .inline_spoilers a:visited {
  /*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:hover {
  color: black;
}

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

div.tabs {
  min-height: 7em;
  position: relative;
  line-height: 1;
  z-index: 0;
}

div.tabs > div {
  display: inline;
}

div.tabs > div > a {
  color: black;
  background: #ccc;
  padding: 0.2em;
  border: 0.1em outset #bbb;
  border-bottom: 0.1em solid #ccc;
}

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

div.tabs > div:target > a,
:target .default > a {
  border-bottom: 0.1em solid #ccc;
  background: #ccc;
}

div.tabs > div > div {
  background: #ccc;
  z-index: -2;
  left: 0; top: 1.3em;
  bottom: 0; right: 0;
  overflow: auto;
  padding: 0.3em;
  border: 0.1em outset #bbb;
}

div.tabs > div:not(:target) > div {
  position: absolute;
};

div.tabs > div:target > div, :target .default > div {
  position: absolute;
  z-index: -1;
}

div.tabs :target {
  outline: none;
}

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

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