MediaWiki:Common.css: Difference between revisions

From Puella Magi Wiki
Jump to navigation Jump to search
(Fix some issues with the tab view)
(Make the tabbed interface look a bit nicer)
Line 104: Line 104:
   position:relative;
   position:relative;
   line-height:1;
   line-height:1;
   z-index:0
   z-index:0;
}
}


div.tabs > div {
div.tabs > div {
   display:inline
   display:inline;
}
}


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


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


div.tabs > div:target > a,
div.tabs > div.default > a {
div.tabs > div.default > a {
   border-bottom:0.1em solid #ccc;
   padding-bottom:0.154em;
   background:#ccc
   position:relative;
  z-index:1;
}
}


div.tabs > div > div {
div.tabs > div > div {
   position:absolute;
   position:absolute;
   background:#ccc;
   background:#fff;
   left:0;
   left:0;
   top:1.3em;
   top:1.3em;
Line 139: Line 145:
   overflow:auto;
   overflow:auto;
   padding:0.3em;
   padding:0.3em;
   border:0.1em outset #bbb
   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;
}
}


Line 147: Line 157:


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


div.tabs > div.default > div {
div.tabs > div.default > div {
   z-index:-1
   z-index:-1;
}
}


div.tabs :target {
div.tabs :target {
   outline:none
   outline:none;
}
}



Revision as of 01:12, 18 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:15em;
  position:relative;
  line-height:1;
  z-index:0;
}

div.tabs > div {
  display:inline;
}

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

div.tabs > div:not(:target) > 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;
}

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

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

div.tabs > div.default > div {
  z-index:-1;
}

div.tabs :target {
  outline:none;
}

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

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