draw connections between selected tiles

[hexbog.git] / style.less

diff --git a/style.less b/style.less
index ac8d122..2c0c6b3 100644 (file)
--- a/style.less
+++ b/style.less
@@ -139,7 +139,7 @@ body {
        font-size: 30px;
        display: block;
        position: absolute;
-       border-radius: 13px;
+       border-radius: 16px;
        text-align: center;
        cursor: pointer;
        user-select: none;
@@ -147,52 +147,62 @@ body {
        -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);
+               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 {
@@ -203,6 +213,13 @@ body {
                background-color: @selected-good-color;
        }
 }
+.connector {
+       position: absolute;
+       height: 10px;
+       width: 10px;
+       background: #666;
+       border-radius: 10px;
+}
 #loading {
        position: absolute;
        top: 140px;