diff options
-rw-r--r-- | play.css | 31 | ||||
-rw-r--r-- | play.html | 1 | ||||
-rw-r--r-- | play.js | 3 |
3 files changed, 21 insertions, 14 deletions
@@ -631,13 +631,12 @@ body.shift .zenobia { background-image: url(images/rival_back.png) } /* PANELS */ .panel { - min-width: 1368px; - max-width: 1636px; + background-color: #444; + max-width: min(calc(100% - 30px), 1636px); margin: 12px auto 36px auto; } .panel_header { - background-color: hsl(0,0%,27%); color: white; user-select: none; font-weight: bold; @@ -646,7 +645,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) } } .panel_body { - background-color: hsl(0,0%,35%); + background-color: #555; display: flex; justify-content: start; flex-wrap: wrap; @@ -664,12 +663,12 @@ body.shift .zenobia { background-image: url(images/rival_back.png) } ) } -.panel_header.p_red { background-color: hsl(354,20%,27%) } -.panel_header.p_blue { background-color: hsl(207,20%,27%) } -.panel_header.p_yellow { background-color: hsl(47,25%,27%) } -.panel_header.p_green { background-color: hsl(99,15%,27%) } +.panel.p_red { background-color: hsl(354,20%,27%) } +.panel.p_blue { background-color: hsl(207,20%,27%) } +.panel.p_yellow { background-color: hsl(47,25%,27%) } +.panel.p_green { background-color: hsl(99,15%,27%) } -#played.p_red { +.panel.p_red #played { background-image: repeating-linear-gradient(135deg, hsl(354,20%,33%), hsl(354,20%,33%) 60px, @@ -678,7 +677,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) } ) } -#played.p_blue { +.panel.p_blue #played { background-image: repeating-linear-gradient(135deg, hsl(207,20%,33%), hsl(207,20%,33%) 60px, @@ -687,7 +686,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) } ) } -#played.p_yellow { +.panel.p_yellow #played { background-image: repeating-linear-gradient(135deg, hsl(47,25%,33%), hsl(47,25%,33%) 60px, @@ -696,7 +695,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) } ) } -#played.p_green { +.panel.p_green #played { background-image: repeating-linear-gradient(135deg, hsl(99,15%,33%), hsl(99,15%,33%) 60px, @@ -757,3 +756,11 @@ body.shift .zenobia { background-image: url(images/rival_back.png) } border: 2px solid #444; opacity: 0.8; } + +/* MOBILE LAYOUT */ + +@media (max-width: 640px) { + .panel_body { + justify-content: center; + } +} @@ -172,7 +172,6 @@ </div> </div> -</div> <div id="played_panel" class="panel"> <div id="played_header" class="panel_header">Played</div> @@ -667,6 +667,7 @@ let ui = { combat_mask: document.getElementById("combat_mask"), discard: document.getElementById("discard"), played_header: document.getElementById("played_header"), + played_panel: document.getElementById("played_panel"), played: document.getElementById("played"), market: document.getElementById("market"), pieces: document.getElementById("pieces"), @@ -1448,7 +1449,7 @@ function on_update() { ui.active_event.replaceChildren() ui.active_event.appendChild(ui.event_cards[view.event]) - ui.played_header.className = "panel_header p_" + PLAYER_CLASS[view.current] + ui.played_panel.className = "panel p_" + PLAYER_CLASS[view.current] ui.played_header.textContent = PLAYER_NAME[view.current] + " Played" ui.played.className = "panel_body p_" + PLAYER_CLASS[view.current] ui.played.replaceChildren() |