Mobile layout.

1 files changed, 63 insertions, 50 deletions

diff --git a/play.css b/play.css
index b5a87a7..ec67b56 100644
--- a/play.css
+++ b/play.css
@@ -5,7 +5,7 @@ body.France header.your_turn { background-color: lightskyblue; }
 body.Britain header.your_turn { background-color: salmon; }
 #role_France, #log .h2.france { background-color: #bdf; }
 #role_Britain, #log .h2.britain { background-color: #fcb; }
-aside { width: 220px; }
+aside { min-width: 220px; }
 
 :root {
 	--highlight-color: yellow;
@@ -17,6 +17,11 @@ aside { width: 220px; }
 .checked::before { content: "\2714  " }
 .unchecked::before { content: "\2714  "; color:transparent; }
 
+@media (max-width: 600px) {
+	#stack_menu { display: none }
+	#piece_button { display: none }
+}
+
 /* LOG */
 
 #log { background-color: floralwhite; }
@@ -53,11 +58,21 @@ aside { width: 220px; }
 /* CARDS */
 
 .hand {
-	margin: 15px;
+	margin: 10px auto;
+	padding: 15px;
 	display: flex;
+	gap: 20px;
 	flex-wrap: wrap;
 	justify-content: center;
-	min-height: 370px;
+	min-width: calc(242px * 3 + 30px + 20px * 2);
+	max-width: calc(2550px - 30px);
+	min-height: 340px;
+}
+
+@media (max-width: 800px) {
+	.hand {
+		min-width: calc(2550px - 30px);
+	}
 }
 
 .card {
@@ -85,7 +100,6 @@ aside { width: 220px; }
 	transform: translateY(-10px);
 }
 
-.hand .card { margin: 10px; }
 .hand .card { display: none; }
 .hand .card.show { display: block; }
 
@@ -101,11 +115,17 @@ aside { width: 220px; }
 	margin: 0 auto;
 }
 
+@media (max-height: 800px) {
+	.card_info {
+		display: none;
+	}
+}
+
 #tooltip {
 	display: none;
 	pointer-events: none;
 	position: fixed;
-	z-index: 300;
+	z-index: 600;
 	right: 240px;
 	top: 60px;
 }
@@ -114,10 +134,21 @@ aside { width: 220px; }
 	display: block;
 }
 
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+	}
+}
+
 /* CARD LIST DIALOGS */
 
 .card_list_dialog {
 	position: fixed;
+	background-color: floralwhite;
 	width: 300px;
 	border: 1px solid black;
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
@@ -141,8 +172,7 @@ aside { width: 220px; }
 }
 .card_list_body {
 	padding: 5px 10px;
-	background-color: floralwhite;
-	overflow-y: scroll;
+	overflow-y: auto;
 	max-height: 500px;
 }
 .card_list_body div {
@@ -150,29 +180,37 @@ aside { width: 220px; }
 	margin-left: 30px;
 }
 
-#removed { top: 100px; left: 100px; z-index: 98; }
-#discard { top: 100px; left: 425px; z-index: 99; }
+#removed { top: 120px; left: 50px; z-index: 498; }
+#discard { top: 145px; left: 75px; z-index: 499; }
+
+@media (max-width: 400px) {
+	.card_list_dialog {
+		position: static;
+		grid-column: 1;
+		grid-row: 2;
+		width: auto;
+		box-shadow: none;
+		border: none;
+	}
+	.card_list_body {
+		max-height: none;
+	}
+}
 
 /* CARD MENU */
 
 #popup {
-	position: fixed;
-	user-select: none;
-	background-color: white;
-	left: 10px;
-	top: 100px;
-	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
-	z-index: 300;
-	min-width: 20ex;
-	white-space: nowrap;
-	display: none;
-	border: 1px solid black;
+	box-shadow: 2px 2px 4px #0004;
+	min-width: 160px;
+	max-width: 250px;
 }
-#popup div { padding: 3pt 8pt; color: gray; display: none; }
-#popup div.enabled { color: black; display: block; }
-#popup div.enabled:hover { background-color: black; color: white; }
-#popup div.always { display: block; }
-body:not(.shift) #popup #menu_discard { display: none; }
+
+#popup li.title {
+	text-align: center;
+	white-space: normal;
+}
+
+body:not(.shift) #popup li[data-action="discard"] { display: none; }
 
 /* MAP */
 
@@ -615,28 +653,3 @@ body.bevel .unit.french.highlight{box-shadow:0 0 0 1px #29607a,0 0 0 4px var(--h
 body.bevel .leader.selected{box-shadow:0 0 0 3px var(--selected-color)}
 body.bevel .unit.british.selected{box-shadow:0 0 0 3px var(--selected-color)}
 body.bevel .unit.french.selected{box-shadow:0 0 0 3px var(--selected-color)}
-
-/* MOBILE PHONE LAYOUT */
-
-@media (max-width: 640px) {
-	.hand .card {
-		width: 120px;
-		height: 168px;
-		border-radius: 8px;
-	}
-	.hand {
-		min-height: 168px;
-	}
-	#tooltip {
-		top: 10px;
-		right: 10px;
-	}
-	#removed, #discard {
-		position: static;
-		box-shadow: none;
-		border-top: none;
-		width: auto;
-	}
-	#removed { grid-row: 3; }
-	#discard { grid-row: 4; }
-}