I will be the dedicated mod. Don't deal me a card.
" +
- "The first person out will mod. Deal me into the game (mod will be assigned automatically).
";
+ "The first person out will mod. Deal me into the game.
";
const dedicatedOption = stepContainer.querySelector('#moderation-dedicated');
if (game.hasDedicatedModerator) {
diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css
index f1cf65e..57b8903 100644
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -52,7 +52,7 @@ h1 {
}
h2 {
- color: whitesmoke;
+ color: #e7e7e7;
font-size: 25px;
font-weight: bold;
}
@@ -197,7 +197,7 @@ button {
padding: 10px;
background-color: #13762b;
border-radius: 3px;
- color: whitesmoke;
+ color: #e7e7e7;
font-size: 18px;
cursor: pointer;
border: 2px solid transparent;
@@ -312,7 +312,7 @@ input {
padding: 5px 0;
width: 100%;
background-color: #333243;
- height: 51px;
+ height: 45px;
z-index: 53000;
}
@@ -381,7 +381,7 @@ input {
.hamburger-light {
min-width: auto;
- color: whitesmoke;
+ color: #e7e7e7;
}
.hamburger-dark {
diff --git a/client/src/styles/create.css b/client/src/styles/create.css
index 846324e..fa383be 100644
--- a/client/src/styles/create.css
+++ b/client/src/styles/create.css
@@ -141,7 +141,7 @@
}
#custom-role-hamburger .hamburger-inner, #custom-role-hamburger .hamburger-inner::before, #custom-role-hamburger .hamburger-inner::after {
- background-color: whitesmoke;
+ background-color: #e7e7e7;
width: 28px;
height: 3px;
}
@@ -167,7 +167,7 @@
#custom-role-actions {
display: none;
- color: whitesmoke;
+ color: #e7e7e7;
position: absolute;
top: 38px;
right: 29px;
@@ -325,7 +325,7 @@ select {
}
label[for="game-time"], label[for="add-card-to-deck-form"], label[for="deck"] {
- color: whitesmoke;
+ color: #e7e7e7;
font-size: 20px;
border-radius: 3px;
margin-bottom: 10px;
@@ -343,7 +343,7 @@ input[type="number"] {
#create-game {
background-color: #1c8a36;
- color: whitesmoke;
+ color: #e7e7e7;
font-size: 30px;
padding: 10px 50px;
}
@@ -413,12 +413,12 @@ input[type="number"] {
height: 20px;
background-color: transparent;
border-radius: 50%;
- border: 2px solid whitesmoke;
+ border: 2px solid #e7e7e7;
margin: 0 0.5em;
}
.creation-step-filled {
- background-color: whitesmoke;
+ background-color: #e7e7e7;
}
#creation-step-container {
@@ -496,7 +496,7 @@ input[type="number"] {
#step-1 div {
background-color: #191920;
- color: whitesmoke;
+ color: #e7e7e7;
padding: 1em;
max-width: 20em;
margin: 0.5em;
@@ -507,7 +507,7 @@ input[type="number"] {
}
#step-1 div.option-selected {
- border: 2px solid whitesmoke;
+ border: 2px solid #e7e7e7;
background-color: #3a3c46;
}
@@ -516,13 +516,13 @@ input[type="number"] {
}
#step-1 div:hover {
- border: 2px solid whitesmoke;
+ border: 2px solid #e7e7e7;
}
.review-option {
background-color: #191920;
border: 2px solid #333243;
- color: whitesmoke;
+ color: #e7e7e7;
padding: 10px;
font-size: 18px;
width: fit-content;
diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index 5644446..8cb87c1 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -4,7 +4,7 @@
align-items: center;
justify-content: space-between;
background-color: black;
- color: whitesmoke;
+ color: #e7e7e7;
padding: 10px;
border-radius: 3px;
font-size: 17px;
@@ -66,7 +66,7 @@
}
#restart-game:hover {
- border-color: whitesmoke;
+ border-color: #e7e7e7;
}
#lobby-header {
@@ -138,14 +138,14 @@ h1 {
border-radius: 3px;
background-color: #121314;
border: 2px solid #333243;
- color: whitesmoke;
+ color: #e7e7e7;
align-items: center;
display: flex;
transition: background-color 0.2s;
max-width: 20em;
}
#game-code {
- color: whitesmoke;
+ color: #e7e7e7;
margin-top: 5px;
}
@@ -309,7 +309,7 @@ h1 {
padding: 10px;
margin-top: 5px;
background-color: #262626;
- color: whitesmoke;
+ color: #e7e7e7;
border-radius: 3px;
font-size: 35px;
text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
@@ -390,7 +390,7 @@ h1 {
}
#client-name {
- color: whitesmoke;
+ color: #e7e7e7;
font-family: 'signika-negative', sans-serif;
font-size: 30px;
margin: 0.25em 2em 0.25em 0;
@@ -446,7 +446,7 @@ label[for='moderator'] {
font-family: 'signika-negative', sans-serif !important;
padding: 10px;
border-radius: 3px;
- color: whitesmoke;
+ color: #e7e7e7;
cursor: pointer;
border: 2px solid transparent;
transition: background-color, border 0.3s ease-out;
@@ -551,7 +551,7 @@ label[for='moderator'] {
.kill-player-button, .reveal-role-button {
font-family: 'signika-negative', sans-serif !important;
border-radius: 3px;
- color: whitesmoke;
+ color: #e7e7e7;
font-size: 16px;
cursor: pointer;
border: 2px solid transparent;
diff --git a/client/src/styles/home.css b/client/src/styles/home.css
index 32a3d4f..e33b47f 100644
--- a/client/src/styles/home.css
+++ b/client/src/styles/home.css
@@ -9,7 +9,40 @@ body {
button#home-create-button {
padding: 20px;
- margin-bottom: 1em;
+}
+
+#framed-phone-screenshot {
+ max-width: 250px;
+ width: 40vw;
+ min-width: 175px;
+ margin: 0;
+}
+
+#about-container {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: center;
+ padding: 0 1em;
+ margin-top: 25px;
+}
+
+#join-container form {
+ margin: 0;
+}
+
+#about-container h2 {
+ max-width: 17em;
+ font-size: 22px;
+}
+
+#about-container img {
+ margin-bottom: 20px;
+}
+
+#homepage-logos {
+ display: flex;
+ align-items: center;
}
#home-page-top-section {
@@ -40,7 +73,7 @@ a button {
min-width: 6em;
max-height: 3em;
background-color: #1c8a36;
- color: whitesmoke;
+ color: #e7e7e7;
font-size: 16px;
}
@@ -50,7 +83,7 @@ a button {
}
#join-form div:nth-child(1) {
- margin-right: 1em;
+ margin-right: 0.5em;
}
h3 {
@@ -62,24 +95,38 @@ h3 {
}
img[src='../images/logo_cropped.gif'] {
- max-width: 400px;
- width: 63vw;
+ max-width: 360px;
+ width: 50vw;
min-width: 250px;
- margin: 3em 0 1em 0;
+ margin: 1em 0 1em 0;
}
form > div {
margin: 15px 0;
}
+#create-join {
+ width: 100%;
+ max-width: 900px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-evenly;
+ margin-bottom: 1em;
+}
+
#join-container {
max-width: 90%;
+ background-color: #0f0f10;
+ padding: 0.5em;
+ border-radius: 3px;
+ margin: 20px;
}
#join-container > label {
font-size: 35px;
font-family: 'signika-negative', sans-serif;
- color: #b1afcd;
+ color: #e7e7e7;
filter: drop-shadow(2px 2px 4px black);
}
@@ -96,9 +143,18 @@ label[for="room-code"], label[for="player-name"] {
@media (max-width: 701px) {
button#home-create-button {
font-size: 5vw;
+ padding: 15px;
+ }
+
+ #join-container > label {
+ font-size: 26px;
}
#room-code {
max-width: 9em;
}
+
+ #about-container h2 {
+ font-size: 18px;
+ }
}
diff --git a/client/src/styles/modal.css b/client/src/styles/modal.css
index 7ef8da7..06e1044 100644
--- a/client/src/styles/modal.css
+++ b/client/src/styles/modal.css
@@ -61,6 +61,8 @@
margin: 2em 0;
max-height: 10em;
overflow: auto;
+ padding-top: 10px;
+ border-top: 1px solid whitesmoke
}
#custom-role-info-modal-name {
diff --git a/client/src/views/game.html b/client/src/views/game.html
index c0b68e0..ca4c905 100644
--- a/client/src/views/game.html
+++ b/client/src/views/game.html
@@ -4,8 +4,8 @@
-
-
-