Use icons for power action buttons

1 files changed, 12 insertions, 7 deletions

diff --git a/play.css b/play.css
index 0b4186e..bf9dbf7 100644
--- a/play.css
+++ b/play.css
@@ -19,13 +19,22 @@ button span.suit {
 	line-height: 1;
 }
 
+button {
+	height: 30px;
+}
+
 body {
 	background-color: slategray;
 }
 
-#role_Maria_Theresa { background-color: whitesmoke; }
-#role_Frederick { background-color: skyblue; }
-#role_Louis_XV { background-color: salmon; }
+#role_Maria_Theresa { background-color: var(--color-light-austria); }
+#role_Louis_XV { background-color: var(--color-light-france); }
+#role_Frederick {
+	background-image: linear-gradient(60deg,
+		var(--color-light-prussia) 50%,
+		var(--color-light-pragmatic) 70%
+	);
+}
 
 .role.active span { font-weight: bold }
 
@@ -155,10 +164,6 @@ header.your_turn.austria { background-color: var(--color-light-austria); }
 	--color-medium-political: hsl(50, 35%, 60%);
 	--color-medium-discard: hsl(52, 25%, 70%);
 
-	--color-role-louis: hsl(0, 70%, 80%);
-	--color-role-frederick: hsl(210, 80%, 75%);
-	--color-role-maria: hsl(0, 0%, 97%);
-
 	--color-clubs: #0079a1;
 	--color-diamonds: #9d403f;
 	--color-hearts: #ed1c23;