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