RogerDodger (talk | contribs) No edit summary |
RogerDodger (talk | contribs) No edit summary |
||
(11 intermediate revisions by 2 users not shown) | |||
Line 7: | Line 7: | ||
.movedata { | .movedata { | ||
display: grid; | display: grid; | ||
grid-template-areas: " | position: relative; | ||
grid-template-areas: "labels threat frames notes"; | |||
grid-template-columns: 22% 10% 36% 1fr; | grid-template-columns: 22% 10% 36% 1fr; | ||
line-height: initial; | line-height: initial; | ||
Line 25: | Line 26: | ||
margin-top: 0.8em; | margin-top: 0.8em; | ||
text-align: center; | text-align: center; | ||
} | |||
.movedata-id { | |||
display: none; | |||
} | |||
@supports (writing-mode: vertical-rl) { | |||
.movedata-id { | |||
position: absolute; | |||
font-size: 1em; | |||
white-space: nowrap; | |||
left: -1.2em; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
writing-mode: vertical-rl; | |||
} | |||
.movedata:hover .movedata-id { | |||
display: block; | |||
} | |||
} | } | ||
Line 33: | Line 54: | ||
} | } | ||
.movedata- | .movedata-labels { grid-area: labels; } | ||
.movedata-frames { grid-area: frames; } | .movedata-frames { grid-area: frames; } | ||
.movedata-threat { grid-area: threat; } | .movedata-threat { grid-area: threat; } | ||
Line 41: | Line 62: | ||
.movedata-hit { grid-area: hit; } | .movedata-hit { grid-area: hit; } | ||
.movedata-ch { grid-area: ch; } | .movedata-ch { grid-area: ch; } | ||
.movedata-startup | .movedata-startup { grid-area: startup; } | ||
.movedata-recv { grid-area: recv; } | .movedata-recv { grid-area: recv; } | ||
.movedata-tot { grid-area: tot; } | |||
.movedata-tracks.left { grid-area: left; } | .movedata-tracks.left { grid-area: left; } | ||
.movedata-tracks.right { grid-area: right; } | .movedata-tracks.right { grid-area: right; } | ||
.movedata- | .movedata-labels { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
Line 87: | Line 107: | ||
"left left left right right right" | "left left left right right right" | ||
"block block hit hit ch ch" | "block block hit hit ch ch" | ||
"startup startup | "startup startup tot tot recv recv"; | ||
} | } | ||
Line 103: | Line 123: | ||
.movedata-tracks { | .movedata-tracks { | ||
font-size: 0.7em; | font-size: 0.7em; | ||
overflow: hidden; | |||
} | } | ||
.movedata-tracks-bar { | .movedata-tracks-bar { | ||
height: | height: 2px; | ||
} | } | ||
.movedata-tracks-score, | .movedata-tracks-score, | ||
.movedata-tracks-label { | .movedata-tracks-label { | ||
padding: 0 0. | padding: 0 0.2em; | ||
} | } | ||
Line 134: | Line 154: | ||
.movedata-tracks.left .movedata-tracks-score { justify-self: 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-score { justify-self: end; } | ||
.movedata-tracks.right .movedata-tracks-label { text-align: start; } | |||
.movedata-hit, | .movedata-hit, | ||
Line 144: | Line 166: | ||
.movedata-startup, | .movedata-startup, | ||
.movedata- | .movedata-recv, | ||
.movedata- | .movedata-tot { | ||
align-self: start; | align-self: start; | ||
margin-top: 0.2em; | margin-top: 0.2em; | ||
} | } | ||
Line 158: | Line 176: | ||
.movedata-inputLead { | .movedata-inputLead { | ||
opacity: .3; | opacity: .3; | ||
} | |||
.movedata-startupRoot { | |||
display: none; | |||
} | } | ||
Line 171: | Line 193: | ||
margin-left: 0.5em; | margin-left: 0.5em; | ||
text-indent: -0.5em; | text-indent: -0.5em; | ||
} | |||
.movedata-notes .plainlist .movedata-icon { | |||
display: inline-block; | |||
text-indent: 0; | |||
} | } | ||
Line 181: | Line 208: | ||
.movedata { | .movedata { | ||
grid-template-areas: | grid-template-areas: | ||
" | "labels labels" | ||
"threat frames" | "threat frames" | ||
"notes notes"; | "notes notes"; | ||
Line 188: | Line 215: | ||
} | } | ||
.movedata- | .movedata-labels { | ||
flex-direction: column-reverse; | flex-direction: column-reverse; | ||
} | } | ||
.movedata-input-ctn { | .movedata-input-ctn { | ||
margin-left: 0.6em; | |||
} | } | ||
Line 203: | Line 230: | ||
text-align: end; | text-align: end; | ||
border: none; | border: none; | ||
} | |||
.movedata .movedata-icon { | |||
border-left-width: 0 !important; | |||
border-right-width: 0.5em !important; | |||
padding-left: 0 !important; | |||
padding-right: 0.2em; | |||
} | } | ||
} | } |
Latest revision as of 02:58, 30 October 2023
/*
* base movedata style
*
* name above input, in damage row
*/
.movedata {
display: grid;
position: relative;
grid-template-areas: "labels threat frames notes";
grid-template-columns: 22% 10% 36% 1fr;
line-height: initial;
align-items: center;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #777;
padding: 0.2em 0;
gap: 0 0.2em;
}
.movedata p {
margin: 0;
}
.movedata {
margin-top: 0.8em;
text-align: center;
}
.movedata-id {
display: none;
}
@supports (writing-mode: vertical-rl) {
.movedata-id {
position: absolute;
font-size: 1em;
white-space: nowrap;
left: -1.2em;
top: 50%;
transform: translateY(-50%);
writing-mode: vertical-rl;
}
.movedata:hover .movedata-id {
display: block;
}
}
/* link rel="mw-deduplicated-inline-style" is inserted above the transclude */
.movedata + .movedata,
.movedata + link + .movedata {
margin-top: 0;
}
.movedata-labels { grid-area: labels; }
.movedata-frames { grid-area: frames; }
.movedata-threat { grid-area: threat; }
.movedata-notes { grid-area: notes; }
.movedata-block { grid-area: block; }
.movedata-hit { grid-area: hit; }
.movedata-ch { grid-area: ch; }
.movedata-startup { grid-area: startup; }
.movedata-recv { grid-area: recv; }
.movedata-tot { grid-area: tot; }
.movedata-tracks.left { grid-area: left; }
.movedata-tracks.right { grid-area: right; }
.movedata-labels {
display: flex;
flex-direction: column;
padding-left: 0.2em;
text-align: start;
}
.movedata-name {
font-size: 0.75em;
}
.movedata-input-ctn {
font-size: 1.7em;
display: flex;
flex-flow: row nowrap;
}
.movedata-input-ctn:after {
content: "";
align-self: center;
flex-basis: 0px;
flex-grow: 1;
margin-left: 0.2em;
border-top: 1px solid #777;
}
.movedata-threat {
display: grid;
gap: 0.2em 0;
grid-auto-flow: row;
}
.movedata-frames {
display: grid;
grid-auto-columns: 1fr;
grid-template-areas:
"left left left right right right"
"block block hit hit ch ch"
"startup startup tot tot recv recv";
}
.movedata-frames:before {
content: " ";
display: block;
height: 0px;
width: 100%;
grid-column: 1 / -1;
grid-row: 2;
align-self: end;
border-bottom: 1px dotted #777;
}
.movedata-tracks {
font-size: 0.7em;
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-hit,
.movedata-block,
.movedata-ch {
align-self: end;
margin-bottom: 0.25em;
}
.movedata-startup,
.movedata-recv,
.movedata-tot {
align-self: start;
margin-top: 0.2em;
}
.movedata-damageLead,
.movedata-targetLead,
.movedata-inputLead {
opacity: .3;
}
.movedata-startupRoot {
display: none;
}
.movedata-notes {
align-self: stretch;
text-align: start;
border-left: 1px solid #777;
padding: 0 0.2em;
}
.movedata-input-ctn,
.movedata-notes li {
margin-left: 0.5em;
text-indent: -0.5em;
}
.movedata-notes .plainlist .movedata-icon {
display: inline-block;
text-indent: 0;
}
/*
* running out of space around here
* the "Damage" label overflows at ~660px
* so move to more vertical layout
*/
@media (max-width: 680px) {
.movedata {
grid-template-areas:
"labels labels"
"threat frames"
"notes notes";
grid-template-columns: 1fr 3fr;
border: none;
}
.movedata-labels {
flex-direction: column-reverse;
}
.movedata-input-ctn {
margin-left: 0.6em;
}
.movedata-name {
margin-bottom: 0.2em;
}
.movedata-notes {
text-align: end;
border: none;
}
.movedata .movedata-icon {
border-left-width: 0 !important;
border-right-width: 0.5em !important;
padding-left: 0 !important;
padding-right: 0.2em;
}
}