tips, instructions, better selection display

[hexbog.git] / style.less

diff --git a/style.less b/style.less
index a1ec6e4..fc4f0e0 100644 (file)
--- a/style.less
+++ b/style.less
@@ -5,7 +5,7 @@
 @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;
@@ -14,6 +14,8 @@
 
 @tab-color: #ddf;
 @tabtab-color: darken(@tab-color, 3%);
+@selected-color: #ffa;
+@selected-good-color: #cfc;
 
 body {
        background: #eef;
@@ -68,6 +70,21 @@ body {
                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 {
+               color: darken(@selected-good-color, 66%);
+       }
+       #score_container {
+               font-weight: bold;
+       }
+       #little_tip {
+               text-align: center;
+       }
        .tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
                margin-top: 5px;
        }
@@ -132,11 +149,11 @@ body {
        box-shadow: 1px 1px 2px #666;
 }
 .tile.selected, .tile.selected_word {
-       background-color: #ffa;
+       background-color: @selected-color;
        box-shadow: inset 1px 1px 5px #444;
 }
 .tile.selected_word {
-       background-color: #cfc;
+       background-color: @selected-good-color;
 }
 #loading {
        position: absolute;