Display current and previous trick

1 files changed, 37 insertions, 0 deletions

diff --git a/webapp/src/default.css b/webapp/src/default.css
index 5a84e12..0345118 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -31,6 +31,43 @@ body {
     height: 100vh;
 }
 
+.playing-center-layout {
+    display: grid;
+    grid-template-areas: "current-trick previous-trick";
+    grid-template-rows: 1fr;
+    grid-template-columns: 3fr 1fr;
+}
+
+.current-trick {
+    grid-area: current-trick;
+}
+
+.previous-trick {
+    grid-area: previous-trick;
+}
+
+.trick-layout {
+    display: grid;
+    grid-template-areas: ". top ."
+                         "left . right"
+                         ". bottom .";
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.trick-layout .top {
+    grid-area: top;
+}
+.trick-layout .left {
+    grid-area: left;
+}
+.trick-layout .right {
+    grid-area: right;
+}
+.trick-layout .bottom {
+    grid-area: bottom;
+}
+
 button {
   background: none!important;
   border: none;