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 .your_card {
  77         -webkit-transform: rotate(180deg);
  78         -moz-transform: rotate(180deg);
  79         -ms-transform: rotate(180deg);
  80         -o-transform: rotate(180deg);
  81         transform: rotate(180deg);
  82         &:hover {
  83                 -webkit-transform: none;
  84                 -moz-transform: none;
  85                 -ms-transform: none;
  86                 -o-transform: none;
  87                 transform: none;
  88         }
  89 }
  90
  91 .marked {
  92         border-color: black;
  93 }
  94
  95 .flipped {
  96         .cardtext {
  97                 display: none;
  98         }
  99         background-color: #ddd;
 100 }
 101
 102 #my_side, #your_side {
 103         position: absolute;
 104         width: @table-width;
 105         height: @hand-height;
 106         left: 0;
 107 }
 108
 109 #your_side {
 110         background: @your-side-color;
 111         border-bottom: 2px solid @area-border-color;
 112         top: 0;
 113 }
 114
 115 #my_side {
 116         background: @my-side-color;
 117         border-top: 2px solid @area-border-color;
 118         top: @table-height - @hand-height - 2px;
 119 }
 120
 121 .discard_area, .deck_area, .hand_area {
 122         position: absolute;
 123         height: @hand-height;
 124 }
 125 .discard_area, .deck_area {
 126         border-right: 2px solid @area-border-color;
 127         width: @pile-width;
 128 }
 129 .hand_area {
 130         width: @table-width - (@pile-width + 2px) * 2;
 131 }
 132 .discard_area {
 133         left: 0px;
 134 }
 135 .deck_area {
 136         left: @pile-width + 2px;
 137 }
 138 .hand_area {
 139         left: (@pile-width + 2px) * 2;
 140 }
 141
 142 #your_side div {
 143         top: 0px;
 144 }
 145
 146 #my_side div {
 147         top: 0; // @table-height - @hand-height;
 148 }