diff options
author | Tor Andersson <tor@ccxvii.net> | 2023-10-19 01:58:07 +0200 |
---|---|---|
committer | Tor Andersson <tor@ccxvii.net> | 2023-10-20 19:03:27 +0200 |
commit | 92233e0f8d7334f6d1b8df921fd16bfc5e6324fc (patch) | |
tree | fd0442a9e179f5f6e0356b9c4dccda67c2d6c631 /play.css | |
parent | 467a0502f9c7dd44002ddb75277447971eaf965e (diff) | |
download | red-flag-over-paris-92233e0f8d7334f6d1b8df921fd16bfc5e6324fc.tar.gz |
Mobile layout.
Diffstat (limited to 'play.css')
-rw-r--r-- | play.css | 53 |
1 files changed, 23 insertions, 30 deletions
@@ -41,21 +41,21 @@ body.Versailles header.your_turn { background-color: hsl(199, 45%, 70%); } .panel_grid { display: flex; - flex-wrap: wrap; justify-content: center; - margin: 20px; + min-width: 1500px; + max-width: 1500px; + margin: 20px auto; gap: 20px; } -#final, #hand, #discard, #set_aside, #red_objective, #blue_objective { - min-height: 350px; - min-width: 250px; -} - -#hand_panel { width: clamp(290px, 1100px, 100%) } -body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) } -#final_panel { width: clamp(290px, 560px, 100%) } -#set_aside_panel { width: clamp(290px, 830px, 100%) } +#final, #hand, #discard, #set_aside, #red_objective, #blue_objective { min-height: 350px; } +#hand_panel { min-width: 1100px; } +body.censorship #hand_panel { min-width: 1370px; } +#final_panel { min-width: 560px; } +#set_aside_panel { min-width: 830px; } +#discard_panel { min-width: 290px; } +#red_objective_panel, +#blue_objective_panel { min-width: 290px; max-width: 560px; } #red_objective_header { background-color: hsl(358, 20%, 28%) } #blue_objective_header { background-color: hsl(199, 20%, 26%) } @@ -96,11 +96,22 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) } #tooltip { position: fixed; - z-index: 100; + pointer-events: none; + z-index: 600; right: 240px; top: 60px; } +@media (max-width: 800px) { + #tooltip { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + } +} + /* MAP */ #mapwrap { @@ -400,21 +411,3 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) } .card_52{background-image:url(cards.2x/objective_11.jpg)} .card_53{background-image:url(cards.2x/objective_12.jpg)} } - -/* MOBILE LAYOUT */ - -@media (max-width: 640px) { - #mapwrap { - margin: 0 - } - .panel_grid { - gap: 0; - margin: 0; - } - .panel { - width: 100% !important; - } - .panel_body { - justify-content: center; - } -} |