X-Git-Url: https://jasonwoof.com/gitweb/?p=hexbog.git;a=blobdiff_plain;f=style.less;h=59ee961bcc4be0bfe73ffe0cc588652682d84512;hp=b78dfde493e0a78d2e76d9c24528548038b56d92;hb=fff2ed1a0a156da47c7fa1e9760c8546b9af44fe;hpb=00cbef41a56cda9f776b7af265f025e3daa70602

diff --git a/style.less b/style.less
index b78dfde..59ee961 100644
--- a/style.less
+++ b/style.less
@@ -5,14 +5,18 @@
 @board-height: @board-inner-height + @board-pad * 2;
 @column-pad: 10px;
 @right-width: 250px;
-@tabs-top: 120px;
+@tabs-top: 150px;
 @tabtab-height: 20px; // also in main.coffee
 @tab-height: 150px; // also in main.coffee
+@tab-pad: 5px;
 @row-pad: 10px;
 @copyright-height: 20px;
 
 @tab-color: #ddf;
 @tabtab-color: darken(@tab-color, 3%);
+@tile-color: #aaf;
+@selected-color: #ffa;
+@selected-good-color: #cfc;
 
 body {
 	background: #eef;
@@ -65,6 +69,24 @@ body {
 		position: absolute;
 		top: @tabs-top;
 		height: @tabtab-height * 4 + @tab-height;
+		width: @right-width;
+	}
+	#big_tip {
+		font-size: 24px;
+		font-weight: bold;
+		color: darken(@selected-color, 66%);
+		text-align: center;
+	}
+	#big_tip.good a {
+		color: darken(@selected-good-color, 66%);
+		text-decoration: none;
+	}
+	#score_container {
+		margin-top: 10px;
+		font-weight: bold;
+	}
+	#little_tip {
+		text-align: center;
 	}
 	.tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
 		margin-top: 5px;
@@ -74,6 +96,10 @@ body {
 		padding: 0 0 0 3px;
 		background: @tabtab-color;
 	}
+	.tabbody {
+		height: @tab-height - @tabtab-height - @tab-pad * 2;
+		padding: (@tab-pad - 1) (@tab-pad - 1) @tab-pad (@tab-pad + 1);
+	}
 	.selected-tab, .tab {
 		overflow: hidden;
 		box-shadow: 1px 1px 3px #888;
@@ -110,12 +136,10 @@ body {
 	padding-top: 4px;
 	height: 38px;
 	width: 42px;
-	background-color: #aaf;
-	color: #000;
 	font-size: 30px;
 	display: block;
 	position: absolute;
-	border-radius: 13px;
+	border-radius: 16px;
 	text-align: center;
 	cursor: pointer;
 	user-select: none;
@@ -123,14 +147,71 @@ body {
 	-o-user-select: none;
 	-moz-user-select: -moz-none;
 	-webkit-user-select: none;
-	box-shadow: 1px 1px 2px #666;
-}
-.tile.selected, .tile.selected_word {
-	background-color: #ffa;
-	box-shadow: inset 1px 1px 5px #444;
-}
-.tile.selected_word {
-	background-color: #cfc;
+
+	&.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(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 {
+		background-color: @selected-color;
+		box-shadow: inset 1px 1px 5px #444;
+	}
+	&.selected_word {
+		background-color: @selected-good-color;
+	}
 }
 #loading {
 	position: absolute;