Restyle shadows

kcgidw · May 4, 2020 · b107821 · b107821
1 parent 1176e82
commit b107821
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/src/public/js/rules-view.vue b/src/public/js/rules-view.vue
@@ -16,19 +16,20 @@
 							Each round, players see the round's random keyword and its category,
 							e.g. <span>"Apple (Food)".</span>
 						</p>
-						<p>But the fake artist <em>only sees the category</em>: "??? (Food)".</p>
+						<p>
+							But the fake artist <em>only</em> sees the category, e.g. "??? (Food)".
+						</p>
 						<p>
 							Players take turns drawing single strokes on a drawing pad. After
 							everyone has drawn twice, everyone votes on who they think the fake
 							artist is.
 						</p>
 						<p>
-							If the majority vote is incorrect, then the fake artist wins!
+							The fake artist wins if they don't get the majority vote.
 						</p>
 						<p>
-							But if the fake artist is caught, the other players haven't won just
-							yet. The fake artist gets a chance to guess the keyword. If they guess
-							correctly, <em>they still win!</em>
+							But even if the fake artist gets caught, they get one chance to guess
+							the keyword. If they guess correctly, <em>they still win!</em>
 						</p>
 					</div>
 					<div class="align-right">

diff --git a/src/public/style/colors.scss b/src/public/style/colors.scss
@@ -22,5 +22,7 @@
 	--gold5: hsl(54, 100%, 30%);
 	--purp3: hsl(258, 50%, 55%);
 	--purp2: hsl(258, 50%, 75%);
-	--shade: rgba(0, 0, 0, 0.2);
+	--shade: rgba(0, 0, 0, 0.3);
+	--artistshade: hsla(322, 50%, 30%, 0.3);
+	--artistshade2: hsla(322, 30%, 10%, 0.3);
 }
diff --git a/src/public/style/dialog.scss b/src/public/style/dialog.scss
@@ -5,7 +5,7 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		background-color: var(--shade);
+		background-color: var(--artistshade2);
 		z-index: 10;
 	}
 	.dialog-window {
@@ -17,7 +17,7 @@
 		text-align: left;
 		background-color: var(--grey0);
 		border-radius: 5px;
-		box-shadow: 0px 3px 6px var(--shade), 0px 6px 20px var(--shade);
+		box-shadow: 0px 4px 8px -4px var(--artistshade2), 0px 4px 24px -4px var(--artistshade2);
 
 		@media screen and (max-width: 480px) {
 			min-width: 150px;

diff --git a/src/public/style/dropup.scss b/src/public/style/dropup.scss
@@ -30,7 +30,7 @@
 		border: solid 1px var(--grey1);
 		border-radius: 5px;
 		background-color: var(--grey0);
-		box-shadow: 0px 3px 6px 0px var(--shade);
+		box-shadow: 0px 4px 12px -4px var(--shade);
 		text-align: left;
 		position: absolute;
 		bottom: 100%;

diff --git a/src/public/style/style.scss b/src/public/style/style.scss
@@ -198,7 +198,7 @@ div#room-setup {
 #drawing-pad {
 	position: relative;
 	border: solid 4px var(--artist4);
-	box-shadow: 0px 4px 12px -8px hsla(322, 50%, 30%, 1);
+	box-shadow: 0px 4px 8px -4px var(--artistshade), 0px 4px 12px -4px var(--artistshade);
 	width: 100%;
 }
 canvas {