MediaWiki:Common.css: Difference between revisions

Revision as of 13:24, 11 September 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 {
  /*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;
  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 {
  --data: attr(data-columns);
  --data: attr(data-columns number, 3);
  --columns: var(--data);
}

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

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

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