pederbs
43a0e212fc
This changes the layout drastically, pooling stats together in a single black bar on the card This change also adds icons instead of text for certain stats. There is also some cleanup.
199 lines
3.5 KiB
CSS
199 lines
3.5 KiB
CSS
* {
|
|
margin: 0; padding: 0; border: 0;
|
|
}
|
|
|
|
@page {
|
|
size: A4;
|
|
}
|
|
@media print {
|
|
body {
|
|
width: 21cm;
|
|
height: 29.7cm;
|
|
margin-top: 1.2cm;
|
|
margin-left: 1.2cm;
|
|
}
|
|
/*manual alignment ftw*/
|
|
|
|
article:nth-child(9n) {
|
|
margin-bottom: 4.55cm;
|
|
margin-bottom: 1.8cm;
|
|
margin-bottom: 2.93cm;
|
|
margin-bottom: 3.5cm;
|
|
}
|
|
|
|
}
|
|
:root {
|
|
font-family: sans-serif;
|
|
font-size: 3mm;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
article {
|
|
margin: 0.1mm 0.1mm;
|
|
float: left;
|
|
width: 5.6cm;
|
|
height: 8.9cm;
|
|
|
|
display: grid;
|
|
grid-template-rows: 2em 18mm 2.5em auto;
|
|
grid-template-areas:
|
|
"header"
|
|
"figure"
|
|
"bar"
|
|
"info";
|
|
|
|
border-radius: 2mm;
|
|
grid-gap: 1.5mm 1.5mm;
|
|
border-style: solid;
|
|
border-width: 2mm;
|
|
border-color: #4a4a4a;
|
|
background-color: #4a4a4a;
|
|
cursor: pointer;
|
|
}
|
|
article.effects {
|
|
grid-template-columns: 4fr 3fr;
|
|
grid-template-areas:
|
|
"header header"
|
|
"figure effects"
|
|
"bar bar"
|
|
"info info";
|
|
}
|
|
|
|
article >* {
|
|
background-color: #ddd;
|
|
text-align: center;
|
|
line-height: 1.4em;
|
|
padding: 0 1mm;
|
|
border-radius: 1mm;
|
|
}
|
|
|
|
article h1 {
|
|
grid-area: header;
|
|
padding: 1mm 0;
|
|
font-size: 1.2em;
|
|
line-height: 1.1em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
article figure {
|
|
grid-area: figure;
|
|
background: #2f2f2f;
|
|
border-radius: 0;
|
|
margin: -1.5mm 1.5mm;
|
|
overflow: hidden;
|
|
}
|
|
|
|
article figure * {
|
|
color: #999;
|
|
}
|
|
article figure img{
|
|
padding: 1mm 0;
|
|
display: block;
|
|
height: calc(100% - 2mm);
|
|
margin: auto auto;
|
|
}
|
|
article figure img.svg_filter{
|
|
filter:
|
|
brightness(0)
|
|
invert(1)
|
|
opacity(0.5);
|
|
}
|
|
article figure .mdi,
|
|
article figure .fa,
|
|
article figure .material-icons.figure {
|
|
padding: 1mm 0;
|
|
font-size: 19mm;
|
|
line-height: 19mm;
|
|
}
|
|
|
|
article ul {
|
|
grid-area: effects;
|
|
list-style-type: none;
|
|
padding: 1mm 0;
|
|
margin-left: -1.5mm;
|
|
}
|
|
|
|
article section {
|
|
grid-area: bar;
|
|
background-color: #111;
|
|
border-radius: 0;
|
|
margin: 0 -2mm;
|
|
color: #eee;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
}
|
|
article section .cost {
|
|
align-self: center;
|
|
margin: 0 1.5mm;
|
|
line-height: 1.25em;
|
|
}
|
|
article section .costunit,
|
|
article section .power,
|
|
article section .cp,
|
|
article section .gp {
|
|
flex: none;
|
|
padding-top: 1mm;
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
line-height: 0.8em;
|
|
margin: 0 1mm;
|
|
}
|
|
article section >* small {
|
|
font-size: 0.8em;
|
|
line-height: 0.8em;
|
|
}
|
|
|
|
article section .fa,
|
|
article section .mdi,
|
|
article section .material-icons.figure {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
article section .costunit small {
|
|
font-size: 0.5em;
|
|
}
|
|
article section >*:after {
|
|
font-size: 0.5em;
|
|
line-height: 0.8em;
|
|
white-space: pre;
|
|
}
|
|
|
|
article section .power:after { content: "\APOWER";}
|
|
article section .cp:after { content: "\A CP "; }
|
|
article section .gp:after { content: "\AGold"; }
|
|
|
|
|
|
article main {
|
|
padding: 2mm 1mm;
|
|
grid-area: info;
|
|
position: relative;
|
|
font-size: 0.9em;
|
|
}
|
|
article main ol {
|
|
margin-top: 1mm;
|
|
text-align: left;
|
|
padding-left: 5mm;
|
|
}
|
|
article main ol li + li{
|
|
margin-top: 0.5mm;
|
|
}
|
|
article main big{
|
|
font-size: 1.65em;
|
|
}
|
|
article main .bottom {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 2mm;
|
|
left: 0;
|
|
}
|
|
|
|
center.message {
|
|
font-size: 1.3em;
|
|
position: absolute;
|
|
bottom:0;
|
|
width: 100%;
|
|
}
|