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, .blank_card {
  52         width: @card-width;
  53         height: @card-height;
  54         padding: 2px;
  55         position: absolute;
  56         border-radius: 4px;
  57 }
  58
  59 .blank_card {
  60         border: 1px solid #777;
  61 }
  62
  63 .card {
  64         background: #fff;
  65         border: 2px solid #fff;
  66         .shadow(1px, 1px, 8px, 0.4);
  67
  68         &:hover {
  69                 z-index: 9999 !important;
  70         }
  71         .button {
  72                 display: none;
  73                 border: 1px solid #aaa;
  74                 border-radius: 2px;
  75                 background-color: #fff;
  76         }
  77         .button:hover {
  78                 background: #eee;
  79                 cursor: pointer;
  80         }
  81         &:hover .button {
  82                 display: block;
  83         }
  84 }
  85
  86 .your_card {
  87         -webkit-transform: rotate(180deg);
  88         -moz-transform: rotate(180deg);
  89         -ms-transform: rotate(180deg);
  90         -o-transform: rotate(180deg);
  91         transform: rotate(180deg);
  92         &:hover {
  93                 -webkit-transform: none;
  94                 -moz-transform: none;
  95                 -ms-transform: none;
  96                 -o-transform: none;
  97                 transform: none;
  98         }
  99 }
 100
 101 .marked {
 102         border-color: black;
 103 }
 104
 105 .flipped, .your_hand {
 106         .cardtext {
 107                 display: none;
 108         }
 109         background-color: #ddd;
 110 }
 111
 112 #my_side, #your_side {
 113         position: absolute;
 114         width: @table-width;
 115         height: @hand-height;
 116         left: 0;
 117 }
 118
 119 #your_side {
 120         background: @your-side-color;
 121         border-bottom: 2px solid @area-border-color;
 122         top: 0;
 123 }
 124
 125 #my_side {
 126         background: @my-side-color;
 127         border-top: 2px solid @area-border-color;
 128         top: @table-height - @hand-height - 2px;
 129 }
 130
 131 .discard_area, .deck_area, .hand_area {
 132         position: absolute;
 133         height: @hand-height;
 134 }
 135 .discard_area, .deck_area {
 136         border-right: 2px solid @area-border-color;
 137         width: @pile-width;
 138 }
 139 .hand_area {
 140         width: @table-width - (@pile-width + 2px) * 2;
 141 }
 142 .discard_area {
 143         left: 0px;
 144 }
 145 .deck_area {
 146         left: @pile-width + 2px;
 147 }
 148 .hand_area {
 149         left: (@pile-width + 2px) * 2;
 150 }
 151
 152 #your_side div {
 153         top: 0px;
 154 }
 155
 156 #my_side div {
 157         top: 0; // @table-height - @hand-height;
 158 }
 159
 160 #deck_designer {
 161         position: absolute;
 162         top: 40px;
 163         left: 10px;
 164         background: white;
 165         z-index: 10000;
 166         width: @table-width + 10;
 167         height: @table-height + 20;
 168         overflow: scroll;
 169         .shadow(3px, 3px, 16px, 0.8);
 170
 171         li, div {
 172                 cursor: pointer;
 173         }
 174
 175         .in_deck {
 176                 color: #080;
 177         }
 178 }