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