Template:MoveData/style3.css

/* alternate movedata style */

/* setting main container */
.movedata {
  display: grid;
  grid-template-areas: 
      "moveno id frames whiff string tab"
      "notes notes notes notes notes notes";
  grid-template-columns: 0.125fr 2.75fr 0.9fr 1.4fr 0.725fr 0.25fr;
  grid-template-rows: 80px auto;
  line-height: 1.2;
  align-items: start;
  border-width:4px;
  border-radius:10px;
  border-style: solid;
  border-color: #777;
  margin-top:0.65em;
  column-gap: 0.7em;
  padding-top:0.4em;
  padding-bottom:0.2em;
}

/* setting grid areas for grid-template-areas */
.movedata-moveno { grid-area: moveno; }
.movedata-id { grid-area: id; }
.movedata-string { grid-area: string; }
.movedata-frames { grid-area: frames; }
.movedata-whiff { grid-area: whiff; }
.movedata-notes { grid-area: notes; }
                      /* for: whiff */
.movedata-tracking { grid-area: tracking; }
.movedata-tracks.left { grid-area: left; }
.movedata-tracks.right { grid-area: right; }
.movedata-distant {grid-area: distant; }
.movedata-special {grid-area:special; }

.movedata-moveno {
	display:flex;
	flex-direction:column;
	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.22em;
    margin-right:-0.2em;
}
.movedata-id {
  display: flex;
  flex-direction: column;
  text-align: start;
  align-self: stretch;
  margin-left:0.5em;
  padding-top:0.1em;
}
.movedata-threat {
	display:flex;
	flex-direction:column;
	padding-bottom:0.3em;
	margin-top:0em;
}
.movedata-name {
	font-size: 0.8em;
	flex: 1;
	margin-bottom:0em;
}
.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:0em;
}
.movedata-frames,
.movedata-whiff,
.movedata-string,
.movedata-notes {
	font-size:0.95em;
}
.movedata-damageLead,
.movedata-targetLead,
.movedata-startupRoot,
.movedata-inputLead {
  opacity: .3;
}
.movedata-divider {
	opacity: .5;
}
.movedata-string {
  display: flex;
  flex-direction: column;
  text-align: start;
  align-self: stretch;
  padding-top:0em;
}
.movedata-frames {
  display: flex;
  flex-direction: column;
  padding-left: 0.2em;
  text-align: end;
  align-self: stretch;
  padding-left: 0.7em;
  margin-top:-0.4em;
}
/* Empty space if parameter undefined */
.movedata-moveno,
.movedata-combo,
.movedata-jail,
.movedata-leeway,
.movedata-delay,
.movedata-startup-ctn,
.movedata-block,
.movedata-hit,
.movedata-ch,
.movedata-range,
.movedata-recv,
.movedata-crush,
.movedata-threat,
.movedata-screw,
.movedata-wall,
.movedata-floor {
	flex: 1;
}
/* setting whiff column to contain two-column grid and single-column flexbox */
.movedata-tracking {
	flex: 1;
}
.movedata-distant {
  display: flex;
  flex-direction: column;
  text-align: start;
  align-self: stretch;
  flex: 3;
  padding-top:0.7em;
  padding-left:0.7em;
}
.movedata-special {
  display: flex;
  flex-direction: column;
  text-align: end;
  align-self: stretch;
  flex: 3;
  padding-top:0.7em;
  padding-right:0.7em;
}
.movedata-whiff {
	display:grid;
	grid-template-areas:
	   "tracking tracking"
	   "distant special";
	grid-template-columns: 1fr 1fr;
	align-self: stretch;
}
.movedata-tracking {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas:
    "left right";
  align-self: stretch;
  margin-top:-0.5em;
  margin-bottom:-0.75em;
}
/* sets tracking bars and labels */
.movedata-tracks {
  overflow: hidden;
}
.movedata-tracks-bar {
  height: 4px;
}
.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-whiff:before {
  content: " ";
  display: block;
  height: 100%;
  width: 0px;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  border-right: 1px dotted #777;
  margin-top:-0.5em;
  padding-bottom:0.75em;
}
.movedata-whiff:after {
  content: " ";
  display: block;
  height: 100%;
  width: 0px;
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: stretch;
  border-right: 1px dotted #777;
  margin-top:-0.5em;
  padding-bottom:0.75em;
}
.movedata-frames,
.movedata-whiff,
.movedata-string {
	padding-bottom:0.2em;
}
/* tab column for notes toggle */
.movedata-tab { 
	display: flex;
    align-items:center;
    flex-direction:column;
	text-align:center;
	writing-mode:vertical-rl;
	align-self:stretch;
	margin-top:-0.4em;
	border-left:1px solid #777;
	padding-left:0.3em;
}
.movedata-notes {
  display:flex;
  flex-direction: column;
  border-top:1px solid #777;
  text-align:end;
}
/* for display toggle
.movedata-notes { display: none }
*/

/* changing grid layout depending on screen width allowed */
@media (max-width: 830px) {
	.movedata { 
		display:grid;
		grid-template-areas:
		   "moveno id id id tab"
		   "frames frames whiff string string"
		   "notes notes notes notes notes";
		grid-template-columns: 2% 1.3fr 1.45fr 0.8fr 0.1fr;
		grid-template-rows: 80px 80px auto;
	}
	.movedata-id {
		border-bottom:1px solid #777;
		margin-left:-1.1em;
		padding-left:1.75em;
		text-overflow: ellipsis;
	}
	.movedata-name {
		font-size:0.75em;
		margin-bottom:-0.5em;
	}
	.movedata-input-ctn {
		text-indent:0;
		font-size:1.55em;
	}
	.movedata-threat {
		font-size:0.85em;
	}
	.movedata-tab {
		border-bottom:1px solid #777;
		margin-left:-0.7em;
	}
	.movedata-frames {
		margin-top:-0.1em;
		font-size:0.85em;
	}
	.movedata-whiff {
		margin-top:0;
		font-size:0.85em;
		padding-top:0.1em;
	}
	.movedata-string {
		font-size:0.8em;
		line-height:1.45;
		padding-top:0.2em;
	}
	.movedata-whiff:before {
		margin-top:0;
		padding-bottom:0.25em;
	}
	.movedata-whiff:after {
		margin-top:0;
		padding-bottom:0.25em;
	}
}