MediaWiki:Common.css

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.
/* 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 3px;
}

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

/* first movedata style */
.movedata {
  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;
  }
}