font-size: 30px;
display: block;
position: absolute;
- border-radius: 15px;
+ 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;
&.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(desaturate(@tile-color, 70%), 9%), 100);
- box-shadow: 1px 1px 1px #aaa;
+ background-color: spin(lighten(saturate(@tile-color, 30%), 5%), 100);
+ box-shadow: 1px 1px 1px #ddd;
}
&.hp0 {
cursor: default;
background-color: @selected-good-color;
}
}
+.connector {
+ position: absolute;
+ height: 8px;
+ width: 8px;
+ background: #999;
+ border-radius: 8px;
+}
#loading {
position: absolute;
top: 140px;
right: 140px;
font-size: 32px;
}
-.head {
- margin-top: -4px;
- height: 42px;
- width: 42px;
- position: relative;
- border-radius: 13px;
-}
-.eye1, .eye2 {
- width: 6px;
- height: 6px;
- border: 2px solid #a83;
- border-radius: 9px;
- background-color: white;
- position: absolute;
-}
-.eye1 {
- top: -8px;
- right: -1px;
- width: 5px;
- border-width: 4px 4px 3px 4px;
-}
-.eye2 {
- right: -9px;
- top: 1px;
- border-width: 3px 4px 4px 2px;
-}
-.tooth1, .tooth2, .tooth3, .tooth4 {
- width: 6px;
- height: 6px;
- border: 2px solid #a83;
- background-color: white;
- position: absolute;
-}
-.tooth1 {
- top: -2px;
- left: 22px;
- width: 7px;
- border-width: 2px 0 2px 2px;
-}
-.tooth2 {
- height: 7px;
- top: 12px;
- right: -3px;
- border-width: 0 2px 2px 2px;
-}
-.pate {
- position: absolute;
- top: -2px;
- right: -3px;
- width: 12px;
- height: 12px;
- background: white;
- border: 2px solid #a83;
- border-radius: 0 13px 0 0;
-}
-.tooth3 {
- width: 7px;
- bottom: -3px;
- left: 12px;
- border-width: 2px 2px 2px 0;
-}
-.tooth4 {
- height: 7px;
- bottom: 11px;
- left: -2px;
- border-width: 2px 2px 0 2px;
-}
-.chin {
- position: absolute;
- bottom: -3px;
- left: -2px;
- width: 12px;
- height: 12px;
- background: white;
- border: 2px solid #a83;
- border-radius: 0 0 0 13px;
-}
#definition_body {
height: @tab-height - @tabtab-height;
overflow: auto;