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;
150 box-shadow: 1px 1px 2px #666;
154 background-color: @tile-color;
157 color: lighten(#000, 4%);
158 background-color: lighten(desaturate(@tile-color, 10%), 1%);
161 color: lighten(#000, 8%);
162 background-color: lighten(desaturate(@tile-color, 20%), 2%);
165 color: lighten(#000, 12%);
166 background-color: lighten(desaturate(@tile-color, 30%), 3%);
169 color: lighten(#000, 16%);
170 background-color: lighten(desaturate(@tile-color, 40%), 4%);
173 color: lighten(#000, 20%);
174 background-color: lighten(desaturate(@tile-color, 50%), 5%);
177 color: lighten(#000, 24%);
178 background-color: lighten(desaturate(@tile-color, 60%), 6%);
181 color: lighten(#000, 28%);
182 background-color: lighten(desaturate(@tile-color, 70%), 7%);
185 color: lighten(#000, 32%);
186 background-color: lighten(desaturate(@tile-color, 80%), 8%);
189 color: lighten(#000, 36%);
190 background-color: lighten(desaturate(@tile-color, 90%), 9%);
193 color: lighten(#000, 40%);
194 background-color: lighten(desaturate(@tile-color, 100%), 10%);
197 &.selected, &.selected_word {
198 background-color: @selected-color;
199 box-shadow: inset 1px 1px 5px #444;
202 background-color: @selected-good-color;
221 border: 2px solid #a83;
223 background-color: white;
230 border-width: 4px 4px 3px 4px;
235 border-width: 3px 4px 4px 2px;
237 .tooth1, .tooth2, .tooth3, .tooth4 {
240 border: 2px solid #a83;
241 background-color: white;
248 border-width: 2px 0 2px 2px;
254 border-width: 0 2px 2px 2px;
263 border: 2px solid #a83;
264 border-radius: 0 13px 0 0;
270 border-width: 2px 2px 2px 0;
276 border-width: 2px 2px 0 2px;
285 border: 2px solid #a83;
286 border-radius: 0 0 0 13px;
289 height: @tab-height - @tabtab-height;