diff options
author | Tor Andersson <tor@ccxvii.net> | 2023-11-20 02:58:24 +0100 |
---|---|---|
committer | Tor Andersson <tor@ccxvii.net> | 2024-01-08 16:36:47 +0100 |
commit | 95b90a9b4c21d6fd0805177d5193a8a62fa217ad (patch) | |
tree | cbbe969cf9b3e392da9ee80e4e67192885a33192 /cards.css | |
parent | ea85d06093090d417d60a01e3bbe637931c4544d (diff) | |
download | table-battles-95b90a9b4c21d6fd0805177d5193a8a62fa217ad.tar.gz |
data processing
Diffstat (limited to 'cards.css')
-rw-r--r-- | cards.css | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/cards.css b/cards.css new file mode 100644 index 0000000..a670221 --- /dev/null +++ b/cards.css @@ -0,0 +1,154 @@ +.card { + position: relative; + grid-template-rows: min-content min-content 1fr min-content min-content; + font-family: "Source Serif"; + font-size: 14px; + line-height: 18px; + width: 250px; + height: 350px; + background-color: #ca8; + color: black; + border: 1px solid black; + border-radius: 12px; + box-shadow: 1px 2px 8px #0008; +} + +.formation { + border-top: 1px solid black; + border-bottom: 1px solid black; + margin: 12px 0; + padding: 6px 30px 6px 0; + text-align: center; + font-size: 16px; + line-height: 16px; +} + +.formation.red { background-color: #e32223; color: white; } +.formation.pink { background-color: #f49899; color: black; } +.formation.blue { background-color: #2482e4; color: white; } +.formation.dkblue { background-color: #44d; color: white; } + +.strength { + position: absolute; + top: 6px; + right: 4px; + background-color: #dadada; + color: black; + border: 2px solid black; + border-width: 4px 1px; + border-radius: 50%; + min-width: 18px; + padding: 0 2px; + height: 32px; + line-height: 32px; + font-size: 18px; + text-align: center; +} + +.dice_area { + position: relative; + font-size: 24px; + line-height: 24px; + text-align: center; + margin: 12px 0; +} + +.dice_area::before { content: " ~ " } +.dice_area::after { content: " ~ " } + +.dice_area .star { + position: absolute; + right: 0px; + top: 4px; + font-size: 24px; + line-height: 24px; + padding: 0 12px; +} + +.action_row { + font-style: italic; + display: grid; + margin: 12px 0; + padding: 0 8px; + grid-template-columns: 1fr 1fr; + gap: 4px; +} + +.action_row > div { + border: 1px solid black; + padding: 2px 4px; +} + +.action_target:empty { + visibility: hidden; +} + +.action_effect:empty { + visibility: hidden; +} + +.action_type { + background-color: #e0855d; + min-height: 18px; +} +.action_type.reaction { + background-color: #d06aa1; +} +.action_requirement { + background-color: #daad5d; + text-align: center; +} +.action_target { + grid-column: 1 / 3; + background-color: #daad5d; + min-height: 18px; + text-align: center; +} +.action_effect { + grid-column: 1 / 3; + background-color: #e3d3c3; + min-height: 36px; +} + +.action_effect:empty { + min-height: 18px; +} + +.flavor { + font-family: "Source Serif SmText"; + margin: 12px 0; + padding: 0 12px; + font-size: 11px; + line-height: 14px; +} + +.reserve { + position: absolute; + font-size: 12px; + line-height: 12px; + bottom: 0px; + left: 0px; + padding: 8px; + width: 234px; + text-align: center; +} + +.card_number { + position: absolute; + font-size: 10px; + line-height: 12px; + bottom: 0px; + right: 0px; + padding: 8px 8px; + opacity: 50%; +} + +.wing_name { + position: absolute; + font-size: 10px; + line-height: 12px; + bottom: 0px; + left: 0px; + padding: 8px 8px; + opacity: 50%; +} |