Style improvements for color differentiation (#144)

jsartin513 · web-flow · commit abaf8625c36a · 2021-01-23T19:14:13.000-05:00
diff --git a/frontend/game.css b/frontend/game.css
@@ -117,8 +117,8 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-  width: 19%;
-  height: 18%;
+  width: 18%;
+  height: 17%;
 }
 
 .cell.disabled {
@@ -156,6 +156,7 @@
 }
 .codemaster .black.hidden-word {
   background: #999;
+  outline: 4px solid #000000;
 }
 .codemaster .cell {
   font-weight: bold;
@@ -197,23 +198,23 @@
 
 .color-blind .blue-remaining,
 .color-blind #status-line.blue #status {
-  border: 2px solid #4183cc;
+  border: 4px solid #4183cc;
 }
 
 .color-blind .red-remaining,
 .color-blind #status-line.red #status {
-  border: 2px dashed #d13030;
+  border: 4px dashed #d13030;
 }
 
 .color-blind.codemaster .red.hidden-word,
 .color-blind .red.revealed {
-  outline: 2px dashed #d13030;
+  outline: 4px dashed #d13030;
   border: 1px solid white;
 }
 
 .color-blind.codemaster .blue.hidden-word,
 .color-blind .blue.revealed {
-  outline: 2px solid #4183cc;
+  outline: 4px solid #4183cc;
   border: 1px solid white;
 }
 
@@ -242,6 +243,7 @@
 }
 .dark-mode .codemaster .black.hidden-word {
   background: #444;
+  outline: 4px solid #000000;
 }
 
 .dark-mode #end-turn-btn,

Original file line number	Diff line number	Diff line change
`@@ -117,8 +117,8 @@`
`117`	`117`	`justify-content: center;`
`118`	`118`	`align-items: center;`
`119`	`119`	`text-align: center;`
`120`		`- width: 19%;`
`121`		`- height: 18%;`
	`120`	`+ width: 18%;`
	`121`	`+ height: 17%;`
`122`	`122`	`}`
`123`	`123`
`124`	`124`	`.cell.disabled {`
`@@ -156,6 +156,7 @@`
`156`	`156`	`}`
`157`	`157`	`.codemaster .black.hidden-word {`
`158`	`158`	`background: #999;`
	`159`	`+ outline: 4px solid #000000;`
`159`	`160`	`}`
`160`	`161`	`.codemaster .cell {`
`161`	`162`	`font-weight: bold;`
`@@ -197,23 +198,23 @@`
`197`	`198`
`198`	`199`	`.color-blind .blue-remaining,`
`199`	`200`	`.color-blind #status-line.blue #status {`
`200`		`- border: 2px solid #4183cc;`
	`201`	`+ border: 4px solid #4183cc;`
`201`	`202`	`}`
`202`	`203`
`203`	`204`	`.color-blind .red-remaining,`
`204`	`205`	`.color-blind #status-line.red #status {`
`205`		`- border: 2px dashed #d13030;`
	`206`	`+ border: 4px dashed #d13030;`
`206`	`207`	`}`
`207`	`208`
`208`	`209`	`.color-blind.codemaster .red.hidden-word,`
`209`	`210`	`.color-blind .red.revealed {`
`210`		`- outline: 2px dashed #d13030;`
	`211`	`+ outline: 4px dashed #d13030;`
`211`	`212`	`border: 1px solid white;`
`212`	`213`	`}`
`213`	`214`
`214`	`215`	`.color-blind.codemaster .blue.hidden-word,`
`215`	`216`	`.color-blind .blue.revealed {`
`216`		`- outline: 2px solid #4183cc;`
	`217`	`+ outline: 4px solid #4183cc;`
`217`	`218`	`border: 1px solid white;`
`218`	`219`	`}`
`219`	`220`
`@@ -242,6 +243,7 @@`
`242`	`243`	`}`
`243`	`244`	`.dark-mode .codemaster .black.hidden-word {`
`244`	`245`	`background: #444;`
	`246`	`+ outline: 4px solid #000000;`
`245`	`247`	`}`
`246`	`248`
`247`	`249`	`.dark-mode #end-turn-btn,`