1 @board-inner-width: 358px;
2 @board-inner-height: 410px;
3 @board-pad: 15px; // also in main.coffee
4 @board-width: @board-inner-width + @board-pad * 2;
5 @board-height: @board-inner-height + @board-pad * 2;
9 @tabtab-height: 20px; // also in main.coffee
10 @tab-height: 150px; // also in main.coffee
13 @copyright-height: 20px;
16 @tabtab-color: darken(@tab-color, 3%);
18 @selected-color: #ffa;
19 @selected-good-color: #cfc;
24 font: 14px Verdana, Arial, free-sans, sans-serif;
30 width: @board-width + @column-pad + @right-width;
31 height: @board-height;
40 height: @board-height;
42 box-shadow: inset 1px 1px 4px #888;
49 width: @board-inner-width;
50 height: @board-inner-height;
55 left: @board-width + @column-pad;
57 height: @board-height;
71 height: @tabtab-height * 4 + @tab-height;
77 color: darken(@selected-color, 66%);
81 color: darken(@selected-good-color, 66%);
82 text-decoration: none;
91 .tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
95 height: @tabtab-height;
97 background: @tabtab-color;
100 height: @tab-height - @tabtab-height - @tab-pad * 2;
101 padding: (@tab-pad - 1) (@tab-pad - 1) @tab-pad (@tab-pad + 1);
103 .selected-tab, .tab {
105 box-shadow: 1px 1px 3px #888;
106 background: @tab-color;
122 color: darken(@tab-color, 50%);
124 .tabtab:hover:before {
130 top: @board-height - @row-pad - @copyright-height;
146 -khtml-user-select: none;
147 -o-user-select: none;
148 -moz-user-select: -moz-none;
149 -webkit-user-select: none;
153 background-color: @tile-color;
154 box-shadow: 3px 3px 2px #aaa;
157 color: lighten(#000, 4%);
158 background-color: lighten(desaturate(@tile-color, 10%), 1%);
159 box-shadow: 3px 3px 1.9px #aaa;
162 color: lighten(#000, 8%);
163 background-color: lighten(desaturate(@tile-color, 20%), 2%);
164 box-shadow: 2px 2px 1.8px #aaa;
167 color: lighten(#000, 12%);
168 background-color: lighten(desaturate(@tile-color, 30%), 3%);
169 box-shadow: 2px 2px 1.7px #aaa;
172 color: lighten(#000, 16%);
173 background-color: lighten(desaturate(@tile-color, 40%), 4%);
174 box-shadow: 2px 2px 1.6px #aaa;
177 color: lighten(#000, 20%);
178 background-color: lighten(desaturate(@tile-color, 50%), 5%);
179 box-shadow: 2px 2px 1.5px #bbb;
182 color: lighten(#000, 24%);
183 background-color: lighten(desaturate(@tile-color, 60%), 6%);
184 box-shadow: 2px 2px 1.4px #bbb;
187 color: lighten(#000, 28%);
188 background-color: lighten(desaturate(@tile-color, 70%), 7%);
189 box-shadow: 2px 2px 1.3px #ccc;
192 color: lighten(#000, 32%);
193 background-color: lighten(desaturate(@tile-color, 80%), 8%);
194 box-shadow: 1px 1px 1.1px #ddd;
197 color: lighten(#000, 36%);
198 background-color: spin(lighten(saturate(@tile-color, 30%), 5%), 100);
199 box-shadow: 1px 1px 1px #ddd;
203 color: lighten(desaturate(@tile-color, 100%), 10%);
204 background-color: lighten(desaturate(@tile-color, 100%), 10%);
205 box-shadow: inset 1px 1px 1px #aaa;
208 &.selected, &.selected_word {
209 background-color: @selected-color;
210 box-shadow: inset 1px 1px 5px #444;
213 background-color: @selected-good-color;
230 height: @tab-height - @tabtab-height;