diff options
Diffstat (limited to 'play.css')
| -rw-r--r-- | play.css | 347 |
1 files changed, 347 insertions, 0 deletions
diff --git a/play.css b/play.css new file mode 100644 index 0000000..969d92c --- /dev/null +++ b/play.css @@ -0,0 +1,347 @@ +main { background-color: dimgray; } +#roles { background-color: gray; } +header { background-color: silver; } +header.your_turn { background-color: orange; } +#role_Red .role_name { background-color: salmon; } +#role_Blue .role_name { background-color: #a0caec; } +#role_Yellow .role_name { background-color: #ffe175; } +#role_Green .role_name { background-color: #80b563; } +#turn_info { background-color: gainsboro; } +.role_vp { float: right; } + +#mapwrap { + width: 2550px; + height: 1650px; + box-shadow: 0px 1px 10px #0008; + margin-bottom: 36px; +} + +#map { + width: 2550px; + height: 1650px; + background-size: cover; + background-repeat: no-repeat; + background-image: url(map75.jpg); + background-color: #e8d792; +} + +#crisis_table { + display: none; + position: absolute; + width: 262px; + height: 356px; + top: 159px; + right: 93px; +} + +#crisis_table.p2 { + display: block; + background-image: url(overlay_2p_75.jpg); +} +#crisis_table.p3 { + display: block; + background-image: url(overlay_3p_75.jpg); +} + +#pieces div { + position: absolute; +} + +#pieces .no_place_governor { + margin-top: 6px; + margin-left: 6px; + border-radius: 0; +} + +/* COUNTERS */ + +.amphitheater, .basilica, .limes { background-color: #efebea; } +.red { background-color: #ed1b2f; } +.blue { background-color: #a0caec; } +.yellow { background-color: #ffe175; } +.green { background-color: #80b563; } +.alamanni { background-color: #c3bc8e; } +.franks { background-color: #9cb4be; } +.goths { background-color: #3a9cd6; } +.nomads { background-color: #f99d1c; } +.sassanids { background-color: #8e5ca6; } +.rival { background-color: #b8b996; } +.militia, .legion { background-color: #ffffff; } +.neutral { background-color: #e3dedc; } + +/* :r !node tools/gencolors.js */ +.amphitheater, .basilica, .limes { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, 1px 2px 4px #0008; } +.red { border-color: #ff5455 #c00000 #c00000 #ff5455; box-shadow: 0 0 0 1px #680000, 1px 2px 4px #0008; } +.blue { border-color: #d5ffff #6e96b6 #6e96b6 #d5ffff; box-shadow: 0 0 0 1px #113854, 1px 2px 4px #0008; } +.yellow { border-color: #fffe92 #c3a634 #c3a634 #fffe92; box-shadow: 0 0 0 1px #553a00, 1px 2px 4px #0008; } +.green { border-color: #ace48f #568837 #568837 #ace48f; box-shadow: 0 0 0 1px #033600, 1px 2px 4px #0008; } +.alamanni { border-color: #f7efc0 #928b5f #928b5f #f7efc0; box-shadow: 0 0 0 1px #393204, 1px 2px 4px #0008; } +.franks { border-color: #cce5ef #6f868f #6f868f #cce5ef; box-shadow: 0 0 0 1px #1d323a, 1px 2px 4px #0008; } +.goths { border-color: #68c6ff #0073ab #0073ab #68c6ff; box-shadow: 0 0 0 1px #002759, 1px 2px 4px #0008; } +.nomads { border-color: #ffcf60 #c56c00 #c56c00 #ffcf60; box-shadow: 0 0 0 1px #610700, 1px 2px 4px #0008; } +.sassanids { border-color: #b17dca #6d3c83 #6d3c83 #b17dca; box-shadow: 0 0 0 1px #2f0042, 1px 2px 4px #0008; } +.rival { border-color: #eaebc7 #888968 #888968 #eaebc7; box-shadow: 0 0 0 1px #323214, 1px 2px 4px #0008; } +.neutral { border-color: #fffefc #a9a4a2 #a9a4a2 #fffefc; box-shadow: 0 0 0 1px #403d3b, 1px 2px 4px #0008; } +.militia { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; } +.legion { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; } +.no_place_governor { border-color: #8e8e8e #505050 #505050 #8e8e8e; box-shadow: 0 0 0 1px #191919, 1px 2px 4px #0008; } + +#legion_1 { background-position: 0px 0px } +#legion_2 { background-position: -55px 0px } +#legion_3 { background-position: -110px 0px } +#legion_4 { background-position: -165px 0px } +#legion_5 { background-position: -220px 0px } +#legion_6 { background-position: -275px 0px } +#legion_7 { background-position: -330px 0px } +#legion_8 { background-position: -385px 0px } +#legion_9 { background-position: -440px 0px } +#legion_10 { background-position: 0px -55px } +#legion_11 { background-position: -55px -55px } +#legion_12 { background-position: -110px -55px } +#legion_13 { background-position: -165px -55px } +#legion_14 { background-position: -220px -55px } +#legion_15 { background-position: -275px -55px } +#legion_16 { background-position: -330px -55px } +#legion_17 { background-position: -385px -55px } +#legion_18 { background-position: -440px -55px } +#legion_19 { background-position: 0px -110px } +#legion_20 { background-position: -55px -110px } +#legion_21 { background-position: -110px -110px } +#legion_22 { background-position: -165px -110px } +#legion_23 { background-position: -220px -110px } +#legion_24 { background-position: -275px -110px } +#legion_25 { background-position: -330px -110px } +#legion_26 { background-position: -385px -110px } +#legion_27 { background-position: -440px -110px } +#legion_28 { background-position: 0px -165px } +#legion_29 { background-position: -55px -165px } +#legion_30 { background-position: -110px -165px } +#legion_31 { background-position: -165px -165px } +#legion_32 { background-position: -220px -165px } +#legion_33 { background-position: -275px -165px } + +.amphitheater, .basilica, .limes { + width: 92px; + height: 46px; + background-size: 92px 46px; + border-radius: 8px; + border-width: 2px; + border-style: solid; +} + +.militia, .legion, +.alamanni, .franks, .goths, .nomads, .sassanids, .rival, +.general, .emperor_turns, .no_place_governor { + width: 55px; + height: 55px; + background-size: 55px 55px; + border-radius: 8px; + border-width: 2px; + border-style: solid; +} + +.governor, .legacy, .legacy_40 { + width: 50px; + height: 50px; + background-size: 50px 50px; + border-radius: 50%; + border-width: 2px; + border-style: solid; +} + +.castra, .quaestor, .mob, .mob_x2, .seat_of_power, .breakaway { + width: 54px; + height: 64px; + background-size: 54px 64px; + background-color: transparent; + box-shadow: none; + filter: drop-shadow(1px 1px 6px #0008); +} + +.legion { + background-size: 900% 400%; +} + + +.no_place_governor { background-image: url(images/no_place_governor.png) } +.legion { background-image: url(images/legion_full.png) } +.legion.reduced { background-image: url(images/legion_reduced.png) } +.amphitheater { background-image: url(images/amphitheater.png) } +.basilica { background-image: url(images/basilica.png) } +.limes { background-image: url(images/limes.png) } +.militia { background-image: url(images/militia.png) } +.alamanni { background-image: url(images/alamanni_active.png) } +.franks { background-image: url(images/franks_active.png) } +.goths { background-image: url(images/goths_active.png) } +.nomads { background-image: url(images/nomads_active.png) } +.sassanids { background-image: url(images/sassanids_active.png) } +.alamanni.inactive { background-image: url(images/alamanni_inactive.png) } +.franks.inactive { background-image: url(images/franks_inactive.png) } +.goths.inactive { background-image: url(images/goths_inactive.png) } +.nomads.inactive { background-image: url(images/nomads_inactive.png) } +.sassanids.inactive { background-image: url(images/sassanids_inactive.png) } +.neutral.governor { background-image: url(images/neutral_governor.png) } + +#ardashir { background-image: url(images/ardashir.png) } +#cniva { background-image: url(images/cniva.png) } +#shapur { background-image: url(images/shapur.png) } +#postumus { background-image: url(images/rival_postumus.png) } +#priest_king { background-image: url(images/rival_priest_king.png) } +#zenobia { background-image: url(images/rival_zenobia.png) } + +.blue.governor { background-image: url(images/blue_governor.png) } +.green.governor { background-image: url(images/green_governor.png) } +.red.governor { background-image: url(images/red_governor.png) } +.yellow.governor { background-image: url(images/yellow_governor.png) } +.blue.legacy { background-image: url(images/blue_legacy.png) } +.green.legacy { background-image: url(images/green_legacy.png) } +.red.legacy { background-image: url(images/red_legacy.png) } +.yellow.legacy { background-image: url(images/yellow_legacy.png) } +.blue.legacy_40 { background-image: url(images/blue_legacy_40.png) } +.green.legacy_40 { background-image: url(images/green_legacy_40.png) } +.red.legacy_40 { background-image: url(images/red_legacy_40.png) } +.yellow.legacy_40 { background-image: url(images/yellow_legacy_40.png) } +.blue.general { background-image: url(images/blue_general.png) } +.green.general { background-image: url(images/green_general.png) } +.red.general { background-image: url(images/red_general.png) } +.yellow.general { background-image: url(images/yellow_general.png) } +.blue.emperor_turns { background-image: url(images/blue_emperor_turns.png) } +.green.emperor_turns { background-image: url(images/green_emperor_turns.png) } +.red.emperor_turns { background-image: url(images/red_emperor_turns.png) } +.yellow.emperor_turns { background-image: url(images/yellow_emperor_turns.png) } + +.castra { background-image: url(images/castra.svg) } +.quaestor { background-image: url(images/quaestor.svg) } +.mob { background-image: url(images/mob.svg) } +.mob_x2 { background-image: url(images/mob_x2.svg) } +.blue.seat_of_power { background-image: url(images/blue_seat_of_power.svg) } +.green.seat_of_power { background-image: url(images/green_seat_of_power.svg) } +.red.seat_of_power { background-image: url(images/red_seat_of_power.svg) } +.yellow.seat_of_power { background-image: url(images/yellow_seat_of_power.svg) } +.blue.breakaway { background-image: url(images/blue_breakaway.svg) } +.green.breakaway { background-image: url(images/green_breakaway.svg) } +.red.breakaway { background-image: url(images/red_breakaway.svg) } +.yellow.breakaway { background-image: url(images/yellow_breakaway.svg) } + +/* CARDS */ + +.card { + width: 250px; + height: 350px; + background-size: 250px 350px; + background-repeat: no-repeat; + border-radius: 16px; + box-shadow: 0 0 0 1px #444, 0 0 4px #000; +} + +.card.event_back{background-image:url(cards.1x/event_back.jpg)} +.card.event_1{background-image:url(cards.1x/event_01.jpg)} +.card.event_2{background-image:url(cards.1x/event_02.jpg)} +.card.event_3{background-image:url(cards.1x/event_03.jpg)} +.card.event_4{background-image:url(cards.1x/event_04.jpg)} +.card.event_5{background-image:url(cards.1x/event_05.jpg)} +.card.event_6{background-image:url(cards.1x/event_06.jpg)} +.card.event_7{background-image:url(cards.1x/event_07.jpg)} +.card.event_8{background-image:url(cards.1x/event_08.jpg)} +.card.event_9{background-image:url(cards.1x/event_09.jpg)} +.card.event_10{background-image:url(cards.1x/event_10.jpg)} +.card.event_11{background-image:url(cards.1x/event_11.jpg)} +.card.event_12{background-image:url(cards.1x/event_12.jpg)} +.card.event_13{background-image:url(cards.1x/event_13.jpg)} +.card.event_14{background-image:url(cards.1x/event_14.jpg)} +.card.event_15{background-image:url(cards.1x/event_15.jpg)} +.card.influence_back{background-image:url(cards.1x/influence_back.jpg)} +.card.influence_m1{background-image:url(cards.1x/influence_m1.jpg)} +.card.influence_m2{background-image:url(cards.1x/influence_m2.jpg)} +.card.influence_m3{background-image:url(cards.1x/influence_m3.jpg)} +.card.influence_m4{background-image:url(cards.1x/influence_m4.jpg)} +.card.influence_p1{background-image:url(cards.1x/influence_p1.jpg)} +.card.influence_p2{background-image:url(cards.1x/influence_p2.jpg)} +.card.influence_p3{background-image:url(cards.1x/influence_p3.jpg)} +.card.influence_p4{background-image:url(cards.1x/influence_p4.jpg)} +.card.influence_s1{background-image:url(cards.1x/influence_s1.jpg)} +.card.influence_s2{background-image:url(cards.1x/influence_s2.jpg)} +.card.influence_s3{background-image:url(cards.1x/influence_s3.jpg)} +.card.influence_s4{background-image:url(cards.1x/influence_s4.jpg)} + +@media (min-resolution:97dpi) { +.card.event_back{background-image:url(cards.2x/event_back.jpg)} +.card.event_1{background-image:url(cards.2x/event_01.jpg)} +.card.event_2{background-image:url(cards.2x/event_02.jpg)} +.card.event_3{background-image:url(cards.2x/event_03.jpg)} +.card.event_4{background-image:url(cards.2x/event_04.jpg)} +.card.event_5{background-image:url(cards.2x/event_05.jpg)} +.card.event_6{background-image:url(cards.2x/event_06.jpg)} +.card.event_7{background-image:url(cards.2x/event_07.jpg)} +.card.event_8{background-image:url(cards.2x/event_08.jpg)} +.card.event_9{background-image:url(cards.2x/event_09.jpg)} +.card.event_10{background-image:url(cards.2x/event_10.jpg)} +.card.event_11{background-image:url(cards.2x/event_11.jpg)} +.card.event_12{background-image:url(cards.2x/event_12.jpg)} +.card.event_13{background-image:url(cards.2x/event_13.jpg)} +.card.event_14{background-image:url(cards.2x/event_14.jpg)} +.card.event_15{background-image:url(cards.2x/event_15.jpg)} +.card.influence_back{background-image:url(cards.2x/influence_back.jpg)} +.card.influence_m1{background-image:url(cards.2x/influence_m1.jpg)} +.card.influence_m2{background-image:url(cards.2x/influence_m2.jpg)} +.card.influence_m3{background-image:url(cards.2x/influence_m3.jpg)} +.card.influence_m4{background-image:url(cards.2x/influence_m4.jpg)} +.card.influence_p1{background-image:url(cards.2x/influence_p1.jpg)} +.card.influence_p2{background-image:url(cards.2x/influence_p2.jpg)} +.card.influence_p3{background-image:url(cards.2x/influence_p3.jpg)} +.card.influence_p4{background-image:url(cards.2x/influence_p4.jpg)} +.card.influence_s1{background-image:url(cards.2x/influence_s1.jpg)} +.card.influence_s2{background-image:url(cards.2x/influence_s2.jpg)} +.card.influence_s3{background-image:url(cards.2x/influence_s3.jpg)} +.card.influence_s4{background-image:url(cards.2x/influence_s4.jpg)} +} + +.influence_m1 + .influence_m1 { margin-left: -180px; } +.influence_p1 + .influence_p1 { margin-left: -180px; } +.influence_s1 + .influence_s1 { margin-left: -180px; } +.influence_m2 + .influence_m2 { margin-left: -180px; } +.influence_p2 + .influence_p2 { margin-left: -180px; } +.influence_s2 + .influence_s2 { margin-left: -180px; } +.influence_m3 + .influence_m3 { margin-left: -180px; } +.influence_p3 + .influence_p3 { margin-left: -180px; } +.influence_s3 + .influence_s3 { margin-left: -180px; } +.influence_m4 + .influence_m4 { margin-left: -180px; } +.influence_p4 + .influence_p4 { margin-left: -180px; } +.influence_s4 + .influence_s4 { margin-left: -180px; } + +/* PANELS */ + +.panel { + min-width: 1368px; + max-width: 1636px; + margin: 12px auto 36px auto; + background-color: #555; +} + +.panel_header { + background-color: #444; + color: white; + user-select: none; + font-weight: bold; + text-align: center; + padding: 3px 1em; +} + +.panel_body { + display: flex; + justify-content: start; + flex-wrap: wrap; + padding: 18px; + gap: 18px; +} + +#action_body { + display: block; +} + +.action_row { + display: flex; + flex-wrap: wrap; + margin: 8px; +} + |