RogerDodger (talk | contribs) No edit summary |
RogerDodger (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
.movedata { | .movedata { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: 18% 12% repeat(3, 12%) 1fr; | ||
grid-template-rows: 1fr 1fr; | grid-template-rows: 1fr 1fr; | ||
align-items: center; | |||
border- | border-width: 1px 0; | ||
border-style: solid; | border-style: solid; | ||
border-color: #888; | |||
padding: 0.2em 0; | padding: 0.2em 0; | ||
grid-gap: 0 0.2em; | grid-gap: 0 0.2em; | ||
Line 22: | Line 23: | ||
margin-top: 1em; | margin-top: 1em; | ||
text-align: center; | text-align: center; | ||
} | |||
.movedata + .movedata { | |||
margin-top: -1px; | |||
} | } | ||
.movedata:hover { | .movedata:hover { | ||
background-color: hsla(200, 50%, 96%, 1); | background-color: hsla(200, 50%, 96%, 1); | ||
} | } | ||
Line 71: | Line 72: | ||
width: 100%; | width: 100%; | ||
grid-column: 3 / span 3; | grid-column: 3 / span 3; | ||
grid-row: 1 | grid-row: 1; | ||
align-self: end; | |||
border-bottom: 1px dotted grey; | border-bottom: 1px dotted grey; | ||
} | } | ||
.movedata-notes { | .movedata-notes { | ||
align-self: | align-self: stretch; | ||
line-height: initial; | line-height: initial; | ||
text-align: start; | text-align: start; | ||
border-left: 1px solid #888; | |||
padding: 0 0.2em; | |||
} | } | ||
Line 99: | Line 103: | ||
margin-left: 0.2em; | margin-left: 0.2em; | ||
border-top: 1px solid #888; | border-top: 1px solid #888; | ||
} | |||
@media (max-width: 600px) { | |||
.movedata { | |||
grid-template-areas: | |||
"input input input input" | |||
"damage block hit ch" | |||
"target startup crush recv" | |||
"notes notes notes notes"; | |||
grid-template-rows: repeat(4, auto); | |||
grid-template-columns: 1fr repeat(3, 25%); | |||
border: none; | |||
} | |||
.movedata:before { | |||
grid-row: 2; | |||
grid-column: 2 / -1; | |||
} | |||
.movedata-notes { | |||
text-align: end; | |||
border: none; | |||
} | |||
} | } |
Revision as of 14:00, 21 November 2020
/* CSS placed here will be applied to all skins */
.movedata {
display: grid;
grid-template-columns: 18% 12% repeat(3, 12%) 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
border-width: 1px 0;
border-style: solid;
border-color: #888;
padding: 0.2em 0;
grid-gap: 0 0.2em;
grid-template-areas:
"input damage block hit ch notes"
"input target startup crush recv notes";
}
.movedata p {
margin: 0;
}
.movedata {
margin-top: 1em;
text-align: center;
}
.movedata + .movedata {
margin-top: -1px;
}
.movedata:hover {
background-color: hsla(200, 50%, 96%, 1);
}
.movedata-input-ctn { grid-area: input; }
.movedata-startup-ctn { grid-area: startup;}
.movedata-damage-ctn { grid-area: damage; }
.movedata-target-ctn { grid-area: target; }
.movedata-block { grid-area: block; }
.movedata-hit { grid-area: hit; }
.movedata-ch { grid-area: ch; }
.movedata-clean { grid-area: clean; }
.movedata-crush { grid-area: crush; }
.movedata-recv-ctn { grid-area: recv; }
.movedata-notes { grid-area: notes; }
.movedata-input-ctn {
font-size: 1.7em;
padding-left: 0.2em;
text-align: start;
}
.movedata-damage-ctn { align-self: end; }
.movedata-target-ctn { align-self: start; }
.movedata-damageLead,
.movedata-targetLead,
.movedata-inputLead {
opacity: .3;
}
.movedata-clean,
.movedata-recvLead,
.movedata-startupLead {
display: none;
}
.movedata:before {
content: " ";
display: block;
height: 0px;
width: 100%;
grid-column: 3 / span 3;
grid-row: 1;
align-self: end;
border-bottom: 1px dotted grey;
}
.movedata-notes {
align-self: stretch;
line-height: initial;
text-align: start;
border-left: 1px solid #888;
padding: 0 0.2em;
}
.movedata-input-ctn {
display: flex;
flex-flow: row nowrap;
}
.movedata-input-ctn,
.movedata-target-ctn,
.movedata-damage-ctn {
word-break: break-word;
}
.movedata-input-ctn:after {
content: "";
align-self: center;
flex-basis: 0px;
flex-grow: 1;
margin-left: 0.2em;
border-top: 1px solid #888;
}
@media (max-width: 600px) {
.movedata {
grid-template-areas:
"input input input input"
"damage block hit ch"
"target startup crush recv"
"notes notes notes notes";
grid-template-rows: repeat(4, auto);
grid-template-columns: 1fr repeat(3, 25%);
border: none;
}
.movedata:before {
grid-row: 2;
grid-column: 2 / -1;
}
.movedata-notes {
text-align: end;
border: none;
}
}