style.less

   1 @table-width: 1000px;
   2 @table-height: 800px;
   3
   4 @card-width: 100px;
   5 @card-height: 140px;
   6
   7 @pile-width: @card-width * 1.3;
   8 @hand-height: @card-height * 1.3;
   9
  10 @area-lightness: 44%;
  11 @area-border-color: #ccc;
  12 @your-side-color: #ffe2e2;
  13 @my-side-color: #e2ffe2;
  14
  15 #loading-card {
  16         top: (@table-height - @card-height) / 2 - 4px;
  17         left: (@table-width - @card-width) / 2 - 4px;
  18 }
  19
  20
  21 .shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  22         @val: @x @y @blur rgba(0, 0, 0, @alpha);
  23         box-shadow:         @val;
  24         -webkit-box-shadow: @val;
  25         -moz-box-shadow:    @val;
  26 }
  27
  28 body {
  29         color: black;
  30         background: #ccc;
  31         font-size: 11px;
  32         margin: 0;
  33         padding: 10px;
  34 }
  35
  36 h1 {
  37         margin-top: 0;
  38         font: bold 20px 'Verdana';
  39         color: blue;
  40 }
  41
  42 #table {
  43         width: @table-width;
  44         height: @table-height;
  45         background: #eee;
  46         position: relative;
  47         .shadow(2px, 2px, 10px, 0.4);
  48         border: 2px solid #468;
  49 }
  50
  51 .card {
  52         width: @card-width;
  53         height: @card-height;
  54         padding: 2px;
  55         position: absolute;
  56         background: #fff;
  57         border: 2px solid #fff;
  58         .shadow(1px, 1px, 8px, 0.4);
  59         border-radius: 4px;
  60
  61         .button {
  62                 display: none;
  63                 border: 1px solid #aaa;
  64                 border-radius: 2px;
  65                 background-color: #fff;
  66         }
  67         .button:hover {
  68                 background: #eee;
  69                 cursor: pointer;
  70         }
  71         &:hover .button {
  72                 display: block;
  73         }
  74 }
  75
  76 .marked {
  77         border-color: black;
  78 }
  79
  80 .flipped {
  81         .cardtext {
  82                 display: none;
  83         }
  84         background-color: #ddd;
  85 }
  86
  87 #my_side, #your_side {
  88         position: absolute;
  89         width: @table-width;
  90         height: @hand-height;
  91         left: 0;
  92 }
  93
  94 #your_side {
  95         background: @your-side-color;
  96         border-bottom: 2px solid @area-border-color;
  97         top: 0;
  98 }
  99
 100 #my_side {
 101         background: @my-side-color;
 102         border-top: 2px solid @area-border-color;
 103         top: @table-height - @hand-height - 2px;
 104 }
 105
 106 .discard_area, .deck_area, .hand_area {
 107         position: absolute;
 108         height: @hand-height;
 109 }
 110 .discard_area, .deck_area {
 111         border-right: 2px solid @area-border-color;
 112         width: @pile-width;
 113 }
 114 .hand_area {
 115         width: @table-width - (@pile-width + 2px) * 2;
 116 }
 117 .discard_area {
 118         left: 0px;
 119 }
 120 .deck_area {
 121         left: @pile-width + 2px;
 122 }
 123 .hand_area {
 124         left: (@pile-width + 2px) * 2;
 125 }
 126
 127 #your_side div {
 128         top: 0px;
 129 }
 130
 131 #my_side div {
 132         top: 0; // @table-height - @hand-height;
 133 }