MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Line 66: Line 66:
.bg-yellow { background-color: var(--yellow); }
.bg-yellow { background-color: var(--yellow); }


/* first movedata style */
.hover-bg-blue-muddy-05:hover {
.movedata {
background-color: var(--blue-muddy-05);
  display: grid;
  grid-template-columns: 18% 12% repeat(3, 12%) 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  border-width: 1px 0;
  border-style: solid;
  border-color: #888;
  padding: 0.2em 0;
  grid-gap: 0 0.2em;
  grid-template-areas:
    "input damage block  hit  ch  notes"
    "input target startup crush recv notes";
}
 
.movedata p {
  margin: 0;
}
 
.movedata {
  margin-top: 1em;
  text-align: center;
}
 
.movedata + .movedata {
  margin-top: -1px;
}
 
.movedata:hover {
  background-color: var(--blue-muddy-05);
}
 
.movedata-input-ctn { grid-area: input; }
.movedata-name { grid-area: name; }
.movedata-startup-ctn { grid-area: startup; }
.movedata-damage-ctn { grid-area: damage; }
.movedata-target-ctn {  grid-area: target; }
.movedata-block { grid-area: block; }
.movedata-hit { grid-area: hit; }
.movedata-ch { grid-area: ch; }
.movedata-clean { grid-area: clean; }
.movedata-crush { grid-area: crush; }
.movedata-recv { grid-area: recv; }
.movedata-range { grid-area: range; }
.movedata-notes { grid-area: notes; }
 
.movedata-input-ctn {
  font-size: 1.7em;
  padding-left: 0.2em;
  text-align: start;
}
 
.movedata-damage-ctn { align-self: end; }
.movedata-target-ctn { align-self: start; }
 
.movedata-startup-ctn,
.movedata-crush,
.movedata-recv {
  align-self: start;
}
 
.movedata-hit,
.movedata-block,
.movedata-ch {
  align-self: end;
}
 
.movedata-damageLead,
.movedata-targetLead,
.movedata-inputLead {
  opacity: .3;
}
 
.movedata-clean,
.movedata-name,
.movedata-range,
.movedata-startupLead {
  display: none;
}
 
.movedata:before {
  content: " ";
  display: block;
  height: 0px;
  width: 100%;
  grid-column: 3 / span 3;
  grid-row: 1;
  align-self: end;
  border-bottom: 1px dotted grey;
}
 
.movedata-notes {
  align-self: stretch;
  line-height: initial;
  text-align: start;
  border-left: 1px solid #888;
  padding: 0 0.2em;
}
 
.movedata-input-ctn  {
  display: flex;
  flex-flow: row nowrap;
}
 
.movedata-input-ctn,
.movedata-target-ctn,
.movedata-damage-ctn {
  word-break: break-word;
}
 
.movedata-input-ctn:after {
  content: "";
  align-self: center;
  flex-basis: 0px;
  flex-grow: 1;
  margin-left: 0.2em;
  border-top: 1px solid #888;
}
 
@media (max-width: 600px) {
  .movedata {
    grid-template-areas:
      "input input input input"
      "damage block hit ch"
      "target startup crush recv"
      "notes notes notes notes";
    grid-template-rows: repeat(4, auto);
    grid-template-columns: 1fr repeat(3, 25%);
    border: none;
  }
 
  .movedata:before {
    grid-row: 2;
    grid-column: 2 / -1;
  }
 
  .movedata-notes {
    text-align: end;
    border: none;
  }
}
 
.movedata-range:empty:after {
  content: "N/A";
  visibility: hidden;
}
 
.movedata-name {
  text-align: start;
  font-size: 0.75em;
}
 
/* add name and range to movedata */
.movelist-nr .movedata-range,
.movelist-nr .movedata-name {
  display: initial;
}
 
.movelist-nr .movedata {
  grid-template-areas:
    "name name name name name notes"
    "input damage block hit ch notes"
    "input damage block hit ch notes"
    "input target block hit ch notes"
    "input target startup crush recv notes"
    "input range startup crush recv notes"
    "input range startup crush recv notes";
  grid-template-rows: repeat(7, auto);
}
 
.movelist-nr .movedata-target-ctn { align-self: center; }
.movelist-nr .movedata-range { align-self: start; }
 
.movelist-nr .movedata:before {
  grid-row: 2 / 5;
}
 
/* add name and range, name above frame data */
.movelist-nuf .movedata {
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "input damage name name name notes"
    "input target block hit ch notes"
    "input range startup crush recv notes";
}
 
.movelist-nuf .movedata:before {
  grid-row: 2 / 3;
}
 
.movelist-nuf .movedata-range,
.movelist-nuf .movedata-name {
  display: initial;
}
 
.movelist-nuf .movedata-target-ctn { align-self: center; }
.movelist-nuf .movedata-range { align-self: start; }
 
@media (max-width: 600px) {
  .movelist-nuf .movedata {
    grid-template-areas:
      "input input input input"
      "damage name name name"
      "target block hit ch"
      "range startup crush recv"
      "notes notes notes notes";
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 1fr repeat(3, 25%);
  }
 
  .movelist-nuf .movedata:before {
    grid-row: 3 / 4;
  }
}
 
/* name above input, in damage row */
 
.movelist-naid .movedata {
  grid-template-rows: repeat(6, auto);
  grid-template-areas:
    "name damage block hit ch notes"
    "name damage block hit ch notes"
    "input target block hit ch notes"
    "input target startup crush recv notes"
    "input range startup crush recv notes"
    "input range startup crush recv notes";
}
 
.movelist-naid .movedata:before {
  grid-row: 1 / 4;
}
 
.movelist-naid .movedata-range,
.movelist-naid .movedata-name {
  display: initial;
}
 
.movelist-naid .movedata-target-ctn { align-self: center; }
.movelist-naid .movedata-range { align-self: start; }
 
/* name under input, in range row */
 
.movelist-nuir .movedata {
  grid-template-areas:
    "input damage block hit ch notes"
    "input damage block hit ch notes"
    "input target block hit ch notes"
    "input target startup crush recv notes"
    "name range startup crush recv notes"
    "name range startup crush recv notes";
}
 
/* nr naid nuir same mobile syle */
 
@media (max-width: 600px) {
  .movelist-naid .movedata,
  .movelist-nuir .movedata,
  .movelist-nr .movedata {
    grid-template-areas:
      "input input input input"
      "name name name name"
      "damage block hit ch"
      "damage block hit ch"
      "target block hit ch"
      "target startup crush recv"
      "range startup crush recv"
      "range startup crush recv"
      "notes notes notes notes";
    grid-template-rows: repeat(9, auto);
    grid-template-columns: 1fr repeat(3, 25%);
  }
 
  .movelist-nr .movedata-name,
  .movelist-nuir .movedata-name,
  .movelist-naid .movedata-name {
    margin-top: -0.5em;
  }
 
  .movelist-nr .movedata:before,
  .movelist-nuir .movedata:before,
  .movelist-naid .movedata:before {
    grid-row: 3 / 6;
  }
}
}

Revision as of 01:02, 28 November 2020

/* CSS placed here will be applied to all skins */

.plainlist > ul {
	list-style-type: none;
	padding-left: 0;
}

/* undoing Citizen having all the td padding on the right for some reason */

.skin-citizen table.wikitable tr td,
.skin-citizen table.wikitable tr th {
   padding: 10px 5px;
}

.skin-citizen table.wikitable tr th.headerSort {
  padding-right: 21px;
}

/*
 * Colors are from https://www.hsluv.org/ color space
 * 
 * Light mode bg: hsluv(0, 0, 100)
 * Dark mode bg: hsluv(0, 0, 5)
 *
 * == hue
 * red    12
 * yellow 65
 * green  120
 * blue   240
 *
 * == saturation
 * base   100
 * muddy  50
 *
 * == lightness
 * base   80
 * {n}    100 - {n}
 * 
 * == lightness (dark mode)
 * base   25
 * {n}    5 + {n}
 */
 
:root {
   --blue-muddy-05: #ecf1f8;
   --yellow: #efc200;
   --green: #6de000;
   --red: #ffb3b3;
}

@media (prefers-color-scheme: dark) {
   :root {
      --blue-muddy-05: #121d26;
      --yellow: #493a00;
      --green: #1c4400;
      --red: #7e0002;
   }
   
   body.skin-citizen {
      background-color: #111111;
   }
}

.bg-green { background-color: var(--green); }
.bg-red { background-color: var(--red); }
.bg-yellow { background-color: var(--yellow); }

.hover-bg-blue-muddy-05:hover {
	background-color: var(--blue-muddy-05);
}
Retrieved from "https://wavu.wiki/w/index.php?title=MediaWiki:Common.css&oldid=945"
Last modified
This page was last edited on 28 November 2020, at 01:02.
Copyright
All game content, materials, and recordings are copyright and owned by Bandai Namco Entertainment Inc. TEKKEN® is a registered trademark by Bandai Namco Entertainment Inc.. All rights reserved. All other content is available under Creative Commons Zero (Public Domain) unless otherwise noted.