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