use https

[hexbog.git] / style.less

diff --git a/style.less b/style.less
index a1ec6e4..8817502 100644 (file)
--- a/style.less
+++ b/style.less
@@ -5,7 +5,7 @@
 @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;
@@ -14,6 +14,9 @@
 
 @tab-color: #ddf;
 @tabtab-color: darken(@tab-color, 3%);
+@tile-color: #aaf;
+@selected-color: #ffa;
+@selected-good-color: #cfc;
 
 body {
        background: #eef;
@@ -68,6 +71,23 @@ body {
                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;
        }
@@ -116,12 +136,10 @@ body {
        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;
@@ -129,14 +147,78 @@ body {
        -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;
+
+       &.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;
+       }
 }
-.tile.selected_word {
-       background-color: #cfc;
+.connector {
+       position: absolute;
+       height: 8px;
+       width: 8px;
+       background: #999;
+       border-radius: 8px;
 }
 #loading {
        position: absolute;
@@ -144,83 +226,6 @@ body {
        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;