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