Tone down shadows. Square blocks. Square cards.

2 files changed, 30 insertions, 36 deletions

diff --git a/play.css b/play.css
index bc2a2ac..8ac1672 100644
--- a/play.css
+++ b/play.css
@@ -50,9 +50,8 @@ header.your_turn { background-color: orange; }
 	background-repeat: no-repeat;
 	width: 224px;
 	height: 344px;
-	border-radius: 12px;
 	background-color: #883737;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: 1px 1px 4px #0006;
 	transition: 100ms;
 	display: none;
 }
@@ -83,7 +82,6 @@ header.your_turn { background-color: orange; }
 .role_info .card {
 	width: 168px;
 	height: 258px;
-	border-radius: 9px;
 	margin: 0 auto;
 }
 
@@ -103,7 +101,7 @@ header.your_turn { background-color: orange; }
 /* MAP */
 
 #mapwrap {
-	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
+	box-shadow: 0px 1px 8px #0008;
 	width: 1688px;
 	height: 1950px;
 }
@@ -157,8 +155,7 @@ div.turn {
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-image: url(turn_marker.jpg);
-	box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
-	border-radius: 4px;
+	box-shadow: 0 0 2px 1px #0002;
 	transition: 700ms ease;
 }
 
@@ -189,51 +186,48 @@ body.shift .block.known:hover {
 	z-index: 100;
 }
 
-.oldblocks div.block { border-radius: 8px; }
-.newblocks div.block { border-radius: 4px; }
-
-#blocks > div.block {
+#blocks > .block {
 	position: absolute;
 }
 
-#battle > div.block {
+#battle > .block {
 	position: relative;
 }
 
-div.block {
+.block {
 	background-size: 700% 400%;
 	background-repeat: no-repeat;
 	width: 60px;
 	height: 60px;
-	box-shadow: 0px 0px 3px black;
+	box-shadow: 0 0 2px 1px #0002;
 }
 
-.oldblocks div.block.England { border: 3px solid brown; background-color: brown; }
-.oldblocks div.block.Scotland { border: 3px solid #06a; background-color: #06a; }
-.oldblocks div.block.highlight { border-color: white; }
-.oldblocks div.block.selected { border-color: yellow; }
-.oldblocks div.block.highlight { box-shadow: 0px 0px 4px 1px white; }
-.oldblocks div.block.selected { box-shadow: 0 0 4px 1px yellow; }
 
-.newblocks div.block.England { border: 2px solid #a12; background-color: #a12; }
-.newblocks div.block.Scotland { border: 2px solid #059; background-color: #059; }
-.newblocks div.block.highlight { box-shadow: 0px 0px 2px 3px white; }
-.newblocks div.block.selected { box-shadow: 0px 0px 2px 3px yellow; }
+.oldblocks .block.England { border: 4px solid brown; background-color: brown; }
+.oldblocks .block.Scotland { border: 4px solid #06a; background-color: #06a; }
+
+.newblocks .block.England { border: 2px solid #a12; background-color: #a12; }
+.newblocks .block.Scotland { border: 2px solid #059; background-color: #059; }
+
+.oldblocks .block.highlight { border-color: white; }
+.oldblocks .block.selected { border-color: yellow; }
+.oldblocks .battle_menu.hit .block.highlight { border-color: black; }
 
-.oldblocks .battle_menu.hit div.block.highlight { border: 3px solid black; box-shadow: 0px 0px 3px black; }
-.newblocks .battle_menu.hit div.block.highlight { box-shadow: 0px 0px 2px 3px black; }
+.newblocks .block.highlight { border-color: white; box-shadow: 0 0 0 1px white; }
+.newblocks .block.selected { border-color: yellow; box-shadow: 0 0 0 1px yellow; }
+.newblocks .battle_menu.hit .block.highlight { border-color: black; box-shadow: 0 0 0 1px black; }
 
-div.block.highlight { cursor: pointer; }
-div.block.moved { filter: grayscale(50%) brightness(80%); }
-div.block.highlight.moved { filter: grayscale(60%) brightness(95%); }
+.block.highlight { cursor: pointer; }
+.block.moved { filter: grayscale(50%) brightness(80%); }
+.block.highlight.moved { filter: grayscale(60%) brightness(95%); }
 
-div.block.r1 { transform: rotate(-90deg); }
-div.block.r2 { transform: rotate(-180deg); }
-div.block.r3 { transform: rotate(-270deg); }
+.block.r1 { transform: rotate(-90deg); }
+.block.r2 { transform: rotate(-180deg); }
+.block.r3 { transform: rotate(-270deg); }
 
-div.block:hover { z-index: 1; }
+.block:hover { z-index: 1; }
 
-div.block {
+.block {
 	transition-property: top, left, transform, opacity;
 	transition-duration: 700ms, 700ms, 250ms, 250ms;
 	transition-timing-function: ease, ease, ease, linear;
@@ -247,9 +241,9 @@ div.block {
 }
 
 /*
-div.block.battle { filter: grayscale(60%) brightness(60%) !important }
+.block.battle { filter: grayscale(60%) brightness(60%) !important }
 */
-div.block.battle { opacity: 0; pointer-events: none }
+.block.battle { opacity: 0; pointer-events: none }
 
 /* HERALD DIALOG */
 
diff --git a/play.js b/play.js
index e45fa4e..09493cd 100644
--- a/play.js
+++ b/play.js
@@ -454,7 +454,7 @@ function layout_blocks(location, north, south) {
 function position_block(location, row, n_rows, col, n_cols, element) {
 	let area = AREAS[location]
 	let block_size = 60+6
-	let padding = 4
+	let padding = 6
 	let offset = block_size + padding
 	let row_size = (n_rows-1) * offset
 	let col_size = (n_cols-1) * offset