/* 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: #950606;
margin: 0.65em auto 0 auto;
column-gap: 0.7em;
padding-top: 0.4em;
padding-bottom: 0.2em;
width: 770px;
}
/* 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;
}
.movedata-tab {
grid-area: tab;
}
/* 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;
font-size: 0.85em;
font-weight: bold;
justify-content:center;
margin-top: -0.65em;
margin-left:-0.1em;
padding:0.3em 0.3em 0.35em 0.1em;
width:1.8em;
height:1em;
background:#950606;
border-radius:0.5em 0 0.5em 0;
color:#f1f0f0;
}
.movedata-id {
display: flex;
flex-direction: column;
text-align: start;
align-self: stretch;
padding-top: 0.1em;
margin-left:-0.25em;
}
.movedata-threat {
display: flex;
flex-direction: column;
padding-bottom: 0.4em;
margin-top: 0;
text-indent:-1.6em
}
.movedata-name {
font-size: 0.8em;
font-style:italic;
flex: 1;
margin-top:-0.2em;
padding-bottom:0.4em;
}
.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.85em;
}
.movedata-frames,
.movedata-whiff,
.movedata-string,
.movedata-notes {
font-size: 0.95em;
}
.movedata-damageLead,
.movedata-targetLead,
.movedata-startupRoot,
.movedata-inputLead {
opacity: 0.3;
}
.movedata-divider {
opacity: 0.5;
}
.movedata-string {
display: flex;
flex-direction: column;
text-align: start;
align-self: stretch;
padding-top: 0;
}
.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-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,
.movedata-notes {
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-left: 0.7em;
}
.movedata-special {
display: flex;
flex-direction: column;
text-align: end;
align-self: stretch;
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;
}
/* 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: 0;
grid-column: 1;
grid-row: 1 / -1;
align-self: stretch;
border-right: 1px dotted #777;
margin-top: -0.4em;
padding-bottom: 0.65em;
}
.movedata-whiff:after {
content: " ";
display: block;
height: 100%;
width: 0;
grid-column: 3;
grid-row: 1 / -1;
align-self: stretch;
border-right: 1px dotted #777;
margin-top: -0.4em;
padding-bottom: 0.65em;
}
.movedata-frames,
.movedata-whiff,
.movedata-string {
padding-bottom: 0.2em;
}
/* tab column for notes toggle */
.movedata-tab {
display: flex;
justify-self:stretch;
flex-direction: column;
text-align: center;
writing-mode: vertical-rl;
align-self: stretch;
border-left: 1px solid #777;
margin-top: -0.4em;
padding-bottom: 0.65em;
}
.movedata-notes {
font-size:0.85em;
display:flex;
justify-self: end;
text-align: end;
border-top: 1px solid #777;
}
/* for display toggle
.movedata-notes { display: none }
*/
/* changing grid layout depending on screen width allowed */
@media (max-width: 900px) {
.movedata {
display: grid;
grid-template-areas: "moveno id id frames" "whiff whiff whiff string" "notes notes notes notes" "tab tab tab tab";
grid-template-columns: 2% 1.3fr 1.45fr 1fr;
grid-template-rows: 80px 80px auto auto;
width: auto;
margin: 0.65em auto 0 auto;
}
.movedata-id {
border-bottom: 1px solid #777;
margin-left: -1.1em;
padding-left: 2em;
text-overflow: ellipsis;
margin-right:-3em;
}
.movedata-name {
font-size: 0.75em;
}
.movedata-input-ctn {
text-indent:-1.2em;
font-size: 1.2em;
margin-top:-0.4em;
}
.movedata-threat {
font-size: 0.85em;
margin-top:1em;
}
.movedata-frames {
margin-top: -0.1em;
font-size: 0.85em;
padding-right: 0.7em;
border-bottom: 1px solid #777;
margin-left: -3em;
}
.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 {
border:0;
}
.movedata-whiff:after {
margin-top:-0.1em;
padding-bottom: 0.3em;
}
.movedata-notes {
padding-left:0;
font-size:0.85em;
}
.movedata-tab {
writing-mode: initial;
border-left: 0;
border-top: 1px solid #777;
margin-top: 0;
}
}
