diff options
Diffstat (limited to 'play.css')
| -rw-r--r-- | play.css | 254 |
1 files changed, 126 insertions, 128 deletions
@@ -38,7 +38,7 @@ header.your_turn { background-color: orange; } width: 180px; height: 280px; border-radius: 12px; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: 0 0 0 1px #444, 1px 1px 4px #0008; transition: 100ms; display: none; } @@ -107,49 +107,41 @@ header.your_turn { background-color: orange; } position: absolute; } -#map svg path.area { +#svgmap path, #svgmap rect +{ fill: green; - stroke: green; - stroke-width: 20px; - fill-opacity: 0.4; - stroke-opacity: 0.8; + stroke-width: 4px; + fill-opacity: 0.5; opacity: 0; } -#map svg #area_France { fill: white; stroke: white; } -#map svg #area_Calais { fill: dodgerblue; stroke: dodgerblue; } -#map svg #area_English_Channel { fill: dodgerblue; stroke: dodgerblue; } -#map svg #area_Irish_Sea { fill: dodgerblue; stroke: dodgerblue; } -#map svg #area_North_Sea { fill: dodgerblue; stroke: dodgerblue; } +#svgmap #area_France { fill: gold; stroke: gold; stroke-width: 8px; } +#svgmap #area_Calais { fill: white; stroke: white; stroke-width: 8px; } +#svgmap #area_Scotland { fill: firebrick; } +#svgmap #area_English_Channel, +#svgmap #area_Irish_Sea, +#svgmap #area_North_Sea { fill: steelblue; } -#map svg path.area.highlight { - cursor: pointer; +#svgmap .where { opacity: 1; + fill: gold; } -#map svg path.area.where { +#svgmap .battle { opacity: 1; - fill: darkslategray; - stroke: darkslategray; + fill: indigo; } -#map svg path.area.where.highlight { - stroke: white; +#svgmap .highlight { + opacity: 1; + cursor: pointer; } -#map svg path.area.tip { +#svgmap .tip { opacity: 1; stroke-opacity: 1; stroke: yellow; - stroke-width: 40; - stroke-dasharray: 80 40; + stroke-dasharray: 8 4; fill: none; } -#map svg path.area.battle { - fill-opacity: 0.6; - stroke-opacity: 0.8; - fill: #600; - stroke-width: 60; - stroke: #700; -} #map.hide_blocks #blocks { visibility: hidden; @@ -163,55 +155,61 @@ body.shift .block.known:hover { z-index: 100; } -#battle > div.block { +#battle > .block { position: relative; } -#blocks > div.block { +#blocks > .block { position: absolute; } -div.block { - border-radius: 6px; - width: 60px; - height: 60px; +.block { + width: 62px; + height: 62px; + background-size: 700% 900%; + background-repeat: no-repeat; + border: 3px solid black; + box-shadow: 0 0 2px 1px #0002; } -div.block { background-size: 700% 900%; background-repeat: no-repeat; } - -div.block { box-shadow: 0px 0px 3px 0px black; } - -div.block.Lancaster { border: 3px solid brown; background-color: indianred; } -div.block.York { border: 3px solid gainsboro; background-color: whitesmoke; } -div.block.Rebel { border: 3px solid dimgray; background-color: gray; } - -div.block.Lancaster.highlight { border-color: white; } -div.block.York.highlight { border-color: white; } -div.block.Rebel.highlight { border-color: white; } +.block.highlight { + cursor: pointer; +} -.hit div.block.highlight { border-color: black; box-shadow: 0 0 3px 0px black; } +.block.Lancaster { + background-color: #b04244; + border-color: #93262d; +} +.block.York { + border-color: #ccc; + background-color: #eee; +} +.block.Rebel { + border-color: #444; + background-color: #555; +} -div.block.Lancaster.selected { border-color: yellow; } -div.block.York.selected { border-color: yellow; } -div.block.Rebel.selected { border-color: yellow; } +.block.highlight { + border-color: white; +} +.block.selected { + border-color: yellow; +} +.hit .block.highlight { + border-color: black; +} -div.block.highlight { cursor: pointer; box-shadow: 0 0 3px 1px white; } -div.block.selected { box-shadow: 0 0 3px 1px yellow; } -div.block.moved { filter: grayscale(50%) brightness(85%); } -div.block.highlight.moved { filter: grayscale(60%) brightness(95%); } +.block.moved { filter: grayscale(50%) brightness(90%); } -/* -div.block.battle { filter: grayscale(80%) brightness(50%) !important } -*/ -div.block.battle { opacity: 0; pointer-events: none; } +.block.battle { opacity: 0; pointer-events: none; } -div.block:hover { z-index: 1; } +.block:hover { z-index: 1; } -div.block.r1 { transform: rotate(-90deg); } -div.block.r2 { transform: rotate(-180deg); } -div.block.r3 { transform: rotate(-270deg); } +.block.r1 { transform: rotate(-90deg); } +.block.r2 { transform: rotate(-180deg); } +.block.r3 { transform: rotate(-270deg); } -div.block { +.block { transition-property: top, left, transform, opacity; transition-duration: 700ms, 700ms, 250ms, 250ms; transition-timing-function: ease, ease, ease, linear; @@ -219,10 +217,10 @@ div.block { /* BATTLE BOARD */ -#battle { background-color: silver; } -#battle_message { background-color: lightsteelblue; } -#battle_header { background-color: steelblue; color: white; } -#FR, #ER { background-color: #acacac; } +#battle_header { background-color: #a03f2c; color: #fff0c0; } +#battle_message { background-color: #e5ddd0; } +#battle { background-color: hsl(52 26% 53%); } +#FR, #ER { background-color: hsl(52 26% 43%); } /* CARD AND BLOCK IMAGES */ @@ -243,65 +241,65 @@ div.block { .known.block{background-image:url(blocks.jpg)} .known.block_11{background-position:0px 0px} -.known.block_12{background-position:-60px 0px} -.known.block_13{background-position:-120px 0px} -.known.block_14{background-position:-180px 0px} -.known.block_15{background-position:-240px 0px} -.known.block_16{background-position:-300px 0px} -.known.block_17{background-position:-360px 0px} -.known.block_21{background-position:0px -60px} -.known.block_22{background-position:-60px -60px} -.known.block_23{background-position:-120px -60px} -.known.block_24{background-position:-180px -60px} -.known.block_25{background-position:-240px -60px} -.known.block_26{background-position:-300px -60px} -.known.block_27{background-position:-360px -60px} -.known.block_31{background-position:0px -120px} -.known.block_32{background-position:-60px -120px} -.known.block_33{background-position:-120px -120px} -.known.block_34{background-position:-180px -120px} -.known.block_35{background-position:-240px -120px} -.known.block_36{background-position:-300px -120px} -.known.block_37{background-position:-360px -120px} -.known.block_41{background-position:0px -180px} -.known.block_42{background-position:-60px -180px} -.known.block_43{background-position:-120px -180px} -.known.block_44{background-position:-180px -180px} -.known.block_45{background-position:-240px -180px} -.known.block_46{background-position:-300px -180px} -.known.block_47{background-position:-360px -180px} -.known.block_51{background-position:0px -240px} -.known.block_52{background-position:-60px -240px} -.known.block_53{background-position:-120px -240px} -.known.block_54{background-position:-180px -240px} -.known.block_55{background-position:-240px -240px} -.known.block_56{background-position:-300px -240px} -.known.block_57{background-position:-360px -240px} -.known.block_61{background-position:0px -300px} -.known.block_62{background-position:-60px -300px} -.known.block_63{background-position:-120px -300px} -.known.block_64{background-position:-180px -300px} -.known.block_65{background-position:-240px -300px} -.known.block_66{background-position:-300px -300px} -.known.block_67{background-position:-360px -300px} -.known.block_71{background-position:0px -360px} -.known.block_72{background-position:-60px -360px} -.known.block_73{background-position:-120px -360px} -.known.block_74{background-position:-180px -360px} -.known.block_75{background-position:-240px -360px} -.known.block_76{background-position:-300px -360px} -.known.block_77{background-position:-360px -360px} -.known.block_81{background-position:0px -420px} -.known.block_82{background-position:-60px -420px} -.known.block_83{background-position:-120px -420px} -.known.block_84{background-position:-180px -420px} -.known.block_85{background-position:-240px -420px} -.known.block_86{background-position:-300px -420px} -.known.block_87{background-position:-360px -420px} -.known.block_91{background-position:0px -480px} -.known.block_92{background-position:-60px -480px} -.known.block_93{background-position:-120px -480px} -.known.block_94{background-position:-180px -480px} -.known.block_95{background-position:-240px -480px} -.known.block_96{background-position:-300px -480px} -.known.block_97{background-position:-360px -480px} +.known.block_12{background-position:-62px 0px} +.known.block_13{background-position:-124px 0px} +.known.block_14{background-position:-186px 0px} +.known.block_15{background-position:-248px 0px} +.known.block_16{background-position:-310px 0px} +.known.block_17{background-position:-372px 0px} +.known.block_21{background-position:0px -62px} +.known.block_22{background-position:-62px -62px} +.known.block_23{background-position:-124px -62px} +.known.block_24{background-position:-186px -62px} +.known.block_25{background-position:-248px -62px} +.known.block_26{background-position:-310px -62px} +.known.block_27{background-position:-372px -62px} +.known.block_31{background-position:0px -124px} +.known.block_32{background-position:-62px -124px} +.known.block_33{background-position:-124px -124px} +.known.block_34{background-position:-186px -124px} +.known.block_35{background-position:-248px -124px} +.known.block_36{background-position:-310px -124px} +.known.block_37{background-position:-372px -124px} +.known.block_41{background-position:0px -186px} +.known.block_42{background-position:-62px -186px} +.known.block_43{background-position:-124px -186px} +.known.block_44{background-position:-186px -186px} +.known.block_45{background-position:-248px -186px} +.known.block_46{background-position:-310px -186px} +.known.block_47{background-position:-372px -186px} +.known.block_51{background-position:0px -248px} +.known.block_52{background-position:-62px -248px} +.known.block_53{background-position:-124px -248px} +.known.block_54{background-position:-186px -248px} +.known.block_55{background-position:-248px -248px} +.known.block_56{background-position:-310px -248px} +.known.block_57{background-position:-372px -248px} +.known.block_61{background-position:0px -310px} +.known.block_62{background-position:-62px -310px} +.known.block_63{background-position:-124px -310px} +.known.block_64{background-position:-186px -310px} +.known.block_65{background-position:-248px -310px} +.known.block_66{background-position:-310px -310px} +.known.block_67{background-position:-372px -310px} +.known.block_71{background-position:0px -372px} +.known.block_72{background-position:-62px -372px} +.known.block_73{background-position:-124px -372px} +.known.block_74{background-position:-186px -372px} +.known.block_75{background-position:-248px -372px} +.known.block_76{background-position:-310px -372px} +.known.block_77{background-position:-372px -372px} +.known.block_81{background-position:0px -434px} +.known.block_82{background-position:-62px -434px} +.known.block_83{background-position:-124px -434px} +.known.block_84{background-position:-186px -434px} +.known.block_85{background-position:-248px -434px} +.known.block_86{background-position:-310px -434px} +.known.block_87{background-position:-372px -434px} +.known.block_91{background-position:0px -496px} +.known.block_92{background-position:-62px -496px} +.known.block_93{background-position:-124px -496px} +.known.block_94{background-position:-186px -496px} +.known.block_95{background-position:-248px -496px} +.known.block_96{background-position:-310px -496px} +.known.block_97{background-position:-372px -496px} |