MediaWiki:Common.css

/* 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-ctn { 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-damageLead,
.movedata-targetLead,
.movedata-inputLead {
  opacity: .3;
}

.movedata-clean,
.movedata-name,
.movedata-range,
.movedata-recvLead,
.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;
  }
}

/* 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-name {
  text-align: start;
  font-size: 0.75em;
}

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