@board-inner-width: 358px; @board-inner-height: 410px; @board-pad: 15px; // also in main.coffee @board-width: @board-inner-width + @board-pad * 2; @board-height: @board-inner-height + @board-pad * 2; @column-pad: 10px; @right-width: 250px; @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; color: black; font: 14px Verdana, Arial, free-sans, sans-serif; margin: 0; padding: 0; } #centerer { margin: auto auto; width: @board-width + @column-pad + @right-width; height: @board-height; position: relative; } #boarder { background: #f5f5ff; position: absolute; top: 0px; left: 0px; width: @board-width; height: @board-height; border-radius: 3px; box-shadow: inset 1px 1px 4px #888; overflow: hidden; } #board { position: absolute; top: @board-pad; left: @board-pad; width: @board-inner-width; height: @board-inner-height; } #right { position: absolute; top: 0px; left: @board-width + @column-pad; width: @right-width; height: @board-height; h1 { font-size: 28px; color: #55f; margin: 0; text-align: center; } #subhead { margin-bottom: 10px; text-align: center; } #tabs { 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; } .tabtab { height: @tabtab-height; 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; background: @tab-color; border-radius: 3px; } .selected-tab { .tabtab:before { content: "▼ "; } } .tab { .tabtab:before { content: "▶ "; } .tabtab { cursor: pointer; } .tabtab:hover { color: darken(@tab-color, 50%); } .tabtab:hover:before { content: "▼ "; } } #copyright { position: absolute; top: @board-height - @row-pad - @copyright-height; left: 0px; font-size: 85%; } } .tile { padding-top: 4px; height: 38px; width: 42px; font-size: 30px; display: block; position: absolute; border-radius: 16px; text-align: center; cursor: pointer; user-select: none; -khtml-user-select: none; -o-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; &.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; 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; } #definition_credit { margin-top: 15px; font-size: 12px; }