4-step game creation

client/styles/GLOBAL.css

@@ -43,6 +43,12 @@ h1 {
     margin: 0.5em 0;
 }
 
+h2 {
+    color: whitesmoke;
+    font-size: 25px;
+    font-weight: bold;
+}
+
 h3 {
     color: #d7d7d7;
     font-family: 'signika-negative', sans-serif;
@@ -91,6 +97,7 @@ button:active, input[type=submit]:active {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    width: 100%;
 }
 
 button:hover, input[type="submit"]:hover {
@@ -142,6 +149,83 @@ input {
     color: gray;
 }
 
+.flex-row-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-row-container-left-align {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.animated-placeholder {
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-name: pulse-background;
+    animation-timing-function: ease-in;
+    animation-direction: alternate;
+    background: rgb(238,238,238);
+    position: relative;
+    overflow: hidden;
+    height: 20px;
+    border-radius: 3px;
+    opacity: 0.15;
+    margin: 0.5em 0;
+}
+
+.animated-placeholder-short {
+    width: 100%;
+    max-width: 15em;
+    height: 2em;
+    margin: 0 auto;
+}
+
+.animated-placeholder-long {
+    width: 100%;
+    max-width: 30em;
+    height: 8em;
+    margin: 0 auto 0.5em auto;
+}
+
+.animated-placeholder-invisible {
+    background-color: transparent;
+    animation: none;
+}
+
+.placeholder-row {
+    display: flex;
+    margin: 0;
+    justify-content: center;
+}
+
+.placeholder-row .animated-placeholder-short {
+    margin: 0 0 0.5em 0;
+}
+
+@keyframes placeholder {
+    0%{
+        background-position: 50% 0
+    }
+    100%{
+        background-position: -50% 0
+    }
+}
+
+@keyframes pulse-background {
+    from {
+        background-color: rgb(120 120 120);
+    } to {
+        background-color: rgb(255 255 255);
+    }
+}
+
 
 @keyframes fade-in-slide-down-then-exit {
     0% {

client/styles/create.css

@@ -82,13 +82,19 @@
     width: fit-content;
 }
 
-#deck-container, #custom-roles-container {
-    margin: 0.5em 0;
+#deck-container, #custom-roles-container, #step-3 {
+    margin: 1em 0;
     background-color: #1f1f1f;
     padding: 10px;
     border-radius: 3px;
 }
 
+#step-3 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 #deck {
     display: flex;
     flex-wrap: wrap;
@@ -151,3 +157,99 @@ input[type="number"] {
 .dropdown {
     margin: 0.5em;
 }
+
+.creation-step {
+    width: 20px;
+    height: 20px;
+    background-color: transparent;
+    border-radius: 50%;
+    border: 2px solid whitesmoke;
+    margin: 0 0.5em;
+}
+
+.creation-step-filled {
+    background-color: whitesmoke;
+}
+
+#creation-step-container {
+    margin-top: 2em;
+    width: 100%;
+    min-height: 16em;
+}
+
+#creation-step-container > div:nth-child(2) {
+    animation: fade-in 0.5s ease-out;
+}
+
+#step-title {
+    margin: 0 auto 1em auto;
+    text-align: center;
+}
+
+#creation-step-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2em;
+    position: relative;
+}
+
+#creation-step-tracker {
+    display: flex;
+    justify-content: center;
+    margin-top: 2em;
+}
+
+#step-forward-button, #step-back-button {
+    position: absolute;
+}
+
+#step-forward-button {
+    right: 15%;
+}
+
+#step-back-button {
+    left: 15%;
+}
+
+#step-1 div {
+    background-color: black;
+    color: whitesmoke;
+    padding: 1em;
+    max-width: 20em;
+    margin: 0.5em;
+    cursor: pointer;
+    border: 2px solid transparent;
+    border-radius: 3px;
+    font-size: 25px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
+}
+
+#step-1 div.option-selected {
+    border: 2px solid #0075F2;
+    background-color: #252730;
+}
+
+#step-1 div > strong {
+    color: #0075F2;
+}
+
+#step-1 div:hover {
+    border: 2px solid #0075F2;
+}
+
+.review-option {
+    background-color: #1f1f1f;
+    color: whitesmoke;
+    padding: 10px;
+    width: fit-content;
+    border-radius: 3px;
+    margin: 0.5em 0;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    } to {
+        opacity: 1;
+    }
+}