/* 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,
.movedata-tracking {
flex: 1;
}
/* setting whiff column to contain two-column grid and single-column flexbox */
.movedata-distant {
display: flex;
flex-direction: column;
text-align: start;
align-self: stretch;
padding-top:0.9em;
padding-left:0.7em;
}
.movedata-special {
display: flex;
flex-direction: column;
text-align: end;
align-self: stretch;
padding-top:0.9em;
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: flex;
flex-direction:row;
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;
}
}
