Template:MoveData/style3.css

/*
 * base movedata style
 *
 * name above input, in damage row
 */

.movedata {
  display: grid;
  grid-template-areas: 
      "moveno id special frames whiff tab";
  grid-template-columns: 2% 38% 13% 15% 20% 2%;
  grid-auto-rows: 110px;
  line-height: normal;
  align-items: start;
  border-width:1px;
  border-style: solid;
  border-color: #777;
  margin-top:0.5em;
  column-gap: 0.2em;
  padding-top:0.4em;
}

                      /* for: whiff */
.movedata-tracks.left { grid-area: left; }
.movedata-tracks.right { grid-area: right; }


.movedata-moveno {
	font-size: 0.95em;
	font-weight:bold;
	color: black;
	text-align: center;
	background-color: #777;
	align-self: stretch;
	writing-mode: vertical-rl;
	justify-self:left;
    margin-top:-0.2em;
}


.movedata-id {
  display: flex;
  flex-direction: column;
  text-align: start;
  align-self: stretch;
  padding-left:0.5em;
}
.movedata-threat {
	display:flex;
	flex-direction:column;
}

.movedata-name {
	font-size: 0.8em;
	flex: 1;
}
.movedata-target-ctn,
.movedata-damage-ctn {
	font-size: 0.95em;
	flex:1;
	padding-top:0.4em;
}
.movedata-input-ctn {
	font-size: 1.85em;
	text-indent: 0.5em;
	padding-bottom:0.2em;
}
.movedata-screw,
.movedata-spike,
.movedata-wallbound,
.movedata-stagebreak,
.movedata-startup,
.movedata-block,
.movedata-hit,
.movedata-ch,
.movedata-range,
.movedata-recv,
.movedata-crush {
	font-size:0.95em;
}
.movedata-damageLead,
.movedata-targetLead,
.movedata-inputLead {
  opacity: .3;
}

.movedata-target-ctn + .movedata-damage-ctn:empty {
	visibility:hidden;
}

.movedata-special {
  display: flex;
  flex-direction: column;
  text-align: end;
  align-self: stretch;
  margin-top:-0.3em;
  padding-top: 0.3em;
  padding-right:0.4em;
}

.movedata-frames {
  display: flex;
  flex-direction: column;
  padding-left: 0.2em;
  text-align: start;
  align-self: stretch;
  text-align: start;
  border-left: 1px dotted #777;
  border-right: 1px dotted #777;
  padding-left: 0.8em;
  margin-top:-0.3em;
  padding-top: 0.3em;
}


.movedata-screw,
.movedata-spike,
.movedata-wallbound,
.movedata-stagebreak,
.movedata-startup,
.movedata-block,
.movedata-hit,
.movedata-ch,
.movedata-range,
.movedata-recv,
.movedata-crush,
.movedata-threat {
	flex: 1;
}
.movedata-tracking {
	flex: 1;
}
.movedata-distant {
	flex: 3;
}
.movedata-whiff {
	display:flex;
	flex-direction:column;
	align-self: stretch;
	border-right: 1px dotted #777;
    margin-top:-0.3em;
    padding-top: 0.3em;
    padding-right:2em;
}
.movedata-tracking {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas:
    "left right";
  align-self: stretch;
}

.movedata-distant {
  display: flex;
  flex-direction: column;
  text-align: start;
  align-self: stretch;
  padding-left:4em;
}


.movedata-tracks {
  font-size: 1em;
  overflow: hidden;
}

.movedata-tracks-bar {
  height: 2px;
}

.movedata-tracks-score,
.movedata-tracks-label {
  padding: 0 0.2em;
}

.movedata-tracks-label {
  grid-column: 1 / -1;
}

.movedata-tracks.left {
  display: grid;
  grid-template-columns: 1fr 1.5em;
  align-items: center;
  justify-items: end;
}

.movedata-tracks.right {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  align-items: center;
  justify-items: start;
}

.movedata-tracks.left .movedata-tracks-score { justify-self: start; }
.movedata-tracks.left .movedata-tracks-label { text-align: end; }
.movedata-tracks.right .movedata-tracks-score { justify-self: end; }
.movedata-tracks.right .movedata-tracks-label { text-align: start; }

.movedata-tab { 
	display: flex;
    align-content:center;
    align-items:center;
    flex-direction:column;
}
.movedata-tab-text {
	display:flex;
	writing-mode:vertical-rl;
    text-align:justify;
}

.movedata-notes {
  display:flex;
  flex-direction: column;
  text-align: start;
  align-self: stretch;
}


.movedata-notes { display: none }




@media (max-width: 720px) {
	.movedata { 
		display:grid;
		grid-template-areas:
		   "moveno id id id id"
		   ". special frames whiff tab";
		grid-template-columns: 2% 1fr 1fr 1fr 1fr;
		grid-auto-rows: 85px;
	}
	
}