@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;
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;
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;
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;
-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;