RPGs3_card_insanity/style.scss

183 lines
4.0 KiB
SCSS

.fjomp_card {
--figure-size: 0.9in;
width: 2.5in;
height: 3.5in;
box-sizing: border-box;
border-radius: 2mm;
border-width: 2mm;
border-color: black;
border-style: solid;
background-color: #444;
font-size: 3mm;
font-family: sans-serif;
display: grid;
grid-template-columns: 5fr 3fr 2em;
grid-template-rows: 1.5em var(--figure-size) 2.1em auto;
grid-template-areas:
"title title icon"
"figure properties properties"
"costbar costbar costbar"
"description description description";
header {
grid-area: title;
font-size: 1.5em;
line-height: 1em;
margin-top: -1mm;
margin-right: -1em;
border-radius: 1mm 1mm 0 0;
text-align: center;
background-color: #222;
border-radius: 0;
color: white;
}
.icon {
grid-area: icon;
text-align: center;
background-color: #222;
color: white;
white-space: nowrap;
}
figure {
grid-area: figure;
background-color: #333;
overflow: hidden;
position: relative;
border-radius: 0;
margin: 0;
div {
--figure-color: #bbb;
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) * 0.9);
height: calc(var(--figure-size) * 0.9);
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: var(--figure-size);
}
}
}
aside {
grid-area: properties;
border-left: solid 0.3mm black;
background-color: #aaa;
padding: 0.5mm;
ul {
list-style-type: none;
padding: 0;
li{
}
}
}
.costbar {
grid-area: costbar;
border-radius: 0;
background-color: black;
color:white;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
text-align: center;
section{
font-size: 0.8em;
margin-left: 0.5mm;
margin-right: 0.5mm;
line-height: 0.9em;
}
}
.description {
grid-area: description;
margin: 1mm;
border-radius: 1mm;
background-color: #aaa;
ul, ol {
padding-left: 1.5em;
li {
}
}
}
}
.fjomp_card.white {
border-radius: 0mm;
border-width: 0.3mm;
background-color: #fff;
grid-template-rows: 1.6em var(--figure-size) 2.1em auto;
header {
margin-top: 0;
background-color: #ddd;
color: #333;
}
.icon {
grid-area: icon;
background-color: #ddd;
color: #333;
}
figure {
background-color: #fff;
div {
--figure-color: #555;
}
}
aside {
border-left: solid 0.3mm #ccc;
background-color: #ddd;
color: #444 ;
}
.costbar {
background-color: #555;
color: white;
}
.description {
background-color: #ddd;
}
}
.fjomp_card.item {
--figure-size: 1.35in;
--figure-size: 1.5in;
grid-template-columns: 1fr 2em;
grid-template-areas:
"title icon"
"figure figure"
"costbar costbar"
"description description";
aside {
display: none;
}
}