X-Git-Url: https://jasonwoof.com/gitweb/?p=hexbog.git;a=blobdiff_plain;f=style.less;h=ee67ce3dbd2c1d9fab225e85a6eea5a2f0457860;hp=e975a82c4c5a749a9caacd802be2b919a9d7b310;hb=97198e4668d0a8f64c5f5f345bd8f53af4c204d2;hpb=5f118636bd356acfabd1e6a3a9da0b6bc433c95b

diff --git a/style.less b/style.less
index e975a82..ee67ce3 100644
--- a/style.less
+++ b/style.less
@@ -14,6 +14,7 @@
 
 @tab-color: #ddf;
 @tabtab-color: darken(@tab-color, 3%);
+@tile-color: #aaf;
 @selected-color: #ffa;
 @selected-good-color: #cfc;
 
@@ -135,8 +136,6 @@ body {
 	padding-top: 4px;
 	height: 38px;
 	width: 42px;
-	background-color: #aaf;
-	color: #000;
 	font-size: 30px;
 	display: block;
 	position: absolute;
@@ -149,13 +148,59 @@ body {
 	-moz-user-select: -moz-none;
 	-webkit-user-select: none;
 	box-shadow: 1px 1px 2px #666;
-}
-.tile.selected, .tile.selected_word {
-	background-color: @selected-color;
-	box-shadow: inset 1px 1px 5px #444;
-}
-.tile.selected_word {
-	background-color: @selected-good-color;
+
+	&.hp10 {
+		color: #000;
+		background-color: @tile-color;
+	}
+	&.hp9 {
+		color: lighten(#000, 4%);
+		background-color: lighten(desaturate(@tile-color, 10%), 1%);
+	}
+	&.hp8 {
+		color: lighten(#000, 8%);
+		background-color: lighten(desaturate(@tile-color, 20%), 2%);
+	}
+	&.hp7 {
+		color: lighten(#000, 12%);
+		background-color: lighten(desaturate(@tile-color, 30%), 3%);
+	}
+	&.hp6 {
+		color: lighten(#000, 16%);
+		background-color: lighten(desaturate(@tile-color, 40%), 4%);
+	}
+	&.hp5 {
+		color: lighten(#000, 20%);
+		background-color: lighten(desaturate(@tile-color, 50%), 5%);
+	}
+	&.hp4 {
+		color: lighten(#000, 24%);
+		background-color: lighten(desaturate(@tile-color, 60%), 6%);
+	}
+	&.hp3 {
+		color: lighten(#000, 28%);
+		background-color: lighten(desaturate(@tile-color, 70%), 7%);
+	}
+	&.hp2 {
+		color: lighten(#000, 32%);
+		background-color: lighten(desaturate(@tile-color, 80%), 8%);
+	}
+	&.hp1 {
+		color: lighten(#000, 36%);
+		background-color: spin(lighten(desaturate(@tile-color, 70%), 9%), 100);
+	}
+	&.hp0 {
+		color: lighten(desaturate(@tile-color, 100%), 10%);
+		background-color: lighten(desaturate(@tile-color, 100%), 10%);
+	}
+
+	&.selected, &.selected_word {
+		background-color: @selected-color;
+		box-shadow: inset 1px 1px 5px #444;
+	}
+	&.selected_word {
+		background-color: @selected-good-color;
+	}
 }
 #loading {
 	position: absolute;