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