style.less

   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;
   6 @column-pad: 10px;
   7 @right-width: 250px;
   8 @tabs-top: 150px;
   9 @tabtab-height: 20px; // also in main.coffee
  10 @tab-height: 150px; // also in main.coffee
  11 @tab-pad: 5px;
  12 @row-pad: 10px;
  13 @copyright-height: 20px;
  14
  15 @tab-color: #ddf;
  16 @tabtab-color: darken(@tab-color, 3%);
  17 @tile-color: #aaf;
  18 @selected-color: #ffa;
  19 @selected-good-color: #cfc;
  20
  21 body {
  22         background: #eef;
  23         color: black;
  24         font: 14px Verdana, Arial, free-sans, sans-serif;
  25         margin: 0;
  26         padding: 0;
  27 }
  28 #centerer {
  29         margin: auto auto;
  30         width: @board-width + @column-pad + @right-width;
  31         height: @board-height;
  32         position: relative;
  33 }
  34 #boarder {
  35         background: #f5f5ff;
  36         position: absolute;
  37         top: 0px;
  38         left: 0px;
  39         width: @board-width;
  40         height: @board-height;
  41         border-radius: 3px;
  42         box-shadow: inset 1px 1px 4px #888;
  43         overflow: hidden;
  44 }
  45 #board {
  46         position: absolute;
  47         top: @board-pad;
  48         left: @board-pad;
  49         width: @board-inner-width;
  50         height: @board-inner-height;
  51 }
  52 #right {
  53         position: absolute;
  54         top: 0px;
  55         left: @board-width + @column-pad;
  56         width: @right-width;
  57         height: @board-height;
  58         h1 {
  59                 font-size: 28px;
  60                 color: #55f;
  61                 margin: 0;
  62                 text-align: center;
  63         }
  64         #subhead {
  65                 margin-bottom: 10px;
  66                 text-align: center;
  67         }
  68         #tabs {
  69                 position: absolute;
  70                 top: @tabs-top;
  71                 height: @tabtab-height * 4 + @tab-height;
  72                 width: @right-width;
  73         }
  74         #big_tip {
  75                 font-size: 24px;
  76                 font-weight: bold;
  77                 color: darken(@selected-color, 66%);
  78                 text-align: center;
  79         }
  80         #big_tip.good a {
  81                 color: darken(@selected-good-color, 66%);
  82                 text-decoration: none;
  83         }
  84         #score_container {
  85                 margin-top: 10px;
  86                 font-weight: bold;
  87         }
  88         #little_tip {
  89                 text-align: center;
  90         }
  91         .tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
  92                 margin-top: 5px;
  93         }
  94         .tabtab {
  95                 height: @tabtab-height;
  96                 padding: 0 0 0 3px;
  97                 background: @tabtab-color;
  98         }
  99         .tabbody {
 100                 height: @tab-height - @tabtab-height - @tab-pad * 2;
 101                 padding: (@tab-pad - 1) (@tab-pad - 1) @tab-pad (@tab-pad + 1);
 102         }
 103         .selected-tab, .tab {
 104                 overflow: hidden;
 105                 box-shadow: 1px 1px 3px #888;
 106                 background: @tab-color;
 107                 border-radius: 3px;
 108         }
 109         .selected-tab {
 110                 .tabtab:before {
 111                         content: "▼ ";
 112                 }
 113         }
 114         .tab {
 115                 .tabtab:before {
 116                         content: "▶ ";
 117                 }
 118                 .tabtab {
 119                         cursor: pointer;
 120                 }
 121                 .tabtab:hover {
 122                         color: darken(@tab-color, 50%);
 123                 }
 124                 .tabtab:hover:before {
 125                         content: "▼ ";
 126                 }
 127         }
 128         #copyright {
 129                 position: absolute;
 130                 top: @board-height - @row-pad - @copyright-height;
 131                 left: 0px;
 132                 font-size: 85%;
 133         }
 134 }
 135 .tile {
 136         padding-top: 4px;
 137         height: 38px;
 138         width: 42px;
 139         font-size: 30px;
 140         display: block;
 141         position: absolute;
 142         border-radius: 15px;
 143         text-align: center;
 144         cursor: pointer;
 145         user-select: none;
 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;
 151
 152         &.hp10 {
 153                 color: #000;
 154                 background-color: @tile-color;
 155         }
 156         &.hp9 {
 157                 color: lighten(#000, 4%);
 158                 background-color: lighten(desaturate(@tile-color, 10%), 1%);
 159         }
 160         &.hp8 {
 161                 color: lighten(#000, 8%);
 162                 background-color: lighten(desaturate(@tile-color, 20%), 2%);
 163         }
 164         &.hp7 {
 165                 color: lighten(#000, 12%);
 166                 background-color: lighten(desaturate(@tile-color, 30%), 3%);
 167         }
 168         &.hp6 {
 169                 color: lighten(#000, 16%);
 170                 background-color: lighten(desaturate(@tile-color, 40%), 4%);
 171         }
 172         &.hp5 {
 173                 color: lighten(#000, 20%);
 174                 background-color: lighten(desaturate(@tile-color, 50%), 5%);
 175         }
 176         &.hp4 {
 177                 color: lighten(#000, 24%);
 178                 background-color: lighten(desaturate(@tile-color, 60%), 6%);
 179         }
 180         &.hp3 {
 181                 color: lighten(#000, 28%);
 182                 background-color: lighten(desaturate(@tile-color, 70%), 7%);
 183         }
 184         &.hp2 {
 185                 color: lighten(#000, 32%);
 186                 background-color: lighten(desaturate(@tile-color, 80%), 8%);
 187         }
 188         &.hp1 {
 189                 color: lighten(#000, 36%);
 190                 background-color: spin(lighten(desaturate(@tile-color, 70%), 9%), 100);
 191                 box-shadow: 1px 1px 1px #aaa;
 192         }
 193         &.hp0 {
 194                 cursor: default;
 195                 color: lighten(desaturate(@tile-color, 100%), 10%);
 196                 background-color: lighten(desaturate(@tile-color, 100%), 10%);
 197                 box-shadow: inset 1px 1px 1px #aaa;
 198         }
 199
 200         &.selected, &.selected_word {
 201                 background-color: @selected-color;
 202                 box-shadow: inset 1px 1px 5px #444;
 203         }
 204         &.selected_word {
 205                 background-color: @selected-good-color;
 206         }
 207 }
 208 #loading {
 209         position: absolute;
 210         top: 140px;
 211         right: 140px;
 212         font-size: 32px;
 213 }
 214 .head {
 215         margin-top: -4px;
 216         height: 42px;
 217         width: 42px;
 218         position: relative;
 219         border-radius: 13px;
 220 }
 221 .eye1, .eye2 {
 222         width: 6px;
 223         height: 6px;
 224         border: 2px solid #a83;
 225         border-radius: 9px;
 226         background-color: white;
 227         position: absolute;
 228 }
 229 .eye1 {
 230         top: -8px;
 231         right: -1px;
 232         width: 5px;
 233         border-width: 4px 4px 3px 4px;
 234 }
 235 .eye2 {
 236         right: -9px;
 237         top: 1px;
 238         border-width: 3px 4px 4px 2px;
 239 }
 240 .tooth1, .tooth2, .tooth3, .tooth4 {
 241         width: 6px;
 242         height: 6px;
 243         border: 2px solid #a83;
 244         background-color: white;
 245         position: absolute;
 246 }
 247 .tooth1 {
 248         top: -2px;
 249         left: 22px;
 250         width: 7px;
 251         border-width: 2px 0 2px 2px;
 252 }
 253 .tooth2 {
 254         height: 7px;
 255         top: 12px;
 256         right: -3px;
 257         border-width: 0 2px 2px 2px;
 258 }
 259 .pate {
 260         position: absolute;
 261         top: -2px;
 262         right: -3px;
 263         width: 12px;
 264         height: 12px;
 265         background: white;
 266         border: 2px solid #a83;
 267         border-radius: 0 13px 0 0;
 268 }
 269 .tooth3 {
 270         width: 7px;
 271         bottom: -3px;
 272         left: 12px;
 273         border-width: 2px 2px 2px 0;
 274 }
 275 .tooth4 {
 276         height: 7px;
 277         bottom: 11px;
 278         left: -2px;
 279         border-width: 2px 2px 0 2px;
 280 }
 281 .chin {
 282         position: absolute;
 283         bottom: -3px;
 284         left: -2px;
 285         width: 12px;
 286         height: 12px;
 287         background: white;
 288         border: 2px solid #a83;
 289         border-radius: 0 0 0 13px;
 290 }
 291 #definition_body {
 292         height: @tab-height - @tabtab-height;
 293         overflow: auto;
 294 }
 295 #definition_credit {
 296         margin-top: 15px;
 297         font-size: 12px;
 298 }