main { background-color: dimgray; } #roles { background-color: silver; } header { background-color: silver; } header.your_turn { background-color: orange; } #role_Axis .role_name { background-color: darkseagreen; } #role_Allied .role_name { background-color: tan; } .role_supply { float: right; } #log { background-color: ghostwhite; } #log .h1 { background-color: dimgray; color: ghostwhite; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; } #log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; } #log .h3 { background-color: gainsboro; text-align: center; } #log .h4 { text-decoration: underline; font-style: italic; } #log .axis { background-color: hsl(120, 25%, 75%) } #log .allied { background-color: hsl(35, 45%, 80%) } #log > .i { padding-left: 20px; } #log > .ii { padding-left: 32px; } #log > div > .i { padding-left: 12px; } #log .hex:hover { cursor: pointer; text-decoration: underline; } .action { cursor: pointer; } #log { font-variant-numeric: tabular-nums; } /* CARDS */ .hand { margin: 0 auto 85px auto; padding: 24px; display: flex; flex-wrap: wrap; justify-content: center; min-height: 170px; min-width: 850px; max-width: 2624px; gap: 20px; } @media (max-width: 800px) { .hand { min-width: 2624px; } } .card { background-size: cover; background-repeat: no-repeat; background-color: ivory; width: 124px; height: 170px; border-radius: 8px; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); transition: 100ms; } .card.real { background-image: url(card_real.svg); } .card.dummy { background-image: url(card_dummy.svg); } .card.action:hover { transform: scale(1.1); } /* BATTLE & PURSUIT DIALOGS */ #battle, #pursuit { position: absolute; scroll-margin: 20px; z-index: 200; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); border: 1px solid black; min-width: 524px; /* 6 blocks wide */ min-width: 550px; /* 4.5 hexes wide */ } @media (max-width: 400px) { #battle, #pursuit { min-width: 90vw; min-width: 90dvw; } } /* BATTLE DIALOG */ #battle { background-color: #d6c4a9; background: url(texture_clear.png); } #battle_header { background-color: brown; color: gold } #battle_hits { background-color: #c4ab8b; } #battle_buttons { background-color: #c4ab8b; } #battle_message { background-color: #d6c4a9; } #battle_header { list-style: none; cursor: s-resize; padding: 2px 8px; line-height: 24px; min-height: 24px; text-align: center; font-weight: bold; background-repeat: no-repeat; background-position: 100% 50%; background-image: url(gui_box_maximize.svg); } #battle[open] #battle_header { cursor: n-resize; border-bottom: 1px solid black; background-image: url(gui_box_minimize.svg); } #battle_message { padding: 2px 8px; line-height: 24px; min-height: 24px; text-align: center; border-top: 1px solid black; } #battle_hits { padding: 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; border-bottom: 1px solid black; } #battle_hits .hits_text { width: 24px; } #battle_hits .hits_icon { display: block; vertical-align: middle } .battle_line { margin: 24px; min-height: 60px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } #battle_buttons { padding: 12px; min-height: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; border-top: 1px solid black; } /* PURSUIT FIRE DIALOG */ #pursuit { background-color: #d6c4a9; background: url(texture_mountain.png); } #pursuit_header { background-color: brown; color: gold } #pursuit_hits { background-color: #c4ab8b; } #pursuit_buttons { background-color: #c4ab8b; } #pursuit_message { background-color: #d6c4a9; } #pursuit_header { list-style: none; cursor: s-resize; padding: 2px 8px; line-height: 24px; min-height: 24px; text-align: center; font-weight: bold; background-repeat: no-repeat; background-position: 100% 50%; background-image: url(gui_box_maximize.svg); } #pursuit[open] #pursuit_header { cursor: n-resize; border-bottom: 1px solid black; background-image: url(gui_box_minimize.svg); } #pursuit_hits { padding: 4px; text-align: center; border-bottom: 1px solid black; } #pursuit_message { padding: 2px 8px; line-height: 24px; min-height: 24px; text-align: center; border-top: 1px solid black; } #pursuit_buttons { padding: 12px; min-height: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; border-top: 1px solid black; } /* TABLES */ table { border-collapse: collapse; font-size: 12px; } td.blank { background-color: transparent; border: none } td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; } td { min-width: 16px; height: 19px; } th { background-color: #222; color: oldlace; } td { background-color: oldlace; } table .required_target { background-color: #b8d9ca } table .must_fire_first { background-color: #f7dc68 } table .only_unsupported { background-color: #f0b0af } td span { padding: 0 4px } td img { vertical-align: middle } /* MAP */ #map { background-image: url(map75.jpg); background-size: 2672px 960px; width: 2672px; height: 960px; overflow: clip; box-shadow: 0px 1px 10px rgba(0,0,0,0.5); } @media (min-resolution: 97dpi) { #map { background-image: url(map150.jpg); } } #mapsvg { display: block; position: absolute; } #calendar, #calendar2 { position: absolute; display: flex; top: 24px; left: 1956px; gap: 20px; } .month { visibility: hidden; width: 46px; height: 46px; background-color: #fee0bf; background-color: wheat; font-size: 28px; line-height: 46px; font-weight: bold; text-align: center; border: 2px solid #222; color: #222; } .month.show { visibility: visible; } .month.now { background-color: tan; box-shadow: 0 0 0 4px #fff4; } /* MAP */ svg .hex { stroke-width: 2; } svg .hex.exit { fill: black; fill-opacity: 0.125; } svg .hex.refit.action { stroke: lightskyblue; } svg .hex.action { stroke: ivory; stroke-dasharray: 2 2; stroke-dashoffset: 1; } svg .hex.action.forced_march { stroke: crimson; } svg .hex.selected { stroke: yellow; stroke-dasharray: none; } svg .hex.tip { stroke: yellow; stroke-width: 3; stroke-dasharray: 4 4; } /* HEX CONTROL */ svg .fortress.allied { fill: firebrick; stroke: darkred; } svg .fortress.axis { fill: forestgreen; stroke: darkgreen; } svg .side { stroke-linecap: round; stroke-dasharray: 54 100; stroke-dashoffset: -8; stroke-width: 4; } svg .side.axis_control { stroke: darkgreen; } svg .side.allied_control { stroke: darkred; } body.Allied svg .side.axis_control { stroke: #222 } body.Axis svg .side.allied_control { stroke: #222 } body.Allied svg .side.allied_control { stroke: none } body.Axis svg .side.axis_control { stroke: none } /* SUPPLY LINES */ svg #lines line { pointer-events: none; stroke: none; stroke-width: 6px; stroke-linecap: round; } svg .hex.axis_supply { fill: forestgreen; fill-opacity: 0.4; } svg .hex.allied_supply { fill: firebrick; fill-opacity: 0.4; } svg .hex.axis_supply.allied_supply { fill: blue; fill-opacity: 0.4; } svg #lines line.axis_supply { stroke: darkgreen; } svg #lines line.allied_supply { stroke: darkred; } svg #lines line.axis_supply.allied_supply { stroke: navy; } /* UNITS */ .minefield { position: absolute; pointer-events: none; width: 48px; height: 48px; background-image: url(minefield.svg); opacity: 0.5; } #map .unit { position: absolute; } .unit { background-size: 1000%; background-repeat: no-repeat; border-style: solid; transition: top 200ms, left 200ms, transform 200ms; } .unit { width: 51px; height: 51px; border-width: 4px; } .unit.m { width: 42px; height: 42px; border-width: 4px; } .unit.revealed { background-image: url(units.svg); } #mapwrap.fit .unit.revealed { background-image: url(units-simple.svg); } .unit.axis { background-color: hsl(80, 20%, 60%); border-color: hsl(80, 20%, 50%); box-shadow: 0 0 2px 1px hsl(80, 20%, 20%); } .unit.axis.eliminated, .unit.axis.fired, .unit.axis.moved:not(.disrupted):not(.unsupplied) { border-color: hsl(80, 20%, 40%); } .unit.axis.eliminated:not(.revealed), .unit.axis.fired:not(.revealed), .unit.axis.moved:not(.revealed) { background-color: hsl(80, 20%, 50%); } .unit.allied { background-color: hsl(35, 40%, 60%); border-color: hsl(35, 40%, 50%); box-shadow: 0 0 2px 1px hsl(30, 40%, 20%); } .unit.allied.eliminated, .unit.allied.fired, .unit.allied.moved:not(.disrupted):not(.unsupplied) { border-color: hsl(35, 40%, 40%); } .unit.allied.eliminated:not(.revealed), .unit.allied.fired:not(.revealed), .unit.allied.moved:not(.revealed) { background-color: hsl(35, 40%, 50%); } .unit.moved:not(.revealed) { background-image: url(moved.svg); background-size: 75%; background-position: center bottom; } .unit.eliminated:not(.revealed) { background-image: url(eliminated.svg); background-size: 60%; background-position: center; } .unit.axis.revealed { background-color: #abba8e; } .unit.axis.italian.revealed { background-color: #f9e3b3; } .unit.allied.revealed { background-color: #e4d1ab; } .unit.disrupted { border-color: #222; box-shadow: 0 0 2px 1px black; } .unit.disrupted:not(.revealed) { background-image: url(disrupted.svg); background-size: 75%; background-position: center; } .unit.unsupplied { border-color: #c00; box-shadow: 0 0 2px 1px darkred; } .unit.unsupplied:not(.revealed) { background-image: url(unsupplied.svg); background-size: 75%; background-position: center; } .unit.disrupted.unsupplied { border-color: #222 #c00; } .unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 { border-color: #c00 #222; } .unit.disrupted.unsupplied:not(.revealed) { background-image: url(unsupplied.svg), url(disrupted.svg); background-size: 50%, 50%; background-position: 0% 90%, 90% 10%; } .unit.action { box-shadow: 0 0 0 2px white; } .unit.action.hit { box-shadow: 0 0 0 2px white, 0 0 0 4px black; } .unit.selected { box-shadow: 0 0 0 2px yellow; } .unit.r0 { transform: rotate(0deg); } .unit.r1 { transform: rotate(-90deg); } .unit.r2 { transform: rotate(-180deg); } .unit.r3 { transform: rotate(-270deg); } .unit.r0.hit1 { transform: rotate(-15deg); } .unit.r1.hit1 { transform: rotate(-105deg); } .unit.r2.hit1 { transform: rotate(-195deg); } .unit.r3.hit1 { transform: rotate(-285deg); } .unit.r0.hit2 { transform: rotate(-30deg); } .unit.r1.hit2 { transform: rotate(-120deg); } .unit.r2.hit2 { transform: rotate(-210deg); } .unit.r3.hit2 { transform: rotate(-300deg); } .unit.r0.hit3 { transform: rotate(-45deg); } .unit.r1.hit3 { transform: rotate(-135deg); } .unit.r2.hit3 { transform: rotate(-225deg); } .unit.r3.hit3 { transform: rotate(-315deg); } .unit.u0{background-position:0% 0%} .unit.u1{background-position:11.11111111111111% 0%} .unit.u2{background-position:22.22222222222222% 0%} .unit.u3{background-position:33.33333333333333% 0%} .unit.u4{background-position:44.44444444444444% 0%} .unit.u5{background-position:55.55555555555556% 0%} .unit.u6{background-position:66.66666666666666% 0%} .unit.u7{background-position:77.77777777777777% 0%} .unit.u8{background-position:88.88888888888889% 0%} .unit.u9{background-position:100% 0%} .unit.u10{background-position:0% 11.11111111111111%} .unit.u11{background-position:11.11111111111111% 11.11111111111111%} .unit.u12{background-position:22.22222222222222% 11.11111111111111%} .unit.u13{background-position:33.33333333333333% 11.11111111111111%} .unit.u14{background-position:44.44444444444444% 11.11111111111111%} .unit.u15{background-position:55.55555555555556% 11.11111111111111%} .unit.u16{background-position:66.66666666666666% 11.11111111111111%} .unit.u17{background-position:77.77777777777777% 11.11111111111111%} .unit.u18{background-position:88.88888888888889% 11.11111111111111%} .unit.u19{background-position:100% 11.11111111111111%} .unit.u20{background-position:0% 22.22222222222222%} .unit.u21{background-position:11.11111111111111% 22.22222222222222%} .unit.u22{background-position:22.22222222222222% 22.22222222222222%} .unit.u23{background-position:33.33333333333333% 22.22222222222222%} .unit.u24{background-position:44.44444444444444% 22.22222222222222%} .unit.u25{background-position:55.55555555555556% 22.22222222222222%} .unit.u26{background-position:66.66666666666666% 22.22222222222222%} .unit.u27{background-position:77.77777777777777% 22.22222222222222%} .unit.u28{background-position:88.88888888888889% 22.22222222222222%} .unit.u29{background-position:100% 22.22222222222222%} .unit.u30{background-position:0% 33.33333333333333%} .unit.u31{background-position:11.11111111111111% 33.33333333333333%} .unit.u32{background-position:22.22222222222222% 33.33333333333333%} .unit.u33{background-position:33.33333333333333% 33.33333333333333%} .unit.u34{background-position:44.44444444444444% 33.33333333333333%} .unit.u35{background-position:55.55555555555556% 33.33333333333333%} .unit.u36{background-position:66.66666666666666% 33.33333333333333%} .unit.u37{background-position:77.77777777777777% 33.33333333333333%} .unit.u38{background-position:88.88888888888889% 33.33333333333333%} .unit.u39{background-position:100% 33.33333333333333%} .unit.u40{background-position:0% 44.44444444444444%} .unit.u41{background-position:11.11111111111111% 44.44444444444444%} .unit.u42{background-position:22.22222222222222% 44.44444444444444%} .unit.u43{background-position:33.33333333333333% 44.44444444444444%} .unit.u44{background-position:44.44444444444444% 44.44444444444444%} .unit.u45{background-position:55.55555555555556% 44.44444444444444%} .unit.u46{background-position:66.66666666666666% 44.44444444444444%} .unit.u47{background-position:77.77777777777777% 44.44444444444444%} .unit.u48{background-position:88.88888888888889% 44.44444444444444%} .unit.u49{background-position:100% 44.44444444444444%} .unit.u50{background-position:0% 55.55555555555556%} .unit.u51{background-position:11.11111111111111% 55.55555555555556%} .unit.u52{background-position:22.22222222222222% 55.55555555555556%} .unit.u53{background-position:33.33333333333333% 55.55555555555556%} .unit.u54{background-position:44.44444444444444% 55.55555555555556%} .unit.u55{background-position:55.55555555555556% 55.55555555555556%} .unit.u56{background-position:66.66666666666666% 55.55555555555556%} .unit.u57{background-position:77.77777777777777% 55.55555555555556%} .unit.u58{background-position:88.88888888888889% 55.55555555555556%} .unit.u59{background-position:100% 55.55555555555556%} .unit.u60{background-position:0% 66.66666666666666%} .unit.u61{background-position:11.11111111111111% 66.66666666666666%} .unit.u62{background-position:22.22222222222222% 66.66666666666666%} .unit.u63{background-position:33.33333333333333% 66.66666666666666%} .unit.u64{background-position:44.44444444444444% 66.66666666666666%} .unit.u65{background-position:55.55555555555556% 66.66666666666666%} .unit.u66{background-position:66.66666666666666% 66.66666666666666%} .unit.u67{background-position:77.77777777777777% 66.66666666666666%} .unit.u68{background-position:88.88888888888889% 66.66666666666666%} .unit.u69{background-position:100% 66.66666666666666%} .unit.u70{background-position:0% 77.77777777777777%} .unit.u71{background-position:11.11111111111111% 77.77777777777777%} .unit.u72{background-position:22.22222222222222% 77.77777777777777%} .unit.u73{background-position:33.33333333333333% 77.77777777777777%} .unit.u74{background-position:44.44444444444444% 77.77777777777777%} .unit.u75{background-position:55.55555555555556% 77.77777777777777%} .unit.u76{background-position:66.66666666666666% 77.77777777777777%} .unit.u77{background-position:77.77777777777777% 77.77777777777777%} .unit.u78{background-position:88.88888888888889% 77.77777777777777%} .unit.u79{background-position:100% 77.77777777777777%} .unit.u80{background-position:0% 88.88888888888889%} .unit.u81{background-position:11.11111111111111% 88.88888888888889%} .unit.u82{background-position:22.22222222222222% 88.88888888888889%} .unit.u83{background-position:33.33333333333333% 88.88888888888889%} .unit.u84{background-position:44.44444444444444% 88.88888888888889%} .unit.u85{background-position:55.55555555555556% 88.88888888888889%} .unit.u86{background-position:66.66666666666666% 88.88888888888889%} .unit.u87{background-position:77.77777777777777% 88.88888888888889%} .unit.u88{background-position:88.88888888888889% 88.88888888888889%} .unit.u89{background-position:100% 88.88888888888889%} .unit.u90{background-position:0% 100%} .unit.u91{background-position:11.11111111111111% 100%} .unit.u92{background-position:22.22222222222222% 100%} .unit.u93{background-position:33.33333333333333% 100%}