make selection display clickable (when it's a word)

[hexbog.git] / style.less

diff --git a/style.less b/style.less
index b78dfde..e975a82 100644 (file)
--- a/style.less
+++ b/style.less
@@ -5,14 +5,17 @@
 @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%);
+@selected-color: #ffa;
+@selected-good-color: #cfc;
 
 body {
        background: #eef;
@@ -65,6 +68,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 +95,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;
@@ -126,11 +151,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;