Add bidding box component

1 files changed, 51 insertions, 13 deletions

diff --git a/webapp/src/default.css b/webapp/src/default.css
index d2b3a10..d4f291b 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -62,17 +62,55 @@ body {
     content: "♣"
 }
 
-.card .rank-2:after {content: "2";}
-.card .rank-3:after {content: "3";}
-.card .rank-4:after {content: "4";}
-.card .rank-5:after {content: "5";}
-.card .rank-6:after {content: "6";}
-.card .rank-7:after {content: "7";}
-.card .rank-8:after {content: "8";}
-.card .rank-9:after {content: "9";}
-.card .rank-10:after {content: "10";}
-.card .rank-J:after {content: "J";}
-.card .rank-Q:after {content: "Q";}
-.card .rank-K:after {content: "K";}
-.card .rank-A:after {content: "A";}
+.bidding-box {
+    max-width: 250px;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+}
+.bidding-box div {
+    border: 1px solid #000;
+    background-color: #eee;
+    border-radius: 5px;
+    min-width: 30px;
+    padding: 2px;
+    text-align: center;
+}
+.bidding-box div.enabled:hover {
+    background-color: #fcc;
+}
+
+.bidding-box div.disabled {
+    background-color: #aaa;
+}
 
+.bidding-box .suit-spade {
+    color: #000;
+}
+.bidding-box .suit-heart {
+    color: #d00;
+}
+.bidding-box .suit-diamond {
+    color: #d00;
+}
+.bidding-box .suit-club {
+    color: #000;
+}
+.bidding-box .suit-notrump {
+    background-color: #dde;
+}
+
+.bidding-box .suit-spade:after {
+    content: "♠"
+}
+.bidding-box .suit-heart:after {
+    content: "♥"
+}
+.bidding-box .suit-diamond:after {
+    content: "♦"
+}
+.bidding-box .suit-club:after {
+    content: "♣"
+}
+.bidding-box .suit-notrump:after {
+    content: "NT"
+}