big play rework

2019-10-23 16:11:04 +11:00
parent 82da5da23e
commit 06b987e877
14 changed files with 2817 additions and 205 deletions
@@ -50,31 +50,6 @@ aside {
        }
    }

-    // button.ready:enabled {
-    //     &:hover {
-    //         color: forestgreen;
-    //         border-color: forestgreen;
-    //     }
-
-    //     &:active, &:focus, &.enabled {
-    //         background: forestgreen;
-    //         color: black;
-    //         border-color: forestgreen;
-    //     }
-    // }
-
-    button.ready:enabled {
-        color: forestgreen;
-        border-color: forestgreen;
-
-        &:hover {
-            background: forestgreen;
-            color: black;
-            border-color: forestgreen;
-        }
-    }
-
-
    .timer-container {
        grid-area: timer;

@@ -144,12 +119,6 @@ aside {
    }
 }

-.play-ctrl {
-    .controls {
-        grid-template-rows: 1fr 1fr 1fr 3fr 1fr;
-    }
-}
-
 .abandon:not([disabled]) {
    &:hover {
        color: @red;
@@ -439,10 +439,10 @@
    font-weight: bold;

    color: @black;
-    animation: faceoff 4s linear 0s 2 alternate;
+    animation: faceoff 4s ease-in-out 0s 2 alternate;

    &.winner {
-        animation: win 2s linear 0s 1;
+        animation: win 2s ease-in-out 0s 1;
    }
 }

@@ -109,13 +109,40 @@ section {
        letter-spacing: 0.25em;
        text-transform: uppercase;
        display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        // grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: 1fr 1fr;
        grid-gap: 1em;
        flex-flow: row wrap;
        align-items: flex-end;
        button {
            border-radius: 0.25em;
+            // height: 3em;
        }
+
+        &.play {
+            grid-template-columns: repeat(2, 1fr);
+            align-items: flex-start;
+
+            &.rejoin {
+                grid-template-columns: 1fr;
+            }
+
+            button.ready:enabled {
+                color: forestgreen;
+                border-color: forestgreen;
+
+                &:hover {
+                    background: forestgreen;
+                    color: black;
+                    border-color: forestgreen;
+                }
+            }
+        }
+    }
+
+    .panes {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
    }

    figure {
@@ -189,7 +216,12 @@ section {

        .list {
            grid-template-columns: 1fr 1fr;
+
+            &.play {
+                grid-template-columns: 1fr;
+            }
        }
+
    }

    .menu .team {
@@ -281,7 +281,7 @@ ul {
 }

 li {
-    margin-bottom: 0.5em;
+    margin-bottom: 0;
 }

 .logo {
@@ -299,6 +299,10 @@ li {
    background-position: center;
 }

+.mnni {
+    background-image: url("./../mnni.svg");
+}
+
 .avatar {
    grid-area: avatar;
    object-fit: contain;