RPGs3_card_insanity/style.scss

198 lines
5.0 KiB
SCSS
Raw Permalink Normal View History

2019-09-09 23:02:17 +02:00
.fjomp_card {
2019-09-09 22:22:09 +02:00
--figure-size: 0.9in;
2019-10-15 21:20:37 +02:00
--figure-size: 1.35in;
--figure-size: 1.5in;
2020-03-07 02:35:08 +01:00
--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;
2019-09-09 22:22:09 +02:00
width: 2.5in;
height: 3.5in;
box-sizing: border-box;
2019-10-14 21:40:50 +02:00
border-radius: 0mm;
border-width: 0.3mm;
2020-03-07 02:35:08 +01:00
border-color: var(--color-border);
2019-09-09 23:02:17 +02:00
border-style: solid;
2020-03-07 02:35:08 +01:00
background-color: var(--color-bg);
2019-10-06 21:43:37 +02:00
overflow: hidden;
2019-09-09 22:22:09 +02:00
2019-10-06 21:43:37 +02:00
font-size: 2.5mm;
2019-09-09 22:22:09 +02:00
font-family: sans-serif;
display: grid;
2019-10-15 21:20:37 +02:00
grid-template-columns: auto 1fr;
2019-10-20 03:25:33 +02:00
grid-template-rows: 1.9em var(--figure-size) 2.3em auto;
2019-09-09 23:02:17 +02:00
grid-template-areas:
2019-10-15 21:20:37 +02:00
"symbol title"
"figure figure"
"costbar costbar"
"description description";
2019-09-09 22:22:09 +02:00
header {
2020-03-07 02:35:08 +01:00
font-family: montserrat, sans-serif;
font-style: normal;
font-weight: 200;
2019-09-09 22:22:09 +02:00
grid-area: title;
2019-10-06 21:43:37 +02:00
font-size: 1.8em;
2019-09-09 22:22:09 +02:00
line-height: 1em;
2019-10-06 21:43:37 +02:00
margin-left: -1em;
2019-09-09 22:22:09 +02:00
border-radius: 1mm 1mm 0 0;
text-align: center;
2020-03-07 02:35:08 +01:00
background-color: var(--color-bg-frame);
2019-09-09 22:22:09 +02:00
border-radius: 0;
2020-03-07 02:35:08 +01:00
color: var(--color-text-title);
2019-09-09 22:22:09 +02:00
}
2019-10-14 21:40:50 +02:00
.symbol {
grid-area: symbol;
2019-10-06 16:03:07 +02:00
text-align: center;
2020-03-07 02:35:08 +01:00
background-color: var(--color-bg-frame);
color: var(--color-text-title);
2019-10-06 21:43:37 +02:00
padding-top: 0.6mm;
padding-left: 0.8mm;
2019-10-06 16:03:07 +02:00
white-space: nowrap;
}
2019-09-09 22:22:09 +02:00
figure {
grid-area: figure;
2020-03-07 02:35:08 +01:00
background-color: var(--color-bg-figure);
2019-09-09 22:22:09 +02:00
overflow: hidden;
position: relative;
border-radius: 0;
margin: 0;
2019-09-09 23:02:17 +02:00
2019-10-14 21:40:50 +02:00
.layer {
2019-09-11 05:09:42 +02:00
color: var(--figure-color);
2019-09-09 22:22:09 +02:00
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%;
}
2019-09-11 05:09:42 +02:00
img {
2019-10-14 21:40:50 +02:00
width: calc(var(--figure-size));
height: calc(var(--figure-size));
2019-09-19 02:43:21 +02:00
object-fit: contain;
2019-09-11 05:09:42 +02:00
}
img.colored {
transform: translateY(-10000px);
filter: drop-shadow(0px 10000px var(--figure-color));
}
2019-09-09 22:22:09 +02:00
.mdi,
.fa,
2019-09-11 05:09:42 +02:00
.oi,
2019-09-09 22:22:09 +02:00
.material-icons.figure {
font-size: calc(var(--figure-size) * 0.9);
line-height: var(--figure-size);
}
2019-10-14 21:40:50 +02:00
.lnr {
2019-09-09 22:22:09 +02:00
font-size: calc(var(--figure-size) * 0.8);
2019-10-14 21:40:50 +02:00
line-height: calc(var(--figure-size) * 0.95);
2019-09-09 22:22:09 +02:00
}
}
}
2019-10-14 21:40:50 +02:00
.playcosts {
grid-area: playcosts;
border-left: solid 0.3mm #ccc;
2020-03-07 02:35:08 +01:00
background-color: var(--color-bg-frame);
2019-10-14 21:40:50 +02:00
color: #444 ;
2019-09-09 22:22:09 +02:00
padding: 0.5mm;
ul {
2019-10-06 21:43:37 +02:00
margin:0;
2019-09-09 22:22:09 +02:00
list-style-type: none;
padding: 0;
2019-09-09 23:02:17 +02:00
2019-10-20 03:25:33 +02:00
li {
}
2019-09-09 22:22:09 +02:00
}
}
2019-10-06 12:58:50 +02:00
.costbar {
2019-09-09 22:22:09 +02:00
grid-area: costbar;
border-radius: 0;
2020-03-07 02:35:08 +01:00
background-color: var(--color-bg-costbar);
color: var(--color-text-costbar);
text-shadow: var(--color-shadow-costbar);
2019-09-09 22:22:09 +02:00
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
text-align: center;
2019-09-09 23:02:17 +02:00
2019-10-20 03:25:33 +02:00
font-size: 1.1em;
2019-09-09 22:22:09 +02:00
section{
font-size: 0.8em;
2020-03-07 01:30:40 +01:00
margin-left: 0.8mm;
margin-right: 0.8mm;
2019-09-09 22:22:09 +02:00
line-height: 0.9em;
}
}
2019-10-06 12:58:50 +02:00
.description {
2019-09-09 22:22:09 +02:00
grid-area: description;
margin: 1mm;
border-radius: 1mm;
2020-03-07 02:35:08 +01:00
background-color: var(--color-bg-body);
color: var(--color-text-body);
2019-10-20 03:25:33 +02:00
font-size: 0.9em;
2020-03-07 01:30:04 +01:00
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;
}
}
2019-09-09 23:02:17 +02:00
2019-09-09 22:22:09 +02:00
ul, ol {
padding-left: 1.5em;
li {
2019-09-09 23:02:17 +02:00
2019-09-09 22:22:09 +02:00
}
}
2020-03-07 01:29:38 +01:00
.bottom {
position: absolute;
bottom:0;
left:0;
right:0;
}
2019-09-09 22:22:09 +02:00
}
2019-09-09 23:02:17 +02:00
}
2019-09-19 02:43:21 +02:00
2020-03-07 02:35:08 +01:00
.fjomp_card.item,
2019-10-20 03:25:33 +02:00
.fjomp_card.figure,
.fjomp_card.repertoire {
--figure-size: 2.4in;
2019-09-19 02:43:21 +02:00
}