style.less

   1 @card-width: 100px;
   2 @card-height: 140px;
   3
   4 .shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
   5         @val: @x @y @blur rgba(0, 0, 0, @alpha);
   6         box-shadow:         @val;
   7         -webkit-box-shadow: @val;
   8         -moz-box-shadow:    @val;
   9 }
  10
  11 body {
  12         color: black;
  13         background: #ccc;
  14         font-size: 11px;
  15         margin: 0;
  16         padding: 10px;
  17 }
  18
  19 h1 {
  20         margin-top: 0;
  21         font: bold 20px 'Verdana';
  22         color: blue;
  23 }
  24
  25 #table {
  26         height: 700px;
  27         width: 960px;
  28         background: #eee;
  29         position: relative;
  30         .shadow(2px, 2px, 10px, 0.4);
  31         border: 2px solid #468;
  32 }
  33
  34 .card {
  35         width: @card-width;
  36         height: @card-height;
  37         padding: 2px;
  38         position: absolute;
  39         background: #fff;
  40         border: 2px solid #fff;
  41         .shadow(1px, 1px, 8px, 0.4);
  42         border-radius: 4px;
  43
  44         .button {
  45                 display: none;
  46                 border: 1px solid #aaa;
  47                 border-radius: 2px;
  48                 background-color: #fff;
  49         }
  50         .button:hover {
  51                 background: #eee;
  52                 cursor: pointer;
  53         }
  54         &:hover .button {
  55                 display: block;
  56         }
  57 }
  58
  59 .marked {
  60         border-color: black;
  61 }
  62
  63 .flipped {
  64         .cardtext {
  65                 display: none;
  66         }
  67         background-color: #ddd;
  68 }