MediaWiki:Common.css

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

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

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