diff options
Diffstat (limited to 'play.css')
| -rw-r--r-- | play.css | 545 |
1 files changed, 244 insertions, 301 deletions
@@ -1,62 +1,5 @@ -main { background-color: slategray; } -header { background-color: silver; } -aside { background-color: #f5e8d7; } -body.America header.your_turn { background-color: skyblue; } -body.Britain header.your_turn { background-color: salmon; } -#role_Britain { background-color: salmon; } -#role_America { background-color: skyblue; } - -#log > div { padding-left: 20px; text-indent: -12px; } - -#log .h1 { - background-color: tan; - font-weight: bold; - text-align: center; - padding: 3px; -} - -#log .h2 { - background-color: tan; - text-align: center; - padding: 1px; -} - -#log .h1, #log .h2 { - border-top: 1px solid black; - border-bottom: 1px solid black; -} - -#log .h2.american { background-color: skyblue; } -#log .h2.british { background-color: salmon; } - -#log .card_tip:hover { text-decoration: dotted underline; } - -:root { - --piece-shadow: 1px 1px 4px #0008; -} - -aside { - width: 230px; -} - -#turn_info { -} - -#turn_info { - background-color: tan; -} - -#turn_info .card { - margin: 5px auto; -} - -.hand { - margin: 15px; - display: flex; - flex-wrap: wrap; - justify-content: center; - min-height: 370px; - gap: 15px; +main { + background-color: slategray; } #tooltip { @@ -72,6 +15,18 @@ aside { display: block; } +#mapwrap { + width: 1650px; + height: 2550px; +} + +#map { + width: 1650px; + height: 2550px; + background-size: 1650px 2550px; + box-shadow: 1px 1px 8px #0008; +} + @media (max-width: 800px) { #tooltip { top: 0; @@ -94,64 +49,80 @@ aside { #popup li.title { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } #popup li.disabled { display: none } -/* MAP WITH MARKERS, CUs, LEADERS, AND SPACES */ +#popup li.title { + background-color: moccasin; +} +/* SPACES */ -#mapwrap { - width: 1650px; - height: 2550px; +.space { + position: absolute; + border: 5px solid transparent; } -#map { - width: 1650px; - height: 2550px; - background-size: 1650px 2550px; - box-shadow: 1px 1px 8px #0008; +.space.regular { + border-radius: 50%; +} + +.space.fortified_port { + transform: rotate(45deg); } -#map.hide_markers > div { - visibility: hidden; +.space.sea { + border-radius: 12px; +} + +.space.action { + border-color: white; + box-shadow: 0 0 2px 1px #000c, inset 0 0 2px 1px #000c; +} + +.space.selected { + border-color: aqua; + box-shadow: 0 0 2px 1px #000c, inset 0 0 2px 1px #000c; } +.space.action.Canada { background-color: #e4795080 } +.space.action.NY { background-color: #52954680 } +.space.action.NH { background-color: #ded36380 } +.space.action.MA { background-color: #6e407a80 } +.space.action.CT { background-color: #d6b5be80 } +.space.action.RI { background-color: #31a9d080 } +.space.action.PA { background-color: #64408980 } +.space.action.NJ { background-color: #ca4d5b80 } +.space.action.MD { background-color: #e5a02380 } +.space.action.DE { background-color: #dcca8780 } +.space.action.VA { background-color: #409d8280 } +.space.action.NC { background-color: #d9819480 } +.space.action.SC { background-color: #ffe05d80 } +.space.action.GA { background-color: #6d9ab480 } + /* MARKERS */ .marker { position: absolute; background-size: 100%; border: 1px solid black; - box-shadow: var(--piece-shadow); -} - -.marker.turn { - width: 55px; - height: 55px; -} - -.marker.french-alliance { - width: 55px; - height: 55px; + box-shadow: 1px 1px 4px #0008; } -.marker.congress { +.marker.large { width: 55px; height: 55px; } -.marker.french-navy { +.marker.tall { width: 64px; height: 130px; } -.marker.control { +.marker.small { width: 45px; height: 45px; - visibility: hidden; } -.marker.control.british { visibility: visible; } -.marker.control.american { visibility: visible; } - -.pc { +.marker.pc { + pointer-events: none; border: none; box-shadow: none; width: 58px; @@ -159,130 +130,101 @@ aside { filter: drop-shadow(1px 1px 2px #0008); } -.cu { - width: calc(60px - 6px); - height: 60px; - line-height: 50px; - padding-left: 6px; - font-size: 30px; - color: white; - text-shadow: 0px 0px 3px black; +.marker.cu { + pointer-events: none; + width: calc(60px - 8px - 8px); + height: calc(60px - 14px - 18px); + line-height: 28px; + padding: 14px 8px 18px 8px; + font-size: 28px; font-weight: bold; + color: white; + text-shadow: + -1px -1px 2px #0008, + 1px 1px 2px #0008, + -1px 1px 2px #0008, + 1px -1px 2px #0008 + ; border-radius: 50%; } - -.general.tall { - width: 64px; - height: 130px; -} - -.general.small { - width: 45px; - height: 45px; +.general.action { + box-shadow: 0 0 0 3px yellow, 0 0 2px 4px black; } -.general.offmap { - display: none; +.general.selected { + box-shadow: 0 0 0 3px aqua, 0 0 2px 4px black; } -.general.british.action, .general.british.selected { box-shadow: 0 0 5px 5px white; } -.general.american.action, .general.american.selected { box-shadow: 0 0 5px 5px white; } -.general.french.action, .general.french.selected { box-shadow: 0 0 5px 5px white; } -.general { z-index: 2; } -.general:hover { z-index: 3; } -.general.selected { z-index: 4; } -.marker.congress { z-index: 5 } -.cu { z-index: 1; } -.space { z-index: 6; } +/* CARDS */ -.space { - position: absolute; - border: 7px solid transparent; - display: none; -} -.space.enabled { - display: block; - cursor: pointer; - border: 7px solid transparent; - box-shadow: 0 0 0 4px white, inset 0 0 0 2px white; -} -.space.regular-space { - border-radius: 100px; -} -.space.fortified-port { - transform: rotate(45deg); -} -.space.blockade { - border-radius: 15px; - border: 7px solid white; - box-shadow: none; -} -.space.highlight { - cursor: pointer; - display: block; +#last_played { + margin: 4px auto; } -/* CARDS */ +#hand { + display: flex; + flex-wrap: wrap; + justify-content: center; + min-height: 352px; + padding: 12px; + gap: 12px; + margin: 24px 0; +} .card { width: 250px; height: 350px; - background-size: 100%; border-radius: 16px; + background-size: 100%; border: 1px solid black; - box-shadow: var(--piece-shadow); - display: none; + box-shadow: 1px 1px 4px #0008; } -#turn_info .card { - width: 125px; - height: 175px; - border-radius: 8px; -} - -.card.show { - display: block; -} - -#tooltip.card { - background-position: center; - background-size: 500px 700px; - width: 372px; - height: 524px; - border-radius: 20px; +.card.shrink { + width: 187px; + height: 262px; + border-radius: 12px; } #war_ends { - left:1073px; - top:1647px; - position:absolute; - width: 187px; - height: 262px; - transform: rotate(90deg); - background-size: 187px 262px; + position: absolute; + left: 1034px; + top: 1684px; + + width: 262px; + height: 187px; border-radius: 12px; - display: none; + background-size: 100%; border: 1px solid black; + box-shadow: 1px 1px 4px #0008; + + display: none; } + #war_ends.year_1779 { display: block; } #war_ends.year_1780 { display: block; } #war_ends.year_1781 { display: block; } #war_ends.year_1782 { display: block; } #war_ends.year_1783 { display: block; } -#played_british_reinforcements { left: 909px; } -#played_american_reinforcements_1 { left: 1142px; } -#played_american_reinforcements_2 { left: 1375px; } .reinforcements { - position:absolute; + position: absolute; top: 1922px; + width: 187px; height: 262px; border-radius: 12px; - display: none; border: 1px solid black; + box-shadow: 1px 1px 4px #0008; + + display: none; } + +#played_british_reinforcements { left: 909px; } +#played_american_reinforcements_1 { left: 1142px; } +#played_american_reinforcements_2 { left: 1375px; } + .reinforcements.ops_1 { display: block; } .reinforcements.ops_2 { display: block; } .reinforcements.ops_3 { display: block; } @@ -291,16 +233,18 @@ aside { #map { background-image: url(map75.jpg); } -.marker.french-navy { background-image: url(markers.1x/french_navy_tall.png); } +.marker.french_navy { background-image: url(markers.1x/french_navy.png); } +.marker.french_navy.tall { background-image: url(markers.1x/french_navy_tall.png); } .marker.turn { background-image: url(markers.1x/game_turn_regulars.png); } -.marker.turn.no-regulars { background-image: url(markers.1x/game_turn_no_regulars.png); } -.marker.french-alliance { background-image: url(markers.1x/french_alliance.png); } -.marker.french-alliance.european-war { background-image: url(markers.1x/european_war.png); } +.marker.turn.no_regulars { background-image: url(markers.1x/game_turn_no_regulars.png); } +.marker.french_alliance { background-image: url(markers.1x/french_alliance.png); } +.marker.french_alliance.european_war { background-image: url(markers.1x/european_war.png); } .marker.congress { background-image: url(markers.1x/continental_congress.png); } .marker.congress { background-image: url(markers.1x/continental_congress.png); } .marker.control.british { background-image: url(markers.1x/colony_british.png); } .marker.control.american { background-image: url(markers.1x/colony_american.png); } + .cu.american { background-image: url(markers.1x/cu_american.png); } .cu.british { background-image: url(markers.1x/cu_british.png); } .cu.french { background-image: url(markers.1x/cu_french.png); } @@ -336,125 +280,124 @@ aside { .general.small.Cornwallis { background-image: url(markers.1x/general_cornwallis.png); } .general.small.Howe { background-image: url(markers.1x/general_howe.png); } -#war_ends.year_1779 { background-image:url(cards75/WWcard-071.png); } -#war_ends.year_1780 { background-image:url(cards75/WWcard-072.png); } -#war_ends.year_1781 { background-image:url(cards75/WWcard-073.png); } -#war_ends.year_1782 { background-image:url(cards75/WWcard-074.png); } -#war_ends.year_1783 { background-image:url(cards75/WWcard-075.png); } - -.reinforcements.ops_1 { background-image:url(cards75/WWcard-045.png); } -.reinforcements.ops_2 { background-image:url(cards75/WWcard-023.png); } -.reinforcements.ops_3 { background-image:url(cards75/WWcard-001.png); } - -.card_back{background-image:url(cards100/WW-CardBack.png)} -.card_1{background-image:url(cards100/WWcard-001.png)} -.card_2{background-image:url(cards100/WWcard-001.png)} -.card_3{background-image:url(cards100/WWcard-001.png)} -.card_4{background-image:url(cards100/WWcard-001.png)} -.card_5{background-image:url(cards100/WWcard-001.png)} -.card_6{background-image:url(cards100/WWcard-001.png)} -.card_7{background-image:url(cards100/WWcard-001.png)} -.card_8{background-image:url(cards100/WWcard-001.png)} -.card_9{background-image:url(cards100/WWcard-001.png)} -.card_10{background-image:url(cards100/WWcard-001.png)} -.card_11{background-image:url(cards100/WWcard-001.png)} -.card_12{background-image:url(cards100/WWcard-001.png)} -.card_13{background-image:url(cards100/WWcard-001.png)} -.card_14{background-image:url(cards100/WWcard-001.png)} -.card_15{background-image:url(cards100/WWcard-001.png)} -.card_16{background-image:url(cards100/WWcard-001.png)} -.card_17{background-image:url(cards100/WWcard-001.png)} -.card_18{background-image:url(cards100/WWcard-001.png)} -.card_19{background-image:url(cards100/WWcard-001.png)} -.card_20{background-image:url(cards100/WWcard-001.png)} -.card_21{background-image:url(cards100/WWcard-001.png)} -.card_22{background-image:url(cards100/WWcard-001.png)} -.card_23{background-image:url(cards100/WWcard-023.png)} -.card_24{background-image:url(cards100/WWcard-023.png)} -.card_25{background-image:url(cards100/WWcard-023.png)} -.card_26{background-image:url(cards100/WWcard-023.png)} -.card_27{background-image:url(cards100/WWcard-023.png)} -.card_28{background-image:url(cards100/WWcard-023.png)} -.card_29{background-image:url(cards100/WWcard-023.png)} -.card_30{background-image:url(cards100/WWcard-023.png)} -.card_31{background-image:url(cards100/WWcard-023.png)} -.card_32{background-image:url(cards100/WWcard-023.png)} -.card_33{background-image:url(cards100/WWcard-023.png)} -.card_34{background-image:url(cards100/WWcard-023.png)} -.card_35{background-image:url(cards100/WWcard-023.png)} -.card_36{background-image:url(cards100/WWcard-023.png)} -.card_37{background-image:url(cards100/WWcard-023.png)} -.card_38{background-image:url(cards100/WWcard-023.png)} -.card_39{background-image:url(cards100/WWcard-023.png)} -.card_40{background-image:url(cards100/WWcard-023.png)} -.card_41{background-image:url(cards100/WWcard-023.png)} -.card_42{background-image:url(cards100/WWcard-023.png)} -.card_43{background-image:url(cards100/WWcard-023.png)} -.card_44{background-image:url(cards100/WWcard-023.png)} -.card_45{background-image:url(cards100/WWcard-045.png)} -.card_46{background-image:url(cards100/WWcard-045.png)} -.card_47{background-image:url(cards100/WWcard-045.png)} -.card_48{background-image:url(cards100/WWcard-045.png)} -.card_49{background-image:url(cards100/WWcard-045.png)} -.card_50{background-image:url(cards100/WWcard-045.png)} -.card_51{background-image:url(cards100/WWcard-045.png)} -.card_52{background-image:url(cards100/WWcard-045.png)} -.card_53{background-image:url(cards100/WWcard-045.png)} -.card_54{background-image:url(cards100/WWcard-045.png)} -.card_55{background-image:url(cards100/WWcard-045.png)} -.card_56{background-image:url(cards100/WWcard-045.png)} -.card_57{background-image:url(cards100/WWcard-045.png)} -.card_58{background-image:url(cards100/WWcard-045.png)} -.card_59{background-image:url(cards100/WWcard-045.png)} -.card_60{background-image:url(cards100/WWcard-045.png)} -.card_61{background-image:url(cards100/WWcard-045.png)} -.card_62{background-image:url(cards100/WWcard-045.png)} -.card_63{background-image:url(cards100/WWcard-045.png)} -.card_64{background-image:url(cards100/WWcard-045.png)} -.card_65{background-image:url(cards100/WWcard-045.png)} -.card_66{background-image:url(cards100/WWcard-045.png)} -.card_67{background-image:url(cards100/WWcard-067.png)} -.card_68{background-image:url(cards100/WWcard-067.png)} -.card_69{background-image:url(cards100/WWcard-067.png)} -.card_70{background-image:url(cards100/WWcard-070.png)} -.card_71{background-image:url(cards100/WWcard-071.png)} -.card_72{background-image:url(cards100/WWcard-072.png)} -.card_73{background-image:url(cards100/WWcard-073.png)} -.card_74{background-image:url(cards100/WWcard-074.png)} -.card_75{background-image:url(cards100/WWcard-075.png)} -.card_76{background-image:url(cards100/WWcard-076.png)} -.card_77{background-image:url(cards100/WWcard-077.png)} -.card_78{background-image:url(cards100/WWcard-078.png)} -.card_79{background-image:url(cards100/WWcard-079.png)} -.card_80{background-image:url(cards100/WWcard-080.png)} -.card_81{background-image:url(cards100/WWcard-081.png)} -.card_82{background-image:url(cards100/WWcard-082.png)} -.card_83{background-image:url(cards100/WWcard-083.png)} -.card_84{background-image:url(cards100/WWcard-084.png)} -.card_85{background-image:url(cards100/WWcard-085.png)} -.card_86{background-image:url(cards100/WWcard-086.png)} -.card_87{background-image:url(cards100/WWcard-087.png)} -.card_88{background-image:url(cards100/WWcard-088.png)} -.card_89{background-image:url(cards100/WWcard-089.png)} -.card_90{background-image:url(cards100/WWcard-090.png)} -.card_91{background-image:url(cards100/WWcard-091.png)} -.card_92{background-image:url(cards100/WWcard-092.png)} -.card_93{background-image:url(cards100/WWcard-093.png)} -.card_94{background-image:url(cards100/WWcard-094.png)} -.card_95{background-image:url(cards100/WWcard-095.png)} -.card_96{background-image:url(cards100/WWcard-096.png)} -.card_97{background-image:url(cards100/WWcard-097.png)} -.card_98{background-image:url(cards100/WWcard-098.png)} -.card_99{background-image:url(cards100/WWcard-099.png)} -.card_100{background-image:url(cards100/WWcard-100.png)} -.card_101{background-image:url(cards100/WWcard-101.png)} -.card_102{background-image:url(cards100/WWcard-102.png)} -.card_103{background-image:url(cards100/WWcard-103.png)} -.card_104{background-image:url(cards100/WWcard-104.png)} -.card_105{background-image:url(cards100/WWcard-105.png)} -.card_106{background-image:url(cards100/WWcard-106.png)} -.card_107{background-image:url(cards100/WWcard-107.png)} -.card_108{background-image:url(cards100/WWcard-108.png)} -.card_109{background-image:url(cards100/WWcard-109.png)} -.card_110{background-image:url(cards100/WWcard-110.png)} - +#war_ends.year_1779 { background-image:url(cards75/card_7_rot.png); } +#war_ends.year_1780 { background-image:url(cards75/card_8_rot.png); } +#war_ends.year_1781 { background-image:url(cards75/card_9_rot.png); } +#war_ends.year_1782 { background-image:url(cards75/card_10_rot.png); } +#war_ends.year_1783 { background-image:url(cards75/card_11_rot.png); } + +.reinforcements.ops_3 { background-image:url(cards75/card_2.png); } +.reinforcements.ops_2 { background-image:url(cards75/card_3.png); } +.reinforcements.ops_1 { background-image:url(cards75/card_4.png); } + +.card_0{background-image:url(cards100/card_1.png)} +.card_1{background-image:url(cards100/card_2.png)} +.card_2{background-image:url(cards100/card_2.png)} +.card_3{background-image:url(cards100/card_2.png)} +.card_4{background-image:url(cards100/card_2.png)} +.card_5{background-image:url(cards100/card_2.png)} +.card_6{background-image:url(cards100/card_2.png)} +.card_7{background-image:url(cards100/card_2.png)} +.card_8{background-image:url(cards100/card_2.png)} +.card_9{background-image:url(cards100/card_2.png)} +.card_10{background-image:url(cards100/card_2.png)} +.card_11{background-image:url(cards100/card_2.png)} +.card_12{background-image:url(cards100/card_2.png)} +.card_13{background-image:url(cards100/card_2.png)} +.card_14{background-image:url(cards100/card_2.png)} +.card_15{background-image:url(cards100/card_2.png)} +.card_16{background-image:url(cards100/card_2.png)} +.card_17{background-image:url(cards100/card_2.png)} +.card_18{background-image:url(cards100/card_2.png)} +.card_19{background-image:url(cards100/card_2.png)} +.card_20{background-image:url(cards100/card_2.png)} +.card_21{background-image:url(cards100/card_2.png)} +.card_22{background-image:url(cards100/card_2.png)} +.card_23{background-image:url(cards100/card_3.png)} +.card_24{background-image:url(cards100/card_3.png)} +.card_25{background-image:url(cards100/card_3.png)} +.card_26{background-image:url(cards100/card_3.png)} +.card_27{background-image:url(cards100/card_3.png)} +.card_28{background-image:url(cards100/card_3.png)} +.card_29{background-image:url(cards100/card_3.png)} +.card_30{background-image:url(cards100/card_3.png)} +.card_31{background-image:url(cards100/card_3.png)} +.card_32{background-image:url(cards100/card_3.png)} +.card_33{background-image:url(cards100/card_3.png)} +.card_34{background-image:url(cards100/card_3.png)} +.card_35{background-image:url(cards100/card_3.png)} +.card_36{background-image:url(cards100/card_3.png)} +.card_37{background-image:url(cards100/card_3.png)} +.card_38{background-image:url(cards100/card_3.png)} +.card_39{background-image:url(cards100/card_3.png)} +.card_40{background-image:url(cards100/card_3.png)} +.card_41{background-image:url(cards100/card_3.png)} +.card_42{background-image:url(cards100/card_3.png)} +.card_43{background-image:url(cards100/card_3.png)} +.card_44{background-image:url(cards100/card_3.png)} +.card_45{background-image:url(cards100/card_4.png)} +.card_46{background-image:url(cards100/card_4.png)} +.card_47{background-image:url(cards100/card_4.png)} +.card_48{background-image:url(cards100/card_4.png)} +.card_49{background-image:url(cards100/card_4.png)} +.card_50{background-image:url(cards100/card_4.png)} +.card_51{background-image:url(cards100/card_4.png)} +.card_52{background-image:url(cards100/card_4.png)} +.card_53{background-image:url(cards100/card_4.png)} +.card_54{background-image:url(cards100/card_4.png)} +.card_55{background-image:url(cards100/card_4.png)} +.card_56{background-image:url(cards100/card_4.png)} +.card_57{background-image:url(cards100/card_4.png)} +.card_58{background-image:url(cards100/card_4.png)} +.card_59{background-image:url(cards100/card_4.png)} +.card_60{background-image:url(cards100/card_4.png)} +.card_61{background-image:url(cards100/card_4.png)} +.card_62{background-image:url(cards100/card_4.png)} +.card_63{background-image:url(cards100/card_4.png)} +.card_64{background-image:url(cards100/card_4.png)} +.card_65{background-image:url(cards100/card_4.png)} +.card_66{background-image:url(cards100/card_4.png)} +.card_67{background-image:url(cards100/card_5.png)} +.card_68{background-image:url(cards100/card_5.png)} +.card_69{background-image:url(cards100/card_5.png)} +.card_70{background-image:url(cards100/card_6.png)} +.card_71{background-image:url(cards100/card_7.png)} +.card_72{background-image:url(cards100/card_8.png)} +.card_73{background-image:url(cards100/card_9.png)} +.card_74{background-image:url(cards100/card_10.png)} +.card_75{background-image:url(cards100/card_11.png)} +.card_76{background-image:url(cards100/card_12.png)} +.card_77{background-image:url(cards100/card_13.png)} +.card_78{background-image:url(cards100/card_14.png)} +.card_79{background-image:url(cards100/card_15.png)} +.card_80{background-image:url(cards100/card_16.png)} +.card_81{background-image:url(cards100/card_17.png)} +.card_82{background-image:url(cards100/card_18.png)} +.card_83{background-image:url(cards100/card_19.png)} +.card_84{background-image:url(cards100/card_20.png)} +.card_85{background-image:url(cards100/card_21.png)} +.card_86{background-image:url(cards100/card_22.png)} +.card_87{background-image:url(cards100/card_23.png)} +.card_88{background-image:url(cards100/card_24.png)} +.card_89{background-image:url(cards100/card_25.png)} +.card_90{background-image:url(cards100/card_26.png)} +.card_91{background-image:url(cards100/card_27.png)} +.card_92{background-image:url(cards100/card_28.png)} +.card_93{background-image:url(cards100/card_29.png)} +.card_94{background-image:url(cards100/card_30.png)} +.card_95{background-image:url(cards100/card_31.png)} +.card_96{background-image:url(cards100/card_32.png)} +.card_97{background-image:url(cards100/card_33.png)} +.card_98{background-image:url(cards100/card_34.png)} +.card_99{background-image:url(cards100/card_35.png)} +.card_100{background-image:url(cards100/card_36.png)} +.card_101{background-image:url(cards100/card_37.png)} +.card_102{background-image:url(cards100/card_38.png)} +.card_103{background-image:url(cards100/card_39.png)} +.card_104{background-image:url(cards100/card_40.png)} +.card_105{background-image:url(cards100/card_41.png)} +.card_106{background-image:url(cards100/card_42.png)} +.card_107{background-image:url(cards100/card_43.png)} +.card_108{background-image:url(cards100/card_44.png)} +.card_109{background-image:url(cards100/card_45.png)} +.card_110{background-image:url(cards100/card_46.png)} |