diff options
Diffstat (limited to 'play.css')
| -rw-r--r-- | play.css | 127 |
1 files changed, 61 insertions, 66 deletions
@@ -23,18 +23,28 @@ body.United_States header.your_turn { background-color: skyblue; } flex-wrap: wrap; min-height: 300px; justify-content: left; - max-width: 2476px; - margin: 15px auto; -} - -.hand .card { - margin: 10px; + max-width: 1620px; + margin: 0 auto; + padding: 15px; + gap: 15px; } .hand_separator { + margin: 0 auto; + max-width: 1650px; border-bottom: 2px dotted gainsboro; } +@media (max-width: 800px) { + .hand, .hand_separator { + min-width: 1650px; + } +} + +@media (max-height: 700px) { + .card_info { display: none } +} + body.Observer #hand_cards { display: none; } body.Observer .hand_separator { display: none; } @@ -53,7 +63,7 @@ body.Observer .hand_separator { display: none; } height: 350px; border-radius: 12px; display: none; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: 1px 1px 5px #0008; } .card.show { @@ -92,9 +102,10 @@ body.Observer .hand_separator { display: none; } padding: 4px; } -#tooltip.card { +#tooltip { + pointer-events: none; position: fixed; - z-index: 100; + z-index: 600; right: 240px; top: 60px; } @@ -102,19 +113,32 @@ body.Observer .hand_separator { display: none; } display: block; } +@media (max-width: 800px) { + #tooltip { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + } +} + /* MAP */ #mapwrap { - box-shadow: 0px 0px 15px rgba(0,0,0,0.8); - width: 2476px; - height: 801px; + box-shadow: 0px 0px 15px #0008; + width: 1650px; + height: 532px; + margin-bottom: 5px; } #map { display: block; - width: 2476px; - height: 801px; + width: 1650px; + height: 532px; background-color: black; + background-image: url(map.jpg); + background-size: 1650px 532px; } svg { @@ -136,7 +160,7 @@ svg circle, .piece { pointer-events: none; background-size: cover; background-repeat: no-repeat; - filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.5)); + filter: drop-shadow(0px 1px 3px #0008); } .piece.highlight { @@ -146,20 +170,20 @@ svg circle, .piece { } .piece.damaged { - filter: brightness(60%) drop-shadow(1px 1px 4px rgba(0,0,0,0.5)); + filter: brightness(60%) drop-shadow(0px 1px 3px #0008); } -.piece.us_frigate { width: 42px; height: 29px; background-image: url("icons/us_frigate.svg"); } -.piece.se_frigate { width: 42px; height: 29px; background-image: url("icons/se_frigate.svg"); } -.piece.tr_frigate { width: 42px; height: 29px; background-image: url("icons/tr_frigate.svg"); } -.piece.us_gunboat { width: 33px; height: 27px; background-image: url("icons/us_gunboat.svg"); } -.piece.tr_corsair { width: 33px; height: 27px; background-image: url("icons/tr_corsair.svg"); } -.piece.al_corsair { width: 33px; height: 27px; background-image: url("icons/al_corsair.svg"); } -.piece.us_marine { width: 21px; height: 21px; background-image: url("icons/us_marine.svg"); } -.piece.ar_infantry { width: 21px; height: 21px; background-image: url("icons/ar_infantry.svg"); } -.piece.tr_infantry { width: 21px; height: 21px; background-image: url("icons/tr_infantry.svg"); } -.piece.gold { width: 40px; height: 40px; background-image: url("icons/gold.png"); } -.piece.marker { width: 50px; height: 50px; border-radius: 50%; background-color: #444; border: 2px solid black; } +.piece.us_frigate { width: 29px; height: 20px; background-image: url("icons/us_frigate.svg"); } +.piece.se_frigate { width: 29px; height: 20px; background-image: url("icons/se_frigate.svg"); } +.piece.tr_frigate { width: 29px; height: 20px; background-image: url("icons/tr_frigate.svg"); } +.piece.us_gunboat { width: 22px; height: 18px; background-image: url("icons/us_gunboat.svg"); } +.piece.tr_corsair { width: 22px; height: 18px; background-image: url("icons/tr_corsair.svg"); } +.piece.al_corsair { width: 22px; height: 18px; background-image: url("icons/al_corsair.svg"); } +.piece.us_marine { width: 16px; height: 16px; background-image: url("icons/us_marine.svg"); } +.piece.ar_infantry { width: 16px; height: 16px; background-image: url("icons/ar_infantry.svg"); } +.piece.tr_infantry { width: 16px; height: 16px; background-image: url("icons/tr_infantry.svg"); } +.piece.gold { width: 28px; height: 28px; background-image: url("icons/gold.png"); } +.piece.marker { width: 34px; height: 34px; border-radius: 50%; background-color: #444; border: 2px solid black; } .harbor { fill-opacity: 0; @@ -196,47 +220,18 @@ svg circle, .piece { /* CARD ACTION POPUP MENU */ -#popup { - position: fixed; - user-select: none; - background-color: gainsboro; - left: 10px; - top: 100px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3); - z-index: 200; - min-width: 20ex; - white-space: nowrap; - display: none; -} -#popup div { padding: 3pt 8pt; color: gray; display: none; } -#popup div.enabled { color: black; display: block; } -#popup div.enabled:hover { background-color: teal; color: white; } -#popup div.always { display: block; } -body.Tripolitania #popup div.tr_always { display: block; } -body.United_States #popup div.us_always { display: block; } +#us_popup, #tr_popup { box-shadow: 0px 8px 16px 0px #0004; } -/* MOBILE PHONE LAYOUT */ +#us_popup { background-color: hsl(207, 50%, 90%) } +#us_popup li.title { background-color: hsl(207, 50%, 66%) } +#us_popup li.action:hover { background-color: hsl(207, 50%, 26%) } -@media (max-width: 640px) { - .hand .card { - width: 125px; - height: 175px; - border-radius: 6px; - } - .hand { - min-height: 125px; - } - .hand_separator { - display: none; - } - #core_cards { - background-color: darkslategray; - } - #tooltip.card { - top: 10px; - right: 10px; - } -} +#tr_popup { background-color: hsl(3, 50%, 90%) } +#tr_popup li.title { background-color: hsl(3, 50%, 71%) } +#tr_popup li.action:hover { background-color: hsl(3, 50%, 31%) } + +#us_popup li[data-action="card_take"].disabled { display: none } +#tr_popup li[data-action="card_take"].disabled { display: none } /* CARD IMAGES */ |