RPGs3_card_insanity/style.scss

198 lines
5.0 KiB
SCSS

.fjomp_card {
--figure-size: 0.9in;
--figure-size: 1.35in;
--figure-size: 1.5in;
--color-border: MidnightBlue;
--color-bg-figure: white;
--color-bg: PaleTurquoise; // PaleTurquoise;
--color-bg-body: LightCyan; // PaleTurquoise;
--color-bg-frame: PaleTurquoise; // LightSkyBlue;
--color-bg-costbar: SandyBrown; // DarkOrange;
--color-text-title: MidnightBlue;
--color-text-body: black;
--color-text-costbar: white;
--color-shadow-costbar: 0.08em 0 0.05em Maroon,
-0.08em 0 0.05em Maroon,
0 0.08em 0.05em Maroon,
0 -0.08em 0.05em Maroon;
--figure-color: #555;
width: 2.5in;
height: 3.5in;
box-sizing: border-box;
border-radius: 0mm;
border-width: 0.3mm;
border-color: var(--color-border);
border-style: solid;
background-color: var(--color-bg);
overflow: hidden;
font-size: 2.5mm;
font-family: sans-serif;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1.9em var(--figure-size) 2.3em auto;
grid-template-areas:
"symbol title"
"figure figure"
"costbar costbar"
"description description";
header {
font-family: montserrat, sans-serif;
font-style: normal;
font-weight: 200;
grid-area: title;
font-size: 1.8em;
line-height: 1em;
margin-left: -1em;
border-radius: 1mm 1mm 0 0;
text-align: center;
background-color: var(--color-bg-frame);
border-radius: 0;
color: var(--color-text-title);
}
.symbol {
grid-area: symbol;
text-align: center;
background-color: var(--color-bg-frame);
color: var(--color-text-title);
padding-top: 0.6mm;
padding-left: 0.8mm;
white-space: nowrap;
}
figure {
grid-area: figure;
background-color: var(--color-bg-figure);
overflow: hidden;
position: relative;
border-radius: 0;
margin: 0;
.layer {
color: var(--figure-color);
position: absolute;
top:0;right:0;left:0;bottom:0;
height: var(--figure-size);
width: var(--figure-size);
margin: auto;
text-align: center;
>* {
width: 100%;
height: 100%;
}
img {
width: calc(var(--figure-size));
height: calc(var(--figure-size));
object-fit: contain;
}
img.colored {
transform: translateY(-10000px);
filter: drop-shadow(0px 10000px var(--figure-color));
}
.mdi,
.fa,
.oi,
.material-icons.figure {
font-size: calc(var(--figure-size) * 0.9);
line-height: var(--figure-size);
}
.lnr {
font-size: calc(var(--figure-size) * 0.8);
line-height: calc(var(--figure-size) * 0.95);
}
}
}
.playcosts {
grid-area: playcosts;
border-left: solid 0.3mm #ccc;
background-color: var(--color-bg-frame);
color: #444 ;
padding: 0.5mm;
ul {
margin:0;
list-style-type: none;
padding: 0;
li {
}
}
}
.costbar {
grid-area: costbar;
border-radius: 0;
background-color: var(--color-bg-costbar);
color: var(--color-text-costbar);
text-shadow: var(--color-shadow-costbar);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.1em;
section{
font-size: 0.8em;
margin-left: 0.8mm;
margin-right: 0.8mm;
line-height: 0.9em;
}
}
.description {
grid-area: description;
margin: 1mm;
border-radius: 1mm;
background-color: var(--color-bg-body);
color: var(--color-text-body);
font-size: 0.9em;
position: relative;
.markdown {
text-align: center;
table {
margin-top:-0.3em;
margin-left:auto;
margin-right:auto;
th, td {
font-size: 2.5mm; /* user agent style override */
}
}
p + table {
margin-top:-1em;
}
li {
text-align: left;
}
}
ul, ol {
padding-left: 1.5em;
li {
}
}
.bottom {
position: absolute;
bottom:0;
left:0;
right:0;
}
}
}
.fjomp_card.item,
.fjomp_card.figure,
.fjomp_card.repertoire {
--figure-size: 2.4in;
}