Oldmanwang (talk | contribs) No edit summary |
Oldmanwang (talk | contribs) mNo edit summary |
||
(187 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* alternate movedata style */ | /* alternate movedata style */ | ||
/* setting main container */ | /* setting main container */ | ||
.movedata { | .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 2fr 0.725fr 0.25fr; | |||
grid-template-rows: 70px auto; | |||
line-height: 1.2; | |||
align-items: start; | |||
border: 4px solid #950606; | |||
border-radius: 10px; | |||
margin: 0.65em auto 0 auto; | |||
column-gap: 0.7em; | |||
padding-top: 0.15em; | |||
padding-bottom: 0.2em; | |||
width: 770px; | |||
font-size:0.85em; | |||
} | } | ||
/* setting grid areas for grid-template-areas */ | /* setting grid areas for grid-template-areas */ | ||
.movedata-moveno { | .movedata-moveno { | ||
grid-area: moveno; | |||
} | } | ||
.movedata- | .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.45em; | |||
margin-left:-0.1em; | |||
padding:.3em .3em .35em .1em; | |||
width:1.8em; | |||
height:1em; | |||
background:#950606; | |||
border-radius:0.5em 0 0.5em 0; | |||
color:#ffffff; | |||
} | |||
.movedata-id { | .movedata-id { | ||
display: flex; | |||
flex-direction: column; | |||
text-align: start; | |||
align-self: stretch; | |||
padding-top: 0.1em; | |||
margin-left:-0.25em; | |||
} | } | ||
.movedata-threat { | .movedata-threat { | ||
display: flex; | |||
flex-direction: column; | |||
padding-bottom: 0.4em; | |||
margin-top: 0; | |||
text-indent:-1.5em | |||
} | } | ||
.movedata-name { | .movedata-name { | ||
font-size: 0.8em; | |||
font-style:italic; | |||
flex: 1; | |||
margin-top:-0.2em; | |||
} | } | ||
.movedata-target-ctn, | .movedata-target-ctn, | ||
.movedata-damage-ctn { | .movedata-damage-ctn { | ||
font-size: 0.95em; | |||
flex: 1; | |||
padding-top: 0.4em; | |||
} | } | ||
.movedata-input-ctn { | .movedata-input-ctn { | ||
font-size: 1.5em; | |||
text-indent: -1.05em; | |||
} | } | ||
.movedata-damageLead, | .movedata-damageLead, | ||
Line 99: | Line 107: | ||
.movedata-startupRoot, | .movedata-startupRoot, | ||
.movedata-inputLead { | .movedata-inputLead { | ||
opacity: 0.3; | |||
} | } | ||
.movedata-divider { | .movedata-divider { | ||
opacity: 0.5; | |||
} | } | ||
.movedata-string { | |||
.movedata- | display: flex; | ||
flex-direction: column; | |||
text-align: start; | |||
align-self: stretch; | |||
padding-top: 0; | |||
} | } | ||
.movedata-frames { | .movedata-frames { | ||
display: flex; | |||
flex-direction: column; | |||
padding-left: .2em; | |||
text-align: end; | |||
align-self: stretch; | |||
padding-left: .7em; | |||
margin-top: -.4em; | |||
} | } | ||
/* Empty space if parameter undefined */ | |||
.movedata-moveno, | .movedata-moveno, | ||
.movedata-startup-ctn, | .movedata-startup-ctn, | ||
.movedata-block, | .movedata-block, | ||
.movedata-hit, | .movedata-hit, | ||
.movedata-ch, | .movedata-ch, | ||
.movedata-tracking, | |||
.movedata-range, | .movedata-range, | ||
.movedata-recv, | .movedata-recv, | ||
.movedata-crush, | .movedata-crush, | ||
.movedata- | .movedata-screw, | ||
.movedata-wall, | |||
.movedata-floor, | |||
.movedata-combo, | |||
.movedata-jail, | |||
.movedata-leeway, | |||
.movedata-delay, | |||
.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: .7em; | |||
padding-top:.3em; | |||
} | } | ||
.movedata- | .movedata-special { | ||
display: flex; | |||
flex-direction: column; | |||
text-align: end; | |||
align-self: stretch; | |||
padding-right: 0.7em; | |||
padding-top:0.3em; | |||
} | } | ||
.movedata-whiff { | .movedata-whiff { | ||
display: grid; | |||
grid-template-areas: "tracking tracking" "distant special"; | |||
grid-template-columns: 1fr 1fr; | |||
align-self: stretch; | |||
} | } | ||
.movedata-tracking { | .movedata-tracking { | ||
display: grid; | |||
grid-auto-columns: 1fr; | |||
grid-template-areas: "left right"; | |||
align-self: stretch; | |||
} | } | ||
/* sets tracking bars and labels */ | /* sets tracking bars and labels */ | ||
.movedata-tracks { | .movedata-tracks { | ||
overflow: hidden; | |||
} | } | ||
.movedata-tracks-bar { | .movedata-tracks-bar { | ||
height: 4px; | |||
} | } | ||
.movedata-tracks-score, | .movedata-tracks-score, | ||
.movedata-tracks-label { | .movedata-tracks-label { | ||
padding: 0 0.2em; | |||
} | } | ||
.movedata-tracks-label { | .movedata-tracks-label { | ||
grid-column: 1 / -1; | |||
} | } | ||
.movedata-tracks.left { | .movedata-tracks.left { | ||
display: grid; | |||
grid-template-columns: 1fr 1.5em; | |||
align-items: center; | |||
justify-items: end; | |||
text-align: start; | |||
} | } | ||
.movedata-tracks.right { | .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: -.1em; | |||
padding-bottom: .3em; | |||
} | |||
.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: -.1em; | |||
padding-bottom: .3em; | |||
} | |||
.movedata-frames, | |||
.movedata-whiff, | |||
.movedata-string { | |||
padding-bottom: .2em; | |||
} | } | ||
/* tab column for notes toggle */ | /* tab column for notes toggle */ | ||
.movedata-tab { | .movedata-tab { | ||
display: flex; | |||
justify-self:stretch; | |||
flex-direction:column; | flex-direction: column; | ||
text-align: center; | |||
writing-mode: vertical-rl; | |||
align-self: stretch; | |||
border-left: 1px solid #777; | |||
margin-top: -.15em; | |||
padding-bottom: .65em; | |||
} | } | ||
.movedata- | .movedata-notes { | ||
font-size:.85em; | |||
display:flex; | |||
justify-self: end; | |||
text-align: end; | |||
border-top: 1px solid #777; | |||
padding-right:.5em; | |||
} | } | ||
.movedata-notes:empty { | |||
.movedata-notes { | border-top:0; | ||
} | } | ||
/* for display toggle | /* for display toggle | ||
.movedata-notes { display: none } | .movedata-notes { display: none } | ||
*/ | */ | ||
/* changing grid layout depending on screen width allowed */ | /* changing grid layout depending on screen width allowed */ | ||
@media (max-width: | @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: 70px 70px auto auto; | |||
width: auto; | |||
margin: .65em auto 0 auto; | |||
} | |||
.movedata-id { | |||
border-bottom: 1px solid #777; | |||
margin-left: -1.1em; | |||
padding-left: 2em; | |||
text-overflow: ellipsis; | |||
} | |||
.movedata-frames { | |||
margin-top: -.1em; | |||
padding-right: .8em; | |||
margin-top:-.3em; | |||
border-bottom: 1px solid #777; | |||
margin-left: -1.5em; | |||
} | |||
.movedata-whiff { | |||
margin-top: 0; | |||
} | |||
.movedata-string { | |||
line-height: 1.3; | |||
} | |||
.movedata-whiff:before { | |||
border:0; | |||
} | |||
.movedata-whiff:after { | |||
margin-top:0; | |||
padding-bottom:0.1em; | |||
} | |||
.movedata-notes { | |||
padding-left:0; | |||
} | |||
.movedata-tab { | |||
writing-mode: initial; | |||
border-left: 0; | |||
border-top: 1px solid #777; | |||
margin-top: 0; | |||
} | |||
} | } |
Latest revision as of 07:49, 9 February 2021
/* 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 2fr 0.725fr 0.25fr;
grid-template-rows: 70px auto;
line-height: 1.2;
align-items: start;
border: 4px solid #950606;
border-radius: 10px;
margin: 0.65em auto 0 auto;
column-gap: 0.7em;
padding-top: 0.15em;
padding-bottom: 0.2em;
width: 770px;
font-size:0.85em;
}
/* 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.45em;
margin-left:-0.1em;
padding:.3em .3em .35em .1em;
width:1.8em;
height:1em;
background:#950606;
border-radius:0.5em 0 0.5em 0;
color:#ffffff;
}
.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.5em
}
.movedata-name {
font-size: 0.8em;
font-style:italic;
flex: 1;
margin-top:-0.2em;
}
.movedata-target-ctn,
.movedata-damage-ctn {
font-size: 0.95em;
flex: 1;
padding-top: 0.4em;
}
.movedata-input-ctn {
font-size: 1.5em;
text-indent: -1.05em;
}
.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: .2em;
text-align: end;
align-self: stretch;
padding-left: .7em;
margin-top: -.4em;
}
/* Empty space if parameter undefined */
.movedata-moveno,
.movedata-startup-ctn,
.movedata-block,
.movedata-hit,
.movedata-ch,
.movedata-tracking,
.movedata-range,
.movedata-recv,
.movedata-crush,
.movedata-screw,
.movedata-wall,
.movedata-floor,
.movedata-combo,
.movedata-jail,
.movedata-leeway,
.movedata-delay,
.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: .7em;
padding-top:.3em;
}
.movedata-special {
display: flex;
flex-direction: column;
text-align: end;
align-self: stretch;
padding-right: 0.7em;
padding-top:0.3em;
}
.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;
text-align: start;
}
.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: -.1em;
padding-bottom: .3em;
}
.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: -.1em;
padding-bottom: .3em;
}
.movedata-frames,
.movedata-whiff,
.movedata-string {
padding-bottom: .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: -.15em;
padding-bottom: .65em;
}
.movedata-notes {
font-size:.85em;
display:flex;
justify-self: end;
text-align: end;
border-top: 1px solid #777;
padding-right:.5em;
}
.movedata-notes:empty {
border-top:0;
}
/* 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: 70px 70px auto auto;
width: auto;
margin: .65em auto 0 auto;
}
.movedata-id {
border-bottom: 1px solid #777;
margin-left: -1.1em;
padding-left: 2em;
text-overflow: ellipsis;
}
.movedata-frames {
margin-top: -.1em;
padding-right: .8em;
margin-top:-.3em;
border-bottom: 1px solid #777;
margin-left: -1.5em;
}
.movedata-whiff {
margin-top: 0;
}
.movedata-string {
line-height: 1.3;
}
.movedata-whiff:before {
border:0;
}
.movedata-whiff:after {
margin-top:0;
padding-bottom:0.1em;
}
.movedata-notes {
padding-left:0;
}
.movedata-tab {
writing-mode: initial;
border-left: 0;
border-top: 1px solid #777;
margin-top: 0;
}
}