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