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

/* 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: hsla(200, 50%, 96%, 1);
}

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

@media (max-width: 600px) {
  .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 {
    margin-top: -0.5em;
  }
  
  .movelist-nr .movedata:before {
    grid-row: 3 / 6;
  }
}

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