X-Git-Url: https://jasonwoof.com/gitweb/?p=hexbog.git;a=blobdiff_plain;f=style.less;h=88175027b70bd785cd1b661fe1aa38fb14d027bf;hp=ac8d12293c8d7e45cef900ce0a5a3c0ae3bf230f;hb=HEAD;hpb=cfd688cbffbd5fbe33a817671d44f5b98500d60f

diff --git a/style.less b/style.less
index ac8d122..8817502 100644
--- a/style.less
+++ b/style.less
@@ -139,7 +139,7 @@ body {
 	font-size: 30px;
 	display: block;
 	position: absolute;
-	border-radius: 13px;
+	border-radius: 16px;
 	text-align: center;
 	cursor: pointer;
 	user-select: none;
@@ -147,52 +147,62 @@ body {
 	-o-user-select: none;
 	-moz-user-select: -moz-none;
 	-webkit-user-select: none;
-	box-shadow: 1px 1px 2px #666;
 
 	&.hp10 {
 		color: #000;
 		background-color: @tile-color;
+		box-shadow: 3px 3px 2px #aaa;
 	}
 	&.hp9 {
 		color: lighten(#000, 4%);
 		background-color: lighten(desaturate(@tile-color, 10%), 1%);
+		box-shadow: 3px 3px 1.9px #aaa;
 	}
 	&.hp8 {
 		color: lighten(#000, 8%);
 		background-color: lighten(desaturate(@tile-color, 20%), 2%);
+		box-shadow: 2px 2px 1.8px #aaa;
 	}
 	&.hp7 {
 		color: lighten(#000, 12%);
 		background-color: lighten(desaturate(@tile-color, 30%), 3%);
+		box-shadow: 2px 2px 1.7px #aaa;
 	}
 	&.hp6 {
 		color: lighten(#000, 16%);
 		background-color: lighten(desaturate(@tile-color, 40%), 4%);
+		box-shadow: 2px 2px 1.6px #aaa;
 	}
 	&.hp5 {
 		color: lighten(#000, 20%);
 		background-color: lighten(desaturate(@tile-color, 50%), 5%);
+		box-shadow: 2px 2px 1.5px #bbb;
 	}
 	&.hp4 {
 		color: lighten(#000, 24%);
 		background-color: lighten(desaturate(@tile-color, 60%), 6%);
+		box-shadow: 2px 2px 1.4px #bbb;
 	}
 	&.hp3 {
 		color: lighten(#000, 28%);
 		background-color: lighten(desaturate(@tile-color, 70%), 7%);
+		box-shadow: 2px 2px 1.3px #ccc;
 	}
 	&.hp2 {
 		color: lighten(#000, 32%);
 		background-color: lighten(desaturate(@tile-color, 80%), 8%);
+		box-shadow: 1px 1px 1.1px #ddd;
 	}
 	&.hp1 {
 		color: lighten(#000, 36%);
-		background-color: spin(lighten(desaturate(@tile-color, 70%), 9%), 100);
+		background-color: spin(lighten(saturate(@tile-color, 30%), 5%), 100);
+		box-shadow: 1px 1px 1px #ddd;
 	}
 	&.hp0 {
 		cursor: default;
 		color: lighten(desaturate(@tile-color, 100%), 10%);
 		background-color: lighten(desaturate(@tile-color, 100%), 10%);
+		box-shadow: inset 1px 1px 1px #aaa;
 	}
 
 	&.selected, &.selected_word {
@@ -203,89 +213,19 @@ body {
 		background-color: @selected-good-color;
 	}
 }
+.connector {
+	position: absolute;
+	height: 8px;
+	width: 8px;
+	background: #999;
+	border-radius: 8px;
+}
 #loading {
 	position: absolute;
 	top: 140px;
 	right: 140px;
 	font-size: 32px;
 }
-.head {
-	margin-top: -4px;
-	height: 42px;
-	width: 42px;
-	position: relative;
-	border-radius: 13px;
-}
-.eye1, .eye2 {
-	width: 6px;
-	height: 6px;
-	border: 2px solid #a83;
-	border-radius: 9px;
-	background-color: white;
-	position: absolute;
-}
-.eye1 {
-	top: -8px;
-	right: -1px;
-	width: 5px;
-	border-width: 4px 4px 3px 4px;
-}
-.eye2 {
-	right: -9px;
-	top: 1px;
-	border-width: 3px 4px 4px 2px;
-}
-.tooth1, .tooth2, .tooth3, .tooth4 {
-	width: 6px;
-	height: 6px;
-	border: 2px solid #a83;
-	background-color: white;
-	position: absolute;
-}
-.tooth1 {
-	top: -2px;
-	left: 22px;
-	width: 7px;
-	border-width: 2px 0 2px 2px;
-}
-.tooth2 {
-	height: 7px;
-	top: 12px;
-	right: -3px;
-	border-width: 0 2px 2px 2px;
-}
-.pate {
-	position: absolute;
-	top: -2px;
-	right: -3px;
-	width: 12px;
-	height: 12px;
-	background: white;
-	border: 2px solid #a83;
-	border-radius: 0 13px 0 0;
-}
-.tooth3 {
-	width: 7px;
-	bottom: -3px;
-	left: 12px;
-	border-width: 2px 2px 2px 0;
-}
-.tooth4 {
-	height: 7px;
-	bottom: 11px;
-	left: -2px;
-	border-width: 2px 2px 0 2px;
-}
-.chin {
-	position: absolute;
-	bottom: -3px;
-	left: -2px;
-	width: 12px;
-	height: 12px;
-	background: white;
-	border: 2px solid #a83;
-	border-radius: 0 0 0 13px;
-}
 #definition_body {
 	height: @tab-height - @tabtab-height;
 	overflow: auto;